Why Website Navigation? Websites are rarely single pages Need to provide visitors an intuitive means of getting around your website Several commonly used navigation patterns used on websites Information Architecture Structure of a system with respect to the way the information is: Organized Labeled Navigation methods provided to access the information Need to consider when…
Viewport <meta name=”viewport” content=”width=device=width,initial-scale=1″> The viewport meta tag : Ensures that the screen width is set to the device width and the content is rendered with this width in mind Designing the websites to be responsive to the size of the viewport Bootstrap grid system Bootstrap grid Designed to be: Responsive Mobile first Fluid –…
Why Responsive Design? Users increasingly accessing websites from a variety of devices of different screen sizes One size fits all no longer a possibility! Adapt to the user’s “viewport” Build it into the core of the site Another term you will often hear people talking about in the context of responsive design is Mobile First….
Bootstrap Container class <div class=”container”>… </div> Container for all the content of the site Fixed width (width depends on screen size) Use as the outermost div to wrap all the site content for the grid to work correctly .container-fluid class allows full width container Bootstrap Rows <div class=”row”> … </div> Divide the page into multiple…
Getting Bootstrap Dowload compiled files from http://getbootstrap.com/ Less and Sass preprocessor source Bootstrap CDN Compiled Bootstrap source Bootstrap files Minified files available Need to include these files within your project Using bootstrap Include these lines in the <head> of your html code <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width,initial-scale=1″> Include the CSS files in the…
Bootstrap overview Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. Front-end framework for faster and easier web development Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Easily…
