Responsive web design -media queries

published on: | by cindy In category: Web Development Tools

With so many devices available in the market today, It goes without saying that designers should think responsiveness. Building sites that can be accessed across devices cannot be stressed enough. It is a good practice to build mobile-first responsive sites then adjust for bigger screens.

Viewport

Viewport defines the area of the screen that the browser can render content to.To achieve responsiveness, we include meta viewport in the head section of the document <meta name="viewport" content="width=device-width, initial-scale=1"> Breakdown of the

  1. The meta name="viewport" instructs the browser how to controls the width and scaling.
  2. The width = device-width sets the width of the page to follow the screen-width of the device
  3. include initial-scale = 1 to establish the 1:1 relationship between CSS pixels and device independent pixels.

Media queries

Media Queries are definitely buddies when talking responsiveness. They enable designers to define breakpoints: The point at which the site adapts according to the best possible layout. Media Queries can be used to check the width and height of the viewport, device width and height, resolution and screen orientation.

Ways to apply media queries

  1. Linked css A separate stylesheet is ideal if there is a need to completely separate different styles for different devices such as desktop, laptop. Linked stylesheet makes many but small http requests. They are referenced as
  2. Embedded with an @import tag. @import rule is expensive and should be avoided for performance reasons.It can prevent stylesheets from being downloaded concurrently negatively impacting performance.However, the rule can be beneficial if a stylesheet depends on another.
    import url("mail.css") only screen and (min-width:500px); 
    This rule should be used sparingly.
  3. Embeded with @media tag

Breakpoints

Many different devices will be available in the market over a period of time so Avoid defining breakpoints based on devices for obvious reasons.Who knows which new device will be in the market tomorrow. It is good practice to find breakpoints using your content as a guide. Furthermore, the content is the important stuff and the design should display the content right?

Width vs device-width

Understanding the difference between media queries based on width and device-width is vital.width is the size of the browser window while device-width is the device actual screen size. In other words, the screen resolution of the device

It is not a good idea to use device-width because:

  1. They don't always match the layout viewport.C a prevent content from adapting on desktops or other devices that allow the window to be resized and this is because the query is based on the actual device size and not the browser window.
  2. Some browsers such as Legacy Android browser may report the wrong value

My thoughts on good design Practices.

  1. Use @import rule sparingly, it can prevent your stylesheets from downloading concurrently
  2. Device-Width dot always match the layout viewport
  3. Don't base your breakpoints on device size instead prioritize content
  4. @media rule makes few big http requests