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

1. WEB DESIGN
IN THE ERA
OF MOBILE

2. Trần Lê Duy Tiên
A Proud Clicker @ VNG Corp.
http://facebook.com/leduytien
http://zini.vn/leduytien

3. Online newspaper in the
quake of mobileera

4. Online news in the “mobile first” era
The web is so old-
fashion
We must have app,
it’s “cooler”

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. The challenge of
designers/coders/“PRODUCT-ER”

7. CHALLENGEFOR DESIGNERS
the browserS
#standard #XHTML #typography
#css #ie6fix #compatibility
THE DEVICES
#iPad #iPhone #android
#smartphone #tablet #smartTV
YESTERDAY TODAY

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. THE PROMISE LAND FOR US WOULD BE…
DESIGN ONCE, CODE ONCE
VIEW ANYWHERE
BEFORE WE GO TO THAT LAND…

10. Introduce
zing news version3

11. Demo time - ONE design FIT ALL screen

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. Thefuture of web design
Responsive design

14. Whatis responsivedesign?
•Screen size
• Time of the day
• Location
• Pointing method
Design that automatically adapt to
the viewer’s viewing environment.

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. 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. 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. 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. 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. 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. 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. DIMENSIONEXTENSIONFOR CHROME

23. conclusion

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. 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)