With the proliferation of many devices with access to the internet, web designers have been playing catchup to make sure websites look good on all devices. Gone were the days where web designers would only design for the desktop. Today’s designers have to account for big screens, tablets as well as smart phones.
The design has to be flexible, fluid and accessible to all. This means objects, images and videos are fluid increasing and decreasing in size as the screen expands and retracts. In some cases, certain objects are turned off or displayed off screen. Responsive design wouldn’t be possible without the help of CSS 3, in particular the use of media queries.
Media queries allow designers to specify certain objects to behave a certain way based on the screen resolution. For example, an image that is flexible will have a CSS element such as this, img { max-width: 100% }. As the screen size increases and decreases, the images will shrink and grow, always maintaining a width of 100%.
Another trick is to use flexible layouts. In the past, most layouts would use fixed widths such as #page { width: 760px; }. In responsive designs, layouts would often use percentages instead of fixed number of pixels. In this case, the element would look like this, #page { width: 65%; }.
Another trick is to turning off elements on certain resolutions. For example, if you were to turn off the sidebar on small screens, you would set the display to none like this, @media (max-width: 480px) { #sidebar { display: none; } }. Or you can also set the element to be completely off screen such as this, @media (max-width: 480px) { #sidebar { margin-left: -3000px; } }.
If you want to learn how to design responsive websites, there are many tutorials out there. Most importantly, learn how to code in CSS, learn how to use media queries, learn how to manipulate elements within CSS. There are many responsive sites out there. In technology, Sony, Squarespace, Microsoft and Twitter Bootstrap come to mind. In e-Commerce, there’s Indochino, Skinny Ties, eBags, Garmin and PureCostumes are great examples.
Feel free to look around the web and look for ideas and inspirations.