Mari Jørgensen
Apr 5, 2010
(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

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:

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 = 
GetPage(PageReference.StartPage); if (startPage != null) { PageReference searchPageRef =
startPage["SearchPage"] as PageReference; if (
!PageReference.IsNullOrEmpty(searchPageRef)) searchPage =
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() {
        $('#MainMenu ul').addClass('hide');
'<div class="leftButton"
); $('#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


Safari web content guide

Apr 05, 2010


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 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 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! Jul 12, 2011 07:41 AM

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........ Jul 12, 2011 01:56 PM

HI Mari,

Where is your iphone.css file? Jul 13, 2011 06:57 AM


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? Jul 14, 2011 07:27 AM


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 SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog