RESPONSIVE WEB DESIGNADVANTAGES & BEST PRACTICE
19TH JUNE 2014
Darrin Addams• Co-founder with 25+ years’ experience• Ex-Capgemini
Mike Cundall• DNN Consultant• One of UK’s most skilled DNN specialists
PRESENTERS
Established in the UK in 2003 Based in Manchester, presence in London Largest specialist DNN team in the UK
• Analysts and Consultants• Web Developers and Software Engineers• UX Designers• Support• Project Managers
ABOUT US - COMPANY
Cantarus’ Mission StatementTo be the UK’s provider of choice for best-of-breed web
solutions based on DNN technology and through that to deliver innovation, quality and measurable ROI to our clients
ABOUT US
Originally a Microsoft technology demonstration DNN Platform: now the world’s largest open
source project on Microsoft technology Powers over 800,000 production websites Downloaded more than 7 million times World’s leading Microsoft-based WAF and CMS Under stewardship of DNN Corp. Base for Evoq products
ABOUT DNN SOFTWARE
DNN Platform:• Free, open source base
DNN Evoq Content:• Supported• Enterprise-class CMS• Two editions
DNN Evoq Social• Supported• Build social communities• Integrates with Evoq Content
Evoq as a Service DNN Evoq Suite: The Social CMS
DNN PRODUCTS
OUR CLIENTS
TennantsDistribution
One billion smartphones in use One half of all local searches via mobile devices Average users can spend 2.7 hours per day socialising on a
mobile device Over a third of all traffic on handheld mobile/tablet device Mobile (tablet and smartphone) traffic share increased
from 23% to 37% in 2013 Desktop traffic share decreased from 77% to 63% in 2013 Mobile and tablet web browsing set to overtake
traditional desktop usage in 2014
MOBILE DEVICE SHARE
AVERAGE UK MOBILE SHARE - 2013
Traditionally, websites always designed from desktop experience first
Mobile and tablet was a secondary goal Growing trend that mobiles considered first
and then work up to desktop experience “Mobile First” web-design quickly becoming a
widely-adopted design principle There are considerations such as what type of
user will be viewing your site
MOBILE FIRST
Graceful degradation is the idea that the designer starts with the desktop website and scales the site back to gradually remove content and features as the screen size becomes smaller.
GRACEFUL DEGRADATION
Progressive enhancement is the idea of starting with the best that can be achieved on a mobile device, designing a site that is the best it can possibly be for the smallest devices and then gradually enhanced for larger, desktop, screen sizes.
PROGRESSIVE ENHANCEMENT
Same goal, different results? GD may result in severely watered-down mobile version so
reality is to consider mobile as part of your desktop design PE can let you add/improve as you can which ties in with
Agile development (sprints which improve functionality) Performance can suffer from a GD approach as mobile can
end up loading desktop content which it then ignores. PE approach tends to produce leaner implementations
Foundation and Bootstrap are now mobile-first
DEGRADATION VS ENHANCEMENT
Aimed at crafting sites to provide an optimal viewing experience,
Easy reading and navigation with a minimum of resizing, panning, and scrolling,
Targets a wide range of devices (from mobile phones to desktop computer monitors),
A responsive site adapts its layout to the viewing environment by using:• Fluid, proportion-based grids, • Flexible images, • CSS3 media queries (@media rule extension).
RESPONSIVE DESIGN
Lower development costs (single site) Easier (cheaper) to maintain and support Content is easier to create and administer Simpler deployment Reduced hosting and resource utilisation
COSTS
Google recommends the use of Responsive Design for creating mobile websites:• Single content URL is easier for users to interact with,
share, and link to• Single content URL helps Google algorithms assign
indexing properties for content• No redirection needed for users to get device-
optimised view, which reduces loading time• Saves resources for site and Google crawlers• Single domain prevents SEO dilution across multiple
sites
SEO
Dedicated mobile sites may have more scope to meet requirements of mobile users
In practice, responsive design can usually meet all requirements
Many frameworks available to speed up site design and improve/standardise user experience
DNN offers a device-aware content preview feature Consolidated view – the ability to be device
agnostic when presenting content is implicit
USER EXPERIENCE (UX)
A responsive design may offer lower-performance than a dedicated mobile site as desktop elements of a page may be downloaded by a mobile device
Mobile sites may be more applicable for users in countries where Internet access speed is an issue
Dedicated mobile sites can be much more efficient in terms of:• Data transfer• Number of associated page requests
PERFORMANCE
Typically a structure of files and folders of standardized code • HTML, • CSS,• JavaScript (e.g. mobile image sliders, mobile UX)
Known as front-end/CSS frameworks Faster to develop with than a custom solution
RESPONSIVE FRAMEWORKS
Bootstrap • Built at Twitter, • Managed via GitHub,• Offers large number of styles.
Foundation • Made by ZURB, a product design company in
California, • Features Interchange (HTML partials for device-
specific content – more later), • Fewer styles out of the box than Bootstrap.
POPULAR FRAMEWORKS
Mobile first HTML 5 Uses Normalize.css to improve cross-browser rendering
(support IE8+) Fluid grid system scaling up to 12 columns as
device/viewport size increases Sass (Syntactically Awesome Style-Sheets)
• Extends and compiles into CSS• Supports Mixins (for code reuse), variables (numbers, strings,
colours and booleans), arguments, nested code and selector inheritance
EXAMPLE - BOOTSTRAP
Lets you selectively load entire sections based on the client device type
Load different sections of your page for particular media queries
Load up mobile-friendly components on small devices, and more robust/heavier/feature-rich components for desktops
Images - only load larger resources for devices that can handle it.
FOUNDATION – INTERCHANGE
Gumby – built on Sass pre-processor Yahoo Pure – lightweight, no JS plugins –
great for the metro design of Windows InK – includes drag/drop support and MIT-
licensed icons Skeleton, Responsive Grid System, Base,
Compass, Fluid Baseline Grid, etc.
OTHER FRAMEWORKS
Bootstrap and Foundation have standard download packages with styles and JS to support lots of components
You don’t need to download them all! Get only the JS and CSS you need for your
web site to reduce bloat and page load times Design first and then customise the package
to suit your requirements
LEVERAGING A FRAMEWORK
9-month project 25+ websites Migrated from bespoke
platform to DNN Evoq Largest DNN Evoq project by
daily page views Dozens of load-balanced web
servers Worked with DNN Corp. core
team Case study
SPORTS DIRECT
Sister website of SportsDirect.com Same catalogue of products as
SportsDirect.com Previously no support for mobile devices
CASE STUDY - LILLYWHITES
www.lillywhites.com
Support for mobile devices provided via 3rd party service
No support for tablet devices Very expensive to rollout new websites Have to maintain multiple codebases New features developed on desktop not
available on mobile devices Large % of users accessed the site via mobiles
devices…
PROBLEMS & BRIEF
Cantarus Brief:
“Convert the Sport Direct codebase into a supportable, feature rich, fully-
responsive framework with support for mobile and tablet devices…”
PROBLEMS & BRIEF
Visitors should not be aware if it is a responsive site as apposed to dedicated mobile site
Huge challenge to maintain performance with addition of responsive framework & additional mark-up code
IMPLEMENTATION
3 distinct views:• Desktop, Mobile & Tablet
Full gesture support Geo-IP detection of user location Switch to desktop/mobile view
KEY FEATURES
Responsive SwitchHTML5 Geolocation API
Lazy-load images Use a CDN such as CloudFlare Mobile-first helps! Load menus asynchronously
• Over 2/3 of mark-up for Lillywhites Homepage was mobile & desktop menus
• Menus are loaded after the page loads to give users the feeling of fast load
PERFORMANCE
DEMONSTRATION
LILLYWHITES
Mobile set to overtake desktop in 2014 Choose your delivery vehicle – responsive design or
separate mobile/desktop sites Google recommends responsive design Responsive generally the cheaper and more desirable
approach Dedicated mobile site may still be the best choice Decide if mobile-first is your preferred approach - GD
vs PE Front-end/CSS frameworks for responsive design
SUMMARY
Thanks for listening; questions are welcome!
Darrin Addams & Mike Cundall
E: [email protected]: +44 (0)161 813 3100 | F: +44 (0)207 657 4254
SOURCES
http://www.intelligentpositioning.com/blog/2014/01/mobile-and-tablet-traffic-set-to-overtake-desktop-by-mid-2014/
http://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpg
http://demos.jquerymobile.com/1.0a4.1/docs/_assets/images/jquery-logo.png
http://filzhut.net/projects/responsive-switch/static/images/logo.png