Top Banner

Click here to load reader

of 42

Responsive Web Design

Feb 13, 2016

ReportDownload

Documents

saxon

Responsive Web Design. Sponsored by. Webinar – May 14, 2014. Nikhil J Deshpande. Rise of Mobile. Source : http://www.lukew.com/ff/entry.asp?1728. Rise of Mobile. Source : MIT Technology Review. Rise of Mobile. Rise of Mobile. Rise of Mobile. Many Devices One Web. - PowerPoint PPT Presentation

Responsive Web Design

Responsive Web DesignNikhil J Deshpande

Webinar May 14, 2014Sponsored bywww.synerzip.comRise of Mobile

Source: http://www.lukew.com/ff/entry.asp?1728www.synerzip.comWe have, here, the planet Earth, 7 billion people. In year 2011, there were 6 billion mobile subscriptions. Ill let that sink in for a second. Can you guess the percentage there? 87%. 87% of the world has a mobile subscription. Its actually probably higher now since its the year 2013.

Rise of Mobile

Source: MIT Technology Reviewwww.synerzip.comWestern Europe and the Asia-Pacific region will account for nearly 60 percent of worldwide mobile data traffic by 2014. But emerging markets such as Central and Eastern Europe, Latin America, and the Middle East and Africa, having started with relatively small numbers, are growing the fastest.In West Africa or India, the mobile Internet is as widely used as fixed line Internet. Thats incredible.

There are more people who access the web on a device, such as a smartphone or a tablet, versus a desktop. So, obviously, this is changing all those peoples experience on how to access the web, as well as designers who create the websites for that community.

Huge spike of users of users jumping on the mobile bandwagon.

India has MM100+ FB users. 75% of them are exclusively mobile usersRise of Mobile

www.synerzip.comRise of Mobile

www.synerzip.comRise of Mobile

www.synerzip.comNow, if I was going to break responsive web design down to a single concept, it would be this. Many Devices One Web

www.synerzip.comOne web for all the things. What does this mean? This means we want our websites to work everywhere, to adapt to their environment, and we want to make content easily available to everyone, regardless of how they access it.

Responsive Web Design is a combination of design and technology to change layout based on the size of a device viewport.

Many Devices One Web

www.synerzip.comIt uses feature detection (mostly on the client) to determine available screen capabilities and adapt accordingly. RWD is most useful for layout but some have extended it to interactive elements as well (although this often requires Javascript).

Responsive Web Design allows you to use a single URL structure for a site, thereby removing the need for separate mobile, tablet, desktop, etc. sites.

As in the example four examples of screens or devices that we can commonly access the web on. So, we have our smartphone, tablet, laptop, and then a larger desktop system. So, how might the layout work best on all of these devices? Well, for the smartphone, lets keep our layout at a single column.

For the tablet, maybe theres enough space for two columns. For this laptop, we can make three column, and for this big, nice, expensive desktop monitor, lets go ahead and give it six columns. Why not? Weve got the space. So, this illustrates a little bit about what responsive design is meant to do.

Responsive web design is future proof.

work best on all of these devices?. Mobile Sites

www.synerzip.comLayout 101

www.synerzip.comSo lets take a look at an example of an old school table layout thats a combination of fixed and fluid. As the browser window contracts, all the content begins to reflow. Crude design,

At the time, tables were all developers and designers had to work with. But the code was too complex, making it more difficult to update and modify pages. And in any case, something better was on the way CSS. Yes, CSS was here to save the day. Far less code was needed to achieve similar layouts.

And it worked in harmony with HTML as a separate presentation layer. You could create a basic layout using a few lines of code and some HTML. Just like tables, you could have a fixed layout of 800 pixels.

And you could create a fluid layout that stretched to 100% of the screen.Layout 101

www.synerzip.comAt the time, tables were all developers and designers had to work with. But the code was too complex, making it more difficult to update and modify pages. And in any case, something better was on the way CSS.

Yes, CSS was here to save the day. Far less code was needed to achieve similar layouts.

And it worked in harmony with HTML as a separate presentation layer. You could create a basic layout using a few lines of code and some HTML. Just like tables, you could have a fixed layout of 800 pixels.

