Responsive Design Fundamentals Chapter 1: Chapter 2: name content

Size: px

Start display at page:

Download "Responsive Design Fundamentals Chapter 1: Chapter 2: name content"

Lawrence Johnston
10 years ago
Views:

1 Lynda.cm Respnsive Design Fundamentals Chapter 1: Intrducing Respnsive Design Respnsive design is a design strategy that is centered n designing yur cntent s that it respnds t the envirnment its encuntered in Ethan Marctte identified 3 fundamental techniques fr respnsive design Fluid grids fr flexible layuts Media queries t help adapt cntent t specific screen sizes Flexible media that respnds t changes in screen sizes as Respnsive design starts with Clean html Use f media queries which allws t apply different styles based n screen size, reslutin r rientatin Typically fluid in nature JavaScript use fr recurse lading HTML. CSS and JavaScript frm the backbne f respnsive design Chapter 2: Cmmn Cncepts Mst cnfusing aspect f mbile display is the mbile viewprt The viewprt is the defined area t display web pages that is independent t the devices screen Typically unless prperly frmatted mbile devices will display a web page within the viewprt and then shrink viewprt until cntent fits the screen This cncept is called keyhle brwsing T build respnsive sites that fit mbile screens yu need t cntrl the viewprt size and initial scale factr 2 methds fr verriding the user agents default viewprt Viewprt meta tag CSS rule meta viewprt tag: Appears in the <head> prtin f yur dcument Syntax has tw basic parts (see belw example) name which is viewprt cntent which cntains prperties and values yu wish t set fr the viewprt itself <meta name= viewprt cntent= width=480, initial-scale=1 CSS rule Can appear anywhere in yur CSS Hwever recmmended yu place prir t media queries in yur styles Place at tp f styles if nt first rule Syntax is as fllws (within CSS { width: 480px; zm: 1; Cntrlling viewprt width is vital t respnsive design The prperty device-width instructs the brwser t set the viewprt t exact size as the available screen pixels (See belw examples) Setting this remves initial viewprt scaling and creates mre fluid layuts

in Ethan Marctte identified 3 fundamental techniques fr respnsive design Fluid grids fr flexible layuts Media queries t help adapt cntent t specific screen sizes Flexible media that respnds t changes

2 Lynda.cm Unless there s a need t have a specific value then use the belw prperty fr respnsive { <meta name= viewprt cntent= width= device-width > Shuldn t need t set the height f the viewprt but capability is there Initial scale cntrls the zm factr f cntent fr initial view f the page (see belw examples) Setting initial scale t 1 ensures that cntent appears at 100% regardless f width Its advised t leave initial scale ff unless yu need t set it t smething besides { zm:1; <meta name= viewprt cntent= initial-scale=1 > Able t cntrl hw much a user is able t zm in and ut by using the scale prperty (see belw examples) Only psitive values are usable fr the meta name but yu can use psitive, negative r { min-zm:1; max-zm:2; <meta name= viewprt cntent= width=device-width, minimum-scale=1, maximum-scale=2 > T turn ff user scaling it is dne thrugh the user-scalable prperty (see belw examples) Cmmnly used fr applicatins rather than { user-zm: fixed; <meta name= viewprt cntent= width=device-width, user-scalable=n > Screen density is the number f pixels within a physical area f a screen Screens are getting bigger n mbile every year and reslutin is changing as well Tw different types f pixels Hardware pixels: represent the small pints a screen can display Reference pixels: als called CSS pixel it is a unit f measurement that establishes an ptical standard fr the length f a pixel and is independent f hardware pixels W3C defines it as rughly 196 th f an inch Helps cnsistently size elements regardless f screen density Device-pixel-rati is the rati between hardware pixels and reference pixels Andrid uses 4 different device pixel ratis

viewprt but capability is there Initial scale cntrls the zm factr f cntent fr initial view f the page (see belw examples) Setting initial scale t 1 ensures that cntent appears at 100% regardless f

3 Lynda.cm Fr text in CSS-generated graphics the device will handle the scaling itself Vectr graphics scale withut lss t image quality CSS-icns r buttns will scale withut lss r quality Icn fnts are fnts ppulated with fnts Scale autmatically with text Dn t target screens fr graphics but use higher reslutin graphics because scaling factr wnt effect it as much Media queries were created t allw designers t extend media declaratins t include varius media prperties when filtering styling applicatins Cntains a media type and ne r mre expressins Expressins are used t determine if a style is used r nt Keywrds ( and, nt r nly ) help refine exactly when they re applied Media features t test fr are Syntax styles <link rel= stylesheet href=main.css media= screen and (min-width: 480px) url(example.css) screen and (max-width: nly screen and (max-width: 480px) { p { clr: white; backgrund: rgb(117,15, 25); Breakpint is the mment layut switches between ne and anther Imprtant breakpint areas /*mbile styles nly screen and (max-width: 30em){ /*tablet styles nly screen and (min-width: em) and (max-width: 48em){ /*desktp styles nly screen and (min-width: em) { Websites need t have a fluid layut that way it can reshape accrding t the viewprt Grid systems are a great way t create structure prprtined layuts Fr web design its defined as a number f clumns and gutters that are used t establish elements and regins

ppulated with fnts Scale autmatically with text Dn t target screens fr graphics but use higher reslutin graphics because scaling factr wnt effect it as much Media queries were created t allw

4 Lynda.cm max-width and width are tw different things. Width gives yu a fixed value where as max-width will fill t a certain size Think abut building frms in the design stages and start with the mbile platfrm first Its k t labels t have beside fr elements n wider screens but fr smaller nes try t have them abve it Smaller screens shuld have enugh space fr the user t select the right label Wrap input elements with the <label> tag Make sure t use the new input types fr label ( , url and search) (see belw example) <label> <input type= name= id= placehlder= [email protected] required> <label>url <input type= URL name= URL id= URL placehlder= required> <label>search <input type= search name= search id= search placehlder= search required> These input types will help users when filling ut the frms t give them specific characters when used Use the placehlder element in the frm t add infrmatin that the user may need t fill ut the frm Fr simple validatin mst brwsers supprt the HTML5 required attribute <input type= text name= name id= name placehlder= first and last name required= required ><p> *a name is required</p> T help with site perfrmance keep cde as clean and clutter-free as pssible Use standards cmpliant cde Eliminate extraneus markup Keep external scripts and styles lean and efficient Link style sheets int ne style sheet The applicatins QuickCncat and Enchance.js can help with cmbining dcuments fr faster lad times Chapter 3: Respnsive Design Strategies Gd tips fr respnsive design Knw yur cntinent befre yu develpment Create a cntent inventry then give it a hierarchy Hierarchy will help structure the cntent later acrss multiple screens Start with mbile wireframe and wrk backwards Let the expanding width f the screen dictate the flw f cntent Layut cnsideratins t remember Plan ut navigatin Create cnsistent cding standards Cntent strategy is the practice f Identifying cntent Organizing cntent Managing cntent Need t have an idea n hw the cntent is t be rganized between desktp~>tablet~>mbile

elements n wider screens but fr smaller nes try t have them abve it Smaller screens shuld have enugh space fr the user t select the right label Wrap input elements with the <label> tag Make sure t

5 Lynda.cm Gals fr respnsive layuts shuld be Emphasize imprtant cntent Make relatinships clear Make accessible n small screens Mbile capabilities Sme f the features t design fr in a mbile layut T ensure HTML wrks well with respnsive design Write clean cde, clutter cde makes different layuts becme harder Use HTML5 fr mre semantic elements Use micr frmats Standards fr each cntent area Think f cntent as chunks f cde

n small screens Mbile capabilities Sme f the features t design fr in a mbile layut T ensure HTML wrks

Usability and Website Design. Aaron Ruggiero. When designing websites, users should be the main focus throughout the

Usability and Website Design. Aaron Ruggiero. When designing websites, users should be the main focus throughout the Usability and Website Design Aarn Ruggier When designing websites, users shuld be the main fcus thrughut the website design prcess. When an expert designs a website their creatin will seem simple t them.