Menu Close

Responsive Web Design

Google challenges responsive best practice with Resizer

This Feb. 29, 2016, article by Benjie Moss is about Google’s new Resizer project, which is an online viewer that lets designers “preview responsive web designs at different breakpoints.” This article taught me three new things about responsive web design:

  1. Google has a Material Design website that is about best design practices
  2. What a breakpoint was in responsive web design
  3. Google’s Resizer and Material Design websites are useful websites to use in this class\

The article points out that a flaw in Google’s new Resizer project and its Material Design website advocates using viewport breakpoints (device breakpoints) instead of content breakpoints, which are the accepted best practice in web design.

Actually, Google has conflicting suggestion on how pick viewpoints. Moss is correct about that both of Google’s Resizer and Material Design websites advocate the viewport breakpoints. However, on Google’s Web Fundamentals website, the webpage How to Choose Breakpoints actually states that viewport breakpoints “can result in a maintenance nightmare.” I wonder if Google knows of this discrepancy?

Vote on Resizer
Image 1: Vote on Breakpoints

If you have strong feelings as to content vs. viewport breakpoints, you can vote on their site (just click on the image below).

Mobile Optimization Guide

The above link will take you to Patrick Sexton’s (updated 12/23/15) Mobile SEO page where you can enter in your website project and test for mobile SEO issues and read about how to optimize your website for mobile devices.

Check for Mobile SEO issues
Image 2: Mobile SEO issues

According to Sexton and his site, “A site is mobile friendly when it …”

  • presents content well on a phone
  • does not need pinching/zooming
  • is easily readable on small screens
  • is easy to navigate with a finger
  • is helpful to someone using a phone
  • is understood properly by Google

Sexton explained that since April 21, 2015, Google has been using mobile friendliness as a search engine ranking signal. If a website is obscured in Google’s search engines, then how the website looks like across different devices becomes a moot point. So this fact was important to know (for more information about mobile SEO, see Google’s Webmaster Central Blog.

I did not know before this article that two other ways existed to make a website mobile—dynamic serving and mobile URLs. According to both the article and Google’s Webmaster Central Blog, responsible design is the preferred method of designing sites for mobile friendliness and SEO optimization.

Under the How to Configure the Viewport section, the following viewport meta tag is recommended for a responsively designed website:

Note:  The above meta tag is what me research the above discrepancy in Benjie Moss’s article about the Resizer project.

Advanced Responsive Design Techniques

Responsive Website header
Image 3: Responsive Design

The topic of this article is self-explanatory. Author, Justin Avery, conducted a survey of his Responsive Design Newsletter, and came up with the following six topics containing information and tips about responsive web design.

Each of the above topics offer great links, information and tips on how to better design responsive websites. However, because I am trying to figure out a new layout for my website, the Layout topic held the most interest for me. In this section are three new and interesting alternatives to traditional webpage layout design. The first example was how to create a simple grid layout with less markup using a float element and the :nth-child() selector. However, what I liked the most was learning about Flexbox and CSS Grid layouts.

According to Avery, Flexbox works best for individual modules where controlling the content layout is important, and the Grid layout works best for a macro level layout and “gives you a great way to describe your layout within your CSS.

For more information about responsive design layouts, see:

Note: Bootstrap just started providing support for Flexbox!

1 Comment

  1. Adrian Leal

    Hey Tania, great post! You went all out on your layout and everything. Your entry on the Google resize is pretty interesting and I’m going to check out some of your links because they might help me with my website. Thanks Tania!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.