Chapter 5 : Responsive Web Design Flashcards
What does Responsive Web Design do?
- Makes your web page look good on all devices
What language that Responsive Web Design uses ? ( 2 )
- HTML
- CSS
- Not a program or JavaScript
What device can the web pages be viewed? ( 3 )
- Desktops
- Tablets
- Phones
What is the rules for Responsive Web Design? ( 2 )
- Web page should look good, and be easy to use, regardless of the device
- The content shouldn’t leave out information to fit smaller devices, but rather adapt its content to fit any device
- 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
List out things that made a Responsive Web Design ( 5 )
- Viewport
- Media Queries
- Images / Videos
- Grid View
- Framework
What is a viewport?
- User’s visible area of the web page
What factors that the viewport varies?
- Devices
When is common for web pages to have a static design and a fixed size?
- Before the invention of Mobile Phones and Tablets
Which HTML version introduced a method to let web designers to take control over the viewport, through the <meta></meta> tag?
- HTML5
How to include viewport to HTML?
<meta></meta>
- meta viewport - Gives the browser instructions on how to control the page’s dimensions and scaling
- width=device-width - Sets the width of the page to follow the screen-width
- initial-scale = 1.0 - Sets the initial zoom level when the page is first loaded by the browser
What is the result for users scrolling websites horizontally?
- Poor User Experience
List out 3 additional rules to follow for setting up viewport
- Do not use large fixed width elements
- Do not let the content rely on a particular viewport width to render well
- Use CSS media queries to apply different styling for small and large screens
What does Gried View mean?
- The page is divided into columns
How many columns and total width that a responsive grid view often have?
- 12 columns
- 100%
What is the percentage of each column when the width is 100%?
- 100% / 12 columns = 8.33%
- After calculating each column’s width, we can create col-{num} class then add it inside div element
.col-3 {width: 25%}
.col-9 {width: 75%}
< div >
< div class=”col-3”>< /div >
< div class=”col-9”>< /div >
< /div >
What framework popularized the 12 column grid? ( 2 )
- Bootstrap
- Foundation
When is Media Query introduced?
- CSS technique introduced in CSS3
What does Media Query do?
- Include a block of CSS properties only if a certain condition is true
Try writing code snippet for if the device width is smaller than 500px, the background color will change to lightblue
@media only screen and (max-width: 500px)
{
body
{
background-color: lightblue;
}
}
What does Mobile First mean in CSS?
- Means designing for mobile before designing for desktop or any other device
What is the different setting img and video width and max-width property to 100%
- If the width property is set to 100%, the image will be responsive and scale up and down
- If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larer than its original size
What is a framework?
- Standardized set of concepts, practices and criteria for dealing with a common type of problem
- Can be used as a reference to help us approach and resolve new problems of a similar nature
- There are many framework and it was free and easy to use
List out 3 examples for Frameworks
- Bootstrap
- Foundation 3
- Grids Systems
What is the advantages of using Framework? ( 7 )
- Speeds up the mock-up process
- Clean and tidy code
- Solutions to common CSS problems
- Browser Compatibility
- Learn good practices
- Having a single procedure to resolve problems makes maintaining various projects more straightforward
- Helpful in collaborative work
What is the disadvantages of using framework? ( 4 )
- Mixes content and presentation
- Unused code leftover ( Especially when you want to customize the web design )
- Slower Learning Curve
- Not good for beginner
- Don’t learn to do it yourself
