excResponsive web design has lately been the talk of the town.
By applying responsive web design methods we basically don’t need to make a separate mobile version of a website anymore.
Instead we’re designing it to be fully responsive from the start.
So, what is responsive web design?
A website is responsive if it has the capacity to adapt its page layouts (design) depending on the browsing environment (i.e. screen resolution– desktop, laptop, tablet, smartphone), without causing major damage to the aspect and in order to offer users an excellent navigation experience.
The Responsive Web Design concept was introduced in 2010 by Ethan Marcotte in his A List Apart article and has gained popularity in the last 2 years.
Responsive web design is based on 3 essential elements:
–Fluid guides, adapting to a wide pallet of resolutions. As the resolution changes, elements on the page are resizing and rearranging
–Flexible images changing height or width depending on the grid
What does creating a responsive design imply?
Fluid guides have by now inevitably taken the place of fixed guides thanks to the multitude of resolutions existing at the moment. These are based on the calculus of proportions and may change width and height depending on the resolutions. Sizes are not measured in pixels anymore but rather in percentages and relative units.
Flexible images may change sizes based on device resolution and grid size. A number of sizes for each picture should be saved on site and then the size adequate to the resolution should be loaded.
Media queries represent an efficient means to load various CSS properties depending on resolution. The site automatically detects the device type and resolution and loads the corresponding CSS properties.
What does creating a responsive design imply as a working method?
-The time allocated to design creation and implementation increases.
-Three to five layout versions are created instead of one and each of them must be implemented.
-Instead of having a single (i.e. one sized) image for a certain place in the layout, you have the same image in a number of sizes, uploaded on the server, from where the appropriate size based on resolution will be uploaded.
-Accessibility—one functional site version for all devices! No more specialized mobile versions, requiring separate development and thus reduced costs.
-Simple sharing – one URL for everybody!
-Good navigational experience—since it can adapt to the resolution, there are no more issues with navigational errors, horizontal scrolls and buttons too small to be pushed, etc.
-Costs—workload increases and with it the costs of work.
-Compatibility—incompatibilities between browsers or errors of display are more likely to occur.
Finally, here are some useful web resources on responsive design:
-Mashable offers a a guide on best practices in responsive design.
-A collection of guidelines and tutorials in responsive design can be found in Smashing Magazine.
-Awwwards even features examples of some of the best responsive sites!