Lab#13 responsive web

LAB#13 Responsive Web DesignBy Yaowaluck Promdee, Sumonta Kasemvilas 322432 Web Design Technology

What is “Responsive Web Design” ?

Getting Started

1. Add a viewport

2. Apply simple styling

3. Set your first breakpoint

4. Constrain the maximum width of the design

5. Alter the padding and reduce text size

6. Adapt elements to wide viewport

7. Wrapping up

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en

Content and structure Final Site

Add a viewport

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

Using the meta viewport value width=device-width instructs

the page to match the screen’s width in device independent

pixels. This allows the page to reflow content to match

different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Apply simple styling

Constrain the maximum width of the design

Adjusting Screen Resolution

This shows the the most significant screen sizes, from the smallest to the largest.

Example

http://learn.shayhowe.com/advanced-html-css/responsive-web-design

Relative Fluid Layouts (%)

Set your first breakpoint

Meta Viewport

@media (query) {

/* CSS Rules used when query matches */

}

Apply media queries based on viewport size

@media screen and (min-width: 800px) and (max-width:

1200px) { .test { font-size: 14pt; } }

http://www.designil.com/what-is-responsive-web-design-1.html

Example

attribute Result

min-widthRules applied for any browser width over the value defined in the

query.

max-widthRules applied for any browser width below the value defined in the

query.

min-heightRules applied for any browser height over the value defined in the

query.

max-heightRules applied for any browser height below the value defined in the

query.

orientation=portraitRules applied for any browser where the height is greater than or

equal to the width.

orientation=landscape Rules for any browser where the width is greater than the height.

Media queries

Create a Web page to present

“Search Engine Optimization”

from information provided using HTML5 and

CSS can be Responsive on mobile screen

In hours time

Assignment#13

Q / A?

Email:322432webdesign@gmail.com