Sitecore New England User Group met to discuss responsive web design considerations with the CMS.

1. #sitecoreneug #rwd
Responsive Web
Design & Sitecore
Sitecore New England User Group
April 24, 2013

2. #sitecoreneug #rwd
Agenda
• Context
• Panel Discussion
– Device sensing & layout switching
– UX Methodology & RWD
– Mobile optimization & polyfills
– Bringing it in to Sitecore
• Q & A

3. #sitecoreneug #rwd
Panel
Wendy Derstine
Sitecore Solutions Architect
Deanna Glaze
Sr. User Experience Designer
Petra Gregorová
Sr. Front End Developer
Ozell McBride
Sr. Sitecore Developer
John Eckman
Managing Director

4. #sitecoreneug #rwd
http://alistapart.com/article/dao
“Now is the time for the medium of the web to
outgrow its origins in the printed page. . . . It is the
nature of the web to be flexible, and it should be
our role as designers and developers to embrace
this flexibility . . . The journey begins by letting go
of control, and becoming flexible.”

5. #sitecoreneug #rwd
http://www.alistapart.com/articles/responsive-web-design/
#sitecore-neug #rwd

6. #sitecoreneug #rwd

7. #sitecoreneug #rwd

8. #sitecoreneug #rwd
Terminology
Adaptive
• Predefined set of
layout sizes
• Progressive
Enhancement via
JavaScript and CSS to
adapt to capabilities
of calling device
Responsive
• Fluid, proportion-
based grids
• Flexible
images/media
• Media Queries

9. #sitecoreneug #rwd
Sitecore Device Layouts
• Define different layouts for device types, rely
on server-side user-agent detection and
layout switching
• Different markup (CSS, JavaScript, HTML) will
be served to different devices
• Is this “Adaptive” design?
#sitecoreneug #rwd

10. #sitecoreneug #rwd
Mobile Approaches
Native
App
Mobile Web
w/ Wrapper
Separate
mobile
site
Server-side
device
sensing Adaptive
Responsive

11. #sitecoreneug #rwd
Sometimes Responsive Design is not an Option…
• Time & Budget Constraints
• Legacy Installations
• Different functional requirements for
different devices

12. #sitecoreneug #rwd
Sitecore Devices & Layouts
• Create Devices
• Assign Different
Layouts to Devices
• Item Level
• Standard Values
on the Template

13. #sitecoreneug #rwd
Device Detection
• Custom device detection
• Brian Pedersen's Sitecore and .NET Blog
Identifying mobile devices in Sitecore
http://briancaos.wordpress.com/2012/04/12/identifying-mobile-
devices-in-sitecore/
• John West
Using the Sitecore Rules Engine in a Custom Context: Setting
the Context Device
http://www.sitecore.net/Community/Technical-Blogs/John-West-
Sitecore-Blog/Posts/2010/11/Using-the-Sitecore-Rules-Engine-in-a-
Custom-Context-Setting-the-Context-Device.aspx
• Sitecore Mobile Device Detector Module
• Alex Doroshenko
http://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx
• 51Degrees.mobi database
• Sitecore’s Rules engine

14. #sitecoreneug #rwd
City of Cambridge
Mobile Project

15. #sitecoreneug #rwd
Not “Either-Or” but “Both-And”
• Mixture of server-side device detection AND
responsive approaches (fluid grids, flexible
media, even media queries)
• RESS – responsive design + server-side
components
• Mobile-friendly site + native app for specific
transactions

16. #sitecoreneug #rwd
RWD UX Methodology
1. The What and Why
2. Content First
3. Think through Interaction

17. #sitecoreneug #rwd
RWD UX Methodology
1. The What and Why
– Define business and user goals
– Make those goals the North Star for everyone on
the team (including the client).
– Map these goals to an experience rather than a
device
2. Content First
3. Think through Interaction

18. #sitecoreneug #rwd
RWD UX Methodology
1. The What and Why
2. Content First
– Banish lorem ipsum
– Define content strategy sooner rather than later
– Content hierarchy mockups over flat wireframes
3. Think through Interaction

19. #sitecoreneug #rwd
RWD UX Methodology
1. The What and Why
2. Content First
3. Think through Interaction
– Consider all use cases, even edge cases
• Interface vs. page, fluid vs. static
• Map out task flows
– Sketch first: Paper (or whiteboard) is your friend
– Show chrome: context in RWD is important
– Live Prototype: iterate early and often

20. #sitecoreneug #rwd
RWD UX Methodology: Tools
Style Tiles: http://styletil.es/
UI Sketcher: http://uisketcher.com/
Foundation: http://foundation.zurb.com/

21. #sitecoreneug #rwd
Mobile First = Optimization First
• Avg. weight of web pages is 1.3MB (IMG + JS = 77%)
• 72% RWD sites weight the same as desktop
• 71% users expect your mobile site to load as quickly
as your desktop site

