Responsive Web Design

Mobile First Approach


In 2014, for the first time more users accessed the internet from their mobile devices than desktop. That is why almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. One may also have to consider the settings on their devices; if they have a VPN for iOS on their iPad, for example, the website should not block the user’s access to the page. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Responsive Web Design (RWD)
Responsive Web Design is a term coined by Ethan Marcotte that articulates how to adapt a website’s layout for multiple screen resolutions. Creating a responsive web design utilizes:
1. Fluid grids that ebb and flow with a devices’ screen size
2. Flexible images and media that keep content intact on any resolution
3. Media queries allowing designs to adapt by establishing dimension breakpoints

Mobile First
Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. Starting with mobile first:
1. Allows websites to reach more people (77% of the world’s population has a mobile device, 85% of phones sold in 2011 equipped with browser)
2. Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?)
3. Lets designers innovate and take advantage of new technologies (geolocation, touch events and more)