Responsive design
A simple approach that lets you build a single site that adapts to different device widths
RWD Techniques: * percentage-based/flexible grids: you skip fixed-width layouts. Since smartphone screens come in a wide variety of widths, it makes no sense to create a page at a fixed width; instead, you want the page to grow or shrink to fit the particular device * media queries: CSS technology that lets you send different styles to a browser based on current conditions in the browser. * flexible media: lets your images and videos scale to fit the appropriate screen real estate…big photos for big monitors, smaller photos for small screens
Sawyer MacFarland. 2015. "CSS: The Missing Manual". 4th edition link
Interneting is Hard on Responsive Design
Setting Up a Web Page for RWD
Phone browsers: don’t just display the page at 100 percent. Instead, phone browsers zoom out to fit the page on screen. The exact amount they zoom out varies from phone to phone. Safari on the iPhone, for example, acts like the screen is really 980 pixels wide, so it shrinks the page down to fit within 980 pixels.
This behavior of mobile browsers works well for the majority of sites, but not so well with a responsive web design. Because responsive sites are intended to look good on phones, you don’t want the display to zoom out.
there’s a simple way to override this behavior of mobile browsers. Simply add the following code to the <head>
<meta name="viewport" content="width=device-width">
HTML meta tags provide extra information about the page’s content and can give browsers extra instructions about how to display the page. In this case, the viewport refers to the browser screen, and the content attribute sets the width of the browser to the width of the phone
Media queries
RWD tries to give your site’s visitors the most readable and attractive presentation possible. This usually means customizing the design to look its best at different browser widths.
Many designers think of three target screens related to the three most common web browsing devices: smartphones, tablets, and desktop computers.
Strategies for Using Media Queries
Media queries, which let you assign styles to a page based on the destination browser’s width and height.
3 target screens: * smart phone * tablet * laptop/desktop computers
Strategies: * Adjust columns: Multiple side-by-side columns look great on a big monitor (and even on a tablet in landscape mode), but not so much on a phone. Bringing the page down to 2 or 3 columns * Liquide design: widths of your content divs to auto or 100%. This setting converts your page from a fixed-width design to a liquid, or flexible, design, that constantly adjusts itself to the size and orientation of the screen. However you can still use fixed-width for a desktop browser, such as setting the width of div to 900px, but a phone is unlikely to have that width, which means great part of the div will be off-screen.
- Tighten up white space: in large screen ample space between content is desirable, but on small screens results into elements being rendered too far apart, like islands of content. Reduce
paddingandmargin. * Less extreme font size: differences between large size of headings and small body text, must be more moderate * Changing navigation menus: long menus will break or dissapear in small screens. CSS doesn't provide a good solution for this. The effective solution is to use JavaScript to dynamically change the navigation menu into an HTML drop-down menu (A Google search on "responsive menu js library" will yield douzens of possible options). * Hide content for mobile. Too much information on a phone can be overwhelming. You can use CSS to hide content that you think is superfluous for mobile users by setting the CSSdisplayproperty tonone. * Use background images: A large image on a phone will be hard to display fully and take a long time to display. To avoid this problem create 2 versions of the same image a large and smaller (for mobile). In the CSS, if you place the image as background of a div, you can change that images, in 2 style sheet one for desktop another for mobile.
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.logo { // liquid design
width: 100%;
height: 60px;
background-image: url(images/small_logo.png)
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.logo { // liquid design
width: 100%;
height: 60px;
background-image: url(images/small_logo.png)
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.logo { // fixed design
width: 960px;
height: 120px;
background-image: url(images/large_logo.png)
}
}
Mediaquery breakpoints
Breakpoints used by [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {
}
CSS media queries can do more than just check the width of a browser. The current media query standard states that you can check for height, orientation (whether a visitor holds a mobile phone in portrait or landscape mode), and even whether a device uses a color or monochrome screen. There are a few other browser characteristics you can check with media queries, but not all browsers support the queries. For more on media queries see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax.
From default design to media-queries
Don’t need to create three separate sets of styles.
You can start with a default design; that is, a design that works without media queries, for either mobile or desktop, choose what approach you prefer.
Then create media-query styles to override the default styles and reformat the page for the particular screen width.
To main approaches:
Desktop first
Design your site with the desktop in mind. Throw in all the columns you want. Polish and finalize the design so it looks great on a large monitor. This becomes your base CSS design.
This becomes the base, the default.
Then you add media queries for tablets and phones, which tweak the base desktop design, by removing columns, making headline text smaller, reducing borders and padding, etc.
Mobile first:
its the inverse of Desktop first. You designing first for mobile browsers.
The basic small-screen styles is the default CSS.
From it, make adjustments inside media queries for tablets and desktops, by adding columns larger headings, padding & border, showing more content.
Flexible Grids
Flexible grids create a liquid layout, in which the page’s overall width resizes to fit different width screens.
In most cases implementing a flexible grid, can be created by setting the:
- *parent container box (div)**:
widthto100%.max-widthto a certain amount of pixels, so that the page isn’t absurdly wide on large desktop monitors.
- Individual columns
width: percentage-based
Flexbox
Flexbox uses two types of boxes: * flex containers: groups flex items together and define how they’re positioned. * flex items: main purpose are to let their container know how many things it needs to position. Flex items can be manipulated individually, but for the most part, it’s up to the container to determine their layout.
To turn one of our HTML elements into a flex container, use the CSS display property with flex value.
- Use display: flex; to create a flex container.
- Use justify-content to define the horizontal alignment of items.
- Use align-items to define the vertical alignment of items.
- Use flex-direction if you need columns instead of rows.
- Use the row-reverse or column-reverse values to flip item order.
- Use order to customize the order of individual elements.
- Use align-self to vertically align individual items.
- Use flex to create flexible boxes that can stretch and shrink.
See also Interneting Is Hard of flexboxes
Fluid images
In addition to placing images as background, as suggested in before Strategies for Using Media Queries, it is also possible to set fluid <img> by placing the image inside a div and making its max-width: 100%. Without any other width or height instructions. The image will resize as its parent div resizes.
