10+ Examples of Responsive Websites That Got It Right
Sponsored
How do you make sure your website will look good on every browser and device? Take a look at these responsive web designs and you’ll discover how.
responsive
Multibox Menu
By Mary Lou on
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Tab Styles Inspiration
By Mary Lou on
A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.
Making SVGs Responsive with CSS
By Sara Soueidan on
An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline me
Sticky Table Headers & Columns
By Terry Mun on
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it address
Techniques for Responsive Typography
By Sara Soueidan on
When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it. This in-depth articl
A Collection of Separator Styles
By Mary Lou on
A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-element
Responsive Retina-Ready Menu
By Stéphanie Walter on
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.
Fullscreen Layout with Page Transitions
By Mary Lou on
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for
Responsive Multi-Level Menu
By Mary Lou on
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
Creating Nestable Dynamic Grids
By Larry Botha on
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports.
UI Design Guidelines for Responsive Design
By Kayla Knight on
Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive.
Putting CSS Clip to Work: Expanding Overlay Effect
By Mary Lou on
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
Responsive & Touch-Friendly Audio Player
By Osvaldas Valutis on
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.
Calendario: A Flexible Calendar Plugin
By Mary Lou on
A jQuery calendar plugin for creating flexible calendars.
Gamma Gallery: A Responsive Image Gallery Experiment
By Mary Lou on
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slide
Becoming Device-Agnostic
By Patrick Cox on
Responsive Web Design is more than just adjusting a web experience to different screen sizes. Becoming device-agnostic is an important step for creating future-proof
Elastislide Revised
By Mary Lou on
Elastislide, the responsive image carousel, has been updated and improved. It can be used vertically or horizontally and a minimun number of visible images can be sp