SlideShare a Scribd company logo
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

More Related Content

Similar to 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 Approach
Dan Moriarty
 
Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
JoomlaChicago - Loop
 
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
XBOSoft
 
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
Integrated IT Solutions
 
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 First
Precedent
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
Precedent
 
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
 
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
 
Reboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in researchReboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
Tincan - Mobile Elephant
Tincan - Mobile ElephantTincan - Mobile Elephant
Tincan - Mobile Elephant
Ben Holliday
 
Nonintrusive semantic html5
Nonintrusive semantic html5Nonintrusive semantic html5
Nonintrusive semantic html5
Muhamad Arief
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
Doug 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 Corporation
CanadaHelps / 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 – Boston
Rebekah 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 - 2014
Shah Muhammad Baig
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
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.
Techugo
 

Similar to 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 Apps10 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 Apps
 
Reboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in researchReboot-Typography.pptx reboot typography to help you in research
Reboot-Typography.pptx reboot typography to help you in research
 
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.
 

More from JoomlaDay Australia

Accessibility, SEO and Joomla
Accessibility, SEO and Joomla Accessibility, SEO and Joomla
Accessibility, SEO and Joomla
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 experience
JoomlaDay Australia
 
Building Templates for Joomla
Building Templates for JoomlaBuilding Templates for Joomla
Building Templates for Joomla
JoomlaDay Australia
 
Developing a prize-giveaway style component
Developing a prize-giveaway style componentDeveloping a prize-giveaway style component
Developing a prize-giveaway style component
JoomlaDay 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 Funnel
JoomlaDay 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 concept
JoomlaDay 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 campaign
JoomlaDay 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.2
JoomlaDay Australia
 

More from 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
 

Recently uploaded

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 

Recently uploaded (20)

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 

Mobile First Development by Shayne Bartlett