Tutorials for Making Your Website Mobile Friendly
- By Bhanu Ahluwalia
- Posted in How To's, TUTORIAL
- 33 comments
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:
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:
Tutorial: Optimizing Your Website for Mobile Devices
Here you can learn how to make your own site mobile friendly:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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):
Designing a Mobile Stylesheet for your Website
This article explains what you need to consider when creating your mobile site design:
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 website mobile compatible
Go through this in-depth article for geting a complete knowledge of making your site 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:
10 Tips for New iPhone Developers
Here you can find a wide variety of tips on usability guidelines, testing/debugging, pitfalls and performance issues:
Basics Behind Building Web Pages for the iPhone
This article talks about the basics of designing sites for smartphones like 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:
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 website mobile compatible
All you need to know about mobile compatible websites:
(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.
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!
jason @ mobile website design, 04 August 2011
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.