In this project we need to convert a static webpage to an offline-ready web application. The task can be broken in three main categories:
- Convert the design to be responsive on different displays.
- Make the app accessible for screen reader use.
- A service worker needs to be added in order to create a seamless offline experience for users.
A starter code for a restaurant reviews website was provided.
The website has three different layouts for three different viewport sizes: 600 px, 960 px and 1280 px. It makes it responsive on different sized displays. In order to make the website's images responsive, three set of images was used: small, medium and large.
To make the website accessible for screen readers:
Altattribute was added to all images.- Style of the links and buttons was changed, so users can spot links currently focused:
:hoverand:focusstates has different colors. - A 'skip link' is provided, it allows users to skip the map and go straight to the main content.
- Aria-lables, roles and links added according to ARIA recommendations.
The goal of the last stage of the project - make the website available for offline use.
- A service worker has been added in order to retrieve or cache resource requests.
- A separate cache for website's images created, so once an image has been cached once, the service worker can respond with it next time it's requested.
- A warning message that the website is offline and maps can not be displayed at the moment added.
- In this folder, start up a simple HTTP server to serve up the site files on your local computer. Python has some simple tools to do this.
- If you have Python 2.x, spin up the server with
python -m SimpleHTTPServer 8000. - For Python 3.x, you can use
python3 -m http.server 8000.
- With your server running, visit the site:
http://localhost:8000.