Starting Guidelines for Tablet and iPad Website Design


Some Guidelines for Tablet and iPad Website Design

In the last few weeks we've been working with clients on extending Mobify Enterprise, our galaxy-leading mobile e-commerce product to include tablets like the iPad.

As a result, we've been learning a ton about what works, what doesn't work and what are some best practices when adapting a website design for a tablet and iPad world.

And we thought we'd share.

This isn't a definitive list but it does provide a great start if you're designing for tablets, reviewing wireframes or just thinking about how to reach people who are visiting your website on tablets and iPads.

As our senior engineer Roman Rudenko says, "These are my gut feel guidelines."

  • Make text larger for readability. Bonus tip: Consider offering a text resizing control.
  • Increase padding and line-height of densely packed links to increase touch accuracy. This applies especially to form elements and calendar dropdowns.
  • Remove mouse hover interactions wherever possible. If you want to keep them, extend them to support tap-and-hold interactions as well as mouse hover.
  • Consider making design reflow-friendly to cover the full range of tablet screen sizes — from 600px to 1000px wide — instead of fixing page widths in stone.
  • Beware the Flash. With iPads such a big portion of the tablet market, Flash elements need to be removed.
  • Remove elements using the declaration (real or simulated) "position: fixed" because they slow down page scrolling on tablets to much greater extent than on desktop.
  • Consider cutting some HTTP requests, as you would on mobile. While tablets have screen area close to that of laptops, their processing power is closer to that of phones. Additional on-page elements like Facebook Connect and Google +1 might fit into a tablet-sized wireframe but real-world performance and user experience can quickly suffer.

Have more tips to add? We'd love to hear them.

Please add them below as comments and we'll keep building this out.

The right to zoom


A couple of days ago, Peter-Paul Koch kicked off a debate concerning zooming on mobile optimized sites. 

Given the de-facto standard amongst mobile optimized sites on the web today is to prevent zooming, PPK is definitely swimming up stream with this opinion.  I love that! :) Has the mobile design world really been heading in the wrong direction all this time?  Since we spend pretty much all day thinking about the mobile web here at Mobify, his tweet raised some eyebrows here and led to a great discussion about the value of zooming.  I'll talk about our conclusions, as well as some new features Mobify has to empower site designers.

Before I weigh in on the subject, it makes sense to answer two questions.  1)  Why would a visitor to a mobile optimized site want to zoom on content?  and 2) Why would a mobile site designer want to prevent zooming?

Let's begin by addressing the first question.  The zoom metaphor was introduced in mobile browsers as a way to mitigate the small but pixel-dense displays available on mobile devices.  By zooming, the site visitor can make text more readable, and see more detail in images.  I'll leave out other rich media - if a video or flash element is consuming a significant chunk of visitor attention, these elements will tend to be full-screen.  Since all modern mobile browsers integrate zoom functionality, explicitly blocking it contravenes what is becoming an established convention.

So why would designers want to prevent zooming?  First, it makes navigation faster on touch devices.  When a mobile visitor makes a swipe gesture, there's only one axis for interpreting the input.  It prevents accidentally scrolling content offscreen in a horizontal way.  Children and young-adults may find precise swipe gestures trivial, but for the majority of adults, the swipe interaction method is very new, and inaccurate swipes are common.  Second -- unlike a desktop browser, designers of mobile sites can have complete confidence that the web browser is occupying the entire screen real-estate, and for modern smart phones, they can be certain the screen has a minimum virtual width of 320 pixels.  This lets designers custom-tailor the site, including navigation and site-branding for a specific size.  Tremendous effort is expended on desktop sites designing around not knowing how wide or how tall the browser will be.  Many sites don't even make the attempt and use fixed layouts.  You could say a fixed-layout on desktop is similar to a mobile site that doesn't allow zooming, but in fact that's not the case.  On mobile, at least in the case of 90+% of smart phones in use today, you can make safe assumptions about what will happen when you set a non-scalable device-width viewport.  No such assumption holds for desktop browsers.

If a designer does a good job with the type-face, is there a reason for zooming?  In some cases, there might be.  Site visitors with visual impairments, for example, might want much larger text than what would be optimal for a typical visitor.  An image might include high-resolution detail that a mobile visitor would like to zoom on.  (That said, most high-quality mobile sites lower the resolution of images for mobile visitors to speed up 3G load times.)

Can we have the best of both worlds?  Sure!  Mobify has created a widget designers can add to their site which allows visitors to enable and disable pinch/zoom on their mobile optimized site.  Mobify also includes a feature which when enabled, automatically wraps anchor tags around images and lets visitors click on the image for a full-resolution version.  These widgets will be available in the next release of Mobify Studio, look for the announcement soon.

