Bhanu Ahluwalia January 28th, 2011

Tutorials for Making Your Website Mobile Friendly

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: 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

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.

35 comments

  1. 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.

  2. 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.

  3. 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

  4. 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.

  5. 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.

  6. 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

  7. 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.

  8. 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!

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

  10. 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.

  11. 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.

  12. 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.

  13. 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *