SlideShare a Scribd company logo
1 of 40
Real World Responsive Design
& Development for an
Enterprise Brand
                Matt Schiffman
   UX Designer / Developer / Technologist

                            @darrownet
                          darrownet.com
ACTEMRA.com




• Pharma Brand – Heavily Regulated
• Prominent Safety Information – ISI
• Clinical “Dry” content
Process
              COPY    ART

                            Waterfall
Work Effort




                 UX                         DEV

                             Project Time
Process                         COPY


              COPY                            COPY

                     Waterfall
                                                     D
Work Effort




              UX     DEV                      UX     E
                                                     V
                      Project Time
              ART                             ART


                                                     ART
                               Client Pivot
Process
                                Agile
Work Effort




              UX                     DEV


                   COPY   ART
                                Project Time
Process
                            Agile                    COPY
Work Effort




              UX                   DEV

                            Project Time
              COPY                                   ART
                     ART


                                           Client Pivot
The Two Pillars
The Third Pillar
             Technology
Respond.js




                          Breakpoint
Orbital                  Work effort in relation to
                                      website build




            TECHNOLOGY          ART


       IA                  UX


COPY
               DEV




                UI




            Project Time
Orbital                  Work effort in relation to
                                              website build
Print




                    TECHNOLOGY          ART


               IA                  UX


        COPY
                       DEV




                        UI




                    Project Time
Orbital                  Work effort in relation to
                                              website build
Print




                    TECHNOLOGY          ART


               IA                  UX


        COPY
                       DEV




                        UI
                                                          DVD




                    Project Time
Site Map
ACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes

Global 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-up




Global 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                                                   Resources



Foot 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)
Content
IA / UX / UI
                                                                                                                                                                                                                                                                                                             File name         ACTEMRA_IA_v1.6.graffle
                                                                                                                                                                                                                                                                                                      Version  Version 1.6
Map, 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.
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.
IA / UX / UI
ACTEMRA.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.
IA / UX / UI
ACTEMRA.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
Client Prototype
Client Prototype
The Full Stack
HTML




http://jade-lang.com/
JADE - variables

- var someCopy = 'Hai! I want moar preprocessing :)’
- var someTitle = 'My Super Cool Brand'

!!! 5
html(lang = 'en-US')
  head
    title #{someTitle}
  body
    #container #{someCopy}
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>
JADE - loops

!!! 5
html(lang = 'en-US')
  head
    title My Super Cool Brand
  body
    #container
       - for (var i = 0; i < 4; i++)
         .stdContent Hai! I want moar preprocessing :)
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>
JADE - includes

!!! 5
html(lang = 'en-US')
  head
    title My Super Cool Brand
  body
    include includes/head_content
    include includes/body_content
    include includes/foot_content
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>
SASS & Compass




   Breakpoint
SASS: sass-lang.com
Variables: $

Variables begin with dollar signs, and are set like CSS
properties:

$width: 5em;

#main {
  width: $width;
}
SASS: sass-lang.com
Nesting:

Sass avoids repetition by nesting selectors within one
another.

table.h1 {                    table.h1 {
  margin: 2em 0;                margin: 2em 0;
  td.ln {                     }
    text-align: right;        table.hl td.ln {
  }                             text-align: right;
}                             }
SASS: sass-lang.com
Mixins:

Mixins allow you to re-use whole chunks of CSS,
properties or selectors. You can even give them
arguments.

@mixin left($dist) {         #data {
  float: left;                  float: left;
  margin-left: $dist;          margin-left: 10px;
}                            }
#data {
  @include left(10px);
}
SASS: sass-lang.com
@extend:

@extend works by inserting the extending selector
anywhere in the stylesheet that the extended selector
appears.

.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;         }
}
SASS: sass-lang.com




   http://net.tutsplus.com
Compass



Breakpoint
JavaScript
Respond.js
Video




Video For Everybody
  ExternalInterface
    FLVPlayback
Third Pillar / Orbital

              TECHNOLOGY        ART


         IA                UX


  COPY
                 DEV




                  UI
Advocacy

             TECHNOLOGY        ART


        IA                UX


COPY
                DEV




                 UI
Trust




Art    Copy   Technology
Real World Responsive Design
& Development for an
Enterprise Brand
                Matt Schiffman
   UX Designer / Developer / Technologist

                            @darrownet
                          darrownet.com

More Related Content

Viewers also liked

Sis 645 eu ukraine hrnjak una final
Sis 645 eu ukraine hrnjak una finalSis 645 eu ukraine hrnjak una final
Sis 645 eu ukraine hrnjak una finalUna Hrnjak
 
Mobile Development: Social Media Experience
Mobile Development: Social Media ExperienceMobile Development: Social Media Experience
Mobile Development: Social Media ExperienceReena Prema
 
Successful Investing in a Low Growth Economy: A Historical Perspective
Successful Investing in a Low Growth Economy: A Historical PerspectiveSuccessful Investing in a Low Growth Economy: A Historical Perspective
Successful Investing in a Low Growth Economy: A Historical PerspectiveBen Esget
 
Emily dickinson
Emily dickinsonEmily dickinson
Emily dickinsonlupatric8
 
Module 5 integrating technology into the curriculum
Module 5 integrating technology into the curriculumModule 5 integrating technology into the curriculum
Module 5 integrating technology into the curriculumcbgill38
 
Why and how to network
Why and how to networkWhy and how to network
Why and how to networkJames Burton
 
Module 5 web 2.0 tools
Module 5 web 2.0 toolsModule 5 web 2.0 tools
Module 5 web 2.0 toolscbgill38
 
DIAPOSITIVAS LOS SENTIDOS
DIAPOSITIVAS LOS SENTIDOSDIAPOSITIVAS LOS SENTIDOS
DIAPOSITIVAS LOS SENTIDOSvalentinaluz
 
How to use eu702 code reader - eu702 code reader use manual | VtoolShop
How to use eu702 code reader - eu702 code reader use manual | VtoolShopHow to use eu702 code reader - eu702 code reader use manual | VtoolShop
How to use eu702 code reader - eu702 code reader use manual | VtoolShopAmy joe
 
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012Scott McCormick
 

Viewers also liked (12)

Sis 645 eu ukraine hrnjak una final
Sis 645 eu ukraine hrnjak una finalSis 645 eu ukraine hrnjak una final
Sis 645 eu ukraine hrnjak una final
 
1
11
1
 
Krt3013.d20112053110
Krt3013.d20112053110Krt3013.d20112053110
Krt3013.d20112053110
 
Mobile Development: Social Media Experience
Mobile Development: Social Media ExperienceMobile Development: Social Media Experience
Mobile Development: Social Media Experience
 
Successful Investing in a Low Growth Economy: A Historical Perspective
Successful Investing in a Low Growth Economy: A Historical PerspectiveSuccessful Investing in a Low Growth Economy: A Historical Perspective
Successful Investing in a Low Growth Economy: A Historical Perspective
 
Emily dickinson
Emily dickinsonEmily dickinson
Emily dickinson
 
Module 5 integrating technology into the curriculum
Module 5 integrating technology into the curriculumModule 5 integrating technology into the curriculum
Module 5 integrating technology into the curriculum
 
Why and how to network
Why and how to networkWhy and how to network
Why and how to network
 
Module 5 web 2.0 tools
Module 5 web 2.0 toolsModule 5 web 2.0 tools
Module 5 web 2.0 tools
 
DIAPOSITIVAS LOS SENTIDOS
DIAPOSITIVAS LOS SENTIDOSDIAPOSITIVAS LOS SENTIDOS
DIAPOSITIVAS LOS SENTIDOS
 
How to use eu702 code reader - eu702 code reader use manual | VtoolShop
How to use eu702 code reader - eu702 code reader use manual | VtoolShopHow to use eu702 code reader - eu702 code reader use manual | VtoolShop
How to use eu702 code reader - eu702 code reader use manual | VtoolShop
 
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
 

Real World Responsive Design & Development for an Enterprise Brand

  • 1. Real World Responsive Design & Development for an Enterprise Brand Matt Schiffman UX Designer / Developer / Technologist @darrownet darrownet.com
  • 2. ACTEMRA.com • Pharma Brand – Heavily Regulated • Prominent Safety Information – ISI • Clinical “Dry” content
  • 3. Process COPY ART Waterfall Work Effort UX DEV Project Time
  • 4. Process COPY COPY COPY Waterfall D Work Effort UX DEV UX E V Project Time ART ART ART Client Pivot
  • 5. Process Agile Work Effort UX DEV COPY ART Project Time
  • 6. Process Agile COPY Work Effort UX DEV Project Time COPY ART ART Client Pivot
  • 8. The Third Pillar Technology Respond.js Breakpoint
  • 9. Orbital Work effort in relation to website build TECHNOLOGY ART IA UX COPY DEV UI Project Time
  • 10. Orbital Work effort in relation to website build Print TECHNOLOGY ART IA UX COPY DEV UI Project Time
  • 11. Orbital Work effort in relation to website build Print TECHNOLOGY ART IA UX COPY DEV UI DVD Project Time
  • 12. Site Map ACTEMRA.com Patient Redesign RWD Site Map, Content Map, & Preliminary Wireframes Global 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-up Global 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 Resources Foot 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)
  • 14. IA / UX / UI File name ACTEMRA_IA_v1.6.graffle Version Version 1.6 Map, 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. 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. IA / UX / UI ACTEMRA.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. IA / UX / UI ACTEMRA.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
  • 22. JADE - variables - var someCopy = 'Hai! I want moar preprocessing :)’ - var someTitle = 'My Super Cool Brand' !!! 5 html(lang = 'en-US') head title #{someTitle} body #container #{someCopy}
  • 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. JADE - loops !!! 5 html(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. 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. JADE - includes !!! 5 html(lang = 'en-US') head title My Super Cool Brand body include includes/head_content include includes/body_content include includes/foot_content
  • 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. SASS & Compass Breakpoint
  • 29. SASS: sass-lang.com Variables: $ Variables begin with dollar signs, and are set like CSS properties: $width: 5em; #main { width: $width; }
  • 30. SASS: sass-lang.com Nesting: Sass avoids repetition by nesting selectors within one another. table.h1 { table.h1 { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right; } }
  • 31. SASS: sass-lang.com Mixins: Mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. @mixin left($dist) { #data { float: left; float: left; margin-left: $dist; margin-left: 10px; } } #data { @include left(10px); }
  • 32. SASS: sass-lang.com @extend: @extend works by inserting the extending selector anywhere in the stylesheet that the extended selector appears. .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. SASS: sass-lang.com http://net.tutsplus.com
  • 36. Video Video For Everybody ExternalInterface FLVPlayback
  • 37. Third Pillar / Orbital TECHNOLOGY ART IA UX COPY DEV UI
  • 38. Advocacy TECHNOLOGY ART IA UX COPY DEV UI
  • 39. Trust Art Copy Technology
  • 40. Real World Responsive Design & Development for an Enterprise Brand Matt Schiffman UX Designer / Developer / Technologist @darrownet darrownet.com

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n