SlideShare una empresa de 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

Más contenido relacionado

Similar 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
 

Similar 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
 

Más 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
 

Más 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

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
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
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
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
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
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
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
 
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
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Último (20)

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
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
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
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
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
 
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
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

Mobile First Development by Shayne Bartlett