Responsible Responsive Web Design

Responsible Responsive Web Design
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment
Responsible Responsive Web Design By: Matt Busche What is Responsive Web Design? ● an approach ● provide optimal user experience ● platform agnostic ● content first ● not a separate website What is Responsive Web Design? ● not a separate site ● one codebase ● no context ● m.espn m.espn2 ● mobile, desktop, UA sniffer ● SEO, device, orientation Why Responsive Design? ● users don’t want an app Why Responsive Design? ● you have mobile users ● don’t have money for apps ● accessible from any device ● SEO matters How does it work? ● CSS3 spec ● media query ● IE9, FF3.5, Chrome 2 ● 93.92% How does it work? ● link and import selectively load ● window pixels How does it work? ● foolproofing the viewport ● meta tag not w3c standard How does it work? ● meta tag; no meta Layout Process ● identify constraints ● mobile first ● useful for some, useful for all ● design for touch screen Layout Process ● identifying breakpoints ● progressive disclosure Progressive disclosure Mobile First Development ● can cause issues with unsupported browsers ● determine what’s important ● progressive enhancement Supporting the unsupported ● respond.js IE 6+, FF2+ ● HTML5shiv ● PIE.js - CSS3 (Prog IE) ● selectivizr - CSS3 pseudo classes Determining the unsupported ● graceful degradation ● media queries ● HTML4 or HTML5 Detecting features ● modernizr Detecting other features ● supports ● user agent detection Progressive Enhancement ● EnhanceJS ● upgrading images for HD screens Lang attribute ● no lang then unknown ● accessibility - screen readers ● hyphens ● internationalization (i18n) Load times ● average page size is 1.977MB ● 63% Images (1260 KB) ● 16% Other (212) ● 15% JavaScript (301) ● 3% CSS (60) ● 3% HTML (59) ● most are not responsive

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.