As many of us know all too well, smartphones and tablets have changed the web design game forever. Quite simply, these devices have redefined how developers approach things from a design standpoint. Remember the good ol’ days when all a web designer had to worry about was cross-browser compatibility?
With designers of today needing to account for different variables such as resolution and screen size, responsive web design and even more importantly, the layout of a design, has become a crucial counterpart.
Today, we’ll be taking a look at what makes a responsive web layout.
Responsive vs. Adaptive
First of all, let’s address one fundamental question: What the heck is the difference between a responsive and adaptive design? And the answer is…. (drum roll)…. not much. Both aim to adapt to the respective screen at hand, but there’s one that is slightly smoother than the other one, and that would be the responsive design:
This is the case because a responsive design uses relative units to fit every screen. Relative units define the position and the size of your elements using percentages or EMs. This means that – for example – your menu would take up 100% of the screen width no matter what… While on the other hand, adaptive design “adapts” its design to the device or screen size detected using a set of static units.
Even if both methods tend to work just fine, we at CrakRevenue tend to prefer the responsive flowing method. However, if you are building the entire website on your own, we must warn you that responsive usually means more work than adaptive when it comes to coding. Anyway, a truly savvy webmaster might incorporate both philosophies to maximize efficiency.
You wouldn’t let yourself go; so don’t let your site go!
You should be as fit in your pants as your website on any device’s screen. That’s actually the whole idea behind responsive design (your site should be in tip top shape and lookin’ good).
Although, sometimes the theory isn’t practical. Remember the relatives units we were just talking about? Well, let’s imagine that you’ve hooked your computer up to your 110 inch TV…
In doing this, two things are likely to occur:
- Punish Tube’s HD Tour is going to look really, really awesome on that screen.
- Some menus and/or any text content coded in relative units may not be readable because of the excessively large size.
That’s why it’s always better to add a maximum width to your responsive design.
It’s true, we often think and equate “responsive” design with smaller screens. However, let’s not forget that at home, plenty of us are surfing the Internet on our humongous TVs on a near daily basis. Responsive designs must fit ALL screen sizes and adapt its width accordingly.
Why you should be using Breakpoints
We couldn’t talk about the importance of the width of your responsive design without mentioning breakpoints. Breakpoints are the browser widths that have a component attached to alter the display of the layout once the browser is in a predefined range.
In other words, it determines the maximum width an element can have before “breaking” into various elements. Therefore, breakpoints allow the whole page to shrink depending on the size of the screen:
Breakpoints facilitate the navigation on smaller screens because the elements remain at a size most comfortable for finger navigation. That’s why most responsive web layouts will contain at least two breakpoints to accommodate mobile and tablet users.
If you want to apply this concept to your website, the code for your CSS stylesheet can be obtained here using breakpoints suited for the most common devices.
Have a “Mobile-First” Mentality
And here’s where things start to get trendy. You don’t need to be a hipster to know that in the last few years, many webmasters have started saying “Mobile First.”
A Mobile First mentality occurs when the webmaster focuses on designing the mobile layout… first. Then as the variables increase (e.g., as the browser increases in size on other devices…), he focuses on expanding the mobile layout to fit these devices too, whether that be a tablet, laptop, etc.
At the dawn of the mobile revolution (we talked about it last week), this kind of trend is not all that surprising. It’s maybe even kind of smart. But why is it so smart? Well for one, designing for desktop users has always allowed greater design possibilities than mobile would ever allow… We just think it’s easier to begin by designing the best possible website suited for the trickiest smaller device, and then that allows you to build up from there as the enhancement possibilities increase.
Of course, there are so many other principles and philosophies that apply to responsive designs. Here are 9 GIFs that explain responsive design brilliantly. As a matter of fact, we thought these GIFs did such a terrific job at illustrating the point… we even used some of them here today.
With that said… Plan Responsively!
Because there’s just so many devices out there, it’s true that your design may not appear flawless on 100% of them. A good rule of thumb is to analyze your Google Analytics traffic data and make sure that your site looks top notch on at least all the most popular devices that are being used.
To do so, here’s a very useful cheat sheet you can refer to when planning your responsive design. You can also put your site to the test with this convenient free tool: responsivetest.net.
All of this put together should give you a pretty good start on planning your responsive design.
Next, let’s explore the different types of media one can feature on a website, and the caution one must exercise…
Continue to Part 3 – Responsive Media Care