SlideShare a Scribd company logo

Responsive Navigation Patterns - Respond 2014

The slide deck I used at Respond 2014. The slides where the code is brought together originally used video to show the full experience, in this slide deck there is only a single image :( You can view the code samples prepared for this slide deck here: https://github.com/dp-lewis/respond

1 of 69
Download to read offline
We can make people happy
with Responsive Navigation Patterns
People want this
“At first I was angry, but then sadness
crept in as I realised that 

I’m never going to be able to read
those m***** f***ing comments”
a user of a popular US news site
!
There are a lot of patterns
Some have been superseded
The Footer Anchor
this menu button

Jumps you to the footer
The Select Menu

this nav bar
turns into a select element

Recommended

Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSNiamh Foley
 
Wix web design tutorial
Wix web design tutorialWix web design tutorial
Wix web design tutorialwgraham1323
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1amr elgarhy
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)Zoe Gillenwater
 
My Final DGME 169
My Final DGME 169My Final DGME 169
My Final DGME 169seasandy
 
OOCSS Lightening Talk
OOCSS Lightening TalkOOCSS Lightening Talk
OOCSS Lightening TalkJulie Cameron
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Kate Walser
 
Claim Academy Intro to Programming
Claim Academy Intro to ProgrammingClaim Academy Intro to Programming
Claim Academy Intro to ProgrammingAlex Pearson
 

More Related Content

What's hot

Wix web design tutorial
Wix web design tutorialWix web design tutorial
Wix web design tutorialwgraham1323
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Developmentmennovanslooten
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksGautam Krishnan
 
Responsive Design for Digital VU Month 2011
Responsive Design for Digital VU Month 2011Responsive Design for Digital VU Month 2011
Responsive Design for Digital VU Month 2011Ryan Huber
 
How to find the highest paid writing jobs
How to find the highest paid writing jobsHow to find the highest paid writing jobs
How to find the highest paid writing jobsdfreelancer
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityDirk Ginader
 
ARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: RolloversARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: RolloversGilbert Guerrero
 

What's hot (8)

Wix web design tutorial
Wix web design tutorialWix web design tutorial
Wix web design tutorial
 
Rapid Testing, Rapid Development
Rapid Testing, Rapid DevelopmentRapid Testing, Rapid Development
Rapid Testing, Rapid Development
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Responsive Design for Digital VU Month 2011
Responsive Design for Digital VU Month 2011Responsive Design for Digital VU Month 2011
Responsive Design for Digital VU Month 2011
 
How to find the highest paid writing jobs
How to find the highest paid writing jobsHow to find the highest paid writing jobs
How to find the highest paid writing jobs
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
ARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: RolloversARTDM 170 Week 3: Rollovers
ARTDM 170 Week 3: Rollovers
 
Vue in Motion
Vue in MotionVue in Motion
Vue in Motion
 

Viewers also liked

Overby mc kenzie_ted_slideshow
Overby mc kenzie_ted_slideshowOverby mc kenzie_ted_slideshow
Overby mc kenzie_ted_slideshowcarrotzcake
 
Mozilla Firefox, Download, Browsing
Mozilla Firefox, Download, BrowsingMozilla Firefox, Download, Browsing
Mozilla Firefox, Download, BrowsingLinda Dwi A II
 
CV dr paresh solanki lattest with KRA
CV dr paresh solanki lattest with KRACV dr paresh solanki lattest with KRA
CV dr paresh solanki lattest with KRAkingmakr1
 
Entrada bloc Reflexió i Innovació
Entrada bloc Reflexió i InnovacióEntrada bloc Reflexió i Innovació
Entrada bloc Reflexió i Innovaciónachomei
 
Does the American Constitution guarantee freedom?
Does the American Constitution guarantee freedom? Does the American Constitution guarantee freedom?
Does the American Constitution guarantee freedom? amibeth26
 
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey Andrews
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey AndrewsRevenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey Andrews
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey AndrewsRevenue Ramp Up (Project Work - B2B Sales)
 
Extensive Reading: assumptions and experience
Extensive Reading: assumptions and experienceExtensive Reading: assumptions and experience
Extensive Reading: assumptions and experienceKevin Stein
 

Viewers also liked (12)

Overby mc kenzie_ted_slideshow
Overby mc kenzie_ted_slideshowOverby mc kenzie_ted_slideshow
Overby mc kenzie_ted_slideshow
 
Bt2
Bt2Bt2
Bt2
 
MDLOC
MDLOCMDLOC
MDLOC
 
Paradigma crítico..
Paradigma crítico..Paradigma crítico..
Paradigma crítico..
 
Mozilla Firefox, Download, Browsing
Mozilla Firefox, Download, BrowsingMozilla Firefox, Download, Browsing
Mozilla Firefox, Download, Browsing
 
CV dr paresh solanki lattest with KRA
CV dr paresh solanki lattest with KRACV dr paresh solanki lattest with KRA
CV dr paresh solanki lattest with KRA
 
