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

As we learned in the previous lesson, designing for mobile-first means adding only those design and content features that are essential for your website. Implementing this strategy not only makes content easier to adapt for larger devices later on, but it is also more sustainable.

The reasoning behind this is simple:

• Only adding features that are essential to your website means avoiding 'bulky' features (such as image carousels, crowded navigational bars, social media extensions, and others).
• Removing features that are not essential means websites will have less content to load and will, therefore, load faster.
• Websites that load faster use less bandwidth and save more energy.

You cannot achieve the same effect by, first, designing for desktop computers and then trying to 'scale down' the design to fit mobile devices. This is because desktop-first design caters to larger screen sizes and is, thus, more content-heavy. Trying to fit all of that content into a mobile phone will increase the loading of unnecessary content.

Therefore, to prioritise web sustainability, you need to start designing for the mobile version of your website and then gradually add elements for a larger screen.

But how can we be sure that 'mobile-first' is the most promising way to more sustainable design? Google's support of this design strategy is a good indication! The tech giant not only encourages mobile-first design, but it's also developed criteria for its definition.

According to Google, a mobile-first website:

• does not use software not commonly found on phones (such as Flash)
• uses text that users can read without having to zoom in
• auto-adjusts website content so that users don't have to rotate their screens or zoom in
• places links an adequate distance apart so that it's easy for users to click on the correct one

Google's 'mobile-first' policy has even helped mobile-friendly sites rank higher in search engines and penalised those that do not design for mobile-first. Such an approach has pushed designers to take mobile-first design into greater consideration.