Mari Jørgensen
Apr 5, 2010
  17355
(7 votes)

IPhone Optimization Made Easy

The is no doubt that with the introduction of IPhone and IPod Touch, mobile browsing has increased dramatically:  surveys confirm that iPhone users are hard-core internet junkies. At the same time about 40% of iPhone users say the iPhone has trouble
displaying some websites they want to visit.

So what is the best way of making your EPiServer website iPhone-friendly?

Well, there are several approaches:

  1. Use one of the external solutions available, some of them are listed on the epimore site.
  2. Create separate IPhone-specific templates

I will introduce a third option:
Building IPhone-friendly websites using HTML, conditional CSS and jquery

In this example, I’m using the new demo website for EPiServer CMS 6, “Alloy Technologies”. If you haven’t seen it yet, have a look at http://demo.episerver.com/.


Preparing the IPhone-specific stylesheet

By default, stylesheets apply to all media types. CSS3 recognizes several media types, including print, handheld, and screen. iPhone OS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone OS.

To specify a style sheet that is just for iPhone OS without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone OS style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:

<link media="only screen and (max-width: 480px)" 
rel="stylesheet" type="text/css"
href="~/Templates/Demo/Styles/Default/iphone.css" />

To specify a style sheet for devices other than iPhone OS, use an expression similar to the following:

<link media="screen and (min-width: 481px)" 
rel="stylesheet" type="text/css"
href="~/Templates/Demo/Styles/Default/Styles.css" />

Controlling the Page Scaling

Unless you tell it otherwise, Safari on the iPhone is going to assume that your page is 980px wide. We want to format our content specifically for the smaller dimensions of the iPhone, so we must let Mobile Safari know about it by adding a viewport meta tag to the Header.ascx file:

<meta name="viewport" 
content="user-scalable=no, width=device-width" />

If you don’t set the viewport width, the page will be zoomed way out when it first loads. The viewport meta tag will be ignored by browsers other than Mobile Safari, so you can include it without worrying about the desktop version of your site.

Adding IPhone CSS rules and behavior using jQuery

When adding css rules to the iPhone.css stylesheet, I used the concepts described in this article:
http://building-iphone-apps.labs.oreilly.com/ch02.html

In short I did the following:

  1. Removed flash area on front page by using display:none
  2. Added a main image to display on the front page (hidden by default in styles.css)
  3. Main menu and sub menu are hidden by default, but accessible by a custom menu button in the top of the page.
  4. In addition, I decided to hide the quicksearch field, and instead add the Search page to the main menu. 

In order to get hold of the search page url from javascript I added a http handler, SearchPageUrlHandler.ashx (see function AddSearchPageToMainMenu in javascript below). The code inside the handler is as simple as this:

public void ProcessRequest(HttpContext context)
 {
   PageData searchPage = null;
   string searchUrl = "";

   PageData startPage = 
EPiServer.DataFactory.Instance.
GetPage(PageReference.StartPage); if (startPage != null) { PageReference searchPageRef =
startPage["SearchPage"] as PageReference; if (
!PageReference.IsNullOrEmpty(searchPageRef)) searchPage =
EPiServer.DataFactory.Instance.
GetPage(searchPageRef); } if(searchPage != null) searchUrl =
string.Format("<a href=\"{0}\">{1}</a>",
searchPage.LinkURL, searchPage.PageName); context.Response.ContentType = "text/plain"; context.Response.Write(searchUrl); }


Here is my iphone.js file (please read oreilly-link above to learn about the details):

if (window.innerWidth && window.innerWidth <= 480) {
    $(document).ready(function() {
        AddSearchPageToMainMenu();
        $('#MainMenu ul').addClass('hide');
        $('#MainMenu').append(
'<div class="leftButton"
onclick="toggleMenu()">Menu</div>'
); $('#Functions ul').addClass('hide'); $('.SubMenuArea ul').addClass('hide'); }); function toggleMenu() { $('#MainMenu ul').toggleClass('hide'); $('#Functions ul').toggleClass('hide'); $('.SubMenuArea ul').toggleClass('hide'); } function AddSearchPageToMainMenu() { var searchLink; $.ajax({ type: "GET", url:
'/SearchPageUrlHandler/SearchPageUrlHandler.ashx', data: "{}", async: false, contentType: "text/plain; charset=utf-8", dataType: "html", success: function(result) { searchLink = result; } }); if (searchLink) { $('#MainMenu ul').append('<li>' +
searchLink + '</li>'); } } }

