Responsive design & mobile first

responsive design, l'Infographie

Since Ethan Marcotte published his seminal article on Responsive Web Design there’s been an explosion of articles related to this topic. The guy truly made a good work also publishing a book about it, deepening on what many consider, since then, should be a standard for web design. If you have no idea of what this thing is, this Responsive Web Design thing, but simultaneously you’ve been thinking and working on a way for your web projects to be viewable in multiple devices, then you are instinctively working on responsive web design. Here’s a little insight: The main objective of responsive web design is the inherent flexibility a website can acquire through the application of fluid grids, images and CSS Media Queries to adapt the content and design of the website to any device, even if it is a desktop computer, a laptop, an iPad or a Smartphone. You do not have to create a mobile version of your website; you do not have to create an application for every popular device on earth. Just one and it will adapt to everything.

The example below shows the responsive website www.cohenspire.com, and this is how we see a responsive website with different screen resolutions. The top of the image shows the website at a resolution of 1680×1050.

Conseils en responsive design pour concevoir son site internet selon la plateforme. Adapter son site sur un smartphone ou Tablette tactile.

In 2000, The FWA (a popular website awards program) gave their prestigious Site of the Year award to Look and Feel New Media, shown below. Visit the site for some context of what I’ll be discussing, but turn down your speakers or headphones because it has background music.

The Look and Feel New Media site is a simple Flash website by today’s standards, but it was state of the art back when Flash was an innovative web technology.

Now, thirteen years later, with the capabilities of HTML5 and CSS3 standards, Flash is now on the way to extinction in the sense of, at the very least, modern web design and development.