SlideShare a Scribd company logo
1 of 32
Responsive Design



Brian P. Hogan
twitter: @bphogan
www.napcs.com
Who’s Our Audience?




Brian P. Hogan
twitter: @bphogan
www.napcs.com
This is funnier than it
                           should be.




Brian P. Hogan
twitter: @bphogan
www.napcs.com
The Basics of Responsive
                    Design




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Brian P. Hogan
twitter: @bphogan
www.napcs.com
Responsive Design
                      Antipatterns


Brian P. Hogan
twitter: @bphogan
www.napcs.com
#1: Designing Big-Screen
                     First




Brian P. Hogan
twitter: @bphogan
www.napcs.com
#2. Sending Too Much
                        Data




Brian P. Hogan
twitter: @bphogan
www.napcs.com
#3. Doing Too Much
                        Client-Side




Brian P. Hogan
twitter: @bphogan
www.napcs.com
#4. Shortchanging
                    Users on Content




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Handling content



Brian P. Hogan
twitter: @bphogan
www.napcs.com
Identify Important
                           Regions
                    Header / Branding area

                    Primary Navigation

                    Content blocks

                    Footer

                    Secondary Navigation

                      Don’t think about a “sidebar”
Brian P. Hogan
twitter: @bphogan
www.napcs.com
Dig deeper


                    Identify Content elements

                    Identify Media elements

                    Identify a hierarchy of the content!



Brian P. Hogan
twitter: @bphogan
www.napcs.com
Mobile-First!




Brian P. Hogan
twitter: @bphogan
www.napcs.com
http://uxdesign.smashingmagazine.com/2012/05/30/
           design-process-responsive-age/




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Handling Images




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Load up small images
                       in the markup




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Image replacement
        $('img').each(function() {
          $(this).attr('src', $(this).attr('src').replace("_small.","_big."));
        });




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Handling navigation




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Collapse The Navigation




Brian P. Hogan
twitter: @bphogan
www.napcs.com
http://bradfrostweb.com/blog/web/responsive-nav-
                     patterns/




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Tools Of The Trade




Brian P. Hogan
twitter: @bphogan
www.napcs.com
A Grid Framework




                      http://getskeleton.com/

Brian P. Hogan
twitter: @bphogan
www.napcs.com
Sass




Brian P. Hogan
twitter: @bphogan
www.napcs.com
blockquote {
       @mixin rounded($radius){
                                             width: 225px;
                 border-radius: $radius;
                                             padding: 15px 30px;
            -moz-border-radius: $radius;
                                             margin: 0;
         -webkit-border-radius: $radius;
                                             position: relative;
       }
                                             background: #faa;
                                             @include rounded(20px);
                                           }



                                           .button {
                                             cursor: pointer;
                                             color: #000;
                                             text-decoration: none;
                                             @include rounded(12px);
                                           }




Brian P. Hogan
twitter: @bphogan
www.napcs.com
CoffeeScript




Brian P. Hogan
twitter: @bphogan
www.napcs.com
var Person, p;
                    Person = (function() {
                      function Person(options) {
                         this.firstname = options.firstname;
                         this.lastname = options.lastname;
                         this.age = options.age;
                      }
                      Person.prototype.fullname = function() {
                         return "" + this.firstname + " " + this.lastname;
                      };
                      return Person;
                    })();

                    p = new Person({
                      firstname: "Brian",
                      lastname: "Hogan"
                    });

                    alert(p.fullname());




Brian P. Hogan
twitter: @bphogan
www.napcs.com
var Person, p;
                    Person = (function() {
                      function Person(options) {
                         this.firstname = options.firstname;
                         this.lastname = options.lastname;
                              class Person
                         this.age = options.age;
                      }         constructor: (options) ->
                                   @firstname = options.firstname
                      Person.prototype.fullname = function() {
                         return "" @lastname = options.lastname
                                    + this.firstname + " " + this.lastname;
                      };           @age = options.age
                      return Person;
                    })();       fullname: ->
                                   "#{@firstname} #{@lastname}"
                    p = new Person({
                      firstname: "Brian",
                      lastname: "Hogan"
                    });

                    alert(p.fullname());




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Jasmine




                    http://pivotal.github.com/jasmine/
Brian P. Hogan
twitter: @bphogan
www.napcs.com
describe("Person", function() {
                      it("has a full name", function() {
                        var person;
                        person = new Person({
                          firstname: "Brian",
                          lastname: "Hogan"
                        });
                        expect(person.fullname()).toBe("Brian Hogan");
                      });
                    });




Brian P. Hogan
twitter: @bphogan
www.napcs.com
Successful Responsive
                           Design

                    Organized Content

                    Mobile-first design

                    Structured and reusable code



Brian P. Hogan
twitter: @bphogan
www.napcs.com
Responsive Designs

                    http://www.uww.edu

                    http://bostonglobe.com

                    http://www.barackobama.com

                    http://www.smashingmagazine.com/

                    http://bphogan.com

Brian P. Hogan
twitter: @bphogan
www.napcs.com

More Related Content

What's hot

Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...
Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...
Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...Ruth Cheesley
 
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic Search
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic SearchRuth Cheesley - Joomla!Day Spain - Microdata and Semantic Search
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic SearchRuth Cheesley
 
MIT-Mipa.Internet.Training
MIT-Mipa.Internet.TrainingMIT-Mipa.Internet.Training
MIT-Mipa.Internet.Trainingmissririz
 
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...Ruth Cheesley
 
Yahoo! BOSS and trainspotting
Yahoo! BOSS and trainspottingYahoo! BOSS and trainspotting
Yahoo! BOSS and trainspottingTed Drake
 
The page and the desktop
The page and the desktopThe page and the desktop
The page and the desktopGlenn Jones
 
Digital Preservation at ODU
Digital Preservation at ODUDigital Preservation at ODU
Digital Preservation at ODUJustin Brunelle
 
Dev festasia manila-social_pub
Dev festasia manila-social_pubDev festasia manila-social_pub
Dev festasia manila-social_pubtimothyjordan
 
GraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOLa Cuisine du Web
 

What's hot (9)

Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...
Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...
Ruth Cheesley - Joomla!Day Kenya - Microdata, Authorship, and why you can't a...
 
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic Search
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic SearchRuth Cheesley - Joomla!Day Spain - Microdata and Semantic Search
Ruth Cheesley - Joomla!Day Spain - Microdata and Semantic Search
 
MIT-Mipa.Internet.Training
MIT-Mipa.Internet.TrainingMIT-Mipa.Internet.Training
MIT-Mipa.Internet.Training
 
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...
Ruth Cheesley - Joomla!Day South Africa - Developments in Semantic HTML - Add...
 
Yahoo! BOSS and trainspotting
Yahoo! BOSS and trainspottingYahoo! BOSS and trainspotting
Yahoo! BOSS and trainspotting
 
The page and the desktop
The page and the desktopThe page and the desktop
The page and the desktop
 
Digital Preservation at ODU
Digital Preservation at ODUDigital Preservation at ODU
Digital Preservation at ODU
 
Dev festasia manila-social_pub
Dev festasia manila-social_pubDev festasia manila-social_pub
Dev festasia manila-social_pub
 
GraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTO
 

More from Brian Hogan

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoBrian Hogan
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleBrian Hogan
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantBrian Hogan
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open SourceBrian Hogan
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With ElmBrian Hogan
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptBrian Hogan
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.Brian Hogan
 
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassWeb Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassBrian Hogan
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From ScratchBrian Hogan
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced RubyBrian Hogan
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into WordsBrian Hogan
 
HTML5 and CSS3 Today
HTML5 and CSS3 TodayHTML5 and CSS3 Today
HTML5 and CSS3 TodayBrian Hogan
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexBrian Hogan
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryBrian Hogan
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Brian Hogan
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with ShoesBrian Hogan
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven TestingBrian Hogan
 

More from Brian Hogan (20)

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with Hugo
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and Ansible
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with Vagrant
 
Docker
DockerDocker
Docker
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open Source
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScript
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.
 
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassWeb Development with CoffeeScript and Sass
Web Development with CoffeeScript and Sass
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced Ruby
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into Words
 
HTML5 and CSS3 Today
HTML5 and CSS3 TodayHTML5 and CSS3 Today
HTML5 and CSS3 Today
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library
 
Intro to Ruby
Intro to RubyIntro to Ruby
Intro to Ruby
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with Shoes
 
The Why Of Ruby
The Why Of RubyThe Why Of Ruby
The Why Of Ruby
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven Testing
 

Recently uploaded

Darshan Hiranandani [News About Next CEO].pdf
Darshan Hiranandani [News About Next CEO].pdfDarshan Hiranandani [News About Next CEO].pdf
Darshan Hiranandani [News About Next CEO].pdfShashank Mehta
 
