History of Responsive Web Design
What is Responsive Web Design?
Coined by Ethan Marcotte in May 2010, responsive web design (RWD) is idea that “[website] design and development should respond to the user’s behavior and environment based on screen size, platform and orientation” (Smashing Magazine).
What Came Before RWD?
Until rather recently, most people’s desktop screens were 800 or 1024 pixels wide, so websites were made for those two sizes. Widths of columns and images were set in the code and didn’t change when viewed on a different screen size.
Then people could choose from multiple different screen sizes, and the fixed-width layout didn’t work as well anymore. In the early 2000s, people created ‘fluid design’ and ‘liquid layout’ to fix the problems with fixed-width design (that is, websites being too wide or not wide enough).
Fluid design and liquid layouts used different ways to define widths of text and images instead of with pixels. For example, an image might be 15 ems wide (ems are the length of an ‘m’ in a particular typeface). Ems are difficult to use because their size changes based on users’ settings. Another way to set widths is to use percentages. Percentages allow the website to have the exact same layout on every screen size. For example, a column that is 25% of the screen width will always be 25% of the screen width. If a webpage has another column that is 73% and a 2% gap between them, that page won’t have extra space on either size of both columns. The problem with that, though, is those webpages have the same layout for mobile devices, making them near impossible to read and navigate without zooming in and out.
Why was RWD Created?
When mobile devices were first able to access ‘real’ webpages, mobile users had to put in quite a bit of effort to navigate websites optimized for large screens. Users had to pinch and zoom and scroll. Every time they did anything, they had to wait extraordinarily long times for webpages to load. Even worse was when their fingers, much larger than a cursor, accidentally pressed the wrong button, and they had to go back and wait for the previous page to load before trying again. At the time, mobile web browsing sometimes wasn’t worth the effort. But then, carrying around a laptop everywhere wasn’t worth the effort either. Mobile users suffered.
In his paper in A List Apart, Marcotte suggested that the only way to move forward in web design was to respond to the massive increase in mobile users by using responsive web design.
RWD combines flexible widths, flexible images and media queries, which are “simple filters that can be applied to CSS styles” (Google Developers). On their own, they aren’t revolutionary, but together they are a powerful tool that benefits users.
Why Use RWD?
Users’ devices and screen sizes are becoming more and more diverse, and companies that want to be successful in this diverse web environment must optimize their websites for all devices—not for just mobile or just desktop.
RWD websites use one URL and one set of code, so you don’t have to worry about multiple URLs or designing multiple sites. Users on tablets, laptops and smartphones all see the same site.
Because RWD websites use one URL and one set of code, they are cost effective. You only have to design and maintain one website, reducing your web costs so you can focus on other things.
RWD websites also provide a high-quality, seamless experience for users on multiple devices because there is only one URL and only one set of code.
RWD websites recognize the device a user is using and respond accordingly. They automatically reorient and organize information differently for each device, ensuring that your website has the right design for every device.
Source: SyneCore Tech
Want your website to be responsive? Call us at 016853851 or send us an email info@transfer.exsite.info.