The result

Here are some screenshots taken from my iPhone:

StartPage Menu Menu_complete BlogPage Search Login

 

Want to try it (or have a closer look)?

Download the .epimodule file below and install using the “Install a Module from a compressed File” option inside the EPiServer Deployment Center.

Prerequisites for module installation

  1. EPiServer CMS 6 Release (v 6.0.530.0)
  2. Public templates installed
  3. Demo templates installed

 

Resources

http://building-iphone-apps.labs.oreilly.com/
Safari web content guide
http://www.testiphone.com/



Apr 05, 2010

Comments

Sep 21, 2010 10:33 AM

Excellent post and great timing with more requests for mobile support coming in. Thanks Mari!

Sep 21, 2010 10:33 AM

Cool, looks very nice

Sep 21, 2010 10:33 AM

Looks great, thanks alot

egilagre
egilagre Sep 21, 2010 10:33 AM

What happens when Apple approves Opera and Firefox as an alternative browser to IPhone?
I would think you have to check the Request.Browser.IsMobileDevice to see if the client is in fact a mobile, and then check for: Request.Browser.MobileDeviceManufacturer.

I dont know if IPhone actually sends this kind of information, but i sure hope they do :)

Mari Jørgensen
Mari Jørgensen Sep 21, 2010 10:33 AM

This approach uses the browser width to decide which stylesheet to load, so I don't think Firefox and Opera will be a problem. I've used Firefox and Chrome when developing.

egilagre
egilagre Sep 21, 2010 10:33 AM

If someone want to create a specific design for IPhone users, they can't use this method; because any device that has a width of 480px will get this style?

Dont want to be a troublemaker over semantics, but the devil is in the details :p
The method presented is not IPhone specific, but any devices with a width of 480px, if im not mistaken :)

Very good article and love that you have included pictures for illustrations :) :) :)

Sep 21, 2010 10:33 AM

This is really Nice blog
/ Abhishek

Oct 21, 2010 03:48 PM

This is great! Thanks for this!

MuraliKrishna@websynergies.biz
MuraliKrishna@websynergies.biz Jul 12, 2011 07:41 AM

Hi,
I am using Windows 7 OS.....and i am new to mobile app.....i am trying to test the mobile app functionality,but i didnt hav iphone.....any other alternative? pls suggest........

MuraliKrishna@websynergies.biz
MuraliKrishna@websynergies.biz Jul 12, 2011 01:56 PM

HI Mari,

Where is your iphone.css file?

MuraliKrishna@websynergies.biz
MuraliKrishna@websynergies.biz Jul 13, 2011 06:57 AM

Hi,

I already have a site developed in episerver cms 6.If i went to source file of one of the pages and change the tag and tag as described above......then can i view that page in mobile?

MuraliKrishna@websynergies.biz
MuraliKrishna@websynergies.biz Jul 14, 2011 07:27 AM

Hi,

While i am import date the below error occured......

Exception: Specified part does not exist in the package.[]

Can anyone figure it out?

Please login to comment.
Latest blogs
Optimizely Forms: You cannot submit this form because an administrator has turned off data storage.

Do not let this error message scare you, the solution is quite simple!

Tomas Hensrud Gulla | Oct 4, 2024 | Syndicated blog

Add your own tools to the Optimizely CMS 12 admin menu

The menus in Optimizely CMS can be extended using a MenuProvider, and using the path parameter you decide what menu you want to add additional menu...

Tomas Hensrud Gulla | Oct 3, 2024 | Syndicated blog

Integrating Optimizely DAM with Your Website

This article is the second in a series about integrating Optimizely DAM with websites. It discusses how to install the necessary package and code t...

Andrew Markham | Sep 28, 2024 | Syndicated blog

Opticon 2024 - highlights

I went to Opticon in Stockholm and here are my brief highlights based on the demos, presentations and roadmaps  Optimizely CMS SaaS will start to...

Daniel Ovaska | Sep 27, 2024