responsive web design

WEB DESIGN IN THE ERA OF MOBILE

Trần Lê Duy TiênA Proud Clicker @ VNG Corp.

http://facebook.com/leduytien

http://zini.vn/leduytien

Online newspaper in the

quake of mobile era

Online news in the “mobile first” era

The web is so old-fashion

We must have app, it’s “cooler”

How newspapers respond?

THE WEB ON DESKTOPHTTP://WWW.VNEXPRESS.NET

THE MOBILE WEBHTTP://M.VNEXPRESS.NET

THE APPAPP STORE

Make redirection based on device

The challenge of

designers/coders/“PRODUCT-ER”

CHALLENGE FOR DESIGNERS

the browserS

#standard #XHTML #typography #css #ie6fix #compatibility

THE DEVICES#iPad #iPhone #android

#smartphone #tablet #smartTV

YESTERDAY TODAY

CHALLENGE FOR CODER AND “PRODUCT-ER”

AS CODERS• Code and

maintain different versions of the same product

AS “PRODUCT-ER”• Make sure all

versions are in synced

• Provide consistent and accurate analytics

THE PROMISE LAND FOR US WOULD BE…

DESIGN ONCE, CODE ONCE VIEW ANYWHEREBEFORE WE GO TO THAT LAND…

Introduce

zing news version 3

Demo time - ONE design FIT ALL screen

Benefit of having one version

• We no longer have to maintain different version. Update to the desktop automatically reflect on the mobile version.

• Consistent sharing experience. This is difficult in the case we have to redirect to a different domain on mobile

• Better pageview tracking across devices.The new GA code even allow support tracking visitors across devices.

The future of web design

Responsive design

What is responsive design?

• Screen size• Time of the day• Location• Pointing method

Design that automatically adapt to the viewer’s viewing environment.

HOW TO MAKE REPONSIVE DESIGN?

“There is a media query for that”@media tv/print/projection/3d-glasses

@media all and (orientation:landscape)

@media screen and (resolution: 96dpi)

@media screen and (min-width : 1224px)

@media all and (-webkit-min-device-pixel-ratio: 2)

@media all and (device-aspect-ratio: 4/3)

You can mix them together too@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)

Not all supported by all browsers, but luckily they are universally supported in all mobile browser

CODE FOR DESKTOP FIRST

Always design & code for the most popular case first.

In our case, it’s desktop screen. Most of our visitors come from desktop:• On desktop, IE6 & 7 are still used by

many• The “standard” screen size for desktop

browser is 1024x768

CSS styles for most popular

case

Media Query override for different screen size

Styles.css

Tips when code for desktop

Overide the default box model of browser* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

If you design fixed layout for the desktoop, in CSS convert all width in pixel to percentage relative to the parent element. The only element with pixel width is the most outer one

#wrapper {width: 960px;}

#wrapper .left {width:25%;margin-right:0.625%;} /* = 240px & 6px */

#wrapper .center {width:52.08%;margin-right:0.625} /*= 500px & 6px */

#wrapper .right {width:21.667%;} /* = 208px */

As always, simplify your HTML code as much as possible. The less elements, the less you have to do later.

Tips CODING FOR DESKTOP … (CONT’D)

For images element, define the frame and use background css attribute to have picture fill the frame

HTML<article>

<p class=“cover” style=“background-image:url(cover.jpg);”>

<img src=“cover.jpg” … />

</p>

</article>

CSSarticle {width: 50%; height:100px;}article .cover img {display:none;}article .cover {width:40%;height:100%;background-repeat:no-repeat; background-size:cover; background-position: 50% 50%;}

deciding at which size your design

would respond to

3200 480 768 1024

Go to Google Analytics and see what screen size are the most popular ones. As a rule, pay focus to optimize for screen sizes used by more than10% visitors

iPhone (portrait)Small smartphone

iPhone (landscape)Bigger smartphone

7 inch tablet(i.e. Kindle) iPad (portrait) Desktop

iPad (Landscape)

OVERRIDING YOUR BASE STYLE

Once decided on the screensize, overriding the base CSS using media query. Sorting your media query so that you have to use the least overriding code:- CSS for standard 1024px width normal css (no media query), base for all styles

- @media screen and (min-width: 1200px) 1200px and bigger

- @media screen and (max-width: 1023px)iPad & all mobile devices

- @media screen and (max-width: 767px) 7 inch tablet and smaller

- @media screen and (min-width:600px) and (max-width: 799px)7 inch tablet only

- @media screen and (max-width: 599px)smartphone

TIPS FOR OVERRIDING CSS IN MEDIA QUERY

- Remember to define the viewport in header<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

- Use screen-width insteads of device-width

- Depending on how you define font-size, you might need to change font size on different screen so that text can easily been read.

- In responding to smaller/bigger screen size, do show/hide unnecessary element or redefine the grid.

- Make text link big enough so that it “touchable”. Always test your design on real device.

DIMENSION EXTENSION FOR CHROME

conclusion

Responsive design is the future

• Responsive design is not difficult. XHTML/CSS coders can use it without much learning.

• It’s require just a bit of thinking on the designer/coder part but in exchange reduce the cost of maintaining different versions

• If you have a website and want a mobile version of it with the same content, then responsive design is the way to go

• Obvious cases where responsive design is preferable beside news: e-commerce, banking

EVERY WEB DESIGNER SHOULD BEGIN GETTING FAMILIAR WITH RESPONSIVE DESIGN TECHNIQUE. IT’S THE FUTURE.

FOR PRODUCT MANAGER HIRING NEW WEB DESIGNER, REMEMBER TO ASK IF HE/SHE KNOW HOW TO CREATE RESPONSIVE DESIGN (OR AT LEAST KNOW WHAT IT IS)