| title | authors | intro | types | categories | published | updated | status | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
How to build Mobile websites |
|
With the explosion of [devices that access website... |
|
|
2012/01/26 12:00:00 |
2012/01/26 13:00:00 |
archived |
With the explosion of devices that access websites, it's becoming more important that your website works well on mobile devices. I found the process of learning how to create websites that worked on mobile devices confusing so I created the list below to help anyone that is new to this field of web development. As always if you have any good links to tutorials on any of the 5 topics below please comment and I'll update the post accordingly.
By using the viewport tag you can tell some mobile browsers how to scale and zoom your website. You can often improve the default reading experience of your website just by adding the following meta tag:
This article from Gil Think explains the Tag in a very straight forward way.
Media Queries allow you to serve different CSS rules depending on the way your site is being viewed. For example if your site is being viewed on a mobile phone you can write CSS specifically for a screen with a 320px screen width.
The great thing about Media Queries is that you can tailor your main site to look great across various screen resolutions and widths. This article from my counter part in Belgium does a good job of explaining Media Queries and responsive design.
Touch is tricky as there are a number of different implementations, Ted Johnson shares a technique for handling touch events across Android, iOS and IE10 over on the IEBlog.
On the Clarity consulting's blog they discuss touch more generally along with some sample code that I found really useful.
There are a number of frameworks that can help you build web applications for mobile. Whilst many of these frameworks are commonly used to create standalone applications, rather than enhancing existing websites, familiarising yourself with how they deal with screen resolutions and touch can teach you how to build better websites that work well on mobile.
- jQuery Mobile - http://jquerymobile.com
- MooTools Mobile - http://mootools.net/forge/p/mobile
- M-Project - http://www.the-m-project.org
- Sencha Touch - http://www.sencha.com/products/touch
- jQTouch - http://jqtouch.com
- NimbleKit - http://www.nimblekit.com/index.php
If you want to know what the differences are between IE9 on the desktop and IE9 on mobile I wrote a post a few months ago that lists them all out.