SloDive - Design Resources and Inspiration

A Roundup of 15 Mobile Web Design Tutorials

Posted: 18 May 2010 07:14 AM PDT

Older Related Articles:

Cutting Edge PSD to HTML Tutorials

Top Must See Photoshop Tips & Tricks (2010)

New Illustrator Tutorials That Will Make You A Master Of Vector Art

1. Coding for the Mobile Web

In this tutorial, Chris Mills runs through the basics of designing websites that work across mobile and desktop browsers, along with some general hints and tips, perils and pitfalls of the mobile format and pointers to related resources.

Coding for the Mobile Web

2. How to Create a Mobile Site with MoFuse

This tutorial from Nettuts+ explains step-by-step how to convert any site with an RSS feed into a mobile site hosted by MoFuse. The service supports sites for the iPhone and other mobile devices, and allows users to personalize and tweak their sites, set up a domain and add advertising. It’s a great solution for people who do not yet feel comfortable hosting mobile versions of their websites.

How to Create a Mobile Site with MoFuse

3. A Simple Mobile Site with CodeIgniter

CodeIgniter provides a toolkit for building websites using PHP, with an extensive library of templates to reduce time spent coding so users can focus on site design quickly and efficiently. This tutorial explains how to make a simple site for generic mobile devices, a great introduction to CodeIgniter’s frameworks.

A Simple Mobile Site with CodeIgniter

4. Make Your Site Mobile-Friendly in Two Minutes

Mike Industries presents a straightforward tutorial in four easy steps showing how to make a website mobile-friendly without touching the pages’ coding. The results are quickly evident: because the site is stripped of content that slows down mobiles, pages download much faster with improved compatibility.

Make Your Site Mobile-Friendly in Two Minutes

5. Make your Site Mobile Friendly

This article covers the basics of making websites more compatible and digestible for mobile devices, writing and testing CSS for mobiles. For users of Flash and Dreamweaver there’s an explanation of Adobe’s Device Central, along with some tips for bloggers.

Make your Site Mobile Friendly

6. Writing a Mobile Friendly Website

Jennifer Kyrnin offers a general overview of the key considerations for mobile websites, looking at graphics, HTML and content issues.

Writing a Mobile Friendly Website

7. Creating Mobile Web Sites with Google App Engine

With Google App Engine (GAE), users can scale web applications in response to the demands of traffic by running them on Google’s servers. This tutorial explains how to add device detection to GAE apps, to distinguish between desktop and mobile browsers, determine device capabilities, and then present the appropriate version of a website accordingly.

Creating Mobile Web Sites with Google App Engine

8. Tips for New iPhone Developers

In many ways, making sites for the iPhone is similar to creating a normal website, but there are certain important points to make a truly successful web app. This tutorial by Paolo Ranoso covers usability guidelines, testing and debugging applications and web performance, along with more general tips to bear in mind during the design process.

Tips for New iPhone Developers

9. Website Design for the iPhone

This isn’t a tutorial as such, but Brian Getting offers a good general overview of the basic challenges for web designers developing sites for the iPhone.

Website Design for the iPhone

10. Design and Code a Cool iPhone App Website in HTML5

Designer Chris Spooner has written a neat tutorial detailing iPhone app website creation in HTML5. Using the example of a fictitious app, in this case a PKE ghost detector, Spooner works through the process from making a PSD concept in Photoshop, to HTML coding and CSS styling.

Design and Code a Cool iPhone App Website in HTML5

11. Mobile Web Design – Working with Colour

The use of colour is an essential aspect of mobile website design. Because the designer is playing with limited screen space on a device to be used on the move, colour must be carefully applied for aesthetics and for practical issues such as readability and navigation. This tutorial covers the essentials of colour in mobile website design.

Mobile Web Design – Working with Colour

12. Create a Slick iPhone/Mobile Interface from any RSS Feed

This tutorial from CSS-Tricks shows how to create slick web pages aimed primarily at the iPhone, which will also work on other similar mobile devices. The pages created are RSS-fed, with large 'touchable’ areas suitable for mobile use, and pleasing animations to navigate through content.

Create a Slick iPhone/Mobile Interface from any RSS Feed

13. Optimizing Your Website for Mobile Devices

The developers at Element Fusion share the steps to successfully optimizing websites for mobile devices. The tutorial covers mobile considerations such as screen size and CSS support, lay out designs, implementation, development, testing and troubleshooting, and some notes on special content for the iPhone.

Optimizing Your Website for Mobile Devices

14. Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes

The Django framework lends itself particularly well to mobile-friendly web applications due to its structures and templates. This tutorial eases the user through the process of creating a web app suitable for both mobile and desktop platforms, with the aim of completing the task in 15 minutes.

Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes

15. Effective Design for Multiple Screen Sizes

One of the main problems faced by mobile website designers is the diversity of screen sizes and pixilation used by different devices. This tutorial offers guidance on making websites and web apps functional and compatible when designing for small screens.

Effective Design for Multiple Screen Sizes