It is a rare case you are required to build HTML support IE 7 and 8. Luckily, I have received the requirement.
It is a multiple form page. It needs to work with IE 7 and 8 with following features.
– jQuery basic selector, DOM manipulation.
– jQuery UI.
– jQuery form validation, ideally to make it unobtrusive.
Here, I am my favour to mark down anything I believe useful for further. I hope it helps you in any way.
Versions of library
This is my biggest headache. As a software engineer, I am attempted to upgrade any library to the greatest and latest. However, it is not the case here. The latest and greatest are actually dumping supports to IE 7 and 8.
I struggled a bit to find the right versions of libraries and their dependency. So, I can get my wanted features in IE 7 & 8.
Here is the list of libraries and their version do work on IE 7 & 8, as far as I found. I will review the list and update in future as I go.
For ASP.NET, I used following nuget package.
<package id="bootstrap.less" version="3.3.7" targetFramework="net452" /> <package id="jQuery" version="1.12.4" targetFramework="net452" /> <package id="jQuery.UI.Combined" version="1.12.0" targetFramework="net452" /> <package id="jQuery.Validation" version="1.11.1" targetFramework="net452" /> <package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net452" /> <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net452" />
Please let me know if I make a mistake. Much appreciated.
My focus is on web application back end development. In some projects, I also need to put on a web front ender’s hat doing HTML prototype and front end coding. I quite enjoy the variety of web development works.
Given the fact, I am still not a full dedicated front ender. Sometime, I spend some extra time setting up a HTML template.
This the reason of this article. I need to document some useful websites, tools and pitfalls for myself and hopefully for you.
- Boostrap and Zurb foundation. Notice: I found Zurb doesn’t support IE 8.
- Font awesome. IE 8 campatible
- Custom font if required.
Password protect (C# specific)
I use C# for prototypes, the cshtml or aspx will be easily migrated in my build solution during implementation period.
I use HttpAuthModule to password protect a internet published prototype.
IE 8 with boostrap
IE 8 don’t support css media query. In this case, we need a respond.js to do the magic for Boostrap, following this webpage.
However, I have struggled to make this work on IE 8, until I fully understand the following quotes on the webpage.
Internet Explorer 8 and Respond.js
Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.
Respond.js and cross-domain CSS
Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.
What I need are :
1. downloading the Boostrap and host my own, rather than referencing using CDNs.
2. put the Boostrap css reference in front of the respond.js reference.
<link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" > <link rel="stylesheet" href="/Assets/App.css" media='all'> <!--[if lt IE 9]> <a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js</a> <a href="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js</a> <![endif]-->
Finally, it looks like.
<!DOCTYPE html> <html lang="en"> <head runat="server"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title> <asp:ContentPlaceHolder ID="title" runat="server" /> </title> <meta name="description" content="Automation Tools" /> <asp:ContentPlaceHolder ID="head" runat="server" /> <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" > <link rel="stylesheet" href="/Assets/Vendors/font-awesome/css/font-awesome.min.css" media='all'> <link rel="stylesheet" href="/Assets/App.css" media='all'> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' media='all'> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" /> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" /> <![endif]--> </head> <body> <script src="https://code.jquery.com/jquery-1.12.4.min.js" /> <script src="/Assets/Vendors/bootstrap/js/bootstrap.min.js" /> <script src="/Assets/App.js" /> </body> </html>
In my works, many customers have different ideas about Sitecore Analytics and Google Analytics.
– Some think Sitecore Analytics can do the same things as Google Analytics. In this regards, they believe Sitecore is re-inventing the wheel.
– Different stakeholders cross content, marketing, architecture and development have different understandings to Sitecore Analytics.
– Some struggle to go forward to utilise Sitecore’s great feature for marketing and personalisation. Many Sitecore project stall as a basic CMS, with Google Analytics.
- Google Analytics (GA)
As Google Analytics is set up externally, it does not require internal code changes. Content administrators with Google Analytics login accounts can easily update measurement and tracking methods. Minimum front-end code is required for adding measurements.
Google Analytics is commonly used for collecting data about user behaviour. The data is used to measure usability, such as number of through-traffic, number of times a specific button is clicked, user’s paths through the site, campaign monitoring and conversion rates.
GA provides a big picture and statistics.
- Sitecore Analytics
Sitecore has a similar set of tracking features about campaigns, conversions rate and user paths. Instead of focusing on big picture reporting, Sitecore uses the collected data to enhance the experience for individual users.
Sitecore xDB is also designed to integrate with other systems. There are some connectors for MS Dynamics CRM and Salesforce to synchronise contact profile and behaviour. (Dynamics CRM Campaign Integration 2.0)
Sitecore Analytics is a core component of the Sitecore Experience Platform. It provides real-time dynamic content optimisation and personalisation via Pattern Card. Sitecore is able to match an individual user’s behaviours to a specified user pattern, and automatically link more relevant content to the user via various UI methods, such as search results, home page featured tiles, and contextual side navigation.
In terms of reporting, Sitecore Analytics focuses more on an individual page’s quality (Engagement Value) in Path Analyser and the engagement value of individual users in Experience Profile.
- Sitecore Personalisation Documentation
- Sitecore Engagement Value Best Practices
- Profiling and Predictive Personalisation with the Sitecore Customer Engagement Platform
- Google Analytics and Sitecore Analytics: A side-by-side approach
- Sitecore DMS and Google Analytics Integration
- Sitecore XP 8 Experience Marketing Fundamentals (SMF)
Thanks for your feedback.