It is easy to slap together a quick fix for a mobile site – simple device detection, some css3 for variable width and maybe some fancy buttons. This does not address the problems with different devices, user experience and accessibility issues. There are some standards that should be followed to make your site look better and be more enjoyable to use. 

Page size and text alternatives

As in the Mobile and Drupal 7 blog post, I wrote that large pages are bandwidth hogs, and that ends up draining the users data limit. Another issue is that large pages make it hard to navigate around; you are constantly scrolling to read the page and the info is not present clearly. The user may miss important information, not understand what you are offering, or get frustrated at the page mechanics. Users disabilities will only be able to access small parts of the page at a time and it will not provide a friendly layout or content size to the user.

 We are in the process of making openconcept.ca mobile friendly. You can check out our mobile site by going to m.openconcept.ca in your browser or using your mobile phone. There are a lot of things to consider when mobilizing a site; Will you have a sub-domain, or will it use the same domain name. Will you use your current theme, or make a new mobile theme? How do you deal with web standards? These are just some of the things that need to be considered. 

Our mobile version of the site uses a sub-domain: m.openconcept.ca. We decided to use this for two reasons: First of all, to have a distinct URL for mobile users and using a 'm.domain' is a common practice. Secondly, it allows us to keep Drupal's caching on. The current modules available don't allow us to share a URL and keep Drupal caching turned on. Using a separate URL also allows us to set a different theme much more easily.

Our current theme had way too many features in it to be functional and efficient on a mobile site. We decided to make a newer, simpler theme to use on mobile devices. This allows us to comply with mobile web standards and make our mobile version easy to use on touch screen devices and as well as scroll-type devices. We stream-lined the material so that the most important information would be presented: Who we are? What we do? Portfolio and our Blog. If the user wanted to go in more depth or see the original site, they could switch to the full version of the site.

Dealing with web standards for mobile devices can be a bit of a pain, but it makes the website more convenient to the user as well as cheaper on their wallet. Data-plans for mobile devices range widely and you don't want to have your site using all of your user's data. Some areas that need to be considered are image sizes, and page sizes. Pictures should be resized and pages should be condensed so that load times are not too slow. There is a validator that can check a website and score it. It also returns a list of possible areas that could be improved on. We are using this to improve sections of our site to be more mobile friendly.