Optimizing blogs for mobile with CSS3 and Mobify Studio


  • Tutorial Details
  • Topics: CSS3 'nth-child' Pseudo Selectors and Mobify Studio's CSS Filter
  • Application: Truncating blogposts for mobile use
  • Difficulty: Moderate
  • Estimated Completion: 15 mins

Hi, my name is Nico and I'm a web designer at Mobify. After spending the past four months designing dozens of mobile sites with Mobify Studio, I have come across many useful CSS techniques for optimizing mobile sites. In this blogpost, I'll be covering how to truncate blogposts on your mobile site using 'nth-child' CSS3 pseudo selectors.

Blogs are very popular on mobile because they have frequently updated, snack-sized articles which are often shared on Twitter and Facebook. When mobifying a content-heavy blog, we need to decide what content from the desktop site is relevant for mobile.

The majority of blogs display full-length blogposts on the homepage, which is fine for desktop but people browsing from their smartphones are looking for a snack, not a full-course meal! Showing full entries of all the blogposts on the homepage of your mobile blog can sometimes be too much for mobile users.

before-after

TRUNCATING BLOGPOSTS WITH NTH-CHILD CSS3 PSEUDO-SELECTORS

Instead of showing the full entries on the homepage, hiding the content and displaying only the title and metadata of blogposts makes it easier for mobile users to scan the content. The simple way to do this is by selecting and hiding the portions of content you do not want to display. For example, if blogpost in a blog was marked up like this (let's pretend there is content in between the tags):

  1. <div class=”blogpost”>
  2. <h3 class=”title”></h3>
  3. <p class=”metadata”></p>
  4. <p class=”content”></p>
  5. <p class=”content”></p>
  6. <p class=”content”></p>
  7. </div>

The CSS to truncate the blogposts would consist of the following:

  1. .blogpost .content { display:none }

By applying the CSS above, we end up with all the blogposts truncated:

truncated-blog

But what if you only wanted the older blogposts truncated, and the 4 newest entries to be shown in full? Fortunately, there is a way to specify exactly which blogposts are truncated on a given page.

  1. .blogpost:nth-child(n+5) .content { display:none }

What the code above does, is select and hide the content of all the blogposts except for the first four. The CSS selector used is called an nth-child pseudo-selector. I highly recommend the following articles at Sitepoint and CSS-Tricks which both do a great job of explaining how nth-child selectors work. Below is a reference table borrowed from Sitepoint that may help put things into perspective:

nth-child-table

Using nth-child selectors can be confusing especially if you are a visual learner. When I first started using nth-child it didn't make much sense to me either until I started using this handy CSS3 structural pseudo-class selector tester by Lea Verou, which can be used to visually calculate and test pseudo-class expressions.

CAVEATS

Unfortunately, a large number of older mobile devices are equipped with browsers that do not support CSS3 pseudo-selectors. This means some older Blackberry and Nokia devices will not be able to display truncated blogposts and paginators as shown above.

Another important thing to keep in mind is that when elements are hidden with display:none, the assets from the hidden content will still be downloaded by the browser. This is a major problem because when optimizing a site for mobile, we definitely do not want any unnecessary assets to be downloaded.

MOBIFY "CSS FILTERS" TO THE RESCUE!

One of my favourite features of Mobify Studio is the amazing CSS Filter, which is essentially a server-side display: none. Since the display:none is applied on the server-side before the mobile site is served, it has two major advantages:

​1) Allows any elements to be hidden with CSS3 selectors such as nth-child, even if the device it is being served does not support CSS3.

​2) Prevents the mobile browser from downloading assets which should be hidden, saving the mobile user time and bandwidth.

For a detailed explanation of how to hide content with Mobify's CSS Filters, please have a look at this thread in the Mobify Community Forums. From there you will also be able to have your technical questions answered by our staff.

CONCLUSION

Careful consideration of the mobile user's needs means taking extra steps to make your mobified site more scannable by removing unnecessary content and options. The same technique we used to truncate the blogposts can also be applied to truncate other elements of a mobile site, such as paginators or menu lists. Combining the power of nth-child pseudo selectors with Mobify's CSS Filter allows for greater control of the mobile experience.

Mobify Webinar - Mobify Studio Tutorial


For those of you who missed our webinar two weeks ago, here is a recorded version. We cover Mobify Studio and talk about some great mobile websites that are out there right now.

On our next webinar, we'll be focusing on mobifying Drupal. Stay tuned for more details and don't forget to follow us on Twitter (@mobify) for latest updates!