Responsive Media Query Design

    Webmaster Level: Medium / High

    We like to work with data. We spend a lot of time researching analytic information about our websites. Any web developer who is also interested in this must have noticed how much traffic from mobile devices has increased lately. Over the past year, the percentage of pageviews of our main sites from smartphones and tablets has grown significantly. This means that more and more visitors are using devices with modern browsers that support the latest versions of HTML, CSS and JavaScript. However, the width of the screens of such devices is usually limited to 320 pixels.

    We strive to increase accessibility.of our products, that is, to provide all users with optimal opportunities for working with them. We faced a dilemma: to create special mobile versions of sites or adapt existing sites and new projects for viewing both on desktop computers and on mobile devices. Creating two versions of the site would allow us to optimize each of them for a specific equipment, but using one common site makes it possible to save the canonical URL. This eliminates complex redirects and simplifies the sharing of web addresses. Serviceability is an important factor, so we decided not to create different versions of the pages, but began to think about how to ensure that the following conditions are met:

    1. Clear display of pages on the screen with any resolution;
    2. the ability to view a group of content on any device;
    3. no horizontal scroll bar regardless of window size.


    Responsive Design on Chromebooks Page
    Changes the location of content, navigation and image scale - Chrombuki

    Implementation

    To begin with, semantic markup of content simplifies the re-layout of pages if necessary. Using the stylesheet, we created a rubber layout . This is the first step towards our goal. Instead of the attribute widthfor containers, we began to indicate max-width. The attribute has heightbeen replaced with an attribute min-heightso that large print or multi-line text does not violate the boundaries of the container. To prevent fixed-width images from breaking rubber columns, the following CSS rule applies:

    img {
       max-width: 100%;
    }
    

    A rubber mockup is a good idea, but using this layout imposes some limitations. Fortunately, media queries are now supported by all modern browsers , including IE9 + and browsers of the main part of mobile devices. This allows you to create sites whose display quality in mobile browsers is not reduced, since they are optimized for a particular interface. But first you need to determine what features of smartphones should be taken into account by web servers.

    Viewing Areas

    When is a pixel not a pixel? In the case of a smartphone. Typically, smartphone browsers mimic high-resolution desktop browsers, so pages appear on them like on a monitor screen. That is why a “browse mode" with small text appeared that cannot be read without magnification. The default viewport width in standard Android browsers is 800 pixels, and in iOS browsers is 980 pixels, regardless of the actual number of physical pixels on the screen.

    To switch the browser to a more readable mode, you must use the viewport meta element:


    There are many screen resolutions for mobile devices, but the default device-width reported by browsers is usually around 320 pixels. If the screen width of your mobile device is 640 physical pixels, an image with a width of 320 pixels will be scaled to the entire width of the screen, and twice as many pixels will be used in the processing. Thus, twice the pixel density provides a clearer display on a small screen compared to a desktop computer.

    It is important that if device-width is specified as the value of the width element in the viewport meta tag, this value is updated if the user changes the screen orientation of the smartphone or tablet. In combination with media queries, this function allows you to change the page layout when turning the device:

    @media screen and (min-width:480px) and (max-width:800px) {
      /* Target landscape smartphones, portrait tablets, narrow desktops
      */
    }
    @media screen and (max-width:479px) {
      /* Target portrait smartphones */
    }
    

    Depending on how your site functions and looks on the screens of various devices, you may need to use different control points. You can also use the media query to select a specific orientation without regard to the pixel aspect ratio, if this feature is supported .

    @media all and (orientation: landscape) {
      /* Target device in landscape mode */
    }
    @media all and (orientation: portrait) {
      /* Target device in portrait mode */
    }
    

    Responsive Design on the Google Institute of Culture

    The arrangement of content and the scale of images - Institute of Culture

    Media Query Example

    We recently launched a new version of the About Google page . To make it more convenient for users of devices with small screens, such as tablets and smartphones, to work with this page, in addition to the rubber layout, we added several media queries to its code.

    Instead of focusing on specific screen resolutions, we set a relatively wide range of control points. If the screen resolution is more than 1024 pixels, the page is displayed in its original form on a grid of 12 columns. If it is between 801 and 1024 pixels, a slightly compressed version of the page is displayed thanks to the rubber layout.

    Only with a screen resolution of less than 800 pixels will non-core content be displayed at the bottom of the page:

    @media screen and (max-width: 800px) {
      /* specific CSS */
    }
    

    The latest media query is for smartphones:

    @media screen and (max-width: 479px) {
      /* specific CSS */
    }
    

    From this moment, the downloading of large images stops; blocks of content are placed one above the other. We also added extra spaces between content elements to more clearly delineate sections.

    These simple tricks made it possible to optimize the site for viewing on a variety of types of devices.
    Responsive Google Page Design
    Changing the location of content, deleting a large image - About Google

    Conclusion

    It is important to understand that there is no simple solution that would make sites convenient for viewing on mobile devices and devices with narrow screens. Rubber mockups are good as a starting point, but their use imposes some limitations. Media queries also help optimize sites, but we should not forget that in 25% of cases when visiting sites using computer browsers that do not yet support this technology. The presence of these requests influences the effectiveness of their work. And if the site has a widget that is convenient to use with the mouse, it’s not at all a fact that it will be just as convenient on the touch screen, where it’s more difficult to perform precise actions.

    It is extremely important to start testing in the early stages of development and not to stop it in the future. When you browse your sites on your smartphone or tablet, you don’t waste time. If you can’t test the site on real devices, use the Android SDK or iOS Simulator . Ask friends and colleagues to visit the site from their devices and observe how it works.

    Website optimization for mobile devices will attract even more visitors to it. In addition, the study and development of the best methods for such optimization opens up new opportunities for professional development.

    Other examples of responsive web design at Google:

    Authors: Rupert Breyeni , Edward Jung , Matt Zurrer , Google Webmaster Team.

    Also popular now: