• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sitecore and Responsive Web Design
 

Sitecore and Responsive Web Design

on

  • 8,429 views

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

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

Statistics

Views

Total Views
8,429
Views on SlideShare
3,947
Embed Views
4,482

Actions

Likes
3
Downloads
57
Comments
0

9 Embeds 4,482

http://www.isitedesign.com 4392
https://twitter.com 56
http://feeds.feedburner.com 13
http://cms.productie.dela.nl 9
https://www.google.co.uk 4
https://www.google.com 3
http://accessibility_checker.siteimprove.com 2
http://www.dela.nl 2
http://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
  • 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)
  • Adaptive vs. ResponsiveDesign with Progressive Enhancement: March 2010Responsive Web Design article – May 2010Adaptive Web Design book – May 2011Responsive Web Design book – 2011Mobile First: 2011
  • 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.
  • I’d say this isn’t adaptive but some use that term for this approach
  • One more - RESS (Responsive Design + Server Side Components)
  • Separate content from designFinalize content before design begins (don’t laugh, it’s possible!)
  • Delight.us – responsive site on WordPress
  • Planar.com – responsive site on Umbraco CMS
  • Media Query basics – this is how specific CSS rules get applied only in specific contexts, once the base CSS has been defined.
  • 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
  • Note the Rotate Button

Sitecore and Responsive Web Design Sitecore and Responsive Web Design Presentation Transcript

  • #sitecoreneug #rwdResponsive WebDesign & SitecoreSitecore New England User GroupApril 24, 2013
  • #sitecoreneug #rwdAgenda• Context• Panel Discussion– Device sensing & layout switching– UX Methodology & RWD– Mobile optimization & polyfills– Bringing it in to Sitecore• Q & A
  • #sitecoreneug #rwdPanelWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr. Front End DeveloperOzell McBrideSr. Sitecore DeveloperJohn EckmanManaging Director
  • #sitecoreneug #rwdhttp://alistapart.com/article/dao“Now is the time for the medium of the web tooutgrow its origins in the printed page. . . . It is thenature of the web to be flexible, and it should beour role as designers and developers to embracethis flexibility . . . The journey begins by letting goof control, and becoming flexible.”
  • #sitecoreneug #rwdhttp://www.alistapart.com/articles/responsive-web-design/#sitecore-neug #rwd
  • #sitecoreneug #rwd
  • #sitecoreneug #rwd
  • #sitecoreneug #rwdTerminologyAdaptive• Predefined set oflayout sizes• ProgressiveEnhancement viaJavaScript and CSS toadapt to capabilitiesof calling deviceResponsive• Fluid, proportion-based grids• Flexibleimages/media• Media Queries
  • #sitecoreneug #rwdSitecore Device Layouts• Define different layouts for device types, relyon server-side user-agent detection andlayout switching• Different markup (CSS, JavaScript, HTML) willbe served to different devices• Is this “Adaptive” design?#sitecoreneug #rwd
  • #sitecoreneug #rwdMobile ApproachesNativeAppMobile Webw/ WrapperSeparatemobilesiteServer-sidedevicesensing AdaptiveResponsive
  • #sitecoreneug #rwdSometimes Responsive Design is not an Option…• Time & Budget Constraints• Legacy Installations• Different functional requirements fordifferent devices
  • #sitecoreneug #rwdSitecore Devices & Layouts• Create Devices• Assign DifferentLayouts to Devices• Item Level• Standard Valueson the Template
  • #sitecoreneug #rwdDevice Detection• Custom device detection• Brian Pedersens Sitecore and .NET BlogIdentifying mobile devices in Sitecorehttp://briancaos.wordpress.com/2012/04/12/identifying-mobile-devices-in-sitecore/• John WestUsing the Sitecore Rules Engine in a Custom Context: Settingthe Context Devicehttp://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 Doroshenkohttp://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx• 51Degrees.mobi database• Sitecore’s Rules engine
  • #sitecoreneug #rwdCity of CambridgeMobile Project
  • #sitecoreneug #rwdNot “Either-Or” but “Both-And”• Mixture of server-side device detection ANDresponsive approaches (fluid grids, flexiblemedia, even media queries)• RESS – responsive design + server-sidecomponents• Mobile-friendly site + native app for specifictransactions
  • #sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First3. Think through Interaction
  • #sitecoreneug #rwdRWD UX Methodology1. The What and Why– Define business and user goals– Make those goals the North Star for everyone onthe team (including the client).– Map these goals to an experience rather than adevice2. Content First3. Think through Interaction
  • #sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First– Banish lorem ipsum– Define content strategy sooner rather than later– Content hierarchy mockups over flat wireframes3. Think through Interaction
  • #sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First3. 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 #rwdRWD UX Methodology: ToolsStyle Tiles: http://styletil.es/UI Sketcher: http://uisketcher.com/Foundation: http://foundation.zurb.com/
  • #sitecoreneug #rwdMobile 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 quicklyas your desktop site
  • #sitecoreneug #rwdPrimary Performance IssuesOVER DOWNLOADING POOR NETWORKSDownload & hideDownload & shrinkDownload & ignoreHigh Latency VariableBandwidthPacket loss
  • #sitecoreneug #rwdOptimizationReduce requests– Browser cache– Concatenate JS & CSS– Lazy load content (Ajaxinclude Pattern, LazyBlock)– data:URI– Conditional loading –Modernizr.loadReduce asset size– HTML, CSS, & Imagecompression– Replace Images withCSS/Canvas or use SVG– Minification– Avoid bulky frameworks
  • #sitecoreneug #rwdOptimizationSpeed-up page render– Avoid DOM reflows & repaints– Defer js loading– Lazy load JS – comment out JS that isn’t requiredat load, uncomment & eval() when needed– Touch beats onclick– Avoid social media widgets: just link
  • #sitecoreneug #rwdPolyfills• Modernizr (HTML5 Shim)• Respond.js• AppendAround.js• Picturefill.js• Ajax Include Pattern or Lazy Block
  • #sitecoreneug #rwdBringing it into Sitecore• IA, UX, Creative, Front End Developmentdecisions have already been made• Get inserted into the RWD conversation assoon as possible• Understand the effect of priority placement ofrenderings.
  • #sitecoreneug #rwdBringing it into Sitecore
  • #sitecoreneug #rwdBringing it into Sitecore
  • #sitecoreneug #rwdBringing it into SitecoreControl is wrapped with an attribute whichallows JavaScript to manipulate the DOM asneeded
  • #sitecoreneug #rwdBringing it into SitecoreThe resulting html output on a desktop:
  • #sitecoreneug #rwdBringing it into SitecoreThe resulting HTML output on a mobile device
  • #sitecoreneug #rwdBringing it into Sitecore• If possible keep transitional blocks in thelayout• Render images and videos without height andwidth attributes.• Implement Responsive image control– Use a library like Picturefill* and store images insitecore*https://github.com/scottjehl/picturefill
  • #sitecoreneug #rwdQ & AWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr. Front End DeveloperOzell McBrideSr. Sitecore DeveloperJohn EckmanManaging Director
  • #sitecoreneug #rwdLessons Learned• RWD affects strategy, ux design, visual design,front-end development, and Sitecoredevelopment• RWD doesn’t eliminate the need to optimizefor mobile performance• Responsive Images & Media – how to avoid“send & shrink” approach
  • #sitecoreneug #rwdLessons 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, embeddedmedia, iframes, forms)• Retrofitting is impossible really hard• There is no single mobile context• There are no silver bullets
  • #sitecoreneug #rwdResources• 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 SitecoreDevice 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 Simulatorshttp://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 #rwdAppendix
  • #sitecoreneug #rwdDelight.us
  • #sitecoreneug #rwdPlanar
  • #sitecoreneug #rwdMedia 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