Smartphones, tablets and desktops, oh my!
I used to take the train to and from work. It wasn’t a very long ride, but it averaged roughly a half hour along with another 10 or so minutes waiting at the station. During this time, I liked keeping tabs on all things web-related; I would check twitter, my email, RSS feeds and more. Those would then lead me to blog posts, interesting web sites and other useful – sometimes useless, but equally interesting -- information on the web. My weapon of choice usually was my trusty smartphone. Occasionally I would use my tablet, and even more rarely I would scour the web from my laptop. Anything I found useful or insightful I would save for later, either by sending myself an email remind or my save for later service of choice at the time so that I could follow up when I arrived home or another day and a different device. Sometimes I would follow up with it the following day at work on my desktop, or perhaps again on my phone or tablet.
What I am saying is that I never really knew what type of device I really was going to be viewing a web site or blog post or comment on, all I knew was that I wanted information; I wanted it right then and there.
What Does This All Mean?
My point in telling this story is to describe just one scenario that any one of your users may have. We are past a time where people simply check a website from their computer in the comfort of their home sitting at their desk. More people prefer using their smartphones or other mobile devices more each day and it is only going to continue to grow. At the end of 2011 the total of smartphones entering the World per day was about 1.45M devices compared to about 3.6M devices by the end of 2012.
(source: http://www.lukew.com/ff/entry.asp?1728)
If you are reading this and still thinking, "My end users will surely just view my site on desktop. They would never want to see it on their phone!" you will be surely wrong. No one can truly predict what a specific user may use but you would be mistaken if you think they're only going to visit your site from a desktop computer. The truth is that people will access your site from whichever device is convenient for them. If the experience is not a pleasant one for them they will be disappointed and may not be a returning user.
Giving The User What They Want
So, what can you do to make the experience great for your users? You could always make a dedicated mobile site for them! That can be made to cover a range of small-screen devices, but it still is treated as a separate "mobile" site. More often than not, a subset of information found from the original desktop site is presented.
If the user wants to have access to anything and everything on the site, and your content is easily adaptable on smaller screens then why not give them the same site? Well, it isn’t exactly the same site since then they would have to be pinching and zooming and all that to use a desktop site on their phone. That certainly is no fun. What about Responsive? Of course, it's all the rage these days!
Responsive Web Design: Basics
So, what is Responsive Web Design and what can it help with?
Well, the idea is really to serve the same site, with the same URL, to the user regardless of their device. What does change is the visual flow of the content. It adapts, or responds, to the device it is being viewed on to allow for better presentation of the content. This allows it to work on a range of device sizes without the restrictions of designing for a specific size. For instance, let's say the next iPhone comes out and they decide to make it larger. No problem, already done. You no longer have to worry about specific sizes as a whole, the site respond and expand to make use of the larger screen real-estate.
It is important to note, that while this technique can help work across a range current and future devices, that does not mean it is future-proof. A new device or browser version may come out that could still cause problems with the site. For example, a flagship device may have a view size that doesn't present an optimal view of the site. Adjustments can be made to better present the content in that view, even though nothing actually was broken in the new display. Additionally, a browser update or device variation could have unforeseen display issues -- such as a different page zoom when oriented a certain way -- which can cause the site's layout to not be ideal.
What this really means, is that Responsive Web Design is just part of a "Future-friendly" concept. By not designing and developing for a specific device and/or screen size, you free yourself from those constraints. This helps prevent always being forced to make changes when another device comes along.
Responsive isn’t without its limitations. It is more than just a feature or an add-on to a site; it is really a part of your whole mobile and content strategy for a site. If your site content is rigid, with image-based diagrams, highly complex tabular data, or an abundance of large scale imagery, it may not be the right technique for you. However, with some additional planning and strategy, even these types of sites can go responsive.
What's Next?
While Responsive Web Design may not be applicable to everyone, the techniques can be utilized in many cases. Each day more users are accessing sites from a range of devices, no longer simply in front of their desktop computer. They are now browsing from the comfort of their local coffee house, while ride the train to work or while they wait for a dentist appointment. A range of web-connected devices are already available and there are more on the horizon. Regardless of what the best option is, a mobile strategy is a must for any site as we move forward.
This is the first of a # part blog series on Responsive Web Design by Americaneagle.com’s in-house expert, Mike Avello. Tune in next time for another post on responsive design, or subscribe to our RSS to keep updated on all our posts.
About Author
