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.
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