Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RESS @ SapientNitro CGN (UX CGN 10)

1,531 views

Published on

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

Published in: Internet
  • Be the first to comment

RESS @ SapientNitro CGN (UX CGN 10)

  1. 1. Welcome to
  2. 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. 3
  4. 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. 5© COPYRIGHT 2013 SAPIENTNITRO | CONFIDENTIAL GERMANY & SWITZERLAND PASSIONATE PEOPLE PROJECT MANAGERS 300+ 50 Cologne Munich 1 TECHNOLOGISTSCREATIVES 15080 Zurich
  6. 6. 6 SapientNitro is a new breed of agency redefining storytelling for an always-on world.
  7. 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. 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. 9 WE BELIEVE STORYTELLING MUST EVOLVE S T O R Y S C A P I N G
  10. 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. 11 THE STORYSCAPING BOOK
  12. 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. 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. 14 Desktop Task and Working Mode THE USAGE OF MULTIPLE DEVICES Tablets Explore and Relax Mode Smartphones Snack & Finding Mode SEAMLESS EXPERIENCE  
  15. 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. 16. RESS @ SapientNitro CGN
  17. 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. 18. “WE NEED WIDER WEBVIEWS FOR OUR TABLET APPS”
  19. 19. A LOT OF LEGACY CODE TABLES FIXED WIDTH LAYOUT PAGE BASED DESIGN APPROACH DEVICE DETECTION DEPENDENT
  20. 20. TIME TO THINK ABOUT A NEW APPROACH
  21. 21. 21 THE RESS APPROACH RESPONSIVE WEB DESIGN WITH SERVER SIDE COMPONENTS RESSRESPONSIVE WEB DESIGN SERVER SIDE COMPONENTS
  22. 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. 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. 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. 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. 26 THE ARCHITECTURE DEVICE DETECTION TEMPLATES COMPONENTS CONTENT CMS WEBSERVER DEVICEDATABASE DEVICE
  27. 27. RETHINK THE UX DESIGN PROCESS
  28. 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. 29 STYLE TILE MEETS „WIREFRAME“
  30. 30. QUESTIONS?
  31. 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. 32. © 2014 SAPIENT CORPORATION | CONFIDENTIAL THANK YOU,

×