Entrada bloc Reflexió i Innovació
Entrada bloc Reflexió i InnovacióEntrada bloc Reflexió i Innovació
Entrada bloc Reflexió i Innovació
 
Does the American Constitution guarantee freedom?
Does the American Constitution guarantee freedom? Does the American Constitution guarantee freedom?
Does the American Constitution guarantee freedom?
 
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey Andrews
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey AndrewsRevenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey Andrews
Revenue Ramp Up "Climbing the Mountain" presentation by Michael Godfrey Andrews
 
Extensive Reading: assumptions and experience
Extensive Reading: assumptions and experienceExtensive Reading: assumptions and experience
Extensive Reading: assumptions and experience
 
MOVIE
MOVIEMOVIE
MOVIE
 
Topografía miembro superior
Topografía miembro superiorTopografía miembro superior
Topografía miembro superior
 

Similar to Responsive Navigation Patterns - Respond 2014

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNgravityworksdd
 
How to Create simple One Page site
How to Create simple One Page siteHow to Create simple One Page site
How to Create simple One Page siteMoneer kamal
 
WordPress Navigation in Responsive Design
WordPress Navigation in Responsive DesignWordPress Navigation in Responsive Design
WordPress Navigation in Responsive Designopenchamp
 
Devices on the Web (2.0)
Devices on the Web (2.0)Devices on the Web (2.0)
Devices on the Web (2.0)Gurpreet Singh
 
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...gravityworksdd
 
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridasFrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridasLoiane Groner
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonJoseph Dolson
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryAmzad Hossain
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementationdavejohnson
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteFranco De Bonis
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)Eran Zinman
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performancedapulse
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Wahyu Putra
 

Similar to Responsive Navigation Patterns - Respond 2014 (20)

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
How to Create simple One Page site
How to Create simple One Page siteHow to Create simple One Page site
How to Create simple One Page site
 
Boot strap
Boot strapBoot strap
Boot strap
 
WordPress Navigation in Responsive Design
WordPress Navigation in Responsive DesignWordPress Navigation in Responsive Design
WordPress Navigation in Responsive Design
 
Devices on the Web (2.0)
Devices on the Web (2.0)Devices on the Web (2.0)
Devices on the Web (2.0)
 
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDe...
 
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridasFrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
FrontInBahia 2014: 10 dicas de desempenho para apps mobile híbridas
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Accessible code-patterns
Accessible code-patternsAccessible code-patterns
Accessible code-patterns
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe Dolson
 
JavaScript
JavaScriptJavaScript
JavaScript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive Website
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)YGLF 2015 -  Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performance
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Prototyping + User Journeys
Prototyping + User JourneysPrototyping + User Journeys
Prototyping + User Journeys
 

Recently uploaded

DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEandreiandasan
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXL
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXLQ1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXL
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXLMemory Fabric Forum
 
Q1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupQ1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupMemory Fabric Forum
 
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!XfilesPro
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut meManoj Prabakar B
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxMemory Fabric Forum
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Q1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIQ1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIMemory Fabric Forum
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Memory Fabric Forum
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 

Recently uploaded (20)

DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXL
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXLQ1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXL
Q1 Memory Fabric Forum: Memory Processor Interface 2023, Focus on CXL
 
Q1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product LineupQ1 Memory Fabric Forum: SMART CXL Product Lineup
Q1 Memory Fabric Forum: SMART CXL Product Lineup
 
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
5 Things You Shouldn’t Do at Salesforce World Tour Sydney 2024!
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut me
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptx
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Q1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AIQ1 Memory Fabric Forum: XConn CXL Switches for AI
Q1 Memory Fabric Forum: XConn CXL Switches for AI
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 

