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.
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 & Code a Cool iPhone App Website in HTML5 HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app. How about we use the recent tutorial I wrote over at Tutorial9 as a base for our app website? This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.
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 | CSS-Tricks
Create a Slick iPhone/Mobile Interface from any RSS Feed | CSS-Tricks We are going to create a web page that is formatted specifically for the iPhone (but would presumably be good for other mobile devices as well). This web page will dynamically fill itself with content from any RSS feed that you give it. The interface is going to be built to be easy to use on a mobile device, with large “touchable” areas and nice (jQuery) animations that whisk you between articles.
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