0
Check out www.responsiveprocess.com
Twitter = @hellofisherWeb = www.hellofisher.com / www.yellowpencil.com
I’m        Canadiandelicious.com/    hellofisher
HOCKEY!
I’m not going                                   to talk about                                     html5, css3,            ...
But I’m still                                   a giant nerdGoing to talk about the process.
Well...        maybe a      little htmlGoing to talk about the process.
CSS3!                           HTML5!Going to talk about the process.
Hello!On my own.
I’m a UX               DesignerI’m special!
I’m                                                                   super                                               ...
What?This is what almost everyone else thinks. You’re a what?
How                         about                          this?Well how about this...
@themaninblue - http://www.themaninblue.com/writing/perspective/2008/08/12/Crossing the border, etc.
Ah ha!Ah ha! It all makes sense now!
#poormePoor Steve
The web is notfixed width.
Image source: palantir.net
28 Days Later http://youtu.be/eunaclr-WgU - Zombie movie trailer (getting to know thebaseline story)
First things first: let’s meet up and get to know each other. From our early meetings and research, well establish communi...
You want to know who you are working with...Project planner
We will work with you to help determine the requirements of the project, from a technical, creative, and organizational pe...
Personas, audience profiles
Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively andqualita...
www.gathercontent.com •   Quantitative audit •   Qualitative audit •   Card sort •   High level site map •   Gap analysis ...
All of the information found during the discovery phase will be complied into a concise document that outlines the search,...
From sketching to in-browser designs to documentation and everything in between.
Zombieland Trailer http://www.youtube.com/watch?v=8m9EVP8X7N8 - High fidelityprototype or in-browser design!
UX sketch or paper prototype! http://www.commoncraft.com/video/zombies
We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will he...
http://appsketchbook.com/products/responsive-design-sketchbook
One of our main goals is to keep content independent from design or presentation. Your content should never be dependent o...
Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities establ...
With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typograp...
Get it in the browser!
Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the det...
http://nathanborror.com/posts/2009/oct/25/interface-harmony/
The developers zombie movie http://www.sonypictures.com/previews/movies/residentevilretribution/clips/4301/
Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready f...
At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, de...
Heres where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iP...
Heres where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iP...
At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helpi...
User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early i...
Sometimes things don’t turn out how you think they will. http://youtu.be/yfDUv3ZjH2k (that’snot exactly like 28 Days Later)
Wasn’t this supposed to look like a normal zombie movie...
We will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally pr...
So close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new websi...
A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is neve...
It’s a celebration oflife!
BUT I WANT TO EATTHE ICING NOW!!
This is what happens when you skip ahead and don’t follow the process.
Focus on the whywell structured contentand interactions that matter
What does it meanto be responsive?
Something Simple?One web concepts really tie things together. Rather than multiple sites there is just one.
Means rethinkingcontent creation
Fragmentationto Unification
Move from the inside out. Extrinsic vs intrinsic motivation. I want the world to be able to publishtheir knowledge freely....
Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0thing?People don’t belie...
The future?
The first website was RESPONSIVE! Surprise! :P
A responsive process isa responsible process
Thank-you!delicious.com/hellofisher
Just because. Thriller! http://www.youtube.com/watch?v=hG6oy46qKE4
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Responsive Web Design Process
Upcoming SlideShare
Loading in...5
×

Responsive Web Design Process

8,623

Published on

The web is not a fixed width, and Steve Fisher thinks we are remembering that. If our medium is fluid, should our process be fixed? Steve prefers designing within the browser, especially when responsive design is a requirement. Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow. Because the medium is fluid, our approach to design has to be fluid as well. A responsive process is a responsible process, matching the medium. After working with many companies and organizations, helping them transform their process to fit a responsive workflow, Steve is going to share the goods. One web to rule them all!

