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.

Real World Responsive Design & Development for an Enterprise Brand

705 views

Published on

  • Be the first to comment

  • Be the first to like this

Real World Responsive Design & Development for an Enterprise Brand

  1. 1. Real World Responsive Design& Development for anEnterprise Brand Matt Schiffman UX Designer / Developer / Technologist @darrownet darrownet.com
  2. 2. ACTEMRA.com• Pharma Brand – Heavily Regulated• Prominent Safety Information – ISI• Clinical “Dry” content
  3. 3. Process COPY ART WaterfallWork Effort UX DEV Project Time
  4. 4. Process COPY COPY COPY Waterfall DWork Effort UX DEV UX E V Project Time ART ART ART Client Pivot
  5. 5. Process AgileWork Effort UX DEV COPY ART Project Time
  6. 6. Process Agile COPYWork Effort UX DEV Project Time COPY ART ART Client Pivot
  7. 7. The Two Pillars
  8. 8. The Third Pillar TechnologyRespond.js Breakpoint
  9. 9. Orbital Work effort in relation to website build TECHNOLOGY ART IA UXCOPY DEV UI Project Time
  10. 10. Orbital Work effort in relation to website buildPrint TECHNOLOGY ART IA UX COPY DEV UI Project Time
  11. 11. Orbital Work effort in relation to website buildPrint TECHNOLOGY ART IA UX COPY DEV UI DVD Project Time
  12. 12. Site MapACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary WireframesGlobal Utility Navigation HEAD — A HEAD — B HEAD — C HEAD — D HEAD — E Important Side Effect Are You a Healthcare ACTiV Sign-up / Medication Guide Prescribing Information Information Professional? Local Patient Event Sign-upGlobal Content Navigation 0.0 Site Controls & Constants Home CONTROL — B Share 1.0 2.0 3.0 4.0 5.0 6.0 Know Your RA About ACTEMRA Taking ACTEMRA ACTiV Support Program Support Resources SJIA and ACTEMRA 1.1 2.1 3.1 4.1 6.1 RA and Your Is ACTEMRA Right How ACTEMRA is ACTiV’s Online RA SJIA Diagnosis and Immune System for You? Taken Forum Treatment 1.2 2.2 3.2 6.2 4.2 Is Your RA Proven Symptom Getting Started on ACTEMRA Works for Your ACTiV Tools Treatment Working? Relief With or ACTEMRA SJIA Without 1.3 Methotrexate 6.3 3.3 4.3 RA Treatment Preparing Your Child What to Expect RA-Friendly Recipes CONSTANT — A Options for Treatment 4.4 6.4 Important Side Effect Information 1.4 3.4 Exercise and SJIA Caregiver Know Your RA Team ACTEMRA Dosing Wellness ResourcesFoot Navigation FOOT — A FOOT — B FOOT — C FOOT — D FOOT — E FOOT — F Genentech Logo Genentech copyright line Privacy Policy Legal Statement FAQs Contact Us (links to Genentech home) (links to Genentech home)
  13. 13. Content
  14. 14. IA / UX / UI File name ACTEMRA_IA_v1.6.graffle Version Version 1.6Map, Content Map, & Preliminary Wireframes ACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes File name ACTEMRA_IA_v1.6.graffle ACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes Modified 13 Fri Jul 13 2012 14 Version Modified Version 1.6 Fri Jul 13 2012 1.0 Landing – Tablet 1. 1.0 Landing – Mobile Know Your RA NOTES: ACTEMRA.COM NO NOTES: http://actemra.com Google The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your Carrier 12:00 PM Medication Guide Prescribing Information Are you a healthcare professional? Sign Up body. Because the more you know, the more http://actemra.com Google prepared you’ll be for the road ahead. So use this section to learn everything from the ACTEMRA.COM Your ACTiV Support Know Your RA About ACTEMRA Taking ACTEMRA Support Resources SJIA and ACTEMRA Carrier 12:00 PM science behind RA to the best way for building Medication Guide Prescribing Information Are you a healthcare professional? Sign Up Program your RA healthcare team. Your ACTiV Support SJIA and Know Your RA About ACTEMRA Taking ACTEMRA Support Program Resources ACTEMRA Home » Know Your RA Home » Know Your RA Know Your RA The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your Know Your RA body. Because the more you know, the more The first step to treating prepared you’ll be for the road ahead. So use Rheumatoid Arthritis (RA) is this section to learn everything from the understanding what’s going on in RA and Your Immune System » science behind RA to the best way for building your body. Because the more you your RA healthcare team. know, the more prepared you’ll be No one knows the exact cause of RA. But it’s still for the road ahead. So use this important to understand what’s happening in section to learn everything from the your body. science behind RA to the best way for building your RA healthcare team. Is Your RA Treatment Working? » Know Your RA RA and Your Is Your RA Immune System » Treatment Working? » The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your No one knows the exact cause of Learn how to tell if it may be time for a switch. body. Because the more you know, the more RA. But it’s still important to Learn how to tell if it may be time prepared you’ll be for the road ahead. So use for a switch. And what you can do understand what’s happening in And what you can do about it. this section to learn everything from the about it. Is Your RA Treatment your body. RA and Your Immune System » RA Treatment Options » Know Your RA Team » science behind RA to the best way for building Working? » RA and Your Immune System » medication guide prescribing information your RA healthcare team. RA Treatment Options » Know Your RA Team » Rotate to landscape for IMPORTANT SAFETY INFORMATION No one knows the exact cause of RA. Learn how to tell if it may be time for There’s a range of medications Many people can help you in the fight No one knows the exact cause of RA. But it’s still RA Treatment Options » But it’s still important to understand a switch. And what you can do available for RA and, from NSAIDs against RA. But one thing never important to understand what’s happening in There’s a range of medications Many people can help you in the what’s happening in your body. about it. and DMARDs to biologics. changes: you’re the leader. available for RA and, from your body. NSAIDs and DMARDs to fight against RA. But one thing never changes: you’re the leader. biologics. There’s a range of medications available for RA Start here » Find out » Learn more » Who’s on your team? » and, from NSAIDs and DMARDs to biologics. This information does not take the place of talking to your healthcare provider about either your medical condition or your + EXPAND treatment with ACTEMRA. Talk with your healthcare provider if you have any questions about your treatment with ACTEMRA. What is ACTEMRA? IMPORTANT SAFETY INFORMATION + EXPAND ACTEMRA is a prescription medicine called an interleukin-6 (IL-6) receptor inhibitor: Know Your RA Team » This information does not take the place of talking to your healthcare provider about either your medical condition or your treatment with ACTEMRA. • ACTEMRA is used to treat adults with moderately to severely active rheumatoid arthritis (RA) after at least one other medicine Talk with your healthcare provider if you have any questions about your treatment with ACTEMRA. called a tumor necrosis factor (TNF) antagonist has been used and did not work well • ACTEMRA is used to treat patients with active systemic juvenile idiopathic arthritis (SJIA) 2 years of age and older Many people can help you in the fight against What is ACTEMRA? RA. But one thing never changes: you’re the IMPORTANT SIDE EFFECT INFORMATION leader. Some people have serious infections while taking ACTEMRA, including tuberculosis (TB) and infections caused by bacteria, fungi, or ACTEMRA is a prescription medicine called an interleukin-6 (IL-6) receptor inhibitor: viruses that can spread throughout the body. Some people have died from these infections. Other serious side effects of ACTEMRA include tears (perforation) of the stomach and intestines, changes in blood test results (including • ACTEMRA is used to treat adults with moderately to severely active rheumatoid arthritis (RA) after at least one other medicine called a tumor necrosis factor (TNF) low neutrophil count, low platelet count, increase in certain liver function tests, and increase in blood cholesterol levels), hepatitis B infection becoming an active infection again, and nervous system problems. antagonist has been used and did not work well ACTEMRA affects the immune system and may increase your risk of certain cancers. • ACTEMRA is used to treat patients with active systemic juvenile idiopathic arthritis (SJIA) 2 years of age and older Serious allergic reactions, including death, can happen with ACTEMRA. These reactions may happen with any infusion of ACTEMRA, even if they did not occur with an earlier infusion. Patients must tell their doctor if they have had a previous reaction to ACTEMRA. IMPORTANT SIDE EFFECT INFORMATION Patients should not take ACTEMRA if they are allergic to it or any of its ingredients. Common side effects with ACTEMRA in patients with RA include upper respiratory tract infections (common cold, sinus infections), Some people have serious infections while taking ACTEMRA, including tuberculosis (TB) and infections caused by bacteria, fungi, or viruses that can spread throughout the headache, and increased blood pressure (hypertension). body. Some people have died from these infections. Common side effects with ACTEMRA in patients with SJIA include upper respiratory tract infections (common cold, sinus infections), headache, and diarrhea. Other serious side effects of ACTEMRA include tears (perforation) of the stomach and intestines, changes in blood test results (including low neutrophil count, low platelet Patients must tell their healthcare provider if they plan to become pregnant or are pregnant. It is not known if ACTEMRA will harm an count, increase in certain liver function tests, and increase in blood cholesterol levels), hepatitis B infection becoming an active infection again, and nervous system unborn baby. Genentech has a registry for pregnant women who take ACTEMRA. Patients who are pregnant or become pregnant while problems. taking ACTEMRA must contact the registry at 1-877-311-8972 or register online at https://www.otispregnancy.org/forms/otis_survey-f161 and talk to their healthcare provider. ACTEMRA affects the immune system and may increase your risk of certain cancers. Patients must call their healthcare provider for medical advice about any side effects. Patients or caregivers may report side effects to the FDA at 1-800-FDA-1088. Patients or caregivers may also report side effects to Genentech at 1-888-835-2555. Serious allergic reactions, including death, can happen with ACTEMRA. These reactions may happen with any infusion of ACTEMRA, even if they did not occur with an Please see full Prescribing Information, including Boxed Warning and Medication Guide, for additional important safety information. earlier infusion. Patients must tell their doctor if they have had a previous reaction to ACTEMRA. Patients should not take ACTEMRA if they are allergic to it or any of its The resources above are provided in Adobe® Reader® format (PDF). To view or print them, you must have Adobe Reader (version 3.0 or ingredients. higher) installed on your computer. Download the free Adobe Reader here. http://is.gd/webstencils Common side effects with ACTEMRA in patients with RA include upper respiratory tract infections (common cold, sinus infections), headache, and increased blood pressure (hypertension). Common side effects with ACTEMRA in patients with SJIA include upper respiratory tract infections (common cold, sinus infections), headache, and diarrhea. Patients must tell their healthcare provider if they plan to become pregnant or are pregnant. It is not known if ACTEMRA will harm an unborn baby. Genentech has a registry for pregnant women who take ACTEMRA. Patients who are pregnant or become pregnant while taking ACTEMRA must contact the registry at 1-877-311-8972 or register online at https://www.otispregnancy.org/forms/otis_survey-f161 and talk to their healthcare provider. Patients must call their healthcare provider for medical advice about any side effects. Patients or caregivers may report side effects to the FDA at 1-800-FDA-1088. Patients or caregivers may also report side effects to Genentech at 1-888-835-2555. Please see full Prescribing Information, including Boxed Warning and Medication Guide, for additional important safety information. The resources above are provided in Adobe® Reader® format (PDF). To view or print them, you must have Adobe Reader (version 3.0 or higher) installed on your computer. Download the free Adobe Reader here.
  15. 15. ite Map, Content Map, & Preliminary Wireframes IA / UX / UI ACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes Home – Mobile (gloabl nav open) Know Your RA NOTES: The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your body. Because the more you know, the more prepared you’ll be for the road ahead. So use this section to learn everything from the Carrier 12:00 PM science behind RA to the best way for building Carrier 12:00 PM your RA healthcare team. Are you a healthcare professional? ACTiV sign up Know Your RA Know Your RA The first step to treating Rheumatoid Arthritis Is Your RA Treatment Doing its (RA) is understanding what’s going on in your What’s Causing Your RA? Job? body. Because the more you know, the more Is Your RA Treatment Working? prepared you’ll be for the road ahead. So use RA Treatment Options Find out with our Symptom Profiler » everything from the this section to learn RA and Your Immune System » science behind RA to the best way for building Knowing your RA team your RA healthcare team. No one knows the exact cause of RA. But it’s still About Actemra important to understand what’s happening in your body. Is ACTEMRA right for you? Proven Relief With or Without Methotrexate Get ACTiV » Is Your RA Treatment Working? » Join our free patient support Taking ACTEMRA program, which includes Learn how to tell if it may be time for a switch. How ACTEMRA is Taken helpful tools, RA-friendly And what you can do about it. Getting Started on ACTEMRA recipes, and and Your Immune System » RA RA-friendly medication guide prescribing information exercises. Learn more » Rotate to landscape for IMPORTANT SAFETY INFORMATION Your medication guideProgram ACTiV Support prescribing information No one knows the exact cause of RA. But it’s still RA Treatment Options » important to understand what’s happening in Rotate to landscape for IMPORTANT SAFETY INFORMATION Ask a Nurse » your body. Right here and right now. There’s a range of medications available for RA Just click to chat or call and, from NSAIDs and DMARDs to biologics. 1-800-ACTEMRA for answers to your RA questions. Know Your RA Team » Many people can help you in the fight against RA. But one thing never changes: you’re the leader.
  16. 16. IA / UX / UIACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes 1.0 Landing – Tablet NOTES: Carrier 12:00 PM http://actemra.com Google ACTEMRA.COM Medication Guide Prescribing Information Are you a healthcare professional? Sign Up Your ACTiV Support SJIA and Know Your RA About ACTEMRA Taking ACTEMRA Support Program Resources ACTEMRA Home » Know Your RA Know Your RA RA and Your Is Your RA Immune System » Treatment Working? » The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your No one knows the exact cause of body. Because the more you know, the more RA. But it’s still important to Learn how to tell if it may be time prepared you’ll be for the road ahead. So use for a switch. And what you can do understand what’s happening in about it. this section to learn everything from the your body. science behind RA to the best way for building your RA healthcare team. RA Treatment Options » Know Your RA Team » There’s a range of medications Many people can help you in the available for RA and, from fight against RA. But one thing NSAIDs and DMARDs to never changes: you’re the leader. biologics. This information does not take the place of talking to your healthcare provider about either your medical condition or your + EXPAND treatment with ACTEMRA. Talk with your healthcare provider if you have any questions about your treatment with ACTEMRA. What is ACTEMRA? ACTEMRA is a prescription medicine called an interleukin-6 (IL-6) receptor inhibitor: • ACTEMRA is used to treat adults with moderately to severely active rheumatoid arthritis (RA) after at least one other medicine called a tumor necrosis factor (TNF) antagonist has been used and did not work well • ACTEMRA is used to treat patients with active systemic juvenile idiopathic arthritis (SJIA) 2 years of age and older IMPORTANT SIDE EFFECT INFORMATION Some people have serious infections while taking ACTEMRA, including tuberculosis (TB) and infections caused by bacteria, fungi, or viruses that can spread throughout the body. Some people have died from these infections. Other serious side effects of ACTEMRA include tears (perforation) of the stomach and intestines, changes in blood test results (including low neutrophil count, low platelet count, increase in certain liver function tests, and increase in blood cholesterol levels), hepatitis B infection becoming an active infection again, and nervous system problems. ACTEMRA affects the immune system and may increase your risk of certain cancers.
  17. 17. IA / UX / UIACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes 1.0 Landing ACTEMRA.COM NOTES: http://actemra.com Google Medication Guide Prescribing Information Are you a healthcare professional? Sign Up Your ACTiV Support Know Your RA About ACTEMRA Taking ACTEMRA Support Resources SJIA and ACTEMRA Program Home » Know Your RA Know Your RA The first step to treating Rheumatoid Arthritis (RA) is understanding what’s going on in your body. Because the more you know, the more prepared you’ll be for the road ahead. So use this section to learn everything from the science behind RA to the best way for building your RA healthcare team. Is Your RA Treatment RA and Your Immune System » RA Treatment Options » Know Your RA Team » Working? » No one knows the exact cause of RA. Learn how to tell if it may be time for There’s a range of medications Many people can help you in the fight But it’s still important to understand a switch. And what you can do available for RA and, from NSAIDs against RA. But one thing never what’s happening in your body. about it. and DMARDs to biologics. changes: you’re the leader. Start here » Find out » Learn more » Who’s on your team? » IMPORTANT SAFETY INFORMATION + EXPAND This information does not take the place of talking to your healthcare provider about either your medical condition or your treatment with ACTEMRA. Talk with your healthcare provider if you have any questions about your treatment with ACTEMRA. What is ACTEMRA? ACTEMRA is a prescription medicine called an interleukin-6 (IL-6) receptor inhibitor: • ACTEMRA is used to treat adults with moderately to severely active rheumatoid arthritis (RA) after at least one other medicine called a tumor necrosis factor (TNF) antagonist has been used and did not work well • ACTEMRA is used to treat patients with active systemic juvenile idiopathic arthritis (SJIA) 2 years of age and older
  18. 18. Client Prototype
  19. 19. Client Prototype
  20. 20. The Full Stack
  21. 21. HTMLhttp://jade-lang.com/
  22. 22. JADE - variables- var someCopy = Hai! I want moar preprocessing :)’- var someTitle = My Super Cool Brand!!! 5html(lang = en-US) head title #{someTitle} body #container #{someCopy}
  23. 23. JADE - variables<!DOCTYPE html><html lang="en-US"> <head> <title>My Super Cool Brand</title> </head> <body> <div id="container">Hai! I want moar preprocessing :)</div> </body></html>
  24. 24. JADE - loops!!! 5html(lang = en-US) head title My Super Cool Brand body #container - for (var i = 0; i < 4; i++) .stdContent Hai! I want moar preprocessing :)
  25. 25. JADE - loops<!DOCTYPE html><html lang="en-US"> <head> <title>My Super Cool Brand</title> </head> <body> <div id="container"> <div class="stdContent">Hai! I want moar preprocessing :)</div> <div class="stdContent">Hai! I want moar preprocessing :)</div> <div class="stdContent">Hai! I want moar preprocessing :)</div> <div class="stdContent">Hai! I want moar preprocessing :)</div> </div> </body></html>
  26. 26. JADE - includes!!! 5html(lang = en-US) head title My Super Cool Brand body include includes/head_content include includes/body_content include includes/foot_content
  27. 27. JADE - includes<!DOCTYPE html><html lang="en-US"> <head> <title>My Super Cool Brand</title> </head> <body> <header id="head_content"> <nav>Global Nav</nav> </header> <div id="content_container" class="contentContainer"> <div id="body_content">Body Content</div> </div> <footer id="foot_content"> <nav>Foot Content</nav> </footer> </body></html>
  28. 28. SASS & Compass Breakpoint
  29. 29. SASS: sass-lang.comVariables: $Variables begin with dollar signs, and are set like CSSproperties:$width: 5em;#main { width: $width;}
  30. 30. SASS: sass-lang.comNesting:Sass avoids repetition by nesting selectors within oneanother.table.h1 { table.h1 { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right;} }
  31. 31. SASS: sass-lang.comMixins:Mixins allow you to re-use whole chunks of CSS,properties or selectors. You can even give themarguments.@mixin left($dist) { #data { float: left; float: left; margin-left: $dist; margin-left: 10px;} }#data { @include left(10px);}
  32. 32. SASS: sass-lang.com@extend:@extend works by inserting the extending selectoranywhere in the stylesheet that the extended selectorappears..error { .error, .seriousError { border: 1px #f00; border: 1px #f00; background-color: #fdd; background-color: #fdd;} }.seriousError { .seriousError { @extend .error; border-width: 3px; border-width: 3px; }}
  33. 33. SASS: sass-lang.com http://net.tutsplus.com
  34. 34. CompassBreakpoint
  35. 35. JavaScriptRespond.js
  36. 36. VideoVideo For Everybody ExternalInterface FLVPlayback
  37. 37. Third Pillar / Orbital TECHNOLOGY ART IA UX COPY DEV UI
  38. 38. Advocacy TECHNOLOGY ART IA UXCOPY DEV UI
  39. 39. TrustArt Copy Technology
  40. 40. Real World Responsive Design& Development for anEnterprise Brand Matt Schiffman UX Designer / Developer / Technologist @darrownet darrownet.com

×