Ten Organizational Design Models to align structure and operations to busines...
Ten Organizational Design Models to align structure and operations to busines...Ten Organizational Design Models to align structure and operations to busines...
Ten Organizational Design Models to align structure and operations to busines...Seta Wicaksana
 
Investment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy CheruiyotInvestment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy Cheruiyotictsugar
 
Kenya Coconut Production Presentation by Dr. Lalith Perera
Kenya Coconut Production Presentation by Dr. Lalith PereraKenya Coconut Production Presentation by Dr. Lalith Perera
Kenya Coconut Production Presentation by Dr. Lalith Pereraictsugar
 
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...ssuserf63bd7
 
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdfChris Skinner
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxRakhi Bazaar
 
Excvation Safety for safety officers reference
Excvation Safety for safety officers referenceExcvation Safety for safety officers reference
Excvation Safety for safety officers referencessuser2c065e
 
Send Files | Sendbig.comSend Files | Sendbig.com
Send Files | Sendbig.comSend Files | Sendbig.comSend Files | Sendbig.comSend Files | Sendbig.com
Send Files | Sendbig.comSend Files | Sendbig.comSendBig4
 
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deckPitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deckHajeJanKamps
 
Healthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterHealthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterJamesConcepcion7
 
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsWelding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsIndiaMART InterMESH Limited
 
Guide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDFGuide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDFChandresh Chudasama
 
Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Anamaria Contreras
 
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerDriving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerAggregage
 
MAHA Global and IPR: Do Actions Speak Louder Than Words?
MAHA Global and IPR: Do Actions Speak Louder Than Words?MAHA Global and IPR: Do Actions Speak Louder Than Words?
MAHA Global and IPR: Do Actions Speak Louder Than Words?Olivia Kresic
 
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckPitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckHajeJanKamps
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamArik Fletcher
 
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxbusiness environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxShruti Mittal
 

Recently uploaded (20)

Darshan Hiranandani [News About Next CEO].pdf
Darshan Hiranandani [News About Next CEO].pdfDarshan Hiranandani [News About Next CEO].pdf
Darshan Hiranandani [News About Next CEO].pdf
 
Ten Organizational Design Models to align structure and operations to busines...
Ten Organizational Design Models to align structure and operations to busines...Ten Organizational Design Models to align structure and operations to busines...
Ten Organizational Design Models to align structure and operations to busines...
 
Investment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy CheruiyotInvestment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy Cheruiyot
 
Kenya Coconut Production Presentation by Dr. Lalith Perera
Kenya Coconut Production Presentation by Dr. Lalith PereraKenya Coconut Production Presentation by Dr. Lalith Perera
Kenya Coconut Production Presentation by Dr. Lalith Perera
 
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
 
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
 
Excvation Safety for safety officers reference
Excvation Safety for safety officers referenceExcvation Safety for safety officers reference
Excvation Safety for safety officers reference
 
Send Files | Sendbig.comSend Files | Sendbig.com
Send Files | Sendbig.comSend Files | Sendbig.comSend Files | Sendbig.comSend Files | Sendbig.com
Send Files | Sendbig.comSend Files | Sendbig.com
 
WAM Corporate Presentation April 12 2024.pdf
WAM Corporate Presentation April 12 2024.pdfWAM Corporate Presentation April 12 2024.pdf
WAM Corporate Presentation April 12 2024.pdf
 
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deckPitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
 
Healthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterHealthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare Newsletter
 
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsWelding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan Dynamics
 
Guide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDFGuide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDF
 
Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.Traction part 2 - EOS Model JAX Bridges.
Traction part 2 - EOS Model JAX Bridges.
 
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerDriving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon Harmer
 
MAHA Global and IPR: Do Actions Speak Louder Than Words?
MAHA Global and IPR: Do Actions Speak Louder Than Words?MAHA Global and IPR: Do Actions Speak Louder Than Words?
MAHA Global and IPR: Do Actions Speak Louder Than Words?
 
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deckPitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deck
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management Team
 
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptxbusiness environment micro environment macro environment.pptx
business environment micro environment macro environment.pptx
 

