狠狠撸

狠狠撸Share a Scribd company logo

RESS @ SapientNitro CGN (UX CGN 10)

?
?
Axel Hermes
Axel Hermes

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

1 of 32
Welcome to
2 MANAGER EXPERIENCE DESIGN AXEL HERMES -? Studied Industrial Design in Wuppertal -? Worked on his ?rst website in 1996 -? Making money with digital stu? since 1998 -? Created an “Interface for a mobile communication device” as diplom thesis in 2001 -? Worked 5.5 years in an industrial design o?ce in south of Germany & Switzerland -? Started in October 2007 as Information Architect @ Sapient (not Nitro yet) @raxlerik
3
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? COPYRIGHT 2013 SAPIENTNITRO | CONFIDENTIAL GERMANY & SWITZERLAND PASSIONATE PEOPLE PROJECT MANAGERS 300+ 50 Cologne Munich 1 TECHNOLOGISTSCREATIVES 15080 Zurich
6 SapientNitro is a new breed of agency rede?ning storytelling for an always-on world.
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 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 WE BELIEVE STORYTELLING MUST EVOLVE S T O R Y S C A P I N G
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 THE STORYSCAPING BOOK
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
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 Desktop Task and Working Mode THE USAGE OF MULTIPLE DEVICES Tablets Explore and Relax Mode Smartphones Snack & Finding Mode SEAMLESS EXPERIENCE ?
15 MULTIPLE DEVICES There is an ever-increasing number of devices with di?erent screen resolutions, which need to be taken into account when designing a website. Responsive web design could be the best solution. It o?ers more than just a simple mobile template; instead, your entire site layout is designed to be ?exible enough to ?t into any possible screen resolution. MULTIPLE SCREENS ?
RESS @ SapientNitro CGN
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
“WE NEED WIDER WEBVIEWS FOR OUR TABLET APPS”
A LOT OF LEGACY CODE TABLES FIXED WIDTH LAYOUT PAGE BASED DESIGN APPROACH DEVICE DETECTION DEPENDENT
TIME TO THINK ABOUT A NEW APPROACH
21 THE RESS APPROACH RESPONSIVE WEB DESIGN WITH SERVER SIDE COMPONENTS RESSRESPONSIVE WEB DESIGN SERVER SIDE COMPONENTS
22 Fixed layout Fixed layouts work with speci?c pixel dimensions, which are not changed when the browser window is larger or smaller. The site occupies a ?xed 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 Adaptive Design Adaptive design uses a series of static layouts based on pixel dimensions. The design will serve di?erent versions of the site to di?erent 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 Responsive Design Responsive design is ?uid and responds to any screen size. By creating a ?uid grid, text can wrap and images can shrink to adjust to the size of the display. A responsive design with a ?uid layout can make the transition into mobile devices a smoother one and ensure a seamless user experience.
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 speci?c elements which ensure a much more better user experience.
26 THE ARCHITECTURE DEVICE DETECTION TEMPLATES COMPONENTS CONTENT CMS WEBSERVER DEVICEDATABASE DEVICE
RETHINK THE UX DESIGN PROCESS
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 STYLE TILE MEETS ?WIREFRAME“
QUESTIONS?
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
? 2014 SAPIENT CORPORATION | CONFIDENTIAL THANK YOU,

More Related Content

RESS @ SapientNitro CGN (UX CGN 10)

  • 2. 2 MANAGER EXPERIENCE DESIGN AXEL HERMES -? Studied Industrial Design in Wuppertal -? Worked on his ?rst website in 1996 -? Making money with digital stu? since 1998 -? Created an “Interface for a mobile communication device” as diplom thesis in 2001 -? Worked 5.5 years in an industrial design o?ce 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 rede?ning 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 ?
  • 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
  • 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 di?erent screen resolutions, which need to be taken into account when designing a website. Responsive web design could be the best solution. It o?ers more than just a simple mobile template; instead, your entire site layout is designed to be ?exible enough to ?t into any possible screen resolution. MULTIPLE SCREENS ?
  • 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 speci?c pixel dimensions, which are not changed when the browser window is larger or smaller. The site occupies a ?xed 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 di?erent versions of the site to di?erent 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 ?uid and responds to any screen size. By creating a ?uid grid, text can wrap and images can shrink to adjust to the size of the display. A responsive design with a ?uid 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 speci?c 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
  • 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,

Editor's Notes

  • #26: This is not the approach we are following for Alaia.