Responsive Design

Design for web and mobile
2017-5-25

The term "Responsive web design", was originally defined by Ethan Marcotte on A List Apart. A responsive layout adapts and changes based on the size and capabilities of the device (desktop, tablet, smartphone, etc...) that a Website is being viewed on. Having a responsive Website is now essential for SEO as it directly impacts search engine placement, and the majority of Websites are now being viewed on mobile devices. Having a responsive Website also makes sense because it eliminates the need for a separate mobile Website. There are many things that need to be considered when creating a responsive Website. Responsive design is not just about page structure and fluid grids. Elements like images and text must also be made flexible to adapt as needed to "fit" the screen the site is being viewed on. Responsive frameworks such as Bootstrap, Foundation and Skeleton can be specifically used to implement responsive "mobile-first" design. Web designers can leverage these responsive frameworks to build responsive Websites quickly, consistently and responsively.

Sizzy

A tool for testing responsive websites crazy-fast. Preview changes..

sizzy.co
Waffle Grid System

A simple flexbox grid system by Lucas Gruwez. This is a minimal CSS..

lucasgruwez.github.io
Hack CSS

Many hackers enjoy the readability of markdown code, some stylings..

hackcss.com
Mydevice.io

Mobile devices, in Responsive Web Design, relate to a core value which..

mydevice.io
Compare CSS Frameworks

A comparison of major responsive design, grid systems and CSS frameworks...

usablica.github.io
Why Use Responsive Frameworks?

Responsive Frameworks Make Frontend Development Easier There is some..

blog.codeply.com
Responsive Web Design

This is the article from Ethan Marcotte, on A List Apart that kicked-off..

alistapart.com
Responsive Design Cheatsheet

Responsive Web Design was first described by Ethan Marcotte. Since..

www.codeply.com
Responsinator

The Responsinator is designed to test responsive websites on different..

www.responsinator.com
Codeply Responsive Design Editor

A frontend editor & responsive test playground for Foundation, Materialize,..

www.codeply.com
Bulma CSS

Bulma is a CSS framework based on Flexbox and built with SASS...

bulma.io
Resizr

Resizr emulates the different screen sizes of many popular devices..

resizr.co
Responsive Design: 6 Bootstrap Alternatives

As a responsive designer, you may want to consider viable alternatives..

blog.codeply.com
Share some love.

All the best in frontend web development & design