Responsive Web Design for Dummy- DrupalCamp Hong Kong on Dec. 13th- By Water Zhang

1. Hong Kong Drupal User Group
Responsive Web Design
for Dummy
Water ZHANG
2014 Dec 13th

2. Water ZHANG
● Designer, PantaRei Design
– ltzhang4m@pantarei-design.com
● Multimedia Art Designer
– https://www.facebook.com/liting.zhang.73
– https://www.youtube.com/channel/UCpeAig4tjC4jj8JK5jp5Ptg
● Learner
– Don't get set into one form, adapt it and build your
own, and let it grow, be like water.

3. PantaRei Design
● Hong Kong based Free and Open Source Software (FOSS) service
provider
– Content Management System (CMS) with Drupal
– Cloud hosting with Amazon Web Services (AWS)
● Business Partnership
– 2012 - AWS Consulting Partner
– 2013 - Acquia Partner
– 2013 - Atlassian Experts
– 2014 - Rackspace Hosting Partner
● FOSS Contributor
– 2008 - Hong Kong Drupal User Group Co-founder
– 2012 - Drupal Services Provider

5. Outline
● Why mobile first in Drupal?
● Design process in RWD.
● Never dig the land mines for yourself.
● Time line in the project.

6. Why mobile first in Drupal?
● 53% & 31%, 93% & 35%
● “Graceful Degradation” & “Powerful Upgrade”
● Unknown screen size in the future.
● We need mobile-friendly CMS.

7. 31%
53%
Why mobile first in Drupal?-- 53% & 31%, 93% & 35%
2012.03

8. Why mobile first in Drupal?-- 53% & 31%, 93% & 35%

9. Why mobile first in Drupal?-- “Graceful Degradation” & “Powerful Upgrade”
● Graceful Degradation
● Powerful Upgrade

10. Why mobile first in Drupal?-- Unknown screen size in the future.

11. Why mobile first in Drupal?-- Unknown screen size in the future.

12. Why mobile first in Drupal?-- Unknown screen size in the future.

13. Why mobile first in Drupal?-- Unknown screen size in the future.

14. Why mobile first in Drupal?-- Unknown screen size in the future.

15. Why mobile first in Drupal?-- Unknown screen size in the future.

16. Why mobile first in Drupal?-- Unknown screen size in the future.

17. Why mobile first in Drupal?-- nown screen size in the future.

18. Why mobile first in Drupal?-- We need mobile-friendly CMS.
● Loading
● Huge mobile users
● Clients want it

19. Design process in RWD.
Details
Single Color
Black&White
Dummy
Wireframe
4
3
2
1
1
5 6
4
3
2
1
5
4
3
2
6
6
5
4
3
Mobile Desktop Tablet Theme

20. Never dig land mines for yourself.
● “I need more reference.”
● “Please give me a Mockup.”
● “Make it beautiful.”
● “I want free style.”

21. Never dig land mines for yourself.-- “I need more reference.”

22. Never dig land mines for yourself.-- “Please give me a Mockup.”

23. Never dig land mines for yourself.-- “Make it beautiful.”

24. Never dig land mines for yourself.-- “I want free style.”

25. Time line in the project.
● Copy it as RWD design process.
● Confirm everything step by step.
● Call them thousand times and make them
feel like VIP.

26. Time line in the project.-- Copy it as RWD design process. & Confirm everything step by step.

27. Time line in the project.-- Call them thousand times and make them feel like VIP.

28. References
● https://www.otreva.com/blog/mobile-web-design-mobile-first-responsive-● http://palantir.net/blog/drupal-8-mobile-initiative
● http://simplytest.me/project/drupal/8.0.x
● http://wearecircus.ca/2014/6-new-reasons-why-your-website-must-be-● http://developer.android.com/guide/practices/screens_support.html
● http://www.lostingoogle.me/en/global-digital-statistics-2014-social-digital-● http://groovedigitalmarketing.com/3-reasons-must-mobile-friendly-website/

29. Q & A

30. I Need More Help!
● Read documents from Drupal Community
– https://drupal.org/documentation
● Join Hong Kong Drupal User Group
– Event organizing: http://www.meetup.com/drupalhk
– Technological discussion: https://groups.drupal.org/drupalhk
– Business connection:
http://www.linkedin.com/groups/?gid=6644792
– General sharing: https://www.facebook.com/groups/drupalhk
● Contact us for one (1) month free-trial support service
– http://pantarei-design.com/services/support/#support-service-plans

31. Thank You
● Please feel free to contact us:
– PantaRei Design Limited
– Unit 326, 3/F, Building 16W
No.16 Science Park West Avenue
Hong Kong Science Park, Shatin, N.T.
– Phone: +852 2576 3812
– Fax: +852 3753 3663
– Email: sales@pantarei-design.com
– Web: http://pantarei-design.com