sas corporate web forum | 11.11.12
DESCRIPTION
Dean Parker's presentation from our October 2012 Corporate Website Forum on responsive design – the idea of creating websites that work seamlessly across a range of different devices. We discussed the pros, cons and practicalities of designing and building responsive sites – as well as alternative approaches to creating online experiences for mobile devices.TRANSCRIPT
© SAS Part of MSLGROUP
Presentation by Dean Parker, SAS
Corporate Website ForumA brief introduction to responsive design
Thursday 11th October 2012
© SAS Part of MSLGROUP
Contents
1.What is it?2.Why use it?3.How to do it
© SAS Part of MSLGROUP
Contents
1.What is it?2.Why use it?3.How to do it
Responsive Design is a way
of creating a website that takes into account the size of the screen on which it is being viewed, to offer every user an optimised experience.
© SAS Part of MSLGROUP
From this…
© SAS Part of MSLGROUP
…to this.
© SAS Part of MSLGROUP
More examples…
http://bostonglobe.com/
http://www.sony.com/index.php
http://www.starbucks.com/
http://www.smashingmagazine.com/
http://choiceresponse.com/
http://css-tricks.com/
Although the primary feature
of Responsive Design is reacting to screen size, it should also consider other variables like resolution, connection speed & device/browser capabilities.
© SAS Part of MSLGROUP
Contents
1.What is it?2.Why use it?3.How to do it
© SAS Part of MSLGROUP
Because mobiles are increasingly being used to access the web…
5.3 billion mobile phone users worldwide(77% of world’s population)1
741 million mobile phone users in Europe1
‘Mobile only’ For many people, a mobile device is the only way they have of accessing the internet device (Egypt 70%, India 59%, US 25%, UK 22%)2
1 in 3 mobile Google searches are local3
50% of active Facebook and Twitter users access the service through their mobile devices4
200 million+ YouTube views are made every day using mobile devices5
1 Source: The International Telecommunication Union (Oct 2010)2 Source: On Device Research (2011)3 Source: Google (2011)4 Source: Facebook and Twitter (2011)5 Source: YouTube (2011)
© SAS Part of MSLGROUP
…and will soon dominate.
2014 Number of mobile page impressions will overtake desktop websites
Growth rate is 8 times greater than ‘desktop’ internet at the ‘same time’
Source: International Data Corporation (IDC) (Sept 2011)
2011 Over 85% of new
handsets able to access the internet
© SAS Part of MSLGROUP
The device market is becoming increasingly complicated…
+60different mobile browsers1
+6,500different web-capable mobile
devices2
1 Source: ComScore (2011)2 Source: dotMobi (July 2011)
© SAS Part of MSLGROUP
…and current approaches are unsustainable.
1.Functional mobile website
2.Basic mobile website3.Mobile website
framework4.Mobile app
1 2 3 4
© SAS Part of MSLGROUP
Or just don’t work!
1% of all page views are to the basic mobile version of the site
24% of all visits to the site are made using a mobile device
© SAS Part of MSLGROUP
Summary of benefits
1. More user friendly2. Future-proofs your websites3. More cost effective (in the long-term!)4. Easier to manage5. Better for SEO
© SAS Part of MSLGROUP
Contents
1.What is it?2.Why use it?3.How to do it
© SAS Part of MSLGROUP
Month 1 Month 2 Month 3 Month 4 Month 5
1. Discovery
2. Structure & content
3. Design
4. Build
5. Testing & launch
Traditional process
Creative concepts & design development
Bug fixing & launch
Define UX & content plan
Define req’s
Front & back-end build
Month 6
© SAS Part of MSLGROUP
Month 1 Month 2 Month 3 Month 4 Month 5
1. Discovery
2. Planning
3. Prototyping
4. Design
5. Development
Responsive process
Content planning, creative concepts, prototyping, design set-up, tech.
planning
Month 6
6. Deployment …
The prototype, which shows the functional design must be signed-off at this stage
The content/ functionality audit is critical to all future decisions
RAPID PROTOTYPING
Testing across multiple devices, orientations, screen-widths & browsers is critical
A technical specification must be agreed at the start of the project
The design will be refined at this stage but must not fundamentally change from the final prototypeContent audit,
UX research
Define req’s & tech spec
Final design style guide
Build, test, bug fix
© SAS Part of MSLGROUP
Summary of change to the process…
1. Work out types & priorities of content & functionality early in process
2. UX, Design, Development work together closely with client in an iterative fashion
3. Need to make commitments to content & functionality at an earlier stage than normal
4. Design may need to be tweaked throughout the build process
5. Testing is critical
© SAS Part of MSLGROUP
More examples…
http://www.anderssonwise.com/
http://www.greygoose.com/our-process
http://www.lancs.ac.uk/
http://thisismadebyhand.com/
http://forefathersgroup.com/
http://responsive.is/
© SAS Part of MSLGROUP