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

Let´s analyse the content strategy used by the creators of the following website: https://a-k-apart.com/.

The You Are @ 10K Apart website (a-k-apart.com) aims to create a compelling web experience that can be delivered in 10 KB and works without JavaScript. It's about optimising every little byte to make sure your site works, no matter what. The challenge to create a web application with less than 10 KB was announced in the form of a contest.

For that purpose a contest page was built for interoperability, accessibility and progressive improvement in less than 10KB.

We won't focus on all the technical details of how they managed to do this, since many concepts have yet to be revealed by this module (those involving images, videos, fonts, code, etc.). Rather, we will look at the content strategy that was used to create this micro website.

The first step was to determine the target audience. It was split into 2 main groups:

• Competitors
• Viewers

Both groups could potentially overlap. The task then, was to design the website to support both groups and ensure an easy transition between them. This was achieved through different phases of website development:

• Launch: when there are no entries;
• In progress: when there were entries, but the competition was not open;
• Closing: when the contest is closed and no new entries are accepted, but participants are asked to vote for their favourites;
• Winner announcement after the judgment by both professionals and the community is carried out and the winner is determined (this is the page we can currently see).

Based on the outline above, the content for each page was planned according to each phase.
First, the authors began by deleting content that was not essential to each phase. The creators followed "Mobile First" model (you can learn more about it in Notion 10) and removed anything that might distract the user or not help them achieve their goal on that page. Then the text for each phase was drafted and the content was intended to be told as if you were talking to a partner sitting next to you.

Next, the content was organized into basic wireframes (diagrams depicting the structure and functionality of the site). While working on the wireframes, attention was paid to where the page size could be reduced or where markup (e.g., HTML5) could be used to improve the experience. In addition, importance was given to the organisation of content on smaller screens.

For more complicated interactions, IxMaps (flowcharts) were used. This system allows defining the different ways the user can experience the interface. For example, the entry page displays the most important information: project name, name of its creator/s, project description, and a link to a web. The screenshot of the web is helpful, but not necessary. Therefore, IxMaps were used to lazy load the screenshots only when JavaScript was available. Also, IxMap allowed loading an image in an alternative format for browsers that support WebP (much smaller than JPGs or PNGs).

All these previous steps helped the designer to get a good overview of the site's UI needs and to create a design system instead of individual pages.

Conclusions

What was learnt regarding content, strategy and information:

• Reduce distractions by focusing on the main objective.
• Write for people as if you were talking to them in person.
• Prioritise content by making sure the flow takes users where they want to go.
• Look for opportunities to improve by removing content or bringing it back only in certain scenarios.
• Look for patterns to create a design system, not just individual pages.