Published in: Design, Technology, Business
1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,623
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
118
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide
  • Check out www.responsiveprocess.com\n
  • Twitter = @hellofisher\nWeb = www.hellofisher.com / www.yellowpencil.com\n
  • \n
  • \n
  • Going to talk about the process.\n
  • Going to talk about the process.\n
  • Going to talk about the process.\n
  • Going to talk about the process.\n
  • On my own.\n
  • I’m special!\n
  • This is what I think about what I do! I mean come on! I make the web a better place!\n
  • This is what almost everyone else thinks. You’re a what?\n
  • Well how about this...\n
  • Crossing the border, etc.\n
  • Ah ha! It all makes sense now!\n
  • Poor Steve\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • First things first: let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols, milestones and timelines, deliverables and scope, roles and expectations.\n
  • You want to know who you are working with...\nProject planner\n
  • We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your industry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where it wants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to really understand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them with your web project.\n
  • Personas, audience profiles\n\n
  • Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively and qualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? We'll create a site map for your project and show where everything belongs. This process will inform what and how we communicate, and establish the features your users need. Well-planned, well-structured content will help us create both the interaction and visual design systems.\n\n\n
  • Quantitative audit\nQualitative audit\nCard sort\nHigh level site map\nGap analysis\nUser stories\n
  • All of the information found during the discovery phase will be complied into a concise document that outlines the search, content, technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.\n
  • \n
  • From sketching to in-browser designs to documentation and everything in between.\n
  • High fidelity prototype or in-browser design!\n
  • UX sketch or paper prototype!\n
  • We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive design.\n
  • http://appsketchbook.com/products/responsive-design-sketchbook\n
  • One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content area in priority order, and identify the most important messages to communicate in each area.\n
  • \n
  • Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by the page tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Along with that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.\n
  • \n
  • With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give each site its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.\n
  • Get it in the browser!\n
  • Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.\n
  • http://nathanborror.com/posts/2009/oct/25/interface-harmony/\n
  • \n
  • \n
  • Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready for testing. We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use JavaScript for interactive elements, rather than Flash or Silverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out your content.\n
  • \n
  • At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, depending on your organization’s needs. We’ll build out all of the site’s modular elements and e‐commerce components, and set up a workflow process that will help you maintain your content over the long term. This process goes hand-in-hand with the CMS Template Implementation, which will integrate the HTML templates into the design or theme layer. By the time we’re done, everything will be looking good and working great!\n
  • Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.\n
  • Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.\n
  • \n
  • \n
  • At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clients create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!\n
  • User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project. It's like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need time to come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.\n
  • \n
  • Wasn’t this supposed to look like a normal zombie movie...\n
  • We will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally provide a period of user acceptance testing following the official “handoff” of the website, to make absolutely sure that everything meets your needs. We’ll also provide additional support and training where necessary, and take care of any bug fixes to make sure that your website is ready for launch.\n
  • \n
  • So close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new website to the public, as well as a quality checklist to ensure that all project requirements are met. We’ll make sure that the new website is submitted to the appropriate search engines, and that web analytics are installed and configured. We'll also work with our smarty-pants friend at the Status Bureau to make sure you understand how to access and act on web analytics reports.\n
  • A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is never done (sorry), but achieving a milestone like this definitely deserves a party! Even though this is just the beginning of the real life of the website, it’s good to celebrate after all this hard work. Nice work team. Now back to work!\n
  • It’s a celebration of life!\n
  • \n
  • This is what happens when you skip ahead and don’t follow the process.\n
  • \n
  • \n
  • One web concepts really tie things together. Rather than multiple sites there is just one.\n
  • \n
  • \n
  • Move from the inside out. Extrinsic vs intrinsic motivation. I want the world to be able to publish their knowledge freely. I’ll create a distributed code base that anyone can use. It will be a CMS called Drupal.\n
  • Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0 thing?\nPeople don’t believe in what you do, they believe in why you do it.\n\nThese were just some examples. What will your aha! moment be?\n
  • \n
  • The first website was RESPONSIVE! Surprise! :P\n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Responsive Web Design Process"

    1. 1. Check out www.responsiveprocess.com
    2. 2. Twitter = @hellofisherWeb = www.hellofisher.com / www.yellowpencil.com
    3. 3. I’m Canadiandelicious.com/ hellofisher
    4. 4. HOCKEY!
    5. 5. I’m not going to talk about html5, css3, & that stuffGoing to talk about the process.
    6. 6. But I’m still a giant nerdGoing to talk about the process.
    7. 7. Well... maybe a little htmlGoing to talk about the process.
    8. 8. CSS3! HTML5!Going to talk about the process.
    9. 9. Hello!On my own.
    10. 10. I’m a UX DesignerI’m special!
    11. 11. I’m super smartThis is what I think about what I do! I mean come on! I make the web a better place!
    12. 12. What?This is what almost everyone else thinks. You’re a what?
    13. 13. How about this?Well how about this...
    14. 14. @themaninblue - http://www.themaninblue.com/writing/perspective/2008/08/12/Crossing the border, etc.
    15. 15. Ah ha!Ah ha! It all makes sense now!
    16. 16. #poormePoor Steve
    17. 17. The web is notfixed width.
    18. 18. Image source: palantir.net
    19. 19. 28 Days Later http://youtu.be/eunaclr-WgU - Zombie movie trailer (getting to know thebaseline story)
    20. 20. First things first: let’s meet up and get to know each other. From our early meetings and research, well establish communication protocols,milestones and timelines, deliverables and scope, roles and expectations.
    21. 21. You want to know who you are working with...Project planner
    22. 22. We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’llanalyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about yourindustry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where itwants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to reallyunderstand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them withyour web project.
    23. 23. Personas, audience profiles
    24. 24. Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively andqualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? Well create asite map for your project and show where everything belongs. This process will inform what and how wecommunicate, and establish the features your users need. Well-planned, well-structured content will help us createboth the interaction and visual design systems.
    25. 25. www.gathercontent.com • Quantitative audit • Qualitative audit • Card sort • High level site map • Gap analysis • User stories
    26. 26. All of the information found during the discovery phase will be complied into a concise document that outlines the search, content,technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.
    27. 27. From sketching to in-browser designs to documentation and everything in between.
    28. 28. Zombieland Trailer http://www.youtube.com/watch?v=8m9EVP8X7N8 - High fidelityprototype or in-browser design!
    29. 29. UX sketch or paper prototype! http://www.commoncraft.com/video/zombies
    30. 30. We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish thedesign system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsivedesign.
    31. 31. http://appsketchbook.com/products/responsive-design-sketchbook
    32. 32. One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout towork properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content areain priority order, and identify the most important messages to communicate in each area.
    33. 33. Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by thepage tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Alongwith that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.
    34. 34. With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give eachsite its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographichierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.
    35. 35. Get it in the browser!
    36. 36. Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the gridto hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking andpersonality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.
    37. 37. http://nathanborror.com/posts/2009/oct/25/interface-harmony/
    38. 38. The developers zombie movie http://www.sonypictures.com/previews/movies/residentevilretribution/clips/4301/
    39. 39. Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready for testing.We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use JavaScript for interactive elements, rather than Flash orSilverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out yourcontent.
    40. 40. At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, depending on yourorganization’s needs. We’ll build out all of the site’s modular elements and e-commerce components, and set up a workflow process thatwill help you maintain your content over the long term. This process goes hand-in-hand with the CMS Template Implementation, which willintegrate the HTML templates into the design or theme layer. By the time we’re done, everything will be looking good and working great!
    41. 41. Heres where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone,Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different dueto device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
    42. 42. Heres where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone,Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different dueto device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
    43. 43. At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clientscreate and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help youdefine the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
    44. 44. User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project.Its like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need timeto come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.
    45. 45. Sometimes things don’t turn out how you think they will. http://youtu.be/yfDUv3ZjH2k (that’snot exactly like 28 Days Later)
    46. 46. Wasn’t this supposed to look like a normal zombie movie...
    47. 47. We will prepare text and video documentation on to help you understand and use your new CMS and site. We will generally provide aperiod of user acceptance testing following the official “handoff” of the website, to make absolutely sure that everything meets your needs.We’ll also provide additional support and training where necessary, and take care of any bug fixes to make sure that your website is readyfor launch.
    48. 48. So close! Next up, our team will create a launch plan to archive the current website (if needed) and release the new website to the public, aswell as a quality checklist to ensure that all project requirements are met. We’ll make sure that the new website is submitted to theappropriate search engines, and that web analytics are installed and configured. Well also work with our smarty-pants friend at the StatusBureau to make sure you understand how to access and act on web analytics reports.
    49. 49. A website is a living thing that continues to grow and change throughout its lifecycle. So in some ways, your work is never done (sorry), butachieving a milestone like this definitely deserves a party! Even though this is just the beginning of the real life of the website, it’s good tocelebrate after all this hard work. Nice work team. Now back to work!
    50. 50. It’s a celebration oflife!
    51. 51. BUT I WANT TO EATTHE ICING NOW!!
    52. 52. This is what happens when you skip ahead and don’t follow the process.
    53. 53. Focus on the whywell structured contentand interactions that matter
    54. 54. What does it meanto be responsive?
    55. 55. Something Simple?One web concepts really tie things together. Rather than multiple sites there is just one.
    56. 56. Means rethinkingcontent creation
    57. 57. Fragmentationto Unification
    58. 58. Move from the inside out. Extrinsic vs intrinsic motivation. I want the world to be able to publishtheir knowledge freely. I’ll create a distributed code base that anyone can use. It will be a CMScalled Drupal.
    59. 59. Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0thing?People don’t believe in what you do, they believe in why you do it.These were just some examples. What will your aha! moment be?
    60. 60. The future?
    61. 61. The first website was RESPONSIVE! Surprise! :P
    62. 62. A responsive process isa responsible process
    63. 63. Thank-you!delicious.com/hellofisher
    64. 64. Just because. Thriller! http://www.youtube.com/watch?v=hG6oy46qKE4
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×