SlideShare a Scribd company logo
1 of 47
Download to read offline
April 2013

Content first, designing
in the browser
LIV MADSEN
FRONTEND DEVELOPER
    @livmadsen


   METTE SCHOU
    UX DESIGNER
   @mettecharita


    @creuna_dk
WARNING
Our talk may include buzzwords and concepts, such as

•    Content First (whoa buzz!)

•    UX-driven

•    Responsive design (whoa, last year buzz)

•    Progressive enhancement

•    Designing (/deciding) in the browser

•    Immersive developing
WE’LL SHARE REAL LIFE EXPERIENCES
The emergence of responsive web
design have made it very difficult to
 employ the traditional prototyping
  methods in a meaningful way…




                                        6
OUR APPROACH
… to client cooperation

•    Align expectation

•    State the objectives

•    Embrace close cooperation

•    Be transparent

•    Map resources (honestly) and establish clear
     responsibilities
… to user centered design

•    Know end user’s motivations, questions and
     challenges


•    Stick to the defined objectives


•    Clear the path!
     •    use simple, clear copy, e.g. keep product in focus (show don’t
          tell)
     •    Use explicit directional cues (Be visual)
     •    Remember white space, color contrast and sequencing
          (support scanning and scrolling)
•    Think content first (text, images, video etc.)
     •    Create the right containers and UI elements in order to create
          an emotionally engaging experience


•    Establish content levels
     •    Encourage people to interact with content using strong visual
          cues
     •    Save organizational resources /ease implementation


•    Choreograph visual content and page flow
     •    Making key statements decodable at a glance


•    Be tap-worthy

                                                                           10
… to content first implementation

•    Progressive enhancement – start with the content,
     end with behavior


•    Responsive – a mix of flexible grids and layouts,
     media queries, flexible images


•    Performance and data structures is also design


•    Designing/deciding in the browser
IT’S A TEAM EFFORT
THE CASE – BOCONCEPT CAMPAIGN SITE
      HTTP://CAMPAIGN.BOCONCEPT.COM
•    Client was tackling growing mobile audience and
     came to us for help


•    Design was ready


•    All they needed was a little help to turn it into a
     reusable template in the CMS


•    Tight deadline (and budget)
INITIAL CHALLENGES
•    At kickoff content was unknown


•    Release in 60 countries


•    40 languages to be added by independent
     editors


•    No content strategy
RESPONSIVE DESIGN
            =
      CONTENT FIRST,
DESIGNING IN THE BROWSER
DESIGNING IN THE BROWSER?

DID YOU DO AWAY WITH PHOTOSHOP?
NOT ENTIRELY!
SO… DID YOU DO AWAY WITH AXURE?
NOT ENTIRELY

WE’LL GET BACK TO THAT
ARTEFACTS – LOWER THE BRIDGE
•    Content strategy
      •    + telling the story, accommodating scanners and jumpers
      •    Chunking, structuring and sequencing the content

•    Screen dumps and videos
      •    Illustrate navigation principles, interactions and transitions
      •    Creating a responsive grid – thinking cross device
      •    Examples of colors and textures

•    Hand-drawn sketches
      •    Illustrates IA and red routes/page flow


•    Style Tiles / Mood board
      •    Collaborative tool
      •    Supports designing in the browser


•    Basic HTML PoC
      •    Illustrate grid, transitions and page flow




                                                                            27
Defining the
Minimal Viable Product
        (MVP)



                         30
BACK TO THE DRAWING BOARD!
SO YOU MENTIONED AXURE EARLIER….
TAKE-AWAYS
Content First

•    A great foundation

•    An inspiring way to work – continuous drive

•    Not a silver bullet – it still takes time

•    Requires new deliverables and adapted client
     communication

•    A team effort
      •    if resources are not available, this is not for you


•    Transparency pays, be inclusive
WILL WE DO IT AGAIN?
     YESSIR, H5IR
DIY

•    Grab any and all team members you can access


•    Include the customer


•    Focus on tasks at hand as they appear


•    Allow diving (dedication)
QUESTIONS?



http://www.flickr.com/photos/matterphotography/2739799786/

More Related Content

What's hot

Professional Portfolios
Professional PortfoliosProfessional Portfolios
Professional PortfoliosLouellen Coker
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly WorkflowLuke Brooker
 
Mobile learning tools
Mobile learning toolsMobile learning tools
Mobile learning toolsJason Murray
 
Stepping into Usable Web
Stepping into Usable WebStepping into Usable Web
Stepping into Usable WebShajed Evan
 