And you could create a fluid layout that stretched to 100% of the screen.Print to Screen

www.synerzip.comTheres other factors as well.

Keep in mind that the size of screens largely was the same for many years.

So we had this range of about 640 by 480 at the low end to 1024 by 768 at the high end.

So the tru

Designers liked fixed width and still like fixed width because it gives them control. It gives them control over the placement of rows and columns and the size of images.

Visually speaking, its much more satisfying to work within a fixed width canvas than to try to make it work in fluid.

You could get away with fixed layout in this range and not really have to worry about other sized screens.

But something came along that made all of this a moot point

Print to Screen

www.synerzip.comYes, our friend the iPhone here, as well as other smartphone devices that were able to browse the web using this very small screen that you could hold in the palm of your hand.

So to jump ahead a little bit, how does the iPhone and other smartphones scale a website such as this one when you browse it? Once upon a time

www.synerzip.comResponsive Web Design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available screen capabilities and adapt accordingly. RWD is most useful for layout but some have extended it to interactive elements as well (although this often requires Javascript).

Responsive Web Design allows you to use a single URL structure for a site, thereby removing the need for separate mobile, tablet, desktop, etc. sites.For a short overview read Ethan Marcotte's original article. For the full story read Ethan Marcotte's book. For a deeper dive into the philosophy behind RWD, read over Jeremy Keith's supporting arguments. To see a lot of responsive layout examples, browse around the mediaqueri.es site.

The Good Book

www.synerzip.comComponents of Responsive

Fluid Gridwww.synerzip.comComponents of Responsive

Flexible Mediawww.synerzip.comComponents of Responsive

Media Querieswww.synerzip.comSo from the beginning, CSS was always looking beyond the screen. There are many types that were defined in CSS2.

Chances are youve worked with the all media type. Perhaps the print media type, as well as the screen media type. So these other seven media types are really not so common. However, there is one here thats very intriguing, handheld. Yes, there was a handheld media type defined in CSS2. Were going to come back to that in a little bit. But as I mentioned before, all, print, and screen, these are the three most likely media types that youve worked with. Lets just define these very quickly in case you havent.

And in particular, lets look at handheld. Because for our purposes, this is really one of the most interesting. Again, the code looks something like this. You could have a stylesheet called handheld.css and the media=handheld. And this means that if the browser detects a handheld device, then send it this stylesheet.

In reality, this media type is actually very limited. The reason why is we can have that stylesheet, and it will send those styles to a number of common devices. However, over here on the right, we have our friend the iPhone. And guess what? The iPhone did not ever recognize or use handheld media types. The Grid System

StructureConsistencyPredictabilityDefine spatial relationshipwww.synerzip.comThe Grid System

www.synerzip.comFlexible Images

www.synerzip.comThorny issue - in world of web design

Poor responsive performance - images need to deliver but not at the cost of performance

Fluid Images - need to flex based on layout - setting image width to 100% simple solution

Large images - scaling down to smaller VPs

Original image - 4272 x 2848 px - 2MB - jpeg 80%Desktop - 1140 x 960 pc - 400kTablet Size - 1024 x 683 px - 188KTablet (Portrait) 768 x 512px - 107KSmart Phone 320 x 213px - 20K

Diff screen sizes require different editorial content

Solution - Media Queries and bg imagesOnly works for bg images

Responsive images communty group

2 Options

picture element or srcset atribute

picture - allows to declare multiple sources for an image

srcset piggy backs on the img tag - Scott Jehl - Picture Fill - add data-src points to a jpg image and data-media for a matching media queryNeeds JS - need older browser support. Allowed to use retinaLeading client side options

Adaptive Images - Serve side solutionServer - HTML-Images need - htaccess and adptive-images.php needs to be hosted on the server. Adding JS into site and add media queries in the PHP files. When there is a request for a certain image, the img will be created on fly.

Downside - its serverside - might not fit on your solution

SENCHA.IO SRCImage is resized to fit physical screen of device based on user agent access

Sencha is a proxy that lies between image assets and the browser.

Other solutions other than pixelsSVGWell supported - best suited for line art or iconsResolution independantScales to all s