Responsive Web Design

  • 1. Responsive Design Brian P. Hogan twitter: @bphogan www.napcs.com
  • 2. Who’s Our Audience? Brian P. Hogan twitter: @bphogan www.napcs.com
  • 3. This is funnier than it should be. Brian P. Hogan twitter: @bphogan www.napcs.com
  • 4. The Basics of Responsive Design Brian P. Hogan twitter: @bphogan www.napcs.com
  • 5. Brian P. Hogan twitter: @bphogan www.napcs.com
  • 6. Responsive Design Antipatterns Brian P. Hogan twitter: @bphogan www.napcs.com
  • 7. #1: Designing Big-Screen First Brian P. Hogan twitter: @bphogan www.napcs.com
  • 8. #2. Sending Too Much Data Brian P. Hogan twitter: @bphogan www.napcs.com
  • 9. #3. Doing Too Much Client-Side Brian P. Hogan twitter: @bphogan www.napcs.com
  • 10. #4. Shortchanging Users on Content Brian P. Hogan twitter: @bphogan www.napcs.com
  • 11. Handling content Brian P. Hogan twitter: @bphogan www.napcs.com
  • 12. Identify Important Regions Header / Branding area Primary Navigation Content blocks Footer Secondary Navigation Don’t think about a “sidebar” Brian P. Hogan twitter: @bphogan www.napcs.com
  • 13. Dig deeper Identify Content elements Identify Media elements Identify a hierarchy of the content! Brian P. Hogan twitter: @bphogan www.napcs.com
  • 14. Mobile-First! Brian P. Hogan twitter: @bphogan www.napcs.com
  • 15. http://uxdesign.smashingmagazine.com/2012/05/30/ design-process-responsive-age/ Brian P. Hogan twitter: @bphogan www.napcs.com
  • 16. Handling Images Brian P. Hogan twitter: @bphogan www.napcs.com
  • 17. Load up small images in the markup Brian P. Hogan twitter: @bphogan www.napcs.com
  • 18. Image replacement $('img').each(function() { $(this).attr('src', $(this).attr('src').replace("_small.","_big.")); }); Brian P. Hogan twitter: @bphogan www.napcs.com
  • 19. Handling navigation Brian P. Hogan twitter: @bphogan www.napcs.com
  • 20. Collapse The Navigation Brian P. Hogan twitter: @bphogan www.napcs.com
  • 21. http://bradfrostweb.com/blog/web/responsive-nav- patterns/ Brian P. Hogan twitter: @bphogan www.napcs.com
  • 22. Tools Of The Trade Brian P. Hogan twitter: @bphogan www.napcs.com
  • 23. A Grid Framework http://getskeleton.com/ Brian P. Hogan twitter: @bphogan www.napcs.com
  • 24. Sass Brian P. Hogan twitter: @bphogan www.napcs.com
  • 25. blockquote { @mixin rounded($radius){ width: 225px; border-radius: $radius; padding: 15px 30px; -moz-border-radius: $radius; margin: 0; -webkit-border-radius: $radius; position: relative; } background: #faa; @include rounded(20px); } .button { cursor: pointer; color: #000; text-decoration: none; @include rounded(12px); } Brian P. Hogan twitter: @bphogan www.napcs.com
  • 26. CoffeeScript Brian P. Hogan twitter: @bphogan www.napcs.com
  • 27. var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; this.age = options.age; } Person.prototype.fullname = function() { return "" + this.firstname + " " + this.lastname; }; return Person; })(); p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname()); Brian P. Hogan twitter: @bphogan www.napcs.com
  • 28. var Person, p; Person = (function() { function Person(options) { this.firstname = options.firstname; this.lastname = options.lastname; class Person this.age = options.age; } constructor: (options) -> @firstname = options.firstname Person.prototype.fullname = function() { return "" @lastname = options.lastname + this.firstname + " " + this.lastname; }; @age = options.age return Person; })(); fullname: -> "#{@firstname} #{@lastname}" p = new Person({ firstname: "Brian", lastname: "Hogan" }); alert(p.fullname()); Brian P. Hogan twitter: @bphogan www.napcs.com
  • 29. Jasmine http://pivotal.github.com/jasmine/ Brian P. Hogan twitter: @bphogan www.napcs.com
  • 30. describe("Person", function() { it("has a full name", function() { var person; person = new Person({ firstname: "Brian", lastname: "Hogan" }); expect(person.fullname()).toBe("Brian Hogan"); }); }); Brian P. Hogan twitter: @bphogan www.napcs.com
  • 31. Successful Responsive Design Organized Content Mobile-first design Structured and reusable code Brian P. Hogan twitter: @bphogan www.napcs.com
  • 32. Responsive Designs http://www.uww.edu http://bostonglobe.com http://www.barackobama.com http://www.smashingmagazine.com/ http://bphogan.com Brian P. Hogan twitter: @bphogan www.napcs.com

