Advertisement in Mobile Development Toolkit
 in Mobile Development Toolkit    in Mobile Development Toolkit    in Mobile Development Toolkit

Mobile web design has been around for quite a while. Unfortunately, a lot of mobile design guidelines are out of date and focus on low-resolution, non-touchscreen phones. Despite their popularity, there isn’t a whole lot of information out there for designing websites for the new generation of smartphones (iPhone, Android devices, BlackBerry touchscreens, etc.) — these devices are growing more and more popular in Europe and North America.

Below are some fantastic resources for designing not just mobile websites, but smartphone-friendly sites. We’ve covered everything from basics to tutorials to usability. If there are other resources you’ve found useful, please share them in the comments.

Development Basics

The articles below give a great introduction to designing for mobile devices, plus more in-depth information. There are both basic, theory-driven articles as well as more technical tutorials.

Designing a Mobile Stylesheet for Your Website
This article from Speckyboy Design Magazine goes in-depth into what you need to consider when creating your mobile site design. It covers everything from allowing for fluctuations in your layouts to hiding awkwardly-proportioned content for your mobile visitors.

Mobilestylesheettt in Mobile Development Toolkit

In Depth: How to Make Your Website Mobile Compatible
This article dives into the specifics of mobile site development, including topics like device detection and testing.

Smartphonespda in Mobile Development Toolkit

Website Design for Smartphones – Part 1
This 3 part series from Savvytalk covers all the basics for creating a site optimized for smartphones; also why you’d want to develop for smartphones and how to actually do so.

Savvytalkwebdesign in Mobile Development Toolkit

Tutorial: Making Your WordPress Blog Android and iPhone Friendly
This tutorial gives in-depth instructions on how to make your WP blog show up properly on iPhones and Android devices, without using plug-ins. Androidiphonefriendly in Mobile Development Toolkit

How to Write Web Pages for the iPhone and Other Wireless Devices
This page from About.com talks about the basics of designing sites for smartphones like the iPhone. It’s a good primer for what you need to consider before you actually start designing.

Aboutiphonewebpages in Mobile Development Toolkit
Effective Design for Multiple Screen Sizes
This article from MobiForge talks about some things to keep in mind when designing mobile websites for multiple devices, with multiple screen resolutions. Considering that smartphone screen sizes can range anywhere from a couple hundred pixels square up to the iPhone’s new retina display; it’s a big concern for designers.

Multiplescreensizes in Mobile Development Toolkit
How To: Make Your Mobile Websites Act More Like Native Apps
This Mashable article offers a number of tools for making your mobile website act more like a native application on mobile devices.

Actlikenativeapps in Mobile Development Toolkit
Styling Submit Buttons for Mobile Safari
Here’s a brief tutorial from Think Vitamin about how to style your buttons so they appear correctly in Mobile Safari, including code.

Mobilesafarisubmit in Mobile Development Toolkit
Tutorial: Optimizing Your Website for Mobile Devices
This tutorial shows you how to create a smartphone version of your website that’s based on the regular version. It re-uses elements from the original design to create a site that reinforces your branding and create a unique mobile experience that doesn’t look like just another mobile template.

Optimizingmobiledevices in Mobile Development Toolkit
10 Tips for New iPhone Developers
This article gives in-depth information about creating web apps for the iPhone that work like native apps.

10tipsiphone in Mobile Development Toolkit
Create a Slick iPhone/Mobile Interface from any RSS Feed
This tutorial from CSS-Tricks shows you how to use your site’s RSS feed to create a slick smartphone interface. The end result is highly usable and has extra flair that’s often missing from mobile sites.

Slickmobileinterface in Mobile Development Toolkit
How to Make Your Portfolio iPhone Compatible
This tutorial gives complete instructions for how to make an existing portfolio site work on the iPhone. It even includes instructions for creating a webclip icon, so if users make your site a webclip, it won’t just use a generic screenshot as the icon.

Iphonecompatibleportfolio in Mobile Development Toolkit
Create an iPhone Optimised Website Using jQTouch
Here’s a complete tutorial for creating a smartphone-optimized website using jQuery’s Mobile library. Full code is included.

Jqtouchwebsite in Mobile Development Toolkit
iPhone Microsites – Tutorials
This site offers a ton of tutorials for creating iPhone optimized and targeted microsites. Tutorials include how to target content specifically to iPhone visitors, tips for using inline images and also how to create a touch-based sliding UI.

Iphonemicrosites in Mobile Development Toolkit
Build an iPhone-Optimized Website with iUI
This tutorial from Webmonkey teaches you how to optimize your website for iPhone visitors using Joe Hewitt’s iUI.

Iuisite in Mobile Development Toolkit
Mobile Web Design: Best Practices
This article from Six Revisions is a great primer for what you need to know when designing for mobile devices. It covers everything from the complications that arise due to different delivery methods to the specifics of structure and code for your mobile site.

Mobiledesignbestpractices in Mobile Development Toolkit
Web Apps are Becoming the New Legacy Apps
This article talks about the problems many web apps face in regards to being used on smartphones, and what app creators need to do to be more smartphone-friendly.

Newlegacyapps in Mobile Development Toolkit
8 Ways to Make Your Website Mobile Friendly
Design Reviver discusses a variety of ways to make your existing website more friendly to mobile devices. It includes tips about fluid layouts, centered content, short pages, and more.

Mobilefriendly in Mobile Development Toolkit
Rethinking the Mobile Web
Here’s a brilliant slideshow from UX Magazine that talks about how to approach mobile web design so that it’s accessible on the largest number of devices (not just iPhones or Android phones).

Rethinkingmobileweb in Mobile Development Toolkit

Usability

Usability on smartphones is vital. Usability on the full version of your website might not necessarily translate to good smartphone usability. The articles below can help you fill in the gaps.

Usability Tips for Smartphone Websites
Here’s a brief article that covers usability considerations specific to smartphone website design. It talks about things that aren’t considerations with traditional web design, like leveraging native device capabilities.

Betternetworkusability in Mobile Development Toolkit
Mobile Usability
This article from Jakob Nielsen talks about mobile usability, why it stinks, and how designers and developers can start to make it better. It includes data from real-world studies to back up the claims it makes.

Mobileusabilitynielsen in Mobile Development Toolkit
7 Usability Guidelines for Websites on Mobile Devices
This article covers seven basic usability guidelines you should keep in mind when developing mobile sites, based on real user research. Covered are things like not repeating navigation on every page and using mobile-friendly page layouts. It’s aimed at general mobile development, but the principles also apply specifically to smartphones.

7usabilityguidelines in Mobile Development Toolkit
5 Can’t-Miss Usability Tips for Mobile Website Designs
Here’s another post with some great specific tips on mobile site usability, though this one definitely focuses more on smartphones.

5cantmisstips in Mobile Development Toolkit
A Three Step Guide to Usability on the Mobile Web
This article includes not only steps for improving usability, but also a download link to a PDF best-practices guide for mobile development.

Threestepguide in Mobile Development Toolkit
Mobile Usability Testing
Here’s a slideshow that gives an overview of what goes into usability testing for mobile sites.

Mobileusabilitytestingslides in Mobile Development Toolkit

Development Kits

When creating mockups, it’s sometimes helpful to see your design as it might actually appear on a smartphone screen. The GUI kits and other tools here will help with that.

Perfect Multi-Column CSS Liquid Layouts – iPhone Compatible
This site provides a number of CSS-based liquid layouts that work with the iPhone’s browser. They use no JavaScript, no CSS hacks, and no images.

Cssliquidlayouts in Mobile Development Toolkit
iPhone Application Sketch Template v1.3
This printable iPhone template is great for wireframing mobile sites, and includes a grid for accuracy.

Iphonesketchtemplate in Mobile Development Toolkit
RIM BlackBerry PSD
Here’s a free BlackBerry UI template kit PSD file. It has 135 layers included for all aspects of the BlackBerry UI.

Blackberryuikit in Mobile Development Toolkit
Palm Pre GUI PSD
Here’s a PSD file with a variety of Palm Pre UI elements, free from Teehan+Lax.

Palmprepsd in Mobile Development Toolkit
iPhone 4 GUI PSD (Retina Display)
Now that the iPhone 4 has a higher-resolution retina display, it’s important to use GUI templates that reflect the higher resolution.

Iphone4gui in Mobile Development Toolkit
Android GUI PSD Vector Kit
Here’s a free Android vector GUI kit with resizeable elements for creating mockups in any size you need.

Androidgui in Mobile Development Toolkit

Testing

You’ll need to test your mobile site to make sure it’s going to appear as you intended. Here are a couple tools to help:

W3C mobileOK Checker
It’s important that your mobile website is W3C compliant, as it makes it more likely to display across a variety of devices and less likely to break as technologies change (just like it is for regular websites).

W3cmobileok in Mobile Development Toolkit
iPhoney
iPhoney is a free iPhone simulator from Market Circle. It uses Safari and offers pixel-accurate rendering of web pages. The only downside: it still uses the 320 x 480 pixel canvas, rather than the new retina display size.

Iphoney in Mobile Development Toolkit

10 Awesome Design Examples

What would a roundup of awesome smartphone design tools and resources be without some examples to help inspire your own designs? The designs below are all exceptionally well-done and show just how a smartphone-optimized site should look.

Forever 21
Forever 21, a clothing retailer for young women, do a great job of optimizing their site for mobile viewing. Their navigation is simplified, they put promotions on top but don’t fill the entire screen with them, and include a store locator.

Forever21 in Mobile Development Toolkit
Bloomingdale’s
Clothing retailer Bloomingdale’s places their store locator link prominently on the mobile home page.

Bloomingdales in Mobile Development Toolkit
Tijuana Flats
Tijuana Flats has obviously what mobile visitors are most likely to want to see: the menu and the restaurant locator, and they place links to each front and center.

Tijuanaflats in Mobile Development Toolkit
Babcock Partners
This is a very polished and professional mobile design, with a simplified navigation and strong visual elements.

Babcockpartners in Mobile Development Toolkit
Plank
Web design firm Plank has a great mobile site that emphasizes what they do and is very usable.

Plank in Mobile Development Toolkit
1 Trick Pony
1 Trick Pony removes navigation on sub-pages on their mobile site, instead opting for a simple “Back” button. It’s a great way to unclutter your design but only works well for sites that don’t have deep navigation.

1trickpony in Mobile Development Toolkit
Wolfram Alpha
Wolfram Alpha’s mobile site is a simplified version of their full site, with the search bar right up top.

Wolframalpha in Mobile Development Toolkit
Alex Buga
Alex Buga has done a fantastic job of echoing their full site while optimizing it for a mobile browser window. Keeping the same graphic style and using elements of the full design works exceptionally well and reinforces brand identity.

Alexbuga in Mobile Development Toolkit
Simon & Schuster
Simon & Schuster probably has one of the more complex mobile site designs listed here, yet they still keep it very usable. Featured content is prominently displayed, as are options for finding other content.

Simonandschuster in Mobile Development Toolkit
Google Finance
Google Finance maintains a very uncluttered, almost minimalist layout that makes information most likely to be of interest to users easily accessible.

Googlefinance in Mobile Development Toolkit

Conclusion

Smartphone design is growing more important on what seems like a daily basis. As more and more people switch to smartphones or upgrade to more powerful versions, smartphone optimization for websites is going to be vital to the success of any website or web-based business.
(ik)