WEBPAGES:
Essentially, a web page consists of containers and elements. Elements are images, video, blocks of text, etc. Containers are used to position these elements on the page. The dimensions and positions of both can be controlled in various ways; fixed: such as by number of pixels, or relative: such as by %. The entire page is the largest container and containers can be inside containers, with elements inside them.
RESPONSIVE SITES:
A Responsive site (mobile friendly) detects the size of the screen and tells the browser to refer to an entirely different set of rules depending on the viewport size (computer, tablet or phone). One set of rules will tell three containers or elements to be a certain width and sit next to each other. Another will tell them to be a different size and sit on top of each other.
HEADERS
The Header of a website is a container that usually holds the logo and the navigation element, and it is usually at the top of the page. In older days, the header stayed at the top and when you scrolled down it disappeared and you had to scroll back up to the top to see the logo again or use the navigation element (links) to get to other pages. Nowadays we almost always see the header fixed to the top of the page – it stays there as the rest of the page scrolls and you can always see the logo and click the links.
HAMBURGER MENUS
A Responsive site usually tells the navigation links to sit next to each other when the site is viewed on a larger screen, but when it detects a small screen it says, “Hey – not enough room, let’s make the whole thing disappear and replace it with a ‘Hamburger Menu’ (the three horizontal lines you’ll see), and when that is clicked or touched, we’ll make a vertical version of the navigation links slide out from the side and be clickable”.
Hope this makes sense and is helpful to know. Email us at hello@21thirteen.com or call us at 646 808 0249 to learn more, or for help in building a mobile friendly site.
