Designing for iOS Safari

Designing a website or web app for iOS can be confusing. Case in point, I just spent an hour explaining to my designer buddy the difference between the various possible settings that could affect how he ultimately designs for the UI elements.

It is easy, for the non-accustomed, to assume that the lofty resolution that Apple touts on their device's display specs is the one to design for. If one goes to research this on Apple.com, they will see that the display is set to 1136-by-640-pixel resolution at 326 ppi. And it would be understandable for a designer to set up their PSD file with those specs in their canvas size and resolution settings.

However, it is necessary to understand how Safari works and displays HTML. To do so, we need to understand what the meta attribute for viewport does. Here are some facts and rules about viewport settings:

1. The definition of viewport is: the viewable area for page loaded.

2. By default, Safari will render a page with 980px max width for the viewport

3. If you add a viewport setting to a page to use "device-width" and an initial scale of "1.0" using the following meta tag and attributes, iOS Safari will load a page with max width 320px:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Most web apps today uses this setting as it is optimized for most mobile devices 1-2 generations behind

4. However, if you want to take advantage of the newer devices with the higher contrast ratios, you might want to bump up or double the size of the graphics you can display in the browser. To do so, you can tweak the initial scale in the viewport settings to 0.5:

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">

To demonstrate this very confusing issue, I've set up 3 different pages that have 3 jpgs embedded with sizes 320px, 640px and 980px widths. The first uses the default device-width viewport settings. The second doesn't use any viewport settings. And The third uses device-width and initial scale of 0.5 for its viewport settings.

Try loading each page in your iOS Safari browser to see the difference!

Understanding Line-height vs Leading

This is a big pet-peeve of mine.

Designers who measure pixel-by-pixel spacing between lines of text or use the leading number set in their photoshop file for their style guides. It's a very common theme that I see from time-to-time that results in angry designers who complain about developers sense of aesthetics and in retort, developers who claim they are just "following the style guide".

This can all be avoided folks! Either the designer needs to convert their numbers for line-height the right way or developers need to ask how the designer came up with their spacing numbers and convert it themselves.

Here are the rules:

1. Photoshop uses what they call "leading" to measure the distance between lines.

2. CSS/HTML uses "line-height" to establish the distance between lines.

3. Leading is the distance between the bottom of a line of text and the top of the line of text underneath it

4. Line-height is the distance between half of the leading above a line and half the leading below it.

5. Here's a great illustration of the aforementioned rules: http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/line-height.png

6. Therefore the formula is: Line-height = Font-size + Leading/2

7. However, if leading is set to "auto", the actual leading number is 120% of the font size.

For example:

If your font size in your PSD file is 10px and your leading is set to 20px. Then you should put 20px for line-height in your style guides.

If your font size in your PSD file is 10px and your leading is set to auto. Then you should put 22px for line-height in your style guides.

Using Axure to Create Style Guides?

Most recently, I experimented with using Axure to produce both product AND design specifications. I'm not sure if anybody has tried this, but it actually works quite brilliantly!

Although certainly not perfect, I found that it was a very effective way to create specifications for styles, spacing and sizing. It was surprisingly easy and accurate, using Axure's tools to create the measurements. The goal was not to be pixel perfect, but to convey the intended dimensions and styles to the presentation developers. With that in mind, it was perfect.

The func specs were added via image maps on top of the UI jpgs. I added additional fields for design specs. And then used red text, markers and dotted lines for spacing/sizing/bgcolor guidelines. Finally, I found, that if I kept all the visual markers in a dynamic panel, the prototype can double as a virtual or online pinup. You can even create a button that shows/hide the markers.

Overall, there are obvious benefits to using Axure for more than just UX and FA needs. With it's easy-to-use collaboration tools, a designer or art director can easily jump in to add their design definitions. Developers will no longer need to look in multiple areas for design, ux and functional directions.

Syndicate content