This document discusses responsive web design and provides steps to create responsive websites. It begins by defining responsive web design and listing the initial steps: adding a viewport, applying basic styling, and setting the first breakpoint. It then covers techniques like constraining width, adjusting padding and text size, adapting elements, and using media queries. The document provides examples and references for creating responsive layouts and adjusting designs based on screen size.

1. LAB#13 Responsive Web Design
By Yaowaluck Promdee, Sumonta Kasemvilas 322432 Web Design Technology

2. What is “Responsive Web Design” ?

4. 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

5. Content and structure Final Site

6. 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.

7. Apply simple styling

8. Constrain the maximum width of the design

9. Adjusting Screen Resolution
This shows the the most significant screen
sizes, from the smallest to the largest.

10. Relative Fluid Layouts (%)
Example
http://learn.shayhowe.com/advanced-html-css/responsive-web-design

11. Set your first breakpoint

12. Meta Viewport

13. Apply media queries based on viewport size
@media (query) {
/* CSS Rules used when query matches */
}
Example
@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

14. Media queries
attribute Result
min-width
Rules applied for any browser width over the value defined in the
query.
max-width
Rules applied for any browser width below the value defined in the
query.
min-height
Rules applied for any browser height over the value defined in the
query.
max-height
Rules applied for any browser height below the value defined in the
query.
orientation=portrait
Rules 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.

15. Assignment#13
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

16. Q / A?
Email:322432webdesign@gmail.com