Please enable JavaScript.
Coggle requires JavaScript to display documents.
Responsive Web Design (RWD) (RWD Grid Point (Building a Responsive Grid…
Responsive Web Design (RWD)
Introduction To RWD
only use in HTML and CSS
Not a program or Javascript
RWD makes website looks good in design
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device
RWD Viewport
What is Viewport?
The viewport is the user's visible area of a web page.
viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser
Size Contain Of Viewport
Do NOT use large fixed width elements
Do NOT let the content rely on a particular viewport width to render wel
Use CSS media queries to apply different styling for small and large screens
RWD Grid Point
Many web pages are based on a grid-view, which means that the page is divided into columns
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
Building a Responsive Grid-View
First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
to use a responsive grid-view with 12 columns, to have more control over the web page.
calculate the percentage for one column: 100% / 12 columns = 8.33%.
make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:
some columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:
We also want to add some styles and colors to make it look better
Responsive Web Design - Media Queries
Add a Breakpoint
Add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
Another Breakdown
We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px
It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint
Typical Device Breakpoints
ard to create an exact breakpoint for each device. To keep things simple you could target five groups: 1.Extra small device. 2.Small Device. 3.Medium device. 4. Large Device. 5. Extra Large Device
Orientation: Portrait / Landscape
To change layout of a page depending on the orientation of the browser.
You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation
Hide Elements With Media Queries
Use "display: none " as command
Change Font Size With Media Queries
Use div.example {font-size: 30px} as exampleof command
Always Design for Mobile First
Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
means that we must make some changes in our CSS.
changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First