Responsive design
What is the default font-size for the browser?
16px
What are the disadvantages to double all image sizes on your site to target retina screens?
Larger images, larger downloads, slower site speed.
How to make you site responsive? And what are your options of adding your media queries?
Add meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) Add media queries in your stylesheet start add at the bottom, it won't increase your page load so much, like a separate stylesheet would do, or use Less or Sass and include it to the main css file as partials.
What are the "breakpoints"?
Breakpoints where your design breaks down. Typically the height and the width of the target viewport. Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information. When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target.
How to clear the float on floated elements is the row? <div class="row"> <div class="col-3">...</div> <div class="col-9">...</div> </div>
By adding a clear float class to the parent of floated elements. <div class="row clear-float"> <div class="col-3">...</div> <div class="col-9">...</div> </div> .clear-flaot::after { content: ""; clear: both; display: block; }
Using ems, set the h1 to be the equivalent of 24px. Remember, the target divided by context rule, keeping in mind our context is the body font-size set in pixels. body { font-size: 62.5%; //1em = 10px. }
Calculate the font size using the target size, 24px, and the context size, 10px. Giving you 24px/10px = 2.4em. h1 { font-size: 2.4em; }
Using percentages, set the margin-right of .content to the equivalent of 380px to 6 decimals. Determine the correct context by viewing the given HTML markup. .container { width: 960px; } .sidebar { width: 360px; } .content { width: 560px; *** margin-right: 380px; *** } <div class="container"> <header></header> <div class="sidebar"></div> <div class="content"></div> </div>
Calculate the percentage by dividing the target width by the width of the context element. The .container element, with it's 960px width, is the context. Given the target width of 380px and the context width of 960px, 380px/960px = 39.583333%. .content { margin-right: 39.583333%; }
We want to target a mobile device, specifically an iPhone. Write a media query to target the iPhone's 320px width, using the max-width property.
Start your media query with @media to target the screen and max-width of 320px. Your @media query should look like this. @media screen and (max-width: 320px) { }
How to calculate ems or rems from pixels in fluid layout?
Target / context = Result With rems the context will always be the root context, better practice to use rems.
What is the media query?
Targets screen = media type, with a max-width:320px = query
Using percentages, set the padding of .content to the equivalent of 31px. Determine the correct context by viewing the given HTML markup. Give your answer to at least 7 decimals. .container { width: 960px; } .sidebar { width: 360px; } .content { width: 560px; *** padding: 31px; *** } <div class="container"> <header></header> <div class="sidebar"></div> <div class="content"></div> </div>
The context for the padding will be the width of the .content element. You can calculate the padding as a percentage using the target, 31px, and the context, which is the width of the .content element in pixels. Given a target of 31px and a context of 560px, you can calculate the padding using 31/560 = 5.5357143%. .content { padding: 5.5357143%; }
What are the 4 design keys in adaptive design?
Who is your user? User How will they use the site? How What devise will they use the site? context How will it adapt based on the context? content
What are the benefits of fluid sites according to orientation of your device?
You don't need to target landscape or portrait mode, the design will scale appropriately, because it's fluid.
What are the two main things you need to add your page to be able to do responsive design?
meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> media queries
How to convert a fluid page container from 500px to %, so it scales on different viewport?
target / context = result
What is the fluid/liquid layout?
A liquid page layout (sometimes called "fluid" or "fluid width") are scale and uses relative units instead of fixed units. Typically a liquid layout will use percentages instead of pixels, but any relative unit of measurement will work, such as ems. Has limitation with viewport size! Small device site become unreadable. A liquid layout often will fill the width of the page, no matter what the width of the browser might be. Liquid layouts don't require as much thought as a responsive design, but there are some major drawbacks at very large or very small browser widths. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.
What is the "responsive layout"?
A responsive page layout uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout. As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width. Typically responsive designs are built using a mobile-first approach. That means the mobile layout is designed first, and then as the browser becomes wider on tablets and desktops, the designer will find ways to expand the mobile layout. This tends to create better experiences overall, because it's easier to expand a design than to try and simplify a large layout for mobile screens.
What is the "static/fixed" page layout?
A static page layout (sometimes called a "fixed" layout or "fixed width" layout) uses a preset page size and does not change based on the browser width. In other words, the page layout might have a permanent width of 960 pixels no matter what. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010s.
What is the grid layout?
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.
Is there such thing like "mobile web"?
No, the web it's not limited for one particular device or environment.
Give a few more options you can use on your media queries besides min-width and max-width?
Orientation: landscape, portrait Aspect ratio Resolution
How to set the body font-size using relative sizing so that 1em = 10px.
Remember, the default font-size for a browser is 16px. Set the font-size on body to percentage Setting the font-size to 62.5% means that using relative sizing, 1em = 10px. Note: If you would leave the body font-size as px the child elements in the DOM tree would inherit the px from the body parent element (if they don't have font-size set as rems or ems). body { font-size: 62.5%; }
Is responsive is same as adaptive?
Responsive: - All responsive sites are adaptive. - Fluid sites with breakpoints. - Provide continuity between context. - Portable and accessible. Adaptive: - Not all adaptive design are responsive. - Selectively optimized for the context you are targeting.
What are retina images and how to implement them? Give an example.
Retina images has 1.5x - 2x pixel density, use pixel-ratio to target retina screens and set the image 2x size bigger so you will get a clean sharp image on your retina screen. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .logo { background-image: url([email protected]); -webkit-background-size: 75px 75px; background-size: 75px 75px; } Or include picturefill.js: <picture alt="Our Camp Site"> <source src="camp-site.jpeg" /> <source src="camp-site-lrg.jpeg" media="(min-width: 900px)" /> <noscript> <img src="camp-site.jpeg" alt="Our Camp Site" /> </noscript> </picture>
What is the different between fluid, adaptive and responsive design?
- Limitation with viewport size. - Doesn't cover universal web. - Flexible and universal. Content defines breakpoint.
What are the most important focuses on mobile first approach, and why?
- Simplify content - Prioritize layout - Optimize user experience Your space is much more valuable on smaller devices, can't have filler material, random photos.
What makes a fluid site?
A fluid grid. Relative values (%)
What is the adaptive layout?
Designed for controlled adaptation. Doesn't cover universal web. An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed unit like pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries. A media query is an expression of logic, and when used in combination with other media queries, they form a basic algorithm. So for example, an adaptive page layout might say something like, "If the browser 500 pixels wide, set the main content container to be 400 pixels wide. If the browser is 1000 pixels wide, then set the main content container to be 960 pixels wide." Beyond the main content container, other parts of the page might change in width, swap places, or be removed. For example, a two column layout might become a single column layout if the browser is too narrow. Adaptive layouts are a good stop-gap solution if a legacy static layout needs to be converted to support mobile devices. They also typically require less development time than a responsive layout. The major drawback is that device widths in-between the explicit breakpoints are often less than ideal, with either too much space or not enough space.
What is the box-sizing CSS property? What is it's most commonly used value in responsive design and why?
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.
What is the "responsive design"?
Flexible and universal. Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
