What Exactly is Responsive Web Design?
Or how the ability to scale things has become more important than ever
Some designers remember the “good old days” when only one version of a website had to be done, for only one type of device. There were still many different browsers to make their work hard, but getting around that seemed way simpler than dealing with mobile browsers. But designers who aren’t so narrow sighted know that learning how to design for mobile is a great advantage nowadays. And that’s exactly what Responsive Web Design (RWB) is all about.
So in the paragraph above we mentioned Responsive Web Design as something which is intertwined with mobile browsing and it’s natural to wonder – how exactly are both connected ? Well Responsive Web Design is the concept that the design should be easily readable and should require less scrolling, zooming or panning for the viewer to get to the information he needs. To do that, RWD uses the following three principles:
Principles of Responsive Web Design
1.Use of Media Queries to switch CSS styles. This basically means that the type of browser is detected by the site, and based on that, a different CSS style sheet is used accordingly. The most important characteristic here is the site width, though there are many others to be kept in mind.
2. Fluid proportion-based grid. Elements in a web page are very meticulously positioned within a grid. In the past , positions of elements were absolute, for example at 200 pixels left, no matter what the screen was. Fluid grids mean that elements are placed related to the size of the screen and the type of the device. The units for relative positions are percentages and Ems.
3. Flexible images. Similar to the concept of the fluid grid, flexible images are images which can be scaled to become smaller or larger depending on the necessities of the current browser and device used for browsing.
The principles above confirm what our title says – scalability has become the key point around Responsive Web Design
So how do we do it ?
As you can easily see, following the above principles, many problems start to come with the implementation and realization of the particular project. Each problem needs to be tackled individually, with the use of tools which are often developed by designers for designers. Certain problems can be solved rather simply, while others may need days of hard work.
The problem with flexible images can sometimes be solved by using SVG graphics. What’s special in this case is that SVG is a vector format, which is supported by most of the mobile and desktop browsers. The benefit is that vector graphics can be resized indefinitely , to whatever size you want, without any noticeable loss. The problem however is that they can be useful only for icons or simple graphics – pictures cannot become vector images.
The image above shows the process of making a vector image out of a raster image, using a vector editor.
Often , designers resort to using icon fonts instead of actual images, since fonts, like vector images , can be resized accordingly without any noticeable loss.
Another crucial moment in RWB is navigation. In classical web design, navigation is usually placed on the top, horizontally, or on the left, vertically. Few to no mobile phones can handle as many items on the navigation menu as a computer screen, so designers have to resort to lots of different techniques to deal with navigation. One of them is to have a button which opens a full screen menu, and other ways include drop downs or sliding menus which feature prominently in other mobile interfaces.
Doing Responsive Web Design is hard, but it definitely pays off with regard to the satisfaction of the user. And in the end , satisfied users are what makes a service or website popular.