I have been watching the rapid growth of mobile smartphones and tablet devices in the past few years. Internet users have become more crafty getting into native applications and using their mobile browsers for access on-the-go. You hardly even need a wifi connection because of the wide distribution of cell towers across the globe.
This also means web developers should grow accustomed to this pattern and start formulating ideas for handling the difference in technology. In this post I want to check out some resources you may use to build unique mobile interfaces. Native applications are much too expensive and time-consuming without already learning the ropes. But creating a separate mobile website or mobile webapp is a whole lot simpler, cheaper, and quicker to launch up online.
If you have never heard of CSS3 media queries I would highly recommend checking out some related articles to understand the terminology. If you have an existing website layout it may be pretty simple to re-size and update based on the browser’s adjusted maximum width value.
So when managing a re-sized environment you can tell CSS to force your page body to appear smaller or even liquid based on percentages. Anyone who isn’t familiar with CSS3 media queries will be able to pick up the basics in just a few minutes of reading. But getting them to work properly on your site could take days or even weeks of tweaking.
Designers who prefer to build from scratch often ridicule the notion of templates. I have found that baseline wireframes provide a very solid ground framework for getting started. But even using a free mobile website template can provide much-needed support and save you time rewriting code from the beginning.
There are so many fantastic templates out on the web, it is tough recommending a specific type because each website is so unique. Think about the needs of your visitors and what they are expecting. You want to provide a seamless experience when transitioning from desktop onto smaller screen devices. Templates provide the glue for important pieces like navigation, touch-enabled elements, and responsive media(images, video, etc).
Do not pick up a template just because it looks nice enough. Make sure you have a plan of action that you can realistically put into motion. A single template sitting on your hard drive won’t mean much if you cannot get it worked into your website in a meaningful fashion.
If you do have a separate mobile template then it would be so much easier to place this in a separate domain or sub-domain. You can think of using something like m.spyrestudios.com which would become an auto-redirect for users visiting on mobile. Obviously the domain should be related to your website – but this isn’t hard once you understand the JavaScript logic behind it all.
As someone who typically uses a mobile browser myself, I actually prefer this method whenever possible. Mobile Safari and other similar browsers allow the zoom feature which is natural and useful for typical websites. But offering a mobile-specific layout with modified content is sometimes easier in order to save the page of unnecessary clutter.
Just remember to always offer the visitor a link back to your original website subdomain. This is important because mobile users can’t force their way back to the main site if the redirect is automatic. But handling the process with JavaScript detection or browser cookies allows for much greater flexibility.
There are probably tens of thousands of articles found online in relation to mobile-centric web design. I know that most creative artists do not have the time to read through even 4 or 5 of these posts. This small list includes recent and very relevant articles on mobile design that may spur new ideas when creating your next website project.
I know this isn’t a complete compilation but I do hope it provides an initial starting point. The mobile web has transformed quickly in recent years, so who knows what could happen looking ahead towards the future. The best solution is keeping yourself informed by reading articles and staying focused on your end goal. Feel free to share any other resources or comments you have in relation to mobile website designs.
