There are lots of different ways to build mobile web sites. What I have pulled together is a collection of techniques that our teams use to allow your web site to look awesome on mobile devices. This is important due to the rapidly increasing demand for web sites optimized for the growing number of wireless devices.
The Mobile Web is a Many Screen World
The mobile web is not just Smartphones like iPhone and Android phones. The mobile web is anything that can connect to a web site. The term “mobile web” is now a reference term for multi-screen solutions. This means that Tablets, Laptops and even TVs are part of the mobile web. If it has a screen, it is likely it has a Web browser and will view your site.
Your Web site analytics are showing you how many different devices are connecting to your Web site. Google will breakdown PC and Mobile. Dig into the Mobile analytics and you will see all of the different screens (phones, phablets, tablets, etc.).
Mobile Web Templates for Content Management Service
Many of us use CMS (Content Management Service) solutions to deliver content to Web sites. This will likely come as no surprise, but many of the leading Web CMS solutions now have templates that will deploy a mobile web template to ensure that the correct experience is deployed to a device.
WordPress, a tool used by many Web sites, has two ways of managing Mobile content. The first is through Plugins. The popular WordPress Jetpack plugin has a “Mobile Theme” that only requires you to activate the theme and your site will re-structure the content for phones and tablets. The second method is to implement a responsive theme. The goal of a responsive theme is to ensure that your site looks awesome for any screen. Check outwww.visualizetheweb.com as an example of a responsive WordPress template in action.
Responsive Design for Mobile Web
A big trend is the adaption of Responsive Design. The goal of a responsive site is to create one web page that will dynamically resize to the device and screen size viewing the content. Check out www.mashable.com as a good example of responsive design.
The biggest challenge for Responsive Design is a lack of design tools. Adobe, as you might expect, has two tools you can use: EDGE Reflow and Dreamweaver CC. Both tools will give you the capability to create Responsive designs for your Web site without having to write code.
Leveraging Mobile Web Frameworks
Sometimes you need to go the functions of a template or tool and need to edit the code. Fortunately there are some great frameworks you can leverage to accelerate the deployment of your mobile web site. Here is a selection of frameworks you can use (it is not complete and I encourage you to share any additional frameworks in the comments below):
- jQuery Mobile – http://jquerymobile.com/
- Sencha Touch – http://www.sencha.com/products/touch
- Bootstrap – http://getbootstrap.com/
- The M Project – http://www.the-m-project.org/
- Mobilize.js – http://mobilizejs.com/
Working in the details
The goal of a framework is to get you up and running very quickly. But, there are times when you need to get down into the details of a specific mobile web browser (I’m looking at you, Mobile Safari).
One area that receives a lot of focus is creating Retina (high-definition) images. A good library to use to manage retina images in your code is Retina.js ().
A great list of the changes in iOS7 for Mobile Safari is here:http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Please add any techniques you use in the comments below.