I may have had a low profile over the last weeks, being out of town for the last three weeks has contributed there, but I have been busy.
Here is my latest website production, paperconservation.co.nz. It’s obviously simple, just the one page, but it is the first website that I’ve designed that starts specifically for the small screen, and also works for the desktop.
There’s been plenty of learning here for someone self taught in web design and coding, getting the coloured boxes sorted for a start, and also the small screen stuff. Here’s a clue for the colours, you have to have three levels of containers to get that look.
Obviously there has been a major design shift needed with 50% of web page views now on them small screens — you don’t have much territory to play with.
So: simplify, and you can’t have major bandwidth requirements, ie, no big slow loading slideshows.
I managed to use 480px wide thumbnails for the cell phone screen, and some clarity through the use of colour which links each section visually together. I guess I could have had each coloured section unfolding but there’s not all that much information there. If people are interested I’m thinking they will scroll.
My major plugin was the ever useful adi_mobile. There’s just two screen sizes, up to 480px, which covers all phones up to the iPhone 6+, and anything bigger than that whether a tablet, laptop or desktop.
One of the most useful things when designing the site was the new Google developer tools in Chrome, don’t know how long they have been around but it helps to simulate what you will see on just about any screen. And easily test changing the CSS and seeing how it will look on that particular screen in real time.
It’s already the first entry on page 1 of Bing, down at page 6 on Google when they indexed it unfinished, that should rise similarly to the top.
They say the cream rises.
Guess I now have to redo this site in a similar manner, ie, designing for the small screen, now I know how it’s supposed to all work.