Video Recording is on https://www.youtube.com/watch?v=CP_mHfODWj0 Originally presented in June 2015 at the Drupal North Conference in Toronto - drupalnorth.org In this code-free session we'll take a 20,000 foot view of what's been happening with mobile websites over it's history. We'll review a number of the tools, techniques, and workflows that evolved to deal with the changing landscape of mobile web design. This session briefly introduce a wide range of tools & ideas and express why they add value to our workflows.

1. The State of Front End Architecture in 2015
Trends, Tools, and Workflows
Aidan Foster - Foster Interactive - @finteractive

2. AIDAN FOSTER - FRONT END ARCHITECT
Sass
T.O
meetup.com/Sass-Toronto/meetup.com/drupalTO/ drupalnorth.org
FOSTERINTERACTIVE.COM

3. “ You have to
know the past
to understand
the present. ”
-Carl Sagan
― Carl Sagan

4. Pre-mobile Era

5. 2007 2008 2009 2010 2011 2012 2013 2014 2015
iPhone 1
320x480 px
HTC G1
“HTC Dream”
320x480 px
ipad 1
768x1024 px
iphone 4
640x960 px
Samsung Note 1
Phablets
800x1280 px

6. 2009 2010 2011 2012 2013 2014 2015
windows 8
???x??? px
Surface RT
1366x768 px
xBox / TV
1920x1080 px
Android Wear
~250-400 square px
(Wear Internet Browser)
1 Billion Android

8. Testing
a. Supported Devices
b. Browsers to Test
c. Screen sizes!
a x b x c = !@%$#!&$
$
Performance
Mobile Networks
Image = screen size
#
Device Formats
Screen Size
Display Density
UI Controls
HTML Support
! "
Planning & Design
Cramming in Content
Design Process
%
Code Complexity
More code
More Flexible
&

9. 2007 2008 2009 2010 2011 2012 2013 2014 2015
" “retina” iphone 4
(“iphone 1” rez)
'
ipad 1
iphone “signature”
phablets
(“~ iphone1” rez)
"
Android
(“iphone” Agent )"
Dedicated Mobile
m.website.com"
 WURFL
“everything” User Agent
Capabilities database

10. "
''
"
BB Passport… Nice,
Samsung S4… Naughty,

11. Performance
#
Device Formats
! "
Testing
$
Planning & Design
%
Code Complexity
&
Dedicated Mobile in 2008
Kinda Worked

12. Not so much in 2015

13. Not so much in 2015

14. 2007 2008 2009 2010 2011 2012 2013 2014 2015
Early Mobile Era
(Dedicated Mobile Dark Ages)
Boston Globe
Ethan Marcotte

15. 08 2009 2010 2011 2012 2013 2014 2015
Early Mobile Era
(Dedicated Mobile Dark Ages)
Boston Globe Year of Responsive Design
(Mashable)
)
AODA Accessibility
WCGA 2.0 “A”)
Shopify 50+% traffic on mobile
*
Google
Mobilegeddon
+

16. Device Formats
! "
Performance
#
Testing
$
Planning & Design
%
Code Complexity
&
RESPONSIVE DESIGN
2012

17. Device Formats
! "
Performance
#
Testing
$
Planning & Design
%
Code Complexity
&
RESPONSIVE DESIGN
2012

18. Performance - Page Load time,
0 2 4 6 8 10
10
4
1
0.1 Instant
Freely Moving
Mind Wanders
No Longer Able to Focus on Task
Seconds
“Breaking the 1000ms Time
to Glass Mobile Barrier”
http://www.youtube.com/watch?v=Il4swGfTOSM

19. 1098kB
1324kB
1549kB
1775kB
2000kB
Sep
12
N
ov
12
Feb
13
A
pr13
Jul13
Sep
2013
D
ec
13
M
ar14
Jul14
A
ug
14
O
ct14
Jan
15
M
ar15
Total Transfer Size(kB)
http://httparchive.org/trends.php?s=All&minlabel=Sep+1+2012&maxlabel=Jun+1+2015
Performance - Page Load time,

