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.
Managing Responsive Queries
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.
Building from Templates
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.
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.
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.
- Why Your Business Needs A Responsive Website Before 2014
- Creating Mobile Websites: Prepare Your Business for the Mobile Takeover
- SEO For Responsive Websites
- Building Smartphone-Optimized Websites(by Google)
- When Responsive Design is Not an Option: a Checklist for Optimizing Your Mobile Site
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.
Author: Jake Rocheleau
Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau