In 2014, for the first time, more users accessed the internet from their mobile devices than desktops. 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, and Kindle — and all screen resolutions must be compatible, too. The practice consists of a mix of flexible grids and layouts, images, and intelligent use of CSS media queries. As the user switches from their laptop to an iPad, the website should automatically switch to accommodate 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:
- Fluid grids that ebb and flow with a device’s screen size
- Flexible images and media that keep content intact on any resolution
- Media queries allow 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:
- Allows websites to reach more people (77% of the world’s population has a mobile device, and 85% of phones sold in 2011 are equipped with a browser)
- Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?)
- Lets designers innovate and take advantage of new technologies (geolocation, touch events, and more)