Responsive design is a web design approach aimed at crafting websites to provide the best experience available for the device being used to browser a website. This tailors the experiences for reading and navigating, reducing the need for resizing, panning, and scrolling on small screens.
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical.
A typical website design with responsive capabilities is designed using CSS3 media queries, which allow specific CSS styles to be applied at different browser widths. This allow you create different designs for differently-sized screens.
A good place to start is with any website and resize your browser window. Watch how the design adapts to the width of your browser as your decrease it in size.
Responsive Web design requires a more abstract way of thinking.
Time.com uses the CSS3 media queries approach with their latest design by targeting specific widths of the browser in order to display a different design for specific devices like tablets and phones.
As the window decreases in width, we see the CSS3 media queries I mentioned earlier coming into effect. At various breakpoints (or points in which our CSS3 media queries change), our design retains a fluid like feel and adjusts itself based on the media query that is being triggered. The smaller the width, the more the website is optimized for a mobile device such as an iPhone or an Android device.
A great way to explore responsive design further is to start testing each site you visit. This will become a natural habit after a while. Some sites will opt to use a different way of displaying their websites on different devices. Google, for example, uses completely different stylesheets depending on the device the user visits their website with. This method, which requires some additional coding techniques outside of CSS, is used with a lot of larger websites. Google, Amazon, Yahoo, etc…
Responsive Web Design Testing Tool
This tool has been built to help with testing your responsive websites while you design and build them.
You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.