Responsive Designs

 

What is Responsive Web Design

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user's actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, NO MATTER HOW MANY DEVICES ARE RELEASED ON THE FUTURE, RESPONSIVE WEBSITES WILL ALWAYS BE ABLE TO PROVIDE A PROPER RESPONSE.
But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. This concept requires a thoughtful process where the designers and developers work together to determine how to redistribute the elements according to resolution, which elements may be eliminated and how to maintain the concept while simplifying the structure.
According to many internet gurus, the future of the internet will rely on mobile devices (tablets, smart phones, portable consoles) rather than desktops and laptops. More and more people are starting to acquire cutting edge technologies and the tablets' battle is on, so it's indispensable that you start seeing these devices as an important part of your audience. But this increment on the amount of mobile devices does not mean that desktops are doomed, in fact we can see how everyday larger monitors are released, and these are highly appreciated by designers, visual artists and producers, thus at least for them, a tablet will never be able to replace a desktop computer.

Examples of Responsive Designs

Examples

Responsive Designs

Preview

Examples

Responsive Designs

Preview

Key Elements of Responsive Web Design

  • A flexible foundation (fluid grid) – Flexible Layouts
  • Flexible content – ImageVidéos
  • Media queries – CSS 3
Flexible Layouts:
First step considered for responsive design is flexible layout. As the browser width changes, fluid grids will resize and reposition the content as necessary. Tiny Fluid Grid is a great tool for creating flood grids and you must try. This tool allow you to make grids up to 1200px maximum width.
Flexible Images/Videos:
Adjusting images according to the different screen widths or devices is another important aspect of responsive web design and there are a couple of ways you can achieve this. Completely resize the image on the fly Dynamically crop the image Combine both methods so the image resize at certain size, the image just shrinks and it get cropped when it get below specific size.
Media Queries:
In CSS2 you was able to apply specific style sheet for specific media type like screen or print. In CSS3, W3C made it more efficient by adding media queries made it as part of the CSS3 specification. It is the most excising feature of responsive web design. Media Queries behave similar to conditional comments. For example, you have one style sheet for large screen or display and different style sheet for mobile devices with specific width's. Media queries allow designers to create multiple layouts using the same content.