How to make a mobile website

There are several techniques to making a mobile version of your website, each has advantages and disadvantages. Today we want to briefly share with you two techniques we use for mobile web design. Both of the below techniques for mobile site design are extremely useful, however it is really down to the specific requirements of the mobile site as to which technique you would implement.

1. Mobile Specific Website

Creating a mobile specific website involves creating a completely new version of your website tailored for mobile devices. When a user visits your site on a mobile device they are directed to the mobile specific site.

As creating a new site from scratch can be a lot of work you can utilise a mobile framework to help get the job done.
Two such frameworks are jQuery mobile and Sencha Touch.

Both of these frameworks drastically reduce the development time of building a new mobile site. We were able to create a simple mobile version of 20/21 using jQuery mobile within a reasonable timeframe.

These frameworks also help to build great mobile web apps, one such example is Untappd which was built by Tim Mather and Greg Avola using jQuery mobile. For those beer lovers out there untappd is a great mobile app for keeping track of what beers you've tried, following what beers your friends are drinking and discovering new beers.

2. Responsive web design

Responsive design involves changing the layout of a website to make it easier to read on a mobile device. Compared to building a mobile specific website you don't need to build anything from scratch, you merely write some new rules to slightly alter the layout and sizing of elements so they better fit on a mobile screen.

How is this done? The best way is with CSS3 media queries. Using media queries is a great way to very quickly modify your website. This method may not be suited for all websites. When using media queries all you need to do is specify a new rule that gets implemented when the browser hits a certain size. For instance a media query may be called when the screen size is less than 640px wide.

For a great example of responsive design in action check out the French Earth Hour website, resize your browser window to see the site responding to the available space.

Or to see an example of some of our work, visit www.2021.com.au or www.cargocycles.com.au on your mobile device.