Presentation i held at UX CGN 10 meet up in our office on the topic of RESS (Responsive Design with Server Side components)

1. Welcome to

2. 2
MANAGER EXPERIENCE DESIGN
AXEL HERMES
- Studied Industrial Design in Wuppertal
- Worked on his first website in 1996
- Making money with digital stuff since 1998
- Created an “Interface for a mobile communication device”
as diplom thesis in 2001
- Worked 5.5 years in an industrial design office
in south of Germany & Switzerland
- Started in October 2007 as Information Architect @
Sapient (not Nitro yet)
@raxlerik

3. 3

4. 4
PASSIONATE
PEOPLE
7000+ OFFICES GLOBALLY
CONNECTED
YEARS OF
CUSTOMER
INNOVATION
31 20
1COMPANY
2012 AGENCY REPORT:
#1 Largest Digital Agency US
#12 World's Largest Agency All Disciplines
Gartner Magic Quadrant for Global
Digital Marketing Agencies
Global Commerce Service Providers
US Digital Agencies – Mobile Marketing

5. 5© COPYRIGHT 2013 SAPIENTNITRO | CONFIDENTIAL
GERMANY & SWITZERLAND
PASSIONATE PEOPLE PROJECT MANAGERS
300+ 50
Cologne Munich
1 TECHNOLOGISTSCREATIVES
15080
Zurich

6. 6
SapientNitro
is a new breed of agency
redefining storytelling for an
always-on world.

7. 7
SIMPLE
It was once all about 360°
marketing, having a great
ad campaign and a robust
media plan. Consumers
watched the commercial
and did what they were told.
PUSH DRIVEN BRAND ECONOMY
COMMUNICATIONS EXPERIENCE TECHNOLOGY

8. 8
A CONSUMER-DRIVEN EXPERIENCE ECONOMY
COMMUNICATIONS
THE ALWAYS-ON
EFFECT
Connected consumers have
changed everything. They’re
a fast-moving target with
§ always-on technology
§ multiple devices
§ channel blur
§ changed shopping behavior
§ collapsed transaction time
15 years in and
it’s still the early days
EXPERIENCE TECHNOLOGY

9. 9
WE BELIEVE
STORYTELLING
MUST EVOLVE
S T O R Y S C A P I N G

10. 10
THE
STORYSCAPING
APPROACH
CONNECT THROUGH
SHARED
VALUES
CONNECT THROUGH
SHARED
EXPERIENCES
STORY SYSTEM
& PLATFORM
( E N A B L I N G T E C H N O L O G I E S
C O N N E C T I O N S P L A N N I N G &
S Y S T E M S T H I N K I N G )
STORYSCAPE
PRODUCT
POSITIONING
D E F I N E S P R O D U C T
CONSUMER
INSIGHT
F I N D S D E S I R E S
BRAND
STRATEGY
D I S C O V E R S P U R P O S E
CONSUMER
JOURNEY
S H O W S N E E D S
1 2
4
ORGANISING
IDEA
5
3
6

11. 11
THE
STORYSCAPING
BOOK

12. CONNECTED
THINKING &
CONNECTED
CAPABILITES
WE DEFINE
STRATEGIES
WE BUILD
BRANDS
WE CREATE
EXPERIENCES
WE DELIVER
CUSTOMER
PLATFORMS
WITH A COMPELLING NARRATIVE ON TOP
AND A POWERFUL TECH ENGINE UNDERNEATH

13. ALWAYS-ON WORLD
In a world where people can access and
connect to your brand immediately, it’s
necessary to create a unique and seamless
experience over all devices.

14. 14
Desktop
Task and Working Mode
THE USAGE OF MULTIPLE DEVICES
Tablets
Explore and Relax Mode
Smartphones
Snack & Finding Mode
SEAMLESS EXPERIENCE

15. 15
MULTIPLE DEVICES
There is an ever-increasing number of devices with
different screen resolutions, which need to be taken
into account when designing a website. Responsive
web design could be the best solution.
It offers more than just a simple mobile template;
instead, your entire site layout is designed to be
flexible enough to fit into any possible screen
resolution.
MULTIPLE SCREENS

16. RESS @ SapientNitro CGN

17. 17
HISTORY OF LUFTHANSA MOBILE SERVICES
Flight Rebooking
Mobile
iPhone
Launcher
Mobile
Boarding pass
SMS
Check-in
International
Localisation
Passbook
Integration
iPad App
Re-booking
Mobile Apps 2.0Portal Launch 1st Portal Redesign
2007 2012
New UI Booking
2013
WP8

18. “WE NEED WIDER WEBVIEWS FOR OUR TABLET APPS”

19. A LOT OF LEGACY CODE
TABLES
FIXED WIDTH LAYOUT
PAGE BASED DESIGN APPROACH
DEVICE DETECTION DEPENDENT

20. TIME TO THINK ABOUT A NEW APPROACH

21. 21
THE RESS APPROACH
RESPONSIVE WEB DESIGN
WITH SERVER SIDE COMPONENTS
RESSRESPONSIVE
WEB DESIGN
SERVER SIDE
COMPONENTS

22. 22
Fixed layout
Fixed layouts work with specific pixel dimensions,
which are not changed when the browser window is
larger or smaller. The site occupies a fixed area in the
browser.
If the browser window is smaller than it is on
mobile, the following scenario happens: the page is
not fully displayed or the website shrinks to such
small dimensions that texts are unreadable and links
don’t work because of the small size.
Bonjourpx

23. 23
Adaptive Design
Adaptive design uses a series of static layouts based
on pixel dimensions. The design will serve different
versions of the site to different devices based on
common screen sizes and resolutions.
This approach is considered less future-proof than
responsive design because the screen sizes of
common devices are constantly changing.

24. 24
Responsive Design
Responsive design is fluid and responds to any screen
size. By creating a fluid grid, text can wrap and
images can shrink to adjust to the size of the display.
A responsive design with a fluid layout can make the
transition into mobile devices a smoother one and
ensure a seamless user experience.

25. 25
Responsive+ (RESS)
Responsive Design does not mean the end of
development. With Responsive+ (RESS) it is possible
to optimize responsive websites for mobile devices.
By detecting the device it is possible to change
specific elements which ensure a much more better
user experience.

26. 26
THE ARCHITECTURE
DEVICE DETECTION
TEMPLATES
COMPONENTS CONTENT
CMS
WEBSERVER
DEVICEDATABASE
DEVICE

27. RETHINK THE UX DESIGN PROCESS

28. RE-USE
Reduce variations
WORK LEAN
Less wireframes / less PSDs
MOBILE FIRST
Thin out the jungle
COLLABORATE
Concept + Design + Dev
THINK MODULAR
Component > Module > Template > Page

29. 29
STYLE TILE
MEETS „WIREFRAME“

30. QUESTIONS?

31. Hiring contact:
MICHAELA SCHWARZ
mschwarz@sapient.com
WE’RE ALWAYS
LOOKING FOR TALENTED
CONNECTED THINKERS
AT ALL LEVELS
UX ARCHITECT
SITE DEVELOPER
JAVA DEVELOPER
VISUAL DESIGNER
EXPERIENCE
DESIGNER
…
CREATIVE
TECHNOLOGIST
STRATEGIST

32. © 2014 SAPIENT CORPORATION | CONFIDENTIAL
THANK YOU,