Jan 28 2011

Tutorials for Making Your Website Mobile Friendly

Advertisement

Mobiles have become a necessity in our lives and are being used worldwide. Today’s phone set has the capability to browse the web, listen to songs, watch videos or even download any required information. This is the main reason why many companies have considered rebuilding their sites to make them mobile compatible.

With the introduction of iPhone there has been a massive demand of mobile web services. Today we present to you 25 tutorials and articles to help you understand and develop sites for achieving mobile presence on websites:

How to Create a Mobile Site
This article shows you the way of creating a mobile site that is good for old cellphones and stunning for iPhones:

Create a Mobile Site

How to Make Your Portfolio iPhone-Compatible
A tutorial focusing mainly on making portfoilio sites mobile friendly so that visitors can enjoy artwork even on their cells:

How to Make Your Portfolio iPhone-Compatible

Tutorial: Optimizing Your Website for Mobile Devices
Here you can learn how to make your own site mobile friendly:

Tutorial: Optimizing Your Website for Mobile Devices

How To: Designing A Mobile Website
In order to design a simple, effective and attractive mobile website, there are a few ingredients that we need to add into the mix. This article should satisfy all of your basic needs for a mobile platform on your site:

How To: Designing A Mobile Website

Coding for the Mobile Web
Here you can find out firsthand how the author has taught to develop web sites so that they will provide an acceptable user experience on mobile devices:

Coding for the mobile web

How to Create a Mobile Site with MoFuse
MoFuse is a service that lets you convert basically any site with a RSS feed, to a mobile site hosted by it. This is a great option if you don’t feel comfortable hosting your mobile site yourself:

How to Create a Mobile Site with MoFuse

A Simple Mobile Site with CodeIgniter
In this short tutorial you can learn how to get started with the development of a simple site to display mobiForge’s RSS feed on a generic mobile device:

A Simple Mobile Site with CodeIgniter

Make Your Site Mobile-Friendly in Two Minutes
This tutorial shows four easy steps on how to make a website mobile-friendly without touching the pages’ coding:

Make Your Site Mobile-Friendly in Two Minutes

Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes
This article quickly walks you through the process of setting up an absolutely minimal mobile as well as desktop-friendly web application using the Django framework:

Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes

How To Build A Mobile Website
The vast number of mobile devices makes thorough testing a practical impossibility — how to check it and accomplish the task has been discussed in detail in this article:

How To Build A Mobile Website

Effective Design for Multiple Screen Sizes
Designers, who work with mobile devices, face a common problem: figuring out what screen size to actually design for. This tutorial helps us find an answer:

Effective Design for Multiple=

Creating Mobile Web Sites with Google App Engine
Get some tips, and some of the common bugs you might run into while creating a mobile site with Google App Engine:

Creating Mobile Web Sites with Google App Engine

BiscuitML Reference
Netbiscuits provides user interface units for web display on mobile devices. You can achieve automatic re-formatting of your application for optimal display on any device:

step-by-step tutorial

Designing for the Mobile Web
In this article you will be introduced to seven fundamental steps that, if followed, will help you avoid the pitfalls that have caused many other mobile sites to fail. By the end of this article you’ll know exactly where to focus your efforts in order to build a successful mobile site:

Designing for the Mobile Web

Mobile Web Design – Working with Color
This article discusses the role of color in mobile web design. Color used effectively allows for visually communicating information about a page without having to take up additional space within the page:

Mobile Web Design - Working with Color

Learn How To Develop For The iPhone
Here you can see how you can build an alternate page and style sheet for the iPhone and iTouch:

Learn How To Develop For The iPhone

Create a Slick iPhone/Mobile Interface from any RSS Feed
Here you can learn how to create a web page that is formatted specifically for the iPhone (but would presumably be good for other mobile devices as well):

Create a Slick iPhone/Mobile Interface from any RSS Feed

Designing a Mobile Stylesheet for your Website
This article explains what you need to consider when creating your mobile site design:

Designing a Mobile Stylesheet for your Website

How To Make Your Site Compatible For Cell Phones
Check out the four simple steps that will help you to make your site compatible for cell phones:

How To Make Your Site Compatible For Cell Phones

How to make your website mobile compatible
Go through this in-depth article for geting a complete knowledge of making your site mobile compatible:

How to make your website mobile compatible

Making your WordPress blog Android and iPhone friendly
This article is intended for those who already have a web or WordPress background. If you don’t quite understand how to put together your own templates, this might not be for you:

Making your WordPress blog Android and iPhone friendly

10 Tips for New iPhone Developers
Here you can find a wide variety of tips on usability guidelines, testing/debugging, pitfalls and performance issues:

10 Tips for New iPhone Developers

Basics Behind Building Web Pages for the iPhone
This article talks about the basics of designing sites for smartphones like the iPhone:

Basics Behind Building Web Pages for the iPhone

Create or Convert your site or blog into Mobile Phone Compatible Website
Here are a few tools that will make this creation or conversion easier than expected:

Create or Convert your site or blog into Mobile Phone Compatible Website

HOW TO: Make Your Mobile Websites Act More Like Native Apps
Check out how to make your mobile websites act more like a native app:

HOW TO: Make Your Mobile Websites Act More Like Native Apps

How to make your website mobile compatible
All you need to know about mobile compatible websites:

How to make your website mobile compatible

(ik)

About the Author

Bhanu Ahluwalia is a graduate in Computer Science and a social media enthusiast from India. He specializes in web design by qualification and photography by passion. He is an avid blogger, running TutZone and co-authoring DesignUnder and SloDive. You can reach him via Twitter.

Homepage