Responsive Navigation Patterns - Respond 2014

  • 1. We can make people happy with Responsive Navigation Patterns
  • 3. “At first I was angry, but then sadness crept in as I realised that 
 I’m never going to be able to read those m***** f***ing comments” a user of a popular US news site !
  • 4. There are a lot of patterns Some have been superseded
  • 5. The Footer Anchor this menu button Jumps you to the footer
  • 6. The Select Menu this nav bar turns into a select element
  • 7. How to make people happy 3 of the top navigation patterns
  • 8. 1. Do (almost) Nothing 2. The Toggle 3. The Flyout
  • 9. 1. Do (almost) Nothing also known at Top Nav
  • 10. Do (Almost) Nothing Pros Easy to implement No fancy CSS voodoo No JavaScript hocus pocus ! Cons Doesn’t suit lots of items due to space
  • 11. Example of Do Nothing simplebits.com
  • 12. What we’re going to build
  • 13. HTML
  • 14. HTML can be very basic ! <div class="brand">Logo</div> ! <nav class="navbar"> <ul class="navbar--items"> <li><a href="home.html">Home</a></li> ... </ul> </nav> ! <div class="content"> <h1>Do Nothing</h1> ... </div>
  • 15. CSS
  • 16. Small screen first ! .navbar, .brand { text-align: center; }
  • 17. Align the navigation .navbar, .brand { text-align: center; } ! .navbar--items li { display: inline-block; }
  • 18. Scaling up for larger screens
  • 19. Set a breakpoint for scaling up @media screen and (min-width: 40em) {
  • 20. Re-align the brand and navbar ! @media screen and (min-width: 40em) { .brand { float: left; width: 20%; } .navbar { float: left; width: 80%; }
  • 21. Pad the navigation items ! @media screen and (min-width: 40em) { .brand { float: left; width: 20%; } .navbar { float: left; width: 80%; } .navbar--items li { padding-left: 5%; padding-right: 5%; } }
  • 22. Putting it all together !
  • 24. The Toggle Pros Keeps the user in place Doesn’t take up room when not in use Easy to scale up ! Cons Small JavaScript dependancy Animation quality
  • 25. Example of the toggle starbucks.com
  • 26. What we’re going to build
  • 27. HTML
  • 28. HTML is almost the same ! <button class="button-toggle" data-toggle>Menu</button> ! <div class="brand">Logo</div> ! <nav class="navbar"> <ul class="navbar--items"> ... </ul> </nav> ...
  • 29. JS
  • 30. Determine the type of event var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; }
  • 31. Select the elements with the attribute var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } ! var toggleButtons = document.querySelectorAll('[data-toggle]');
  • 32. Create a function to toggle the class var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } ! var toggleButtons = document.querySelectorAll('[data-toggle]'); ! function toggle(ev) { ev.preventDefault(); ev.target.classList.toggle('is-on'); }
  • 33. Associate the elements with the function var click = 'click'; ! if (document.documentElement.hasOwnProperty('ontouchstart')) { click = 'touchstart'; } ! var toggleButtons = document.querySelectorAll('[data-toggle]'); ! function toggle(ev) { ev.preventDefault(); ev.target.classList.toggle('is-on'); } ! /* Put everything togther */ for (var i = 0; i < toggleButtons.length; i = i + 1) { toggleButtons[i].addEventListener(click, toggle, false); }
  • 34. CSS
  • 35. CSS to hide the navigation ! .navbar { max-height: 0; overflow: hidden; transition: max-height ease-in 300ms; }
  • 36. CSS to show the navigation ! .navbar { max-height: 0; overflow: hidden; transition: max-height ease-in 300ms; } ! .button-toggle.is-on { background: #222; } ! .button-toggle.is-on ~ .navbar { max-height: 1000px; }
  • 37. Scaling up to larger screens
  • 38. Show the navigation ! @media screen and (min-width: 40em) { .navbar { max-height: 1000px; } !
  • 39. Hide the button ! @media screen and (min-width: 40em) { .navbar { max-height: 1000px; } ! .button-toggle { display: none; }
  • 40. Make the navigation display inline ! @media screen and (min-width: 40em) { .navbar { max-height: 1000px; } ! .button-toggle { display: none; } ! .navbar--items > li { display: inline-block; } }
  • 41. Putting it all together !
  • 43. Nav Flyout Pros Lots of space Wow factor Popularised by Facebook ! Cons Performance Device support Hard to scale
  • 45. What we’re going to build !
  • 46. HTML
  • 48. JS
  • 50. CSS
  • 51. Stretch the navigation .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; !
  • 52. Translate the navigation out the way .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); }
  • 53. Set a transition on the elements we’ll move .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); } ! .navbar, .content, .brand { transition: transform ease-in 300ms; }
  • 54. Move the menu and content on toggle .navbar { position: fixed; bottom: 0; right: 0; top: 0; width: 66%; padding-top: 3em; transform: translate(100%, 0); } ! .navbar, .content, .brand { transition: transform ease-in 300ms; } .content, .button-toggle.is-on ~ .navbar { transform: translate(0, 0); } .button-toggle.is-on ~ .brand, .button-toggle.is-on ~ .content { transform: translate(-66%, 0); }
  • 55. Scaling up to larger screens
  • 56. Re-align things like with do nothing ! @media screen and (min-width: 40em) { .button-toggle { display: none; } .brand { float: left; width: 15%; } .navbar { position: relative; width: 85%; padding-top: 0; float: left; } .navbar--items li { display: inline-block; padding: 0 1.5%; }
  • 57. Ensure the menu is always visible ! ! } .navbar, .brand, .button-toggle.is-on ~ .brand, .button-toggle.is-on ~ .content { transform: translate3d(0, 0, 0); }
  • 58. Putting it all together !
  • 61. Avoid the sub navigation
  • 62. Things to bear in mind
  • 63. Make navigation items a 
 decent size
  • 64. Make navigation items a decent size
  • 66. Use the devices 
 you are targeting
  • 68. Resources All the code used in this presentation github.com/dp-lewis/respond ! Heaps of info about RWD bradfrost.github.io/this-is-responsive ! Easy to reach places on devices lukew.com/ff/entry.asp?1649 ! Standardising the Icon bit.ly/standardise-icon