2013. The Year of Responsive Design.2013 is marked as the year of Responsive Web Design (RWD). The Web is filled with big brands, galleries and magical examples that media queries demonstrate the glory of responsive design.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012. and is a cornerstone technology of Responsive Web Design.
Centered TextThis was a 2.x challenge that seems a little easier in 3. Just think of all the camera icons you could center.
CSS3To understand the RWD approach, you must first understand CSS - the basis of responsive design. CSS enables the developer to use percentage-based (AKA fluid or proportion-based) grids, CSS3 media queries. The web site then adapts to multiple devices (desktop, laptop, tablet, smartphone) and display conditions such as browser size and screen resolution.
There is still a lot to be said about the Responsive Web.
Responsive TextHave you ever seen large text blocks overflow their container, or get cut-off? One way to handle this is to ensure the text content wraps inside the container. But the more "responsive" way is to scale font-sizes accordingly as the size of the viewing area (viewport) changes. Creators of FitText have mastered this in the form of a plugin.
Responsive ImagesThe sizing "grid" is not the only aspect of responsive design. Making images and media object scale correctly is another consideration for responsive developers. Go ahead and shrink your browser's width to see how the HTML elements and images respond as the width of the viewport changes.