Responsive Design and the “Mobile First” Philosophy
Ah yes. Responsive Design. A term that’s been thrown around so much in the last 5 years we hardly know what it truly means anymore. What is Responsive Design? What is Responsive Development? Does it fall under User Experience or User Interface? Who’s in charge here? Is it the Designer, the UI Engineer, the UX Designer, or the Web Developer?
I can imagine anyone with one of these titles either defending their involvement or cringing from it like it’s a client who throws such industry terms as “API, Plugin, and Wordpress” around like candy. Honestly it’s all of these things. Everyone plays a role, or should I say every roll plays a part? The problem here is that a truly responsive website requires involvement from everyone, while remaining responsive every step of the way. The real kicker? Most employees know every little about each other’s true talents, so what do we do with too many cooks in the kitchen?
That question could be an entire blog series on its own, so I’ll just say this; there is no perfect answer. Responsive Design is highly simplistic on one level, and insanely complicated on another. First we have “Adaptive vs Responsive Design.” What’s the difference?
Ultimately they’re very similar as they both technically qualify as “Responsive”, meaning the websites will respond differently to every device, operating system, monitor, and screen size to ensure the best possible experience for the user. Here’s the difference in HOW they perform.
Adaptive Design vs Responsive Design
Adaptive Design is not as fluid as Responsive Design, which I’ll touch on shortly. With an Adaptive Design, the goal is to cover all the most popular screen sizes with a layout that adapts to those specific sizes very similarly. On an Adaptive website, you might only see the layout change at very specific points such as 320px wide (small mobile), 800px (tablet), 1024px+ (laptop and above), etc. While this can be a clean solution, it’s certainly not as elegant as Responsive. It requires some sacrifices to design and content layout because you only have a couple major sizes to work with requiring drastic changes to each layout while maintaining the integrity of the content.
Responsive Design is where things can really get complicated depending on the content of the website. A fully Responsive website doesn’t only change at specific break points; it’s constantly changing at any size because in general, percentages of the viewable area control the size and layout of everything. If you’ve ever grabbed the edge of your browser and changed the size of it, you’ve probably seen both examples in practice. One site might seemingly “jump” from 1024px wide to 800px wide simply by shrinking the size to 1023px, which is an example of Adaptive design. If you’ve seen one that seemingly “flexed” with the size of the browser no matter how large or small the window is, that’s Responsive.
Which one is better? Neither really, though in almost every case Responsive is a more robust solution because it doesn’t rely on common screen sizes to be effective. Responsive works well at any size. Adaptive also works at every size, but it might look awkward if the size of your device falls right in the middle of a common screen size. A zoomed in mobile version of a site at 700 pixels wide isn’t as friendly as a site that can simply work at 700px wide without forcing a mobile response. On the other side of that proverbial coin, if your site content is fairly clean and simplistic, Adaptive Design is a great solution because it takes much less fine tuning with only a few simple sizes and templates to worry about.
Confused yet? You’re not alone, because the trends in this industry can be long lasting or a flash in the pan, and you find yourself juggling things like Parallax, CSS3 animations and the HTML5 tag. Sure, fancy bells and whistles might make your site look “really cool” at certain sizes, but the more bells and whistles you add, the worse the overall experience gets. Too many and page load times become pretty terrible at all sizes, but trying to figure out alternate solutions to the same content by removing the bells and whistles at smaller sizes requires even more work. See the rabbit hole here?
This is where we come in. Perhaps you’ve noticed the recent update to our 3plains.com site. We decided to put our money where our mouths are, so to speak, so we created a completely Responsive framework, while allowing some content to be Adaptive. However, the main focus of the redesign is part of this blog title: Mobile First.
I approach every project with a Mobile First Philosophy. Nearly 60% of all web traffic is conducted on a mobile device these days, while the number of pages visited and time on those pages remains higher on a desktop browser. This means you really need to cover all your bases when it comes to a Responsive Design. Mobile First means when I’m designing a framework or layout of a new site, I want to make sure all the essential information is the core of the mobile-sized design. My focus is the mobile experience first, and from there I can build out the larger sizes, adding more content, graphics, and UI elements, depending on the size of the viewable area.
Retina and Super AMOLED screens throw a wrench into the business because pixel ratios are completely different across all new HD screens. This is one more argument for a fully Responsive design because Adaptive can be trickier when it comes to pixel ratios.
As you can see, simply “going responsive” in order to be mobile friendly is no easy task. That’s why we’ve worked out all the bugs on our end so you don’t have to. We currently build both Adaptive and Responsive designs or a combination of both. Your project is customized based on your content, the number of templates, and what you desire from a design perspective. We’re happy to answer any questions you have about this process, and explain the pros and cons to both styles of design. No matter which direction you choose for your project, we’re here to help you establish a solid web presence that will please every user of your site, no matter what device they may be using.
Contact us today and let us help you drive your business with a fresh, Responsive Website that will impress your clients!
Posted in: Web Design, Content, Mobile