100 points to know about...
Eco-Design Web Development

When we think about sustainable web design, it’s easy to miss a solution that’s no more than an arm’s length away – our mobile phones. Designing for mobile phones is a technique that has increased in popularity in part because of the prevalence of mobile phone usage today, but also because of the convenience and adaptability of these devices.

Watch the short video below to discover the scope, history and importance of mobile-first design.

Mobile-first design: What is it and how did it develop in web design? (2:05)

Video transcript:

Mobile-first design
What is it and how did it develop in web design?

---NEW SLIDE---
Mobile-first design is a design approach in which the online experience is developed for mobile before designing for desktop or any other device.

Mobile users surpassed desktop users in 2016. 51% of the population uses the internet only from their smartphones. By 2025, that number is expected to jump to 72.5%.

---NEW SLIDE---
Mobile use isn’t growing just because devices are getting better.
They're getting cheaper, too.
Those who can't afford a computer can now get online using inexpensive mobile devices and data plans.
Designing 'mobile-first' can not only open up new opportunities for growth, it can lead to a better overall user experience for a website or application.
Luke Wroblewski
Product Director at Google who first coined the term "mobile-first"

---NEW SLIDE---
The evolution of mobile-first design
Part 1: Graceful Degradation (Desktop-First)

Before mobiles and tablets, websites were developed only for desktops.
When the use of other devices increased, developers started to modify their desktop-only designs to fit mobiles and tablets.
The modified designs had to cut down functions & content from the more advanced desktop version in order to fit the smaller devices.

---NEW SLIDE---
The evolution of mobile-first design
Part 1: Graceful Degradation (Desktop-First)

This approach of creating fully functional websites for desktops and downgrading them to fit other devices is called Graceful Degradation or Desktop-First approach.

What's the downside?

Many web elements do not adapt well to smaller screen sizes. What results is a website whose appearance is less visually appealing on smaller devices.

---NEW SLIDE---
The solution?
Part 2: Progressive Advancement (Mobile-First)

To address this problem of poor adaptation, developers adopted another approach called Progressive Advancement or Mobile-First Design.

This new approach encouraged experts to begin designing for smaller devices first and then to add more functionalities for bigger screens.

---NEW SLIDE---
The solution?
Part 2: Progressive Advancement (Mobile-First)

Therefore, instead of developing all features from the start, a webpage is first built using features that are supported by all browsers and features that are considered essential.

More advanced features are then added like layers to bigger screens.

---NEW SLIDE---
To learn more about mobile-first design, check out Luke Wroblewski's book "Mobile First":

Thank you for watching.