KEMBAR78
Sitecore and Responsive Web Design | PPTX
#sitecoreneug #rwd
Responsive Web
Design & Sitecore
Sitecore New England User Group
April 24, 2013
#sitecoreneug #rwd
Agenda
• Context
• Panel Discussion
– Device sensing & layout switching
– UX Methodology & RWD
– Mobile optimization & polyfills
– Bringing it in to Sitecore
• Q & A
#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
#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.”
#sitecoreneug #rwd
http://www.alistapart.com/articles/responsive-web-design/
#sitecore-neug #rwd
#sitecoreneug #rwd
#sitecoreneug #rwd
#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
#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
#sitecoreneug #rwd
Mobile Approaches
Native
App
Mobile Web
w/ Wrapper
Separate
mobile
site
Server-side
device
sensing Adaptive
Responsive
#sitecoreneug #rwd
Sometimes Responsive Design is not an Option…
• Time & Budget Constraints
• Legacy Installations
• Different functional requirements for
different devices
#sitecoreneug #rwd
Sitecore Devices & Layouts
• Create Devices
• Assign Different
Layouts to Devices
• Item Level
• Standard Values
on the Template
#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
#sitecoreneug #rwd
City of Cambridge
Mobile Project
#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
#sitecoreneug #rwd
RWD UX Methodology
1. The What and Why
2. Content First
3. Think through Interaction
#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
#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
#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
#sitecoreneug #rwd
RWD UX Methodology: Tools
Style Tiles: http://styletil.es/
UI Sketcher: http://uisketcher.com/
Foundation: http://foundation.zurb.com/
#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
#sitecoreneug #rwd
Primary Performance Issues
OVER DOWNLOADING POOR NETWORKS
Download & hide
Download & shrink
Download & ignore
High Latency Variable
Bandwidth
Packet loss
#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
#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
#sitecoreneug #rwd
Polyfills
• Modernizr (HTML5 Shim)
• Respond.js
• AppendAround.js
• Picturefill.js
• Ajax Include Pattern or Lazy Block
#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.
#sitecoreneug #rwd
Bringing it into Sitecore
#sitecoreneug #rwd
Bringing it into Sitecore
#sitecoreneug #rwd
Bringing it into Sitecore
Control is wrapped with an attribute which
allows JavaScript to manipulate the DOM as
needed
#sitecoreneug #rwd
Bringing it into Sitecore
The resulting html output on a desktop:
#sitecoreneug #rwd
Bringing it into Sitecore
The resulting HTML output on a mobile device
#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
#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
#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
#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
#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
#sitecoreneug #rwd
Appendix
#sitecoreneug #rwd
Delight.us
#sitecoreneug #rwd
Planar
#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 */
#sitecoreneug #rwd
#sitecoreneug #rwd

Sitecore and Responsive Web Design

  • 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 SitecoreSolutions 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 isthe 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.
  • 6.
  • 7.
  • 8.
    #sitecoreneug #rwd Terminology Adaptive • Predefinedset 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 DeviceLayouts • 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 MobileWeb w/ Wrapper Separate mobile site Server-side device sensing Adaptive Responsive
  • 11.
    #sitecoreneug #rwd Sometimes ResponsiveDesign 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 ofCambridge 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 UXMethodology 1. The What and Why 2. Content First 3. Think through Interaction
  • 17.
    #sitecoreneug #rwd RWD UXMethodology 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 UXMethodology 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 UXMethodology 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 UXMethodology: 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 PerformanceIssues 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 pagerender – 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 itinto 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.
  • 28.
  • 29.
    #sitecoreneug #rwd Bringing itinto Sitecore Control is wrapped with an attribute which allows JavaScript to manipulate the DOM as needed
  • 30.
    #sitecoreneug #rwd Bringing itinto Sitecore The resulting html output on a desktop:
  • 31.
    #sitecoreneug #rwd Bringing itinto Sitecore The resulting HTML output on a mobile device
  • 32.
    #sitecoreneug #rwd Bringing itinto 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 • SitecoreAdaptive 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.
  • 38.
  • 39.
  • 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.
  • 42.

Editor's Notes

  • #5 Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
  • #6 10 years later, Ethan Marcotte names Responsive Web Design. In between? 10 years of fixed-width, table-based layouts replaced by DIV-based but still fixed layouts. (And lots of people trying to make it better)
  • #7 Adaptive vs. ResponsiveDesign with Progressive Enhancement: March 2010Responsive Web Design article – May 2010Adaptive Web Design book – May 2011Responsive Web Design book – 2011Mobile First: 2011
  • #9 Interestingly, there’s lots of confusion about “Adaptive” as opposed to Responsive. Some in the Sitecore community use “adaptive” to refer to server-side device detection and layout switching.
  • #10 I’d say this isn’t adaptive but some use that term for this approach
  • #11 One more - RESS (Responsive Design + Server Side Components)
  • #19 Separate content from designFinalize content before design begins (don’t laugh, it’s possible!)
  • #39 Delight.us – responsive site on WordPress
  • #40 Planar.com – responsive site on Umbraco CMS
  • #41 Media Query basics – this is how specific CSS rules get applied only in specific contexts, once the base CSS has been defined.
  • #42 See http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2012/11/Sitecore-ASPNET-CMS-6-6-Features-Device-Simulation.aspxSitecore 6.6 Device Simulation
  • #43 Note the Rotate Button