1. Web Design
  2. Community Projects

Community Project: Responsible Redesign for the New Year

The beginning of a new year is always a classic time to make changes and fresh starts, both in our personal lives and at work. The beginning of 2015 is the perfect time to get responsible, so let’s do so as a community! We’re asking you to improve your websites and share the results.

Taking Responsibility for the Web

For the last couple of years we’ve grown used to the idea that our websites should be responsive (unless there’s a good reason for not being) but in recent times we’ve started to realise that our websites should be responsible too. If you’ve read Scott Jehl’s Responsible Responsive Design you’ll know exactly what I mean.

A responsible website is one whose content is universally accessible, no matter what the device, the network speed, or the user limitations. It’s easy to get dragged in by the latest web techniques and toys, but heavy images, surplus styles, poorly-supported features and bloated JavaScript can ruin the experience for many users.

What We Want to See

There’s more to a responsible website than performance alone, but that’s a great place to start. For this community project we’re going to be relying on Google PageSpeed Insights to measure and improve our websites. Enter your site’s url (either your personal website or a client website) and see what the analysis reveals:

Room for improvement
Room for improvement

Your mobile and desktop scores will be presented as figures up to 100, broken down into categories like “speed” and “user experience”, with a list of things you can do to improve those scores. Then, taking on board Google’s suggestions, go away and make your website better

Think you can manage two green check marks
Think you can manage two green check marks?

Don’t worry if your website isn’t perfect, but improve it, make it more responsible, and let us see the results in the comments! Include before and after screenshots of your PageSpeed results where possible. The best examples will be featured on Tuts+.

Hints to Get You Started

Here are some quick wins to improve your PageSpeed score:

  • Use an image compression tool like TinyPNG to optimize your images.
  • Use fewer images!
  • Update your .htaccess file to include GZIP compression.
  • Use a preprocessor to concatenate and minify your stylesheets.
  • Prioritize content which features “above the fold”. I know, the fold is long gone, but the stuff at the top of your web pages is important. Make sure it renders quickly and that nothing else (like JavaScript files which aren’t needed until further down the page) block it from loading.
  • Install the PageSpeed Insights Chrome Extension (which adds a tab to Developer Tools) to regularly remind yourself to check.

There are heaps of other ways you can improve your websites’ scores; some quick fixes, some more involved. Whatever they are we look forward to hearing how you implemented them!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.