Preparing for the upgrade to Facebook Timeline
Preparing for the upgrade to Facebook TimelinePreparing for the upgrade to Facebook Timeline
Preparing for the upgrade to Facebook TimelineJeffrey Peden
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @mediaGlenn Cahill
 
The Bingee, a CNC project
The Bingee, a CNC projectThe Bingee, a CNC project
The Bingee, a CNC projectpshsTECH
 
Content focused web design
Content focused web designContent focused web design
Content focused web designEddie Monge
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Robert Stribley
 

What's hot (11)

Professional Portfolios
Professional PortfoliosProfessional Portfolios
Professional Portfolios
 
A Future Friendly Workflow
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
 
Mobile learning tools
Mobile learning toolsMobile learning tools
Mobile learning tools
 
Stepping into Usable Web
Stepping into Usable WebStepping into Usable Web
Stepping into Usable Web
 
Design presentation
Design presentationDesign presentation
Design presentation
 
Preparing for the upgrade to Facebook Timeline
Preparing for the upgrade to Facebook TimelinePreparing for the upgrade to Facebook Timeline
Preparing for the upgrade to Facebook Timeline
 
TEST TEST TEST
TEST TEST TESTTEST TEST TEST
TEST TEST TEST
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @media
 
The Bingee, a CNC project
The Bingee, a CNC projectThe Bingee, a CNC project
The Bingee, a CNC project
 
Content focused web design
Content focused web designContent focused web design
Content focused web design
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19
 

Viewers also liked

Rapid UX Test
Rapid UX TestRapid UX Test
Rapid UX Testlmdelvi
 
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlUX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlKaren Mardahl
 
Pattern recognition for UX - 13 April 2013
Pattern recognition for UX - 13 April 2013Pattern recognition for UX - 13 April 2013
Pattern recognition for UX - 13 April 2013amelio
 
Ux Camp CPH 2013
Ux Camp CPH 2013Ux Camp CPH 2013
Ux Camp CPH 2013Eric Reiss
 
How to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersHow to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersAnton Parkhomenko
 
Non-Negotiable Usability
Non-Negotiable UsabilityNon-Negotiable Usability
Non-Negotiable UsabilityBonitasoft
 
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013Mark Melnykowycz
 
Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)Petr Stedry
 
The UX of Bitcoin
The UX of BitcoinThe UX of Bitcoin
The UX of BitcoinTamim Swaid
 
Improving site search with search analytics
Improving site search with search analyticsImproving site search with search analytics
Improving site search with search analyticsAudun Rundberg
 
Buttons suck! /UXcamp Europe 2013/
Buttons suck! /UXcamp Europe 2013/Buttons suck! /UXcamp Europe 2013/
Buttons suck! /UXcamp Europe 2013/Petr Kosnar
 
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013Lutz Schmitt
 
UX Camp Berlin 2013 - Hands-on UX
UX Camp Berlin 2013 - Hands-on UXUX Camp Berlin 2013 - Hands-on UX
UX Camp Berlin 2013 - Hands-on UXReto Laemmler
 
Ride the Wave of Conversational UX
Ride the Wave of Conversational UXRide the Wave of Conversational UX
Ride the Wave of Conversational UXSolstice
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilitySebastian Waters
 

Viewers also liked (20)

Rapid UX Test
Rapid UX TestRapid UX Test
Rapid UX Test
 
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlUX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
 
Pattern recognition for UX - 13 April 2013
Pattern recognition for UX - 13 April 2013Pattern recognition for UX - 13 April 2013
Pattern recognition for UX - 13 April 2013
 
Ux Camp CPH 2013
Ux Camp CPH 2013Ux Camp CPH 2013
Ux Camp CPH 2013
 
Yogendra_Joshi
Yogendra_JoshiYogendra_Joshi
Yogendra_Joshi
 
How to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersHow to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designers
 
First Time UX
First Time UXFirst Time UX
First Time UX
 
Non-Negotiable Usability
Non-Negotiable UsabilityNon-Negotiable Usability
Non-Negotiable Usability
 
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
 
Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)
 
4 steps from sadness til zen
4 steps from sadness til zen4 steps from sadness til zen
4 steps from sadness til zen
 
The UX of Bitcoin
The UX of BitcoinThe UX of Bitcoin
The UX of Bitcoin
 
Improving site search with search analytics
Improving site search with search analyticsImproving site search with search analytics
Improving site search with search analytics
 
UX Is Endangered
UX Is EndangeredUX Is Endangered
UX Is Endangered
 
Buttons suck! /UXcamp Europe 2013/
Buttons suck! /UXcamp Europe 2013/Buttons suck! /UXcamp Europe 2013/
Buttons suck! /UXcamp Europe 2013/
 
