Responsive Web Design is an approach of building a website that responds to user’s behavior and actions based on screen size, platform and orientation. The main goal is to provide the best user experience possible in terms of navigability and readability. There are 3 key elements in responsive design:
What does this mean? It means that as the browser width changes, fluid grids should resize and resposition the content as necessary.”Before this concept became popular, most websites were designed using a fixed width style and centered content, which was an effective method as most computers worked under the same screen resolution. Now that screen resolutions have changed so much, a fixed width design is not the best solution for your designs and therefore liquid layouts are the new answer”, writes WebDesignShock.com.
Tools: Tiny Fluid Grid, Fluid 960 Grid System, Gridless, PXtoEM.com, Columnal CSS Grid System, The 1140px CSS Grid, SimpleGrid, or Golden Grid System
Adjustable images are very important. They are a central aspect of a responsive design. WebDesignShock.com describes “In regular liquid pages, images are simply resized through width and height attributes, which helps to keep the information organized indeed but does not optimize the loading times.
Another method for fitting images into different screen resolutions is using CSS’s overflow property for cropping them dynamically as the containers are modified to fit new environments.
You can also create multiple versions of an image and store them in your server, then you can ask the website to call the fittest image depending on the current screen size, this exercise can be done using a detection feature in tandem along with DOM manipulation”.
Ethan Marcotte gives a thorough overview on creating fluid images using the classic img { max-width: 100%; } code snippet, as well as details to get you started.
Tools: Filament Group’s Responsive Images, Sencha.io Src (formerly Tinysrc), imgSizer.js.
Media queries are a way to serve different CSS rules to different devices and device characteristics. “They allow you tocollectdata about the visitor and utilize it to apply the CSS styles that can provide the best user experience to the visitor”,writes WebDesignShock.com.
“For example, you can have one stylesheet for a large display meanwhile providing different stylesheet for mobile devices with different width’s. Media queries allow designers to create multiple layouts using the same content. To achieve scalability, CSS media queries are used to apply different page styling according to certain parameters, like min-width and orientation”,describes Inspirationfeed.com.
Tools:Respond.js, CSS3-Mediaqueries.js, Modernizr.
Responsive Web Design Examples
To sum up, flexible and responsive web design practices are still in its beginning stages. Nevertheless, they are important because the diversification of browsing devices and viewing methods goes hand in hand with technology progress. Let’s see how these practices will evolve and contribute to the concept of responsive web design.
Do you have any other tip, element, or tool that should be considered in responsive web design approach?