Comments and Discussions
  • Uzair, 28 January 2011

    Great. Thanks for the tuts.

  • rafael armstrong, 28 January 2011

    Thanks for the rundown of resources. One of my goals for 2011 is to take a stab at developing a mobile version of my site, and these should definitely be useful.

  • Stacey, 28 January 2011

    Great roundup. I haven’t read most of the tutorials. Will bookmark this page for future reference.

  • Muhammad Ali, 28 January 2011

    Great work

  • Greg Givan, 28 January 2011

    Its a little disappointing that a fair number of the these links/tuts are two+ years old. In the fast changing mobile browser world – thats akin to a lifetime.

  • steff, 28 January 2011

    Greg is right! some of the tutorials are not so fresh, but still they are very useful if you plan to offer your visitors a mobile version. I myself am planning to do that in the upcoming days. Thanks for sharing

  • Scott, 28 January 2011

    Thanks for the roundup!

    But, some of these resources and practices are close to 6 years old such as the tip from Mike Industries. Surely there’s been some vast improvements?

    Also, what about a recent forked version of jQtouch?
    https://github.com/datazombies/jQTouch
    Sencha Touch?
    http://www.sencha.com/products/touch/

    This may be a topic for another article:
    Adaptive layouts

  • Seenu, 29 January 2011

    Even though some links are very old they can be used as reference.

  • saravana kumar, 29 January 2011

    Hi,

    Great post dude.Got in time while i searching about the topic.

    Thanks much :)

  • Garthwest Creative, 29 January 2011

    Great Tips, Thanks for that :)

  • hp, 29 January 2011

    Just what I was looking for!!! :)

  • Rebecca, 31 January 2011

    That is a great collection of links. I have seen several tutorials on mobile design, but there are quite a few on this list that I hadn’t seen.

  • necokop, 31 January 2011

    If you are running your site on Joomla! CMS, you can use Mobile Joomla! to make it mobile friendly in minutes as well;

    http://www.mobilejoomla.com

  • Catchcolors, 01 February 2011

    Good and informative article.. this is help for the developers to make mobile friendly web sites.. I am sure…

  • resheen, 01 February 2011

    Great , thanks a lot for sharing.

  • Tera Benthin, 02 February 2011

    Textual content messaging has turn out to be an integral part of our day-to-day lives. Nobody can deny the insurmountable amount of comfort it has allowed us when attending matters of each our personal and business affairs. The power to ship quick messages on the go is what makes textual content messaging so enticing that almost all of us simply cannot stay with out it. It has truly transcended from a mere luxury to a necessity as evidenced by the heavy inflow of cell phones available in the market today. Amongst them, the Apple iPhone might be the one which garnered essentially the most public adulation. It is as a result of the iPhone is the first cellphone that mixed the powers of both cell phone and computer.

  • Michel, 03 February 2011

    Hi guys,
    I’m Michel from DesigneBreak, the first link mentioned.
    first, Thanks a lot noupe staff for including my resource.

    to the readers: my article is from 2009 and although it’s still up to date about the theory and much of the technical guidance, I would be happy to write a new version with the latest news and advancement in mobile web.

    just give me some feedback here or on my blog if you feel it would be helpful for you.

    thanks to everyone, and let’s build a beautiful mobile web :)

    Michel

  • jorge, 04 February 2011

    thanks for the tutorials did not know what this could do it yourself, very good

  • Stan, 09 February 2011

    Great blog, keep up the good work

  • sydneyprincesscruises, 21 February 2011

    This is a good tutorial, and it gives us a idea about how to make a fashion website. Please keep posting, we can learn more from your blog.

  • Brett Widmann, 16 March 2011

    The mobile web is a huge trend that continues to grow. This article is so helpful!

  • Mobiles are here to stay. Access to websites via mobiles is here to stay. This article is a good guide to why and a bit of a steer to how!

  • Johnny Cole, 08 September 2011

    Exceptionally illuminating thanks, I do believe your subscribers would definitely want significantly more items along these lines keep up the good work.

  • Amelia, 24 September 2011

    It has helped me sooo much, thanks for sharing!

  • Ethan, 07 November 2011

    Great resources! Thanks a lot!

  • marwan, 21 February 2012

    great info
    thanks

  • Steff, 18 March 2012

    I hope I can make my website mobile-friendly with these links because it’s looking terrible now :)

  • Pitter, 17 May 2012

    Great tuto, specially for that am just learning about mobile websites.

  • gregory, 20 May 2012

    Great tutorials, thank you so much.

  • Mobile Designer, 11 June 2012

    It’s actually a nice and useful piece of information. I am happy that you just shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.

  • Alex Hoddle, 10 July 2012

    We used Roveb – http://roveb.com to create a mobile website with an inbuilt loyalty program and deals.

    Although we hired someone to design our restaurant website, I found on Google Analytics that a lot of people were visiting our website from their mobiles (iPhone etc.). Since using Roveb, we’ve had some great response.

  • Michael Holt, 24 September 2012

    Great stuff, Bhanu. You should do an update to this, if you haven’t done so already!

  • duty, 21 May 2013

    Heya we are for the key time frame listed here. I discovered that table i think it is truly valuable & it reduced the problem out there a lot. I’m hoping to offer another thing returning in addition to guide other folks such as you solved the problem.

  • Gary Gile, 03 April 2014

    I haven’t read your tutorial yet and will. However, one thing I like to do is check to see if a person practices what they preach and this site is not mobile friendly. I’m sure you have a good reason for that and would like to know.

    • Dieter Petereit, 03 April 2014

      Actually, I wouldn’t call it “preach”. There’s things that work out good for those, but not for these. We are very tolerant here ;-)

search form
 
image description image description