Agile for all
Agile for allAgile for all
Agile for all
 
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
 
UX Camp Berlin 2013 - Hands-on UX
UX Camp Berlin 2013 - Hands-on UXUX Camp Berlin 2013 - Hands-on UX
UX Camp Berlin 2013 - Hands-on UX
 
Ride the Wave of Conversational UX
Ride the Wave of Conversational UXRide the Wave of Conversational UX
Ride the Wave of Conversational UX
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
 

Similar to Content First, Designing in the Browser - UX camp CPH

Introduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfIntroduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfRossMatthews19
 
Creating a Winning Content Strategy
Creating a Winning Content StrategyCreating a Winning Content Strategy
Creating a Winning Content StrategyEktron
 
Anupriy Kanti - Content Strategy Portfolio_August 2016
Anupriy Kanti - Content Strategy Portfolio_August 2016Anupriy Kanti - Content Strategy Portfolio_August 2016
Anupriy Kanti - Content Strategy Portfolio_August 2016Anupriy Kanti
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Content Strategy - UX class - Talent Bandung 2017 by @daengdoang
Content Strategy - UX class - Talent Bandung 2017 by @daengdoangContent Strategy - UX class - Talent Bandung 2017 by @daengdoang
Content Strategy - UX class - Talent Bandung 2017 by @daengdoangDaeng Muhammad Feisal
 
Agile Dev and Lean UX
Agile Dev and Lean UXAgile Dev and Lean UX
Agile Dev and Lean UXKarri Ojanen
 
Introduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfIntroduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfRossMatthews19
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignMaria D'Amato
 
Things to Budget for When Planning a Drupal Implementation
Things to Budget for When Planning a Drupal ImplementationThings to Budget for When Planning a Drupal Implementation
Things to Budget for When Planning a Drupal ImplementationDani Nordin
 
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...Megan Dell
 
Prototyping for insructional design
Prototyping for insructional designPrototyping for insructional design
Prototyping for insructional designkaylaorton
 
UXPA2019 Influence Product Strategy and Quality by Conducting Collaborative ...
UXPA2019  Influence Product Strategy and Quality by Conducting Collaborative ...UXPA2019  Influence Product Strategy and Quality by Conducting Collaborative ...
UXPA2019 Influence Product Strategy and Quality by Conducting Collaborative ...UXPA International
 
User experience design strategies
User experience design strategiesUser experience design strategies
User experience design strategiesIsha Suri
 
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...Allison Bloodworth
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxasmeerana605
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without DocumentationComrade
 

Similar to Content First, Designing in the Browser - UX camp CPH (20)

Introduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfIntroduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdf
 
Storyboarding
StoryboardingStoryboarding
Storyboarding
 
Creating a Winning Content Strategy
Creating a Winning Content StrategyCreating a Winning Content Strategy
Creating a Winning Content Strategy
 
Anupriy Kanti - Content Strategy Portfolio_August 2016
Anupriy Kanti - Content Strategy Portfolio_August 2016Anupriy Kanti - Content Strategy Portfolio_August 2016
Anupriy Kanti - Content Strategy Portfolio_August 2016
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Content Strategy - UX class - Talent Bandung 2017 by @daengdoang
Content Strategy - UX class - Talent Bandung 2017 by @daengdoangContent Strategy - UX class - Talent Bandung 2017 by @daengdoang
Content Strategy - UX class - Talent Bandung 2017 by @daengdoang
 
Agile Dev and Lean UX
Agile Dev and Lean UXAgile Dev and Lean UX
Agile Dev and Lean UX
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
The Design Discovery Jetpack
The Design Discovery JetpackThe Design Discovery Jetpack
The Design Discovery Jetpack
 
Introduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdfIntroduction To Graphic Design - 2023.pdf
Introduction To Graphic Design - 2023.pdf
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
Things to Budget for When Planning a Drupal Implementation
Things to Budget for When Planning a Drupal ImplementationThings to Budget for When Planning a Drupal Implementation
Things to Budget for When Planning a Drupal Implementation
 
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...How we got everyone at MYOB hooked on UX, and how we're managing their addict...
How we got everyone at MYOB hooked on UX, and how we're managing their addict...
 
Prototyping for insructional design
Prototyping for insructional designPrototyping for insructional design
Prototyping for insructional design
 
UXPA2019 Influence Product Strategy and Quality by Conducting Collaborative ...
UXPA2019  Influence Product Strategy and Quality by Conducting Collaborative ...UXPA2019  Influence Product Strategy and Quality by Conducting Collaborative ...
UXPA2019 Influence Product Strategy and Quality by Conducting Collaborative ...
 
