Mobile View of a Website

Viewport :

To display a webpage properly on mobile device, the viewport needs to be configured. Viewport controls the webpage width and scaling on different devices. Web Pages optimized to display well on mobile devices with viewport tag in heading section like,




 <meta name="viewport" content="width=device-width, initial-scale=1">

The attribute initial-scale = 1 instructs browser to establish 1:1 relationship between CSS pixels to device independent pixels which allows the page to display on full landscape width.

Device characteristics like display type, width, orientation and resolution can be handled with media query styles. Media query enable to create responsive experience when the device are small or large. The basic syntax for media query is,

@media (query) {
  /*Apply the  CSS Rules for matching query  */
}

Normally, the responsive web design query attribute are min-width, max-width, min-height, max-height etc. Based on that query attribute the rules applied to browser. Consider this example,

<link rel="stylesheet" media="(max-width:500px)" href="max-500px.css"><link rel="stylesheet" media="(min-width:500px)" href="min-500px.css"><link rel="stylesheet" media="(orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="(orientation:landscape)" href="landscape.css">

   @media (min-width:500px) and (max-width:1000px) {h1{background-color : orange;}topbar{color : Blue;}}

            
           In this, when the browser size is 0px to 500 px, max-500px.css will be applied.
           when the browser is between 500px and 1000px, @media style will be applied.
           when the browser size is greater than 500px only, the min-500px.css will be applied.
            when the width is greater than height, the landscape.css will be applied.
            when the height is greater than width, the portrait.css will be applied.

The important point in responsive design is defining the elements with proportionality opposed to fixed width layout.

For example, Setting the width of 100% on div, ensures that spans the width of viewport irrespective of small or big viewport. In addition, using the relative units allows the browser to render the content without the need for scroll bar on the page based on user zoom level. Define the div as,

div {
  width: 100%;
}

instead to  define width in pixels.

If you simply want more control for font size changes between screen size and pixel densities, use the CSS media queries based on the width and height of the viewport. For example,

@media all {
 /* sets the base font size for all that support media queries */
    html {
        font-size: 18px;
    }
}
@media screen and (min-width: 500px) {
 /* sets a larger base font size for viewports with a minimum width of 500px*/
    html {
        font-size: 15px;
    }
}

Rules for Mobile Viewport

1. Do not use fixed width elements

2. Content and images should not rely on particular viewport width

3. Use Media queries for styling on small and large screens

Responsive Design:

              When you first begin to work with Responsive Design, you need to define your breakpoints at the exact device widths that you are looking to target. Approaching the design mobile first is the best approach for responsive design. It allows you to layout the content that are most important to our customer in a clear and logical way on small screen. Also, it will force you to identify most important content on your site. 

Breakpoints:

        Breakpoints are the points at which your sites content respond to the user with the best possible layout to consume the information. Design the content to fit on a small screen first, then expand the screen until breakpoint becomes necessary. So, the first step is to look good your design on small screen. Then, optimize the breakpoints based on content. Try to  maintain the fewest number of breakpoints possible.

For example,  Consider creating the breakpoint at 500px, you have to create style sheet, one to use when the browser is 500px and below, and the other is wider than 500px. So, the style sheet for this breakpoint is,

<link rel="stylesheet" media="(max-width:500px)" href="small.css">     <link rel="stylesheet" media="(min-width:501px)" href="large.css">

Next step is to, Pick the minor breakpoints for adjusting the margins, increase or decrease font size, or padding the element so that it feel more natural in the layout.  Finally, optimize the content for reading like whenever the width of the text grow or blocks about 10 words, the breakpoints should be considered.