SlideShare uma empresa Scribd logo
1 de 16
Why
Over 1.2 Billion mobile users.
Mobile will overtake fixed Internet
access by 2014.
It’s actually easier to do!
Why

Luke Wroblewski

•Prepares you for the explosive growth and new opportunities emerging on
mobile today,
•Forces you to focus and prioritize your products by embracing the constraints
inherent in mobile design, and
•Allows you to deliver innovative experiences by building on new capabilities
native to mobile devices and modes of use.
Paradigms
Progressive Enhancement Vs Graceful Degradation

Responsive Vs Adaptive

Mobile First Vs Desktop First
Traditional
Mobile First
The 1st Problem
The 2nd Problem
How to get started

•It always starts with the content!
•Design to mobile
•Progressively enhance
•Develop to mobile
•Progressively enhance
Gotcha’s
@media
display:
none
<img />
<object>
<td> or <li>
Bootstrap 3

“With Bootstrap 2, we added optional mobile
friendly styles for key aspects of the framework.
With Bootstrap 3, we've rewritten the project to be
mobile friendly from the start. Instead of adding on
optional mobile styles, they're baked right into the
core. In fact, Bootstrap is mobile first. Mobile first
styles can be found throughout the entire library
instead of in separate files.”
Bootstrap 3

col-xs- Really small devices
col-sm- Small devices
col-md- Medium devices
col-lg- Large devices
Bootstrap 3
Bootstrap 3
<div class=”col-sm-12 col-lg-6”></div>
col-sm-12 (100%)

col-sm-12 (100%)

col-lg-6 (50%)

col-lg-6 (50%)
In Conclusion

We are heading to a mobile world... in fact we
may already be there
Mobile fist will make your life easier
Projects will be mobile ready in less time.
Questions
Icons: Danilo Demarco - http://www.danilodemarco.com/

https://www.youtube.com/watch?feature=player_embedded&v=Z1IqzeA3XXg

Mais conteúdo relacionado

Semelhante a Mobile First Development by Shayne Bartlett

Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDan Moriarty
 
Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14XBOSoft
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?LavaConConference
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile FirstPrecedent
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile FirstPrecedent
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps Fresh Digital Group
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile AppsDoug Robinson
 
Tincan - Mobile Elephant
Tincan - Mobile ElephantTincan - Mobile Elephant
Tincan - Mobile ElephantBen Holliday
 
Nonintrusive semantic html5
Nonintrusive semantic html5Nonintrusive semantic html5
Nonintrusive semantic html5Muhamad Arief
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device PrototypesDoug Gapinski
 
What You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation
What You Need To Know About Mobile | Noel Webb, SpeakFeel CorporationWhat You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation
What You Need To Know About Mobile | Noel Webb, SpeakFeel CorporationCanadaHelps / MyCharityConnects
 
Managing Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonManaging Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonRebekah Walker
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Web Application Development- Best Practices in 2023.
Web Application Development- Best Practices in 2023.Web Application Development- Best Practices in 2023.
Web Application Development- Best Practices in 2023.Techugo
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017nannudavis
 

Semelhante a Mobile First Development by Shayne Bartlett (20)

Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
 
Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
 
Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14
 
What is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdfWhat is Mobile First Design Strategy.pdf
What is Mobile First Design Strategy.pdf
 
Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?Neil Perlin - We're Going Mobile! Great! Are We Ready?
Neil Perlin - We're Going Mobile! Great! Are We Ready?
 
Presentation1
Presentation1Presentation1
Presentation1
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile First
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
Tincan - Mobile Elephant
Tincan - Mobile ElephantTincan - Mobile Elephant
Tincan - Mobile Elephant
 
Nonintrusive semantic html5
Nonintrusive semantic html5Nonintrusive semantic html5
Nonintrusive semantic html5
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
 
What You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation
What You Need To Know About Mobile | Noel Webb, SpeakFeel CorporationWhat You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation
What You Need To Know About Mobile | Noel Webb, SpeakFeel Corporation
 
Managing Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – BostonManaging Responsive - eduWeb Digital Summit 2012 – Boston
Managing Responsive - eduWeb Digital Summit 2012 – Boston
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Are you a Bootstrapper?
Are you a Bootstrapper?Are you a Bootstrapper?
Are you a Bootstrapper?
 
Web Application Development- Best Practices in 2023.
Web Application Development- Best Practices in 2023.Web Application Development- Best Practices in 2023.
Web Application Development- Best Practices in 2023.
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 

Mais de JoomlaDay Australia

Top tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceTop tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceJoomlaDay Australia
 
Developing a prize-giveaway style component
Developing a prize-giveaway style componentDeveloping a prize-giveaway style component
Developing a prize-giveaway style componentJoomlaDay Australia
 
Generate Leads and Sales with a Sales Funnel
Generate Leads and Sales with a Sales FunnelGenerate Leads and Sales with a Sales Funnel
Generate Leads and Sales with a Sales FunnelJoomlaDay Australia
 
The integration of joomla with the internet of things concept
The integration of joomla with the  internet of things conceptThe integration of joomla with the  internet of things concept
The integration of joomla with the internet of things conceptJoomlaDay Australia
 
20 common mistakes you should avoid while handling an e-marketing campaign
20 common mistakes you should avoid while handling an e-marketing campaign20 common mistakes you should avoid while handling an e-marketing campaign
20 common mistakes you should avoid while handling an e-marketing campaignJoomlaDay Australia
 
Rapid application development using Akeeba FOF and Joomla 3.2
Rapid application development using Akeeba FOF and Joomla 3.2Rapid application development using Akeeba FOF and Joomla 3.2
Rapid application development using Akeeba FOF and Joomla 3.2JoomlaDay Australia
 

Mais de JoomlaDay Australia (8)

Accessibility, SEO and Joomla
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
 
Top tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experienceTop tips from what we've learned from our 10 years experience
Top tips from what we've learned from our 10 years experience
 
Building Templates for Joomla
Building Templates for JoomlaBuilding Templates for Joomla
Building Templates for Joomla
 
Developing a prize-giveaway style component
Developing a prize-giveaway style componentDeveloping a prize-giveaway style component
Developing a prize-giveaway style component
 
Generate Leads and Sales with a Sales Funnel
Generate Leads and Sales with a Sales FunnelGenerate Leads and Sales with a Sales Funnel
Generate Leads and Sales with a Sales Funnel
 
The integration of joomla with the internet of things concept
The integration of joomla with the  internet of things conceptThe integration of joomla with the  internet of things concept
The integration of joomla with the internet of things concept
 
20 common mistakes you should avoid while handling an e-marketing campaign
20 common mistakes you should avoid while handling an e-marketing campaign20 common mistakes you should avoid while handling an e-marketing campaign
20 common mistakes you should avoid while handling an e-marketing campaign
 
Rapid application development using Akeeba FOF and Joomla 3.2
Rapid application development using Akeeba FOF and Joomla 3.2Rapid application development using Akeeba FOF and Joomla 3.2
Rapid application development using Akeeba FOF and Joomla 3.2
 

Último

SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 

Último (20)

SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 

Mobile First Development by Shayne Bartlett