User experience design strategies
User experience design strategiesUser experience design strategies
User experience design strategies
 
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
Open Source Design Pattern Library, Spreading Communities Thick: Open Source ...
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without Documentation
 

Recently uploaded

Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement 210303105569
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证eeanqy
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxMdBokhtiyarHossainNi
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfOffice Furniture Plus - Irving
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxbalqisyamutia
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证eeanqy
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKMarekMitek1
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样awasv46j
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherrymeghakumariji156
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...samsungultra782445
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Nitya salvi
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableNitya salvi
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...nirzagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...HyderabadDolls
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...gajnagarg
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证wpkuukw
 

Recently uploaded (20)

Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 

Content First, Designing in the Browser - UX camp CPH

  • 1. April 2013 Content first, designing in the browser
  • 2. LIV MADSEN FRONTEND DEVELOPER @livmadsen METTE SCHOU UX DESIGNER @mettecharita @creuna_dk
  • 4. Our talk may include buzzwords and concepts, such as •  Content First (whoa buzz!) •  UX-driven •  Responsive design (whoa, last year buzz) •  Progressive enhancement •  Designing (/deciding) in the browser •  Immersive developing
  • 5. WE’LL SHARE REAL LIFE EXPERIENCES
  • 6. The emergence of responsive web design have made it very difficult to employ the traditional prototyping methods in a meaningful way… 6
  • 8. … to client cooperation •  Align expectation •  State the objectives •  Embrace close cooperation •  Be transparent •  Map resources (honestly) and establish clear responsibilities
  • 9. … to user centered design •  Know end user’s motivations, questions and challenges •  Stick to the defined objectives •  Clear the path! •  use simple, clear copy, e.g. keep product in focus (show don’t tell) •  Use explicit directional cues (Be visual) •  Remember white space, color contrast and sequencing (support scanning and scrolling)
  • 10. •  Think content first (text, images, video etc.) •  Create the right containers and UI elements in order to create an emotionally engaging experience •  Establish content levels •  Encourage people to interact with content using strong visual cues •  Save organizational resources /ease implementation •  Choreograph visual content and page flow •  Making key statements decodable at a glance •  Be tap-worthy 10
  • 11. … to content first implementation •  Progressive enhancement – start with the content, end with behavior •  Responsive – a mix of flexible grids and layouts, media queries, flexible images •  Performance and data structures is also design •  Designing/deciding in the browser
  • 12. IT’S A TEAM EFFORT
  • 13. THE CASE – BOCONCEPT CAMPAIGN SITE HTTP://CAMPAIGN.BOCONCEPT.COM
  • 14. •  Client was tackling growing mobile audience and came to us for help •  Design was ready •  All they needed was a little help to turn it into a reusable template in the CMS •  Tight deadline (and budget)
  • 16. •  At kickoff content was unknown •  Release in 60 countries •  40 languages to be added by independent editors •  No content strategy
  • 17.
  • 18. RESPONSIVE DESIGN = CONTENT FIRST, DESIGNING IN THE BROWSER
  • 19.
  • 20.
  • 21.
  • 22. DESIGNING IN THE BROWSER? DID YOU DO AWAY WITH PHOTOSHOP?
  • 24. SO… DID YOU DO AWAY WITH AXURE?
  • 25. NOT ENTIRELY WE’LL GET BACK TO THAT
  • 26. ARTEFACTS – LOWER THE BRIDGE
  • 27. •  Content strategy •  + telling the story, accommodating scanners and jumpers •  Chunking, structuring and sequencing the content •  Screen dumps and videos •  Illustrate navigation principles, interactions and transitions •  Creating a responsive grid – thinking cross device •  Examples of colors and textures •  Hand-drawn sketches •  Illustrates IA and red routes/page flow •  Style Tiles / Mood board •  Collaborative tool •  Supports designing in the browser •  Basic HTML PoC •  Illustrate grid, transitions and page flow 27
  • 28.
  • 29.
  • 30. Defining the Minimal Viable Product (MVP) 30
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. BACK TO THE DRAWING BOARD!
  • 38.
  • 39. SO YOU MENTIONED AXURE EARLIER….
  • 40.
  • 41.
  • 42.
  • 44. Content First •  A great foundation •  An inspiring way to work – continuous drive •  Not a silver bullet – it still takes time •  Requires new deliverables and adapted client communication •  A team effort •  if resources are not available, this is not for you •  Transparency pays, be inclusive
  • 45. WILL WE DO IT AGAIN? YESSIR, H5IR
  • 46. DIY •  Grab any and all team members you can access •  Include the customer •  Focus on tasks at hand as they appear •  Allow diving (dedication)