In our day and age, when about 70% of people browse the internet via mobile devices of various sizes, it’s almost incomprehensible to create a website that is not responsive. I strongly believe, and the facts are supporting my belief, that responsiveness is going to become a standard in web design very soon. If you want to stay competitive as a webdesigner, or if you are just starting your career, you absolutely must learn the basics of responsive design.

Responsive Design Techniques

CSS Transitions and Media Queries
Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

 

Responsive Navigation Menus:
Convert a Menu to a Dropdown for Small Screens
Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow. When the user is on a small screen and clicks the dropdown, they’ll get an interface to select an option that is nice and big and easy to choose. Obviously much better than displaying a tiny link.

 

Responsive Images, Responsive Videos Link

Fluid Images
Fluid images are a central aspect of a responsive design. This article by Ethan Marcotte gives a thorough overview on creating them using the classic img { max-width: 100%; } code snippet, as well as details to get you started.