Design

Tutorials for Making Your Website Mobile Friendly

January 28th, 2011

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.
[fblike]
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)
[fblike]

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.

Tags: ,

35 comments for „Tutorials for Making Your Website Mobile Friendly
  1. Uzair on January 28th, 2011 at 3:01 pm

    Great. Thanks for the tuts.

  2. rafael armstrong on January 28th, 2011 at 3:06 pm

    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.

  3. Stacey on January 28th, 2011 at 3:55 pm

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

  4. Muhammad Ali on January 28th, 2011 at 6:47 pm

    Great work

  5. Greg Givan on January 28th, 2011 at 8:02 pm

    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.

  6. steff on January 28th, 2011 at 10:27 pm

    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

  7. Scott on January 28th, 2011 at 11:05 pm

    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

  8. Seenu on January 29th, 2011 at 7:01 am

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

  9. saravana kumar on January 29th, 2011 at 11:03 am

    Hi,

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

    Thanks much :)

  10. Garthwest Creative on January 29th, 2011 at 6:52 pm

    Great Tips, Thanks for that :)

  11. hp on January 29th, 2011 at 9:44 pm

    Just what I was looking for!!! :)

  12. Rebecca on January 31st, 2011 at 12:30 am

    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.

  13. necokop on January 31st, 2011 at 8:31 am

    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

  14. Catchcolors on February 1st, 2011 at 9:10 am

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

  15. resheen on February 1st, 2011 at 11:42 am

    Great , thanks a lot for sharing.

  16. Tera Benthin on February 2nd, 2011 at 12:00 am

    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.

  17. Michel on February 3rd, 2011 at 2:06 am

    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

  18. jorge on February 4th, 2011 at 8:14 pm

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

  19. Stan on February 9th, 2011 at 1:51 am

    Great blog, keep up the good work

  20. sydneyprincesscruises on February 21st, 2011 at 6:56 am

    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.

  21. Brett Widmann on March 16th, 2011 at 7:44 pm

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

  22. jason @ mobile website design on August 4th, 2011 at 11:20 pm

    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!

  23. Johnny Cole on September 8th, 2011 at 1:31 am

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

  24. Amelia on September 24th, 2011 at 1:20 pm

    It has helped me sooo much, thanks for sharing!

  25. Ethan on November 7th, 2011 at 8:55 pm

    Great resources! Thanks a lot!

  26. marwan on February 21st, 2012 at 7:43 pm

    great info
    thanks

  27. Steff on March 18th, 2012 at 5:29 pm

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

  28. Pitter on May 17th, 2012 at 2:36 am

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

  29. gregory on May 20th, 2012 at 6:53 pm

    Great tutorials, thank you so much.

  30. Mobile Designer on June 11th, 2012 at 5:43 pm

    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.

  31. Alex Hoddle on July 10th, 2012 at 11:28 pm

    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.

  32. Michael Holt on September 24th, 2012 at 10:57 pm

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

  33. duty on May 21st, 2013 at 1:08 pm

    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.

  34. Gary Gile on April 3rd, 2014 at 5:35 pm

    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 on April 3rd, 2014 at 9:19 pm

      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 ;-)