Prepare website for IE9

Prepare website for IE9 Picture 1 Internet Explorer 9 - Internet Explorer 9 can give users an impressive browsing experience, but to take advantage of the browser, web designers need to optimize the site. with IE9 requirements .

Microsoft 's latest browser is not only a pure upgrade, it also offers unprecedented integration between Windows and the web, extending the desktop experience to web applications.

Web usage is increasingly popular, more and more people are unable to separate cloud applications such as Gmail, Box.net and Mint.com. The experience of using such sites is almost like using traditional desktop applications, except for traditional web-based non-resident applications. IE 9 can provide the same kind of interactive experience for any website. Users can get this integration by dragging the website icon into the taskbar of Windows 7, like software applications.

Pinning a site to the taskbar will allow users to be more observable and have direct access to the content they need. However, to give users the reason to pin your site to the taskbar - and more importantly, give them the meaning of interacting with your site as if the application is installed on your computer. set - you need to use the jump list, Jump Lists, this is a feature of Windows 7 that uses menu options to jump directly to functions or access recently used or used features regular use.

Windows 7 taskbar

IE 9 maximizes the 'unique' features of Windows 7 to allow users to manipulate websites as if they were manipulating applications. You can create a Jump List menu when the user clicks on the website icon on the taskbar. Jump Lists will allow users to access new content, frequently used content or recently used things, as well as receive alert alerts when new content is available.

Implementing website adjustments requires you to have a minimum understanding of HTML and Web programming. However, without too much knowledge as an expert, you can accomplish this task in minutes.

The first trick is to drag the icon of a website from IE9's address bar into the taskbar, pin it permanently here. You will then see the site logo on the taskbar and can click it to access this website at any time.

LinkedIn and Windows Live are two of many sites that can use Jump Lists jump lists to perform the same functions as applications. With LinkedIn or Windows Live, users can click on items in the Jump List to directly enter specific pages or functions within the site.

Prepare website for IE9 Picture 2
The diagram shows the taskbar's interactive functions in Windows 7

Create a Jump List list

Pinning Facebook to the Windows 7 taskbar is much more convenient than creating a shortcut for this site, and LinkedIn and Windows Live also offer integrated experiences that can be said almost like installed software applications. set locally on a computer, such as Outlook. Adding simple Jump List tasks to the site is quite simple, so why don't you allow your site visitors for some reason to pin your site to the taskbar?

With IE 9 and Windows 7, tasks in Jump List will link to the static URL that users click and directly access whether the site is currently pinned to open or not. You can group these tasks with the site's most popular features so that users can jump straight to these functions without having to open the browser and manually navigate to the appropriate page.

Prepare website for IE9 Picture 3
Jump List for Facebook (left) is very basic, but Jump List for for LinkedIn (in the middle) and Windows Live (on the right) have a lot of functions.

The linked tasks will be saved as static URLs - these are links that link directly to the site or specific functionality. You can define up to 5 tasks in Jump Lists with HTML metatag tags. Metatag will define basic site information, store it with the pinned site. Here's an example of how to define Jump Lists for a website, cited from a Microsoft document (although the document itself is not available online, but you can find its content and tips. here):

content = "name = Task 1; action-uri = http:///host/Page1.html; icon-uri = http:///host/icon1.ico" />

content = "name = Task 2; action-uri = http:///microsoft.com/Page2.html; icon-uri = http:///host/icon2.ico" />

This code defines two tags: 'Task 1' and 'Task 2'. When the user selects 'Task 1', the Page1.html site will display, select 'Task 2' will display the Page2.html site. Each task will be opened inside a separate tab. If the pinned site is not currently opened on the computer, clicking on these Jump List menu items will open a new browser window.

Create categories for Jump Lists

Your website can also add Jump List items to extend functionality beyond the 5 Jump List tasks. Jump List items allow you to enter certain destinations directly, such as files, documents or URLs. You can use the SiteMode API to create a custom Jump List category with unique links for each specific user, such as a profile page.

Jump List categories allow websites to distribute dynamic information to users even if they are not active on the site. You can use this feature to provide user history access, such as visited sites or open files, or you can use it to create site-related action alerts. - for example, new announcements or upcoming events.

To create a Jump List item, you must follow the steps below.

Create an item

The first task is to create a label for the item. The code below shows how to create an item named 'List1'. Item labels will not appear until the Jump List item is assigned a minimum of one item.

window.external.msSiteModeCreateJumplist ('List1');

Create item

The code below describes how to create a Jump List category with three items named 'Item1', 'Item2' and 'Item3'. After the parameter name is the parameter that defines the URL, then the parameter specifies the display icon for the item.

window.external.msSiteModeAddJumpListItem ('Item 1', 'http:///host/Item1.html', 'http:///host/images/item1.ico');
window.external.msSiteModeAddJumpListItem ('Item 2', 'http:///host/Item2.html', 'http:///host/images/item2.ico');
window.external.msSiteModeAddJumpListItem ('Item 3', 'Item3.html', 'images / item3.ico');

Show list

The above code has created items for the list, but it does not display them. Use the following code to display the list of items on Jump List:

window.external.msSiteModeShowJumplist ();

Delete the list

If the Jump List category is assigned to the site history or recent actions, you can use the effective time for these actions. Use the code below to delete items from the Jump List category:

window.external.msSiteModeClearJumplist ();

Prepare website for IE9 Picture 4
You can add alerts to Jump List for your site

You can use the above methods to create and assign a Jump List item to the site. Can be arranged to display up to 12 items in a category. It should be noted that cloned items will be ignored; Items that exceed the maximum number or do not match the display mode or text size will not be displayed.

Show overlay icon

One of IE9's best features on Windows 7 is the ability to display the site's overlay icon pinned on the taskbar. Why is this overlay icon so important? This is because a pinned site can be idle or hidden by sites and other applications. This overlay icon will allow you to display dynamic content or site updates, which will attract interest from users and make them click to access your site.

You can display a small bell to indicate an event or an appointment, the envelope icon so that users know they have a new mail. The overlay icon will appear in the lower right corner of the taskbar. However, it should be noted that these icons will not appear if the site is not opened or the site is not pinned to the taskbar.

The sample code below will add an overlay1.ico icon on the relevant taskbar for the pinned site:

window.external.msSiteModeSetIconOverlay ('http:///host/images/overlay1.ico', 'Overlay 1');

To delete the overlay icon, use the code below:

window.external.msSiteModeClearIconOverlay ();

These example sites are just very small. You can visit here for instructions for web developers as well as explanations on how to use the website in the best way.