20. Performance Budget,
target
(4s or less)
Test Deploy
Measure
competitors
http://danielmall.com/articles/how-to-make-a-performance-budget/
http://cognition.happycog.com/article/designing-with-a-performance-budget
Redesign
Develop

21. Automated Performance Tools,
http://www.webpagetest.org/

22. Automated Performance Tools,
developers.google.com/speed/pagespeed/insightshttp://www.webpagetest.org/

23. Bitmap
(.jpg, .png)
Vector
(.svg)
Scalar Vector Graphics-
Great for Icons + Logos

24. http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
Responsive Artwork
Small = Simple
Large = Complex
http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694
Colour Controlled by CSS
Single file for all variations
Scalar Vector Graphics-

25. <Picture> Element-
http://blog.cloudfour.com/responsive-images-101-definitions/

26. SASS - CSS PREPROCESSOR,
http://sass-lang.com

27. SASS - CSS PREPROCESSOR,
styles.css
SASS
Coder - Friendly,
Bite-sized Sass “partials”

28. Style Tiles
%
…a common visual
language between the
designers and the
stakeholders and
provide a catalyst for
discussions around the
preferences and goals of
the client.
Samantha Warren
Style Tiles

29. %
Design Systems vs Designing Pages
Less Like a page, more like a brand guide

30. Component Based Design - “Kitchen Sink Frameworks”,
Zurb Foundation Bootstrap

31. Component Based Design,
“Roll your own” Bootstrap - http://patternlab.io/

32. Component Based Design,

33. Main Menu Component
Component Based Design,

34. Main Menu Component
Masthead Component
Component Based Design,

35. Main Menu Component
Masthead Component
Action Component
Component Based Design,

36. Component Based Design,

37. Component Based Design,

38. Living Style Guides,
http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
styles.css
SASS
Sass “partials”

39. Living Style Guides,
http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/
styles.css
SASS
Sass “partials”
style guide
website
Hologram

40. Living Style Guides,

41. Living Style Guides,

42. Automated Visual Regression Testing,
Screen Shots CompareStart Test Reports
%

43. http://www.phase2technology.com/blog/css-testing-with-phantomcss-phantomjs-casperjs-and-grunt/
Automated Visual Regression Testing,

44. https://github.com/garris/BackstopJS
Automated Visual Regression Testing,

45. Browser Sync / Ghost Lab,

46. OOCSS
Object Oriented CSS (http://oocss.org/)
SMACSS
Scalable and Modular Architecture for CSS (http://smacss.com/)
BEM
Block - Element - Modifier (http://bem.info)
Drupal Coding Standards
https://www.drupal.org/coding-standards/css/architecture
CSS Naming Conventions,

47. SCSS Lint - The Coding Convention Enforcer,
<SCSS LINT> ME

48. SCSS Lint - The Coding Convention Enforcer,
./
All your team use the same customized “rules” for Sass Code

49. fea· tures (noun)
a) the structure, form, or appearance
especially of a person
& So that’s Lot of Tools…

50. fea· tures (noun)
a) the structure, form, or appearance
especially of a person
& So that’s Lot of Tools…

51. Task Automation,
gulpjs.com gruntjs.com

52. Task Automation - when I’m coding,
Style
Guide
SCSS
Lint
Compile
CSS
ON
SAVE
Refresh
Browsers

53. Task Automation - Pre-deploy Check,
Measure
competitors
Develop
Style
Guide
SCSS
Lint
Compile
CSS
Compress
Images
Compress
SVGs
Run
Production
Build
legacy
browser
css prefix
CSS
Regression
Test%Ready for
Q/A

54. 0
It’s not easy to setup
all these tools
1
#
Team
Velocity
Fewer Bugs
in QA
Optimized
Performance
2
Recycleable

55. Add 1 thing into the mix because we all have to start somewhere.
Take it in baby steps