Responsive Web Design (An Intro)

As I delve deeper into frontend web development, I’ve started to think past functionality into layout, scalability, and performance. Actually, this all started when I made the noob move of initially building my project HotPlay as a static desktop website. Fast forward a month later, with the goal of deploying realized the layout did not convert well to mobile.

Not wanting to ever take that tiresome road again and converting it to an application that seamlessly translates across interfaces, I decided to explore Responsive Web Design(RWD).

RWD is an approach to building a website so that it automatically scales its content and elements to match the screen size on which it is viewed. Essentially a web application should respond to the user’s behavior and environment based on screen size, platform, and orientation. Like below…

The approach includes a mix of fluid grids and layouts, flexible images, and the use of CSS media queries. As the user switches from their laptop to iPad, the website should…