Pure Awesomeness

15 Mobile Design Tutorials

| 0 comments

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

Leave a Reply