A Roundup of 15 Mobile Web Design Tutorials

In recent years there has been a massive increase in mobile web use, with the development of the iPhone and similar devices driving a huge demand for Internet access on the go. The changes in the way that we use the Internet presents fresh challenges and possibilities for web designers as sites must be compatible with both desktop and mobile platforms. This post brings together 15 tutorials for getting started in mobile site design, essential skills in the current landscape of web development.

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.
1 mobile web A Roundup of 15 Mobile Web Design Tutorials
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.
2 mofuse A Roundup of 15 Mobile Web Design Tutorials
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.
3 codelgniter A Roundup of 15 Mobile Web Design Tutorials
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.
4 site mobile friendly A Roundup of 15 Mobile Web Design Tutorials
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.
5 site mobile A Roundup of 15 Mobile Web Design Tutorials
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.
6 writing friendly sites A Roundup of 15 Mobile Web Design Tutorials
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.
7 google app engine A Roundup of 15 Mobile Web Design Tutorials
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.
8 new iphone developers A Roundup of 15 Mobile Web Design Tutorials
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.
9 website design iphone A Roundup of 15 Mobile Web Design Tutorials
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.
10 line25 A Roundup of 15 Mobile Web Design Tutorials
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.
11 colour mobile design A Roundup of 15 Mobile Web Design Tutorials
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.
12 slick iphone interface A Roundup of 15 Mobile Web Design Tutorials
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.
13 mobile devices A Roundup of 15 Mobile Web Design Tutorials
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.
14 django A Roundup of 15 Mobile Web Design Tutorials
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.
15 multiple screen sizes A Roundup of 15 Mobile Web Design Tutorials
Effective Design for Multiple Screen Sizes

About The Author

This guest article is from Tom Walker, a writer working for a specialist online supplier of the HP 57 ink cartridge and other printed media supplies.

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.