Thus far in the series, we've established the necessity of implementing both responsive and mobile first web design. But what exactly do those terms mean? And, more importantly, how do they affect the way designers and developers need to approach web design?
Responsive Web Design (RWD)
Simply put, a responsive web design is one design that provides an optimal viewing experience across a variety of devices (i.e. desktops, tablets, and smartphones). In other words, instead of having two separate websites (one for desktop and one for mobile), there is one site that adapts accordingly.
How is this achieved? Through the utilization of a fluid layout, CSS3, and media queries. Media queries allow you to automatically detect the resolution of the device viewing the site and set the layout to adjust accordingly. For example, you can set content to be hidden or visible depending on the device.
RWD can also include RESS which stands for "responsive web design + server side components." Because RWD design includes just one site framework and set of assets, such as images, it can pose some challenges. For example, you don't want to force smartphones to load large images that are only appropriate for desktops. By utilizing RESS, however, you can deliver appropriately-sized images to each device type - thus ensuring a faster and more pleasant user experience.
Mobile First
Mobile first isn't new technology so much as it is a new way of thinking.
Prior to the arrival of the smartphone, the PC was the sole device by which people accessed the Internet. Thus, back in the day, worrying about multiple devices was not an issue. Different browsers and monitor resolutions, sure. But, for the most part, a site's design remained the same since it was only being viewed by one type of device.
Then the smartphone crept onto the scene and the initial solution was to design a separate site just for mobile visitors. The mobile version wasn't necessarily the full website offered to desktop users; sometimes it was simply the most-accessed pages of the site. But the line of thinking was, "Design for desktop first, as usual, and then create a second site that incorporates some consideration for mobile users."
The mobile first concept, however, flips that line of thinking on its head. Rather than approaching a site's design with the desktop in mind first, mobile first says, "Design for mobile first and then think about the desktop." And, since mobile first exists within the RWD realm, the idea is to also build one website that accommodates multiple types of devices.
Practically-speaking, this means that the design concept for a website begins with the mobile layout and is built up from there. Then, when the site is coded, RWD techniques are utilized so that certain elements only appear for, or are delivered to, specific devices.
On a side note, one of the secondary - and wonderful! - benefits of the mobile first concept is that it forces you to consider what content is truly relevant. One, because a main consideration is keeping a site's size as small as possible for mobile devices, thus ensuring a quick loading time. But, two, the last thing you want to do is deliver unnecessary content or mark-up to devices that won't see it. (Note: Even if you hide content from a device using media queries, the browser still downloads it, affecting the loading time.)
This is why many RWD websites are simpler in design - even on the desktop version. Which is wonderful, as increased monitor sizes and website widths have lead to designs that are, well, cluttered with nonsense.
RWD and mobile first certainly require quite a huge shift in thinking when it comes to web design. It's almost like learning how to create websites all over again. Yet, at the same time, it's also quite liberating.
Next week I'll share why I've come to love RWD and mobile first so much - from both a design and technical standpoint. In the meantime, what aspects of RWD and/or mobile first do you love? (Or hate?)
