Planning Your Device Agnostic Website
Lately there’s been a lot of buzz in the web design and development community around the concept of responsive and device agnostic websites. With the sudden explosion of discussion around the topic, just about anyone who owns, manages or maintains a business with a web presence wants to get in on the action.
Numbers don’t lie and statistics show that the huge amount of variation in the way people access the internet on a day-to-day basis is not going away. In fact, these numbers will probably only become even more spread across devices with a resolution and standard orientation much different than a desktop computer.
It’s absolutely important to make web content easily accessible to these devices as soon as possible. However, if the transition isn’t well planned and executed, things can become much more complicated and create an end product that delivers a poor user experience across multiple devices.
I’ve put together a checklist of five items that tend to help me think through what I’ll be creating before I start development to ensure I don’t run into any major roadblocks once hours have been put into a project.
Analyze your web traffic by device and plan breakpoints accordingly
As with any site build, it’s always a good idea to consult any existing analytics data to be sure all major user scenarios are considered. Now that there is so much more variety in the way websites are accessed, it’s important to analyze available data for how users are accessing the site.
Depending on the content of the website, breakpoints can generally be set for smartphone portrait, smartphone landscape and tablet portrait. In most cases the full website can be served to a tablet with landscape orientation, just keep in mind the limitations of touch-based browsing. I’ve found that the Skeleton responsive framework offers a great set of breakpoints and tools to help get started on responsive development for the first time.
Plan and design for a fluid layout
The easiest way to insure that your website will work across as many devices as possible is to build fluid layouts and font sizes that can easily expand and collapse when screen size differences are taking place between the breakpoints that have already been set for the site.
If you aren’t familiar with building fluid layouts, the Book Apart No. 4 on Responsive Web Design offers a great guide to getting started. In that book, the author presents a hugely useful formula for calculating percentages and ems: target/context=result. Basically, all you do is divide your desired font size or column width in pixels by container font size and you’ll have the em or percentage value to put in your stylesheet.
Make a decision about whether you will allow users to utilize pinch zoom
Whether or not zooming is allowed on a website is an important consideration. I don’t have a strong belief that allowing or disallowing is the way to go, but either way, it’s important to be sure the user experience doesn’t suffer as a result of this decision.
If the decision is made to limit the maximum scale to 1, be sure fonts are easily readable and any buttons are large enough to be easily pressed without error. On the other hand, if zooming will be allowed be sure to account for fluid elements to give your users a good experience while enlarging site content.
Consider how images will scale and affect page load times
Needless to say, most mobile devices have much slower data connections than desktop devices due to the nature of cellular networks. One of the biggest ways to bog down a mobile user’s connection and take away from the experience of a responsive site is to force the download of unnecessary data.
Often times, this is something to be considered in the design phase because a good, minimal design is the best way to ensure fast page load times. However, in many scenarios images are necessary, so be sure to use them as effectively as possible. I’ve been using Adaptive Image to help out with this dilemma and it’s been great thus far.
Don’t forget about the admin experience for mobile users
Here at Elevated Third, we do the majority of our development work on the Drupal platform which means there’s a good bit of content management going on for any given website we build. At Drupalcon this past March, there was a huge emphasis on making Drupal core more mobile friendly and even converting the core themes to responsive stylesheets, which really got me thinking about the mobile admin experience.
With some tweaks using modules like views and custom theming, it’s possible to build a great admin experience for users on desktop computers and smartphones alike.
One of the most exciting parts of web development is the constant cycle of change. The number of devices on the market is only going to accelerate this and force web developers to push themselves to discover new, creative solutions. With some simple planning and research, responsive development can, and will, be a fantastic opportunity to push the boundaries of what a website can do and be.