Editing Responsive design (section)

= Setting Up a Web Page to be responsive =


==meta tag: no zoom out==

Phone browsers: don’t just display the page at 100 percent. Instead, phone browsers zoom out to fit the page on screen. 

The exact amount they zoom out varies from phone to phone. Safari on the iPhone, for example, acts like the screen is really 980 pixels wide, so it shrinks the page down to fit within 980 pixels.

This behavior of mobile browsers works well for the majority of sites, but not so well with a responsive web design. '''Because responsive sites are intended to look good on phones, you don’t want the display to zoom out.'''

there’s a simple way to override this behavior of mobile browsers. 

Simply add the following code to the <code>&lt;head&gt;</code>

<code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;</code>

HTML meta tags provide extra information about the page’s content and can give browsers extra instructions about how to display the page. In this case, the viewport refers to the browser screen, and the content attribute sets the width of the browser to the width of the phone


==Approaches:Desktop or Mobile first or Desktop & Mobile in parallel ==

'''Desktop first'''

Design your site with the desktop in mind. Throw in all the columns you want. Polish and finalize the design so it looks great on a large monitor. This becomes your base CSS design. 

This becomes the base, the default. 

Then you add media queries for tablets and phones, which tweak the base desktop design, by removing columns, making headline text smaller, reducing borders and padding, etc. 


'''Mobile first:''' 

its the inverse of Desktop first. You designing first for mobile browsers. 

The basic small-screen styles is the default CSS. 

From it, make adjustments inside media queries for tablets and desktops, by adding columns larger headings, padding &amp; border, showing more content.

'''Desktop & Mobile in parallel'''

You design the website, taking care to see at every step, what the HTML elements and CSS rules do it in both large and small screen

----