9. Responsive Design: Adding some muscle!

I'm pretty happy with the globe now. Now I want to work out goes where on the website. Also I want to make sure the website looks good, however big or small the whiteboard or PC is. This is called 'Responsive Design'.

I decided that, however big the screen was, I use the left half for the globe, and the right half for everything else. If the screen has extra depth, that will be blank. If the screen is even more narrow, there will be stuff missing off the bottom (for now).

I also decided to add the 'strongman' feature to the spinning, so that now you see some 'muscles' emojis and some text to tell you how well you span the globe.


I decided on this, rather than numbers, as it's less competitive. I also made it fade away after a couple of seconds, so you don't dwell on the muscles for too long. I have set it so '10' is the most muscles you can get.

Try it here to see how many muscles you've got. Or look at the full site here.

Next we're going to work out how to show the country info in a fun way.


Comments