WEB DESIGN
IN THE ERA
OF MOBILE
Trần Lê Duy Tiên
A Proud Clicker @ VNG Corp.
http://facebook.com/leduytien
http://zini.vn/leduytien
Online newspaper in the
quake of mobileera
Online news in the “mobile first” era
The web is so old-
fashion
We must have app,
it’s “cooler”
Hownewspapersrespond?
THE WEB ON DESKTOP
HTTP://WWW.VNEXPRESS.NET
THE MOBILE WEB
HTTP://M.VNEXPRESS.NET
THE APP
APP STORE
...
The challenge of
designers/coders/“PRODUCT-ER”
CHALLENGEFOR DESIGNERS
the browserS
#standard #XHTML #typography
#css #ie6fix #compatibility
THE DEVICES
#iPad #iPhone #an...
CHALLENGE FOR CODER AND “PRODUCT-ER”
AS CODERS
• Code and
maintain
different versions
of the same
product
AS “PRODUCT-ER”
...
THE PROMISE LAND FOR US WOULD BE…
DESIGN ONCE, CODE ONCE
VIEW ANYWHERE
BEFORE WE GO TO THAT LAND…
Introduce
zing news version3
Demo time - ONE design FIT ALL screen
Benefitof havingoneversion
• We no longer have to maintain different
version. Update to the desktop
automatically reflect ...
Thefuture of web design
Responsive design
Whatis responsivedesign?
•Screen size
• Time of the day
• Location
• Pointing method
Design that automatically adapt to
th...
HOWTO MAKEREPONSIVEDESIGN?
“There is a media query for that”
@media tv/print/projection/3d-glasses
@media all and (orienta...
CODEFOR DESKTOPFIRST
Always design & code for
the most popular case first.
In our case, it’s desktop
screen. Most of our v...
Tips whencodefor desktop
Overide the default box model of browser
* { -moz-box-sizing: border-box; -webkit-box-sizing: bor...
Tips CODINGFOR DESKTOP… (CONT’D)
For images element, define the frame and use
background css attribute to have picture fil...
deciding at which size your design
would respond to
3200 480 768 1024
Go to Google Analytics and see what screen size are
...
OVERRIDINGYOURBASESTYLE
Once decided on the screensize, overriding the base CSS
using media query.
Sorting your media quer...
TIPS FOR OVERRIDING CSS IN MEDIA QUERY
- Remember to define the viewport in header
<meta name="viewport" content="width=de...
DIMENSIONEXTENSIONFOR CHROME
conclusion
Responsivedesignisthefuture
• Responsive design is not difficult. XHTML/CSS
coders can use it without much learning.
• It’...
EVERY WEB DESIGNER SHOULD BEGIN
GETTING FAMILIAR WITH RESPONSIVE DESIGN
TECHNIQUE. IT’S THE FUTURE.
FOR PRODUCT MANAGER HI...
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,152 views
1,008 views

Published on

This is the slide of my presentation about responsive web design at Barcamp Saigon 2013.

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,152
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
42
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. WEB DESIGN IN THE ERA OF MOBILE
  2. 2. Trần Lê Duy Tiên A Proud Clicker @ VNG Corp. http://facebook.com/leduytien http://zini.vn/leduytien
  3. 3. Online newspaper in the quake of mobileera
  4. 4. Online news in the “mobile first” era The web is so old- fashion We must have app, it’s “cooler”
  5. 5. Hownewspapersrespond? THE WEB ON DESKTOP HTTP://WWW.VNEXPRESS.NET THE MOBILE WEB HTTP://M.VNEXPRESS.NET THE APP APP STORE Make redirection based on device
  6. 6. The challenge of designers/coders/“PRODUCT-ER”
  7. 7. CHALLENGEFOR DESIGNERS the browserS #standard #XHTML #typography #css #ie6fix #compatibility THE DEVICES #iPad #iPhone #android #smartphone #tablet #smartTV YESTERDAY TODAY
  8. 8. 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
  9. 9. THE PROMISE LAND FOR US WOULD BE… DESIGN ONCE, CODE ONCE VIEW ANYWHERE BEFORE WE GO TO THAT LAND…
  10. 10. Introduce zing news version3
  11. 11. Demo time - ONE design FIT ALL screen
  12. 12. Benefitof havingoneversion • 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.
  13. 13. Thefuture of web design Responsive design
  14. 14. Whatis responsivedesign? •Screen size • Time of the day • Location • Pointing method Design that automatically adapt to the viewer’s viewing environment.
  15. 15. HOWTO MAKEREPONSIVEDESIGN? “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
  16. 16. CODEFOR DESKTOPFIRST 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
  17. 17. Tips whencodefor 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.
  18. 18. Tips CODINGFOR 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> CSS article {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%;}
  19. 19. 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)
  20. 20. OVERRIDINGYOURBASESTYLE 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
  21. 21. 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.
  22. 22. DIMENSIONEXTENSIONFOR CHROME
  23. 23. conclusion
  24. 24. Responsivedesignisthefuture • 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
  25. 25. 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)

×