Learn Responsive Design notes

Learn Responsive Design notes

[Email protected]

Contents 1.? Question background? 2.? What is the difference between responsive design and adaptive design? 3.? How to create a responsive site 4.? Classic design Flow 5.? Reference design for responsive web sites 1.?Question background?

For different resolutions of the device to provide different Web pages, the previous mobile phone and PC side to maintain a code, appear wordy, maintenance difficult, features may not be unified and so on. With just one piece of code, you can get a good display on different devices.

• Every device is designed to be right
• Less work
• Search optimization has been a mobile phone and PC side is two different sites, easy to confuse users.

2.?What is the difference between responsive design and adaptive design?

• Adaptive (Adaptive) is the element position change.
• The response type (responsive) is the position, size, and change of the viewpoint element under different size viewports.
• The width of the streaming (liquid) element is adjusted by the screen.

3.?How to create a responsive web site

• Html

  • Viewpoint Property

    What is a viewport? The browser removes the menus, toolbars, and other parts of the browser itself. The simplest is the largest window in the middle. Web pages that do not have the Viewpoint property set are rendered in a full-size manner on a desktop display.

    <meta charset="utf-8">Indicates the character set and language Lang

    <meta name="viewpiont" content="width=device-width,initial-scale=1">Which width="Device-width" high-speed browser in full-size rendering mode. Initial-scale indicates that the width of the property is rendered, not zoomed in or out. User-scaleable=no user is not scalable. maximum-scale=2 Specifies the maximum zoom ratio.

  • Semantic structure Tags

    Wai-aria, the acronym for Web accessibility Initiative-Accessible Rich Internet applications, refers to accessibility Web application technology.

    It should include introductory and navigational aids such as logos, search functions, and main navigation bars. The corresponding Wai-aria property is banner.

    • Use case : usually placed <nav> in the header tag. The corresponding Wai-aria property is navigation.
    • Use case <nav role="navigation"> </nav> : should contain <footer> copyright information, page related information, related materials connected. The corresponding Wai-aria property is ContentInfo.
    • Use case : <footer role="contentinfo"> </footer> <article> A separate piece of content on a Web page. It could be a newspaper, blog, post, and this type of content can be distributed via content aggregation (RSS). There is no Wai-aria property.

    • Use Cases : <article > </article> <aside> Web sites or entire pages related, if nested in article, is the relevant content of the article. The corresponding Wai-aria property is complementary.

      IE Support: Use putty (Ployfill) or razor (Shiv) script. Use the conditional comment (conditional comment) within the head tag of the site to connect to it.
      • <!--[if lt IE 9] >the website <script scr="files/html5shiv.js> </script> title uses the H1, the content title uses the H2, the navigation design custom is puts in the UL. <! [endif]-->

• Css

  • How CSS works: Descendant selectors. classname p {} class selector id selector element selector inline (written in style property) Independent rule h1,h2{} important rule (!important) pseudo-class selector (: Afer:before)
  • Browser prefixes, which use properties unique to different rendering engines, are best written using Autoprefix. Use case: Hyphen character attribute P{-webkit-hyphens:auto ; -moz-hyphens:auto;-ms-hyphens:atuo; Hyphens:auto} Why the last face is added hyphens, if the last one is supported, the previous property setting is ignored. Inheritance rules: Box mode margin padding border does not inherit child elements.

  Box Model:

  • Display effect: Inline element: Cannot set height, use Line-height to control height, text-indent to control indentation. a block element; A list item element (List-item) in front of a list item (LIST-STYLETYPE:DISC);
  • Box composition: Margin padding border content can be set using percentages
  • Width of Box: Box-size property value is Border-box or Content-box
  • The center effect of the box: margin 0 auto; The width cannot be 100% or the effect will not be observed at this time.
  • 3D Model of the box:

  Floating: Can be a content flow wrapping a specific element.

  • Left floating right float: Set float to make the block element not wrap at the end

  • Clear float:

    1. The floating element is followed by an empty DIV element, and the div element property is Clear:both
    2. Parent element + pseudo element. Clear{zoom:1}. clear:after{visibility:hidden;clear:both;content:""Display:none;height : 0}
    3. Parent element width:100% Overflow:hidden
    4. Using BR

  Positioning:

  • Static positioning: The default layout, from the top to the bottom, from left to right, first scan, to ensure that there will be no blocking the back of the place.

  • Relative positioning: Does not detach from the document flow, the reference point is the position relative to the document flow. The position attributes (top bottom left right) and Z-index properties are used later.

  • Absolute positioning: Out of the document flow, and the content grows with the width of the container, with the exception of cascading effects that do not affect the layout of other elements. The position attributes (top bottom left right) and Z-index properties are used later.

  • Fixed positioning: The position of the mouse will not change as the user scrolls. How CSS is organized:

    1. Organize by page
    2. Organize by type

  • media query   @ Media only screen and (min-width:40em)   Explanation: means that the media query only means that the contents of the following {} are treated as the same statement as the current statement, and that the old-fashioned browser skips over the media query and executes {}, plus only if not, The execution of the content in the following {} is completely skipped. Screen indicates that it detects screens, and this property can also make print, and so on. and represents the logic and, also, or not, and (MID-WIDTH:40EM) represents the condition.

    • use media queries when connecting  <link rel=" Stylesheet "href=" Xx.css "media=" only screen and (Min-width:40em) ",
    • used in sytle tags <style media= "only screen and (Min-width:40em)";   use breakpoints to design:  

  • Relative Unit% em rem
    CSS usage rules: Use the lowest priority first. Priority ranking Important rules > Inline rules >ID> classes > elements >*(Common elements)

• Image

  • Use CSS borders, shadows, and gradients instead of images.
  • Use icon font instead of picture
  • Use CSS sprites to reduce the number of picture files
  • Use alternate text for search engine and screen reader friendly
  • The size of the image is changed by media queries, but a better solution is to get images of different resolutions based on different screen sizes. Srcset and picture tags are not implemented, but you can use the Picturefill Putty script
  • The server uses adaptive image (a large-resolution image is passed in the server and automatically generates a small resolution image for it)
  • Prevent the picture from exceeding the parent element box max-width:100%;
  • BACKGROUND-IMG Center-aligned background-positon:center top;

• Test the browser's media parameters Mqtest.io

4.?Classic design Process

• Content Strategy - Use the text layout to help clarify the structure and use the inverted pyramid structure to ensure that the user first sees the important content:

• " Design in text mode Use: First clear the structure, the RSS and screen reader friendly, and then adjust the style.

• The default layout is a block from top to bottom.

• from user research and content strategy , then design in text mode, then draw each breakpoint sketch and response prototype from a small screen, and then incrementally enhance the layout. Why start with a small screen, the small screen is more restrictive, if the small screen can be adapted to, then to the big screen has more space, layout more free.

• A huge problem with mobile phones-quick access to information
  1. Screen small touch easy to touch
     • A key size of 35-45px increases the touch target
  2. Multi-touch gesture recognition
  3. No hover effect when touching

5.?Reference design for responsive web sites

• A line length of 45-75 is appropriate, too small need to frequent line, too long to read up the difficulty.
• The default font size is typically 16px, which sets the height of rows to change the heights of the elements in the row.
• Use relative units to design em (may cause multiplicative effects) REM (relative to the entire text size)
• Reference design for navigation http://bradfrost.github.io/this-is-responsive/patterns.html http://responsive-nav.com/

From for notes (Wiz)

Learn Responsive Design notes