Our website is content heavy - lots of walk directions, maps, and updates, so space is at a premium.
We've also noticed a lot of traffic coming from tablets and smartphones - smaller, landscape orientated, with a touchscreen, without a mouse.
So it was time for a redesign, something brighter and bolder, and smartphone friendly. With
responsive design. This is the current buzzword. It means responding to the users device - e.g. if the user has a small screen width, display a narrow ad and smaller images - and if the user has a large screen side, serve wider ads and bigger images. Simples.
Sorry, a bit of CSS, even if you are not techie, you should be able to see what's happening.
<style>
.example { background: url(small.jpg ); }
@media (min-width:500px) { .example { background: url(medium.jpg); } }
@media (min-width:800px) { .example { background: url(large.jpg ); } }
</style>
Also, Windows Metro style flat icons with bold colours are in at the moment, rather than ones with Photoshopped embossed shading. The guys at
DesignModo.Com have produced a cool free
Flat UI pack (based on JQueryUI) which includes everything you could want. It has some nice colour swatches which I might yet use.
I particularly like turquoise on midnight.
While looking for a new
drop down menu layout I chanced upon a
tutorial, and from the same site, an even cooler tutorial for
CSS breadcrumbs
I cannot finish without mentioning a cool start up http://pagefair.com/. They have a system for Ad Blockers. Lots of websites, including our are ad supported. Now if you use an ad blocker (I do myself!), you are freeloading.
Pagefair have a system that inserts a bit of Javascript on your page. If it detects an adblocker, it asks you to unblock the page, donate a few dollar, or be reminded again in a few weeks.
Rather than customising all these ity bity things, its maybe its worth going the whole hog and using
Bootstrap - combines mobile friendly CSS and Javascript UI widgets like drop down menus and tabs. Another To Do.