22. #sitecoreneug #rwd
Primary Performance Issues
OVER DOWNLOADING POOR NETWORKS
Download & hide
Download & shrink
Download & ignore
High Latency Variable
Bandwidth
Packet loss

23. #sitecoreneug #rwd
Optimization
Reduce requests
– Browser cache
– Concatenate JS & CSS
– Lazy load content (Ajax
include Pattern, Lazy
Block)
– data:URI
– Conditional loading –
Modernizr.load
Reduce asset size
– HTML, CSS, & Image
compression
– Replace Images with
CSS/Canvas or use SVG
– Minification
– Avoid bulky frameworks

24. #sitecoreneug #rwd
Optimization
Speed-up page render
– Avoid DOM reflows & repaints
– Defer js loading
– Lazy load JS – comment out JS that isn’t required
at load, uncomment & eval() when needed
– Touch beats onclick
– Avoid social media widgets: just link

25. #sitecoreneug #rwd
Polyfills
• Modernizr (HTML5 Shim)
• Respond.js
• AppendAround.js
• Picturefill.js
• Ajax Include Pattern or Lazy Block

26. #sitecoreneug #rwd
Bringing it into Sitecore
• IA, UX, Creative, Front End Development
decisions have already been made
• Get inserted into the RWD conversation as
soon as possible
• Understand the effect of priority placement of
renderings.

27. #sitecoreneug #rwd
Bringing it into Sitecore

28. #sitecoreneug #rwd
Bringing it into Sitecore

29. #sitecoreneug #rwd
Bringing it into Sitecore
Control is wrapped with an attribute which
allows JavaScript to manipulate the DOM as
needed

30. #sitecoreneug #rwd
Bringing it into Sitecore
The resulting html output on a desktop:

31. #sitecoreneug #rwd
Bringing it into Sitecore
The resulting HTML output on a mobile device

32. #sitecoreneug #rwd
Bringing it into Sitecore
• If possible keep transitional blocks in the
layout
• Render images and videos without height and
width attributes.
• Implement Responsive image control
– Use a library like Picturefill* and store images in
sitecore
*https://github.com/scottjehl/picturefill

33. #sitecoreneug #rwd
Q & A
Wendy Derstine
Sitecore Solutions Architect
Deanna Glaze
Sr. User Experience Designer
Petra Gregorová
Sr. Front End Developer
Ozell McBride
Sr. Sitecore Developer
John Eckman
Managing Director

34. #sitecoreneug #rwd
Lessons Learned
• RWD affects strategy, ux design, visual design,
front-end development, and Sitecore
development
• RWD doesn’t eliminate the need to optimize
for mobile performance
• Responsive Images & Media – how to avoid
“send & shrink” approach

35. #sitecoreneug #rwd
Lessons Learned
• Content editors can still cause problems
• QA will take longer than you think
• You will find edge cases that are suboptimal
• Beware third-parties (ad networks, embedded
media, iframes, forms)
• Retrofitting is impossible really hard
• There is no single mobile context
• There are no silver bullets

36. #sitecoreneug #rwd
Resources
• Sitecore Adaptive Images:
http://marketplace.sitecore.net/en/Modules/Sitecore_Adaptive_Images.aspx
• Responsive Web Design Done Better with Sitecore Device Detection:
http://larre.fixstar.net/2013/02/responsive-web-design-in-sitecore/
• Does Adaptive Beat Responsive: http://www.sitecore.net/Community/Best-
Practice-Blogs/Phil-Broadbery/Posts/2013/03/Does-adaptive-design-beat-
responsive-design.aspx
• The Presentation Strategy of Launch Sitecore (RWD principles along with Sitecore
Device Layouts): http://www.sitecore.net/Community/Technical-
Blogs/Maximizing-Usability/Posts/2012/11/The-Presentation-Strategy-of-Launch-
Sitecore.aspx
• Sitecore ASP.NET CMS 6.6 Features: Device Simulators
http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-
Blog/Posts/2012/11/Sitecore-ASPNET-CMS-6-6-Features-Device-Simulation.aspx
• https://github.com/scottjehl/picturefill

37. #sitecoreneug #rwd
Appendix

38. #sitecoreneug #rwd
Delight.us

39. #sitecoreneug #rwd
Planar

40. #sitecoreneug #rwd
Media Queries
/* basic css for all sizes first */
/* 480px / 16px = 30em ________________ */
@media only screen and (min-width: 30em) {
/* stuff here only applies above 480px wide */
}
/* 600px / 16px = 37.5em _______________ */
@media only screen and (min-width: 37.5em) {
/* stuff here only applies above 600px */
}
/* etc */

41. #sitecoreneug #rwd

42. #sitecoreneug #rwd