THE QUICK GUIDE TO RESPONSIVE WEB DESIGN


CaseStudyImage

If your business has its own website, you know how important responsive web design is, and if you don’t, you should! In late 2016, mobile device usage surpassed desktop usage for the first time. With the ever-growing use of mobile devices, we must also consider the tremendous diversity of screen sizes and resolutions. It would be completely impractical, and honestly, I’d question your sanity if you tried to build a different website for all the different variations of devices. Thankfully, responsive web design frees up all the time you’d have spent building your legion of webpages designed to be aesthetically pleasing on a constantly expanding number of platforms and devices.

Now, let’s get into the basics of responsive web design. It’s built around three pillars; Fluid grids, Flexible images, and Media queries. These pillars allow us to build a webpage without a fixed layout. Fluid grids are basically guidelines for your website content to keep things fluid and flowing enhancing the viewer’s experience. Fluid grids shrink and expand the content within them based on the size of the screen being used to view them.

Ever tried to look at a website on your phone that you couldn’t navigate because the images or pop-ups covered your entire screen? That’s the second pillar’s job. Flexible images, can be arranged horizontally and vertically and sized accordingly to accommodate the viewing experience. Together, these two pillars and their arrangement provide the aesthetic of the page. The third pillar, media queries, ties it all together. Media queries identify the device being used and adjust the website accordingly. Pretty neat? The advent of language that allowed for media queries permitted the page to figure out what the physical aspects of the device are that the page is being viewed on. Is the device viewing in landscape or portrait? Is it 480 pixels or 1200 pixels? A media query will answer these questions, allowing the page to respond to the specifications of the device. How does text need to wrap? Do images need to align vertically or more horizontally? The response to the query provides these answers.

Simply put, together the three pillars of responsive web design identify what kind of device is being used for viewing, and adjust the website accordingly for the best viewing experience. Responsive web design, with its digital intelligence, provides us the means to build a single web page that will respond to whatever device it’s being viewed on and look good doing it! Not sure if your website is built with a responsive design? We can help! Contact us and we will be happy to run your website through our responsiveness checklist and let you know how it is doing.

References:

  1. https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/t
  2. https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
  3. http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
  4. https://alistapart.com/article/responsive-web-design
  5. https://techcrunch.com/2016/11/01/mobile-internet-use-passes-desktop-for-the-first-time-study-finds/


Back