Responsive Web Design

Helps to make your content work across any device.

Browser vieports are measured in Device Independent pixels (DIPs) and not the hardware pixels which are the actual physical pixels.

Device pixel ratio: ratio of DIP to hardware pixel
eg: device pixel ratio of 2 means one DIP for every 2 hardware pixels.

Font boosting: Browsers try to identify the main content and boost the font size to ensure readability when the veiwport meta tag is not set.

CSS pixel = Hardware pixel / DPR

Setting meta viewport:

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

Set max-width on elements: img, embed, object, video{ max-width: 100%;}

Tap target sizes: give a minimum size of 40px * 40px ideally 48px * 48xp (min-width and min-height) to cover the size of a finger.

Start from small - mobile first approach: keep the content widths to 100%

Media Queries:

2 ways to include media queries:
1. have separate CSS files and link them using media attribute
2. media queries specific to width within the existing CSS file

Responsive Patterns


  • Column Drop
  • Mostly Fluid
  • Layout Shifter
  • Off Canvas


Column Drop: elements stack vertically. flow from one column to 3 column layout in larger viewport.

container: flex wrap
box: 100% width

Mostly Fluid: Similar to column drop; use margins and fixed width for larger viewports.

Layout Shifter: layout changes significantly while hitting breakpoints; use flex order property to arrange items;

Off Canvas: The lesser important content that are not often used such as menu and navigation items are moved out from the main view in smaller viewports; This is shown only when user clicks the hamburger menu;

html, body, main{
height: 100%;
width: 100%;
}
nav{
width: 300px;
height: 100%;
position: absolute;
transform: translate(-300px, 0);
transition: transform 0.3s ease;
}
nav.open{
transform: translate(0,0);
}
@media screen and (min-width: 600px){
nav{
position: relative;
transform: translate(0,0);
}
body{
display: flex;
flex-flow: row nowrap;
}
main{
width: auto;
flex-grow: 1;
}
}

Responsive Tables

3 methods:
- Hidden Column
- No more tables : make table block elements
- contained table : wrap table in a div and set overflow-x as auto so that table alone will scroll in the viewport

Font:

Ideal character per line is 65 cpl.

Base font 16px and 1.2em line height.


Comments

Post a Comment

Popular posts from this blog

Website Accessibility Tips

1. Structure the DOM in a sensible way so that keyboard tab navigation is sequential. 2. Use HTML semantic elements like nav, header, section 3. Make sure parts of controls are grouped together 4. Use CSS for layout instead of tables 5. Use native HTML tags instead of divs and spans eg: a, button tags instead of div span with onclick coz divs and spans are not focusable. 6. Label form elements using 'label for' 7. Label images with alt attributes 8. Managing focus using element.focus() whenever required 9. For generic tags div and span, use Aria roles like role=button, role=menuitem so that screen readers can identify elements. 10. Aria landmark roles can be used to identify separate areas of the app. eg; <section role="search"/> 11. Use aria states to add dynamic information about the current state of an element eg: <div tabindex="0" role="checkbox" aria-checked="true"> 12. The property aria-live identifies dyna...
Read more

CSS Flexbox model

Flexbox ---------- Complex things like flexible grid layouts are so hard using tables, floats, inline-blocks. Flexbox consists of Flex containers and flex items. Flex container: display property set as flex or inline-flex. Flex Item: Every child of flex container. Everything outside a Flex Container and inside a Flex Item is rendered as usual. In short, Flexbox defines how Flex Items are laid out inside of Flex Containers. Flex Lines Flex Items are positioned inside a Flex Container along a Flex Line. By default there is only one Flex Line per Flex Container. The Main Axis and the Cross Axis To abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis. The names for the starting points, ending points, and directions of each axis are as follows: Main Start Main End Main Direction (sometimes called the Flow Direction) Cross Start Cross End Cr...
Read more