Editor's Notes

  1. \n
  2. Before we can talk about responsive design we need to think about what our users want and need. Who are the people you’re targeting? What are their needs on the mobile deivce?\n
  3. We have a limited amount of space, so we need to make sure that hte stuff they want to see is presented in an efficient manner. On a blog, it’s easy. But think about your projects. It’s not a trivial matter to take a very involved web site and turn it into a mobile app.\n
  4. The responsive design movement is great, but it’s not as simple as just taking a templating system that resizes content. We have to make choices about our content, our navigation, and our users.\n
  5. The idea of responsive design is that we reshape the layout of the page depending on the size of the screen. But that’s only part of the story.\n
  6. Let’s talk about some ways to mess up a responsive design.N\n
  7. When we start with a big widescreen design, we’re forced to think about what we have to drop in order to fit it onto the small screen.\n
  8. Our pages have gotten big. If we load up everything on the site, our users will have to download that information. On limited data plans and slow connections, that extra stuff can be costly.\n
  9. If we do the minimum, and don’t render any content, we can use JavaScript to transform things. But that means we have to load all the JS and have it render things, show things, hide things, and that can be slow too. In some cases it can be disatrous.\n
  10. More people are coming to web sites from their couches or beds and they’re surfing on mobile devices. They get upset if you don’t present htem with the same information they see on their laptops or desktops.\n
  11. \n
  12. Identify the regions of your page first, as these are the easiest to find. Try not to think about what things will look like, but instead think about what they are. A “sidebar” of a page might just be another form of navigation or content. Identify the content regions.\n
  13. Once we know about the regions, we have to think about the content we place in those regions. Most importantly we have to be concerned with our site’s content hierarchy. We need to prioritize elements. We may have blog articles, video content, comments, asides, etc.\n
  14. By designing mobile first, you’ll be forced into prioritizing the content. Small screens mean making sure the most important elements come up first. Then you can expand out from that blueprint into the full desktop experience.\n
  15. This article shows one example workflow that will work quite well for designing mobile-first.\n
  16. Images convey a lot to our users, but we have to use them with care on mobile devices. So how do we do it in a responsive manner?\n
  17. We can load up a small image as the image source, and then use HTML5 custom data attributes to attach larger images.\n
  18. Then we just use JavaScript to replace the images when we load up the desktop version of the site. We don’t even have to use custom data attributes - we could just use a naming scheme and do string replacement.\n
  19. Navigation is probably the hardest part of all. We have to make sure people can get to the things they need to get to, and we can’t rely on hovers and popup menus to get it done.\n
  20. By using JavaScript and CSS, we can reconstruct the site’s navigation. The Boston Globe has different navigation schemes at different screen sizes.\n
  21. Responsive Navigation Patterns shows a few approaches to making navigation work well on sites.\n
  22. In order to pull this off, we can use some different tools to develop our code.\n
  23. First, I’d recommend using a grid framework that supports responsive design. You can certainly build your own if you are really good with CSS, but there are a few great resources out there. There’s Twitter Bootstrap which is very popular, but there’s also my favorite, Skeleton.\n
  24. Sass lets us make highly-organized reusable stylesheets. We can think more modularly and we can use things like variables and functions to build CSS. Sass emits basic CSS that our browsers can read, too.\n
  25. For example, we can declare a “mixin”, which is a function, and we can then apply that bit of code to other definitions. \n
  26. CoffeeScript is a preparser for JavaScript and it offers some new language features for making complex JavaScript easier to write. \n
  27. We can encapsulate logic in JavaScript objects. The typical way to do that is to use a function constructor in Javascript and add methods to the object’s prototype. Here’s an example of an object written using JavaScript. If you’re experienced with more object-oriented languages with actual classes, this might be foreign to you.\n
  28. With CoffeeScript, that code can be much easier to write, and to read. It’s also easier to decouple libraries like jQuery meaning we can make self-contained libraries.\n
  29. A lot of the techniques we’ll use to build responsive sites involve heavy amounts of JavaScript, and so we have to test that code to make sure it works. Jasmine is a library that makes testing JavaScript code pretty simple.\n
  30. A Jasmine test is designed to be easy to read. We set up our objects and then we use expectations to test the results. \n
  31. To summarize, while there are some nice tools we can use to make responsive design easy, we still need to do a mobile first design and we need to think about our content. \n
  32. \n