RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment
Why? –Mobile 0Many people access your website via smartphones and other mobile devices 0Your content is no more than 3 taps away from “Angry Birds” Image src: http://www.angrybirds.com/It is 2013? 0Which sites would you prefer to visit? Be quick or 1…2…3…Screen resolution should be optimized for???Splinternet? 0Consider Androidmid‐2012 3,997 distinct devices Short URL to original article ‐http://markdubois.me/DroidFragmentEducation 0I teach CMWEB 280 Multi‐screen 0First 3 weeks we focus on the fundamentalsTerminology 0Adaptiveweb design 0Coined by Aaron Gustafson 0Content will change to fit a predefined set of screen sizes 0Media queries are core 0Responsiveweb design 0Coined by Ethan Marcotte 0Content will fluidly change to fit any screen or device 0Media queries are a part, but pages more fluidResponsive Web Design 0Philosophy and development strategy 0Multi‐screen/ post‐PC world 0Focus on various viewport sizes 0Single front end 0Flexible grids 0Flexible images 0Media queries (may change content based on available screen real estate)RWD –early page 0http://alistapart.com/article/responsive‐web‐designResponsive Design 0http://alistapart.com/article/responsive‐web‐designRWD –simple example 0http://markdubois.me/RWDEx01RWD – code 0http://markdubois.me/RWDEx01 0HTML imgclass="respImg" src="orchid.jpg" / 0 CSS img display:block; margin‐left: auto; margin‐right: auto; .respImg width:66%; RWD –Text Example 0http://markdubois.me/RWDEx02RWD – code 0http://markdubois.me/RWDEx02 0HTML div id="wrapper" div id="sidebar"p…/p div id=“content”p…/p sidebar 0 CSS width:22.1763598%; wrwraapper pper …. displadisplay:block;y:block; float:left; marmarggin‐left: in‐left: aaututo;o; marmarggin‐rigin‐right: autht: auto;o; content width:90%;width:90%; width:77.8236402%; … float:right; DIY 0Probably want an underlying grid system 0Consider Herokuvariable grid systemas exampleDIY (2) 0Develop solid understanding of how fluid grids work in RWD 0Good starting articleDIY (3) 0This can get complex quickly 085 responsive design toolsarticleRetrofit Existing Websites Pro Con 0May have heavy, 0Single code base slow loading pages 0May have to make 0One URL page significant changes 0Adapts to various to existing websites 0Often have to screen sizes decide what to leave out for phonesRWD –simple example 0http://markdubois.me/RWDEx01 0Extreme example –larger photo 4 sec 0Want higher res for retina displays 0Contrast with quick loads on mobileMedia Queries 0Typically write CSS for desktop, tablet, phone 0If starting anew –think mobile first (limited space and UX) 0Have to create separate CSS documents –Phone ‐‐ link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (max‐width:320px)" ‐‐Tablet ‐‐ link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min‐width:321px) and (max‐width:768px)" ‐‐Desktop ‐‐ link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min‐width:769px)"

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