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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
  • http://pixelloop.org PixelLoop

    If you use wordpress wp-touch is a great plugin to give you an automatically created minimal app like interface for your existing website when someone lands on it with their smart phone. :)

    • SloDive

      Ahh, cool mention buddy, will try out, thank ya.

    • http://victoriapod.com Joseph

      wp-touch is cool, although if you need a more customised look of you brand you either need to built your own responsive site, or built a separate mobile site, or even hire a developer.

  • Ronald Bien

    Nice roundup and thanks for the effort bro :) I should try this sometimes.

    • SloDive

      Thanks, glad you liked it.

  • mobile website

    Really a nice blog with all the information . This will help me in my future carrier. Give more pictures of this topics,thanks for such a nice post.

  • Tomas

    Nice links, I would like to add a source of inspiration for mobile webdesign

  • Specialized Hardrock Bike

    Thank you for the superb blog – I loved reading it! I always enjoy checking out this page.

  • web design

    nice designing

  • website design

    Thanks for u r information

    its very useful

  • Mobile websites

    Mobile websites are really the best instruments through which the retailers can easily present their products in front of the customers in a unique way. Well, We would like to tell you that there are some disadvantages also of not having a mobile friendly website.

  • http://www.uitmuntend-webdesign.nl J. Hendrix

    Thanks for writing this. Mobile webdesign is the future!

  • alex

    Looks useful – however there are no dates anywhere in this article – the first tutoriaal I visited was three years old. So, I’ve no idea if this was posted a few years out of date, or current, and there are just too many other reliably up to date good resources to bothyer investigating futher

  • suresh

    Hi All,

    i am developing website for mobile with 320px width technology is Asp.Net,C# So i uploaded all my files on the sever when i am open my website on mobile “It is appearing too small every time i have to Zoom to see content and below horizontal bar is coming i dont want this horizontal bar And one more thing when i entered on mobile like http://www.example.com it should shit m.example.com” if any one had faced these problems help me in this issues Thank you.

  • Muhammad Fikri

    Thanks for these useful informations, along with the weblink. After all I need some roundtrip experiences that would brought me to the real examples. You know I’m a tourist who visit your country :) … Yes your website is your country.

    Okay, have a beautiful weekend !

    ~ fikri ~

  • http://linuxthebest.com Sinbad Konick

    This information is really useful and the links you have given are also really useful and just great fun this one…

  • Manuel Garcia

    Now that mobile web design take place, this kind of tutorial is very important for every web developers and designers. Good to see Slodive posting such kind of post.

  • http://victoriapod.com Joseph

    Here’s also some cool addition to the list http://www.html5rocks.com/en/tutorials/#audience:mobile

  • Jai

    A very nice share here. But I love how blogger show my blogs to mobile users. The default mobile template simple and not complicated to browse. Nice share anyways.

  • http://www.satyathakur.com Satya Thakur

    I liked the tutorial by Nettuts+. This tutorial explains step-by-step process to convert any site with an RSS feed into a mobile site.

  • Prabha

    Its just a very nice and useful tutorial on how to change any site to mobile site. I appreciate this post.

  • Kamal

    Its simply Awesome,all this tutorials are very helpful to getting into mobile web design..

  • Marie

    This is a very helpful tutorial for a mobile web design. Nice post. ^^

  • Pingback: 25 Free Blackberry Apps You Should Have()

  • Pingback: 60 Best Free BlackBerry Apps You Can't Afford To Miss()

  • Pingback: 20 Best Windows Mobile Apps()