By James Sherrett 5 Responses »

Starting Guidelines for Tablet and iPad Website Design

Sep 212011

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.

Tagged with: , , , , , ,
By nico 1 Response »

Optimizing blogs for mobile with CSS3 and Mobify Studio

Oct 202010
  • 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.

Tagged with: , , , ,
By nick@mobify.me No Responses »

Ditch the Images: Useful CSS Techniques for Mobile

Jun 082010

Major reductions in data transfer, fewer server requests, and quicker updates are just some of many great advantages to saying no to the use of images in your mobile design. Going image free means having less assets to manage in a mobile specific style sheet, and more importantly, that your pages will adapt more easily to a larger range of different screen sizes thus improving CSS compatibility.

Using a CSS Gradient to Replace Static Width Image Buttons

In case you wish to add a gradient to a button to tie it into your design, an image or a CSS sprite might work well for desktop; however, with so many screen sizes and variations in CSS, supporting a statically sized image button with a CSS controlled rollover becomes a very complex solution which does not degrade very well as CSS support and screen sizes fall away.

The use of CSS3 gradients allows for complex styling, with a complex rollover, while letting the button degrade gracefully. It is also possible to use a variable width for a button using a percentage value based on the screen size without sacrificing quality and usability/readability as you would with an image button.

The following tool can be used to quickly create any gradient you want: http://gradients.glrzad.com

Using “border-radius” to Eliminate the Need for Complex Background Images

Similarly to the gradient effect, in this scenario, what was once too risky to do with CSS (due to browser compatibility issues) or too complicated to do without it, has become very simple to accomplish on modern smart phones, while degrading gracefully on older or non-WebKit devices.

Border radius replaces the need for multiple divs and background images to achieve rounded corners on an element. The Rube Goldeberg-esque combination of elements that made up older attempts at rounded corners have the potential to break a small section of a site on a modern phone, or in the worst case scenario destroy the look and usability of a site when it is rendered on an older phone.

Another advantage is that border radius allows you to adjust the roundness of corners on any element, not only div elements. That means you can safely apply custom styling to something like a button element and achieve a rounded look. This is something that would have previously taken a static image to achieve.

How To Do it:
http://www.css3.info/preview/rounded-border/

Something We Expect to See in the Future

Staying on the topic of making a mobile site look good without using images, something that we expect to see become more and more compatible in the future is the use of text-shadow: while this does work in the latest WebKit browsers, it does not have a lot of backward compatibility, so we suggest staying away from using it as a significant band-aid to help readability. Instead use it to enhance the experience for your users with compatible phones. We have begun using this on sites with great success.

Learn more:
http://www.css3.info/preview/text-shadow/

Example:
m.makeuseof.com

Important Closing Thoughts

While working on mobile, keeping things simple is paramount to a successful design. “Less is more” applies in all aspects, right down to CSS and the number of moving parts on the site. The fewer moving parts you have, the less possibility there is for an older browser to destroy the user’s entire experience!

Tagged with: , , , ,