TWW Template

Leave your thoughts

What is responsive design?

I used to be a fixed width site fan. It was easy to nail down cross-browser designs and could pack in more features without fighting the fluid width pitfalls. There was also channeling the desktop and mobile devices to separate themes approach. More recently, there is responsive design by using the css viewport filters. It takes twice as long to develop and test compared to a fixed width template, but it is worth it…one theme fits all.

With the Top Web Works hand coded theme, I used a 12 column 960 layout grid and created multiple viewports to create a fluid responsive layout. Bold black elements with block colors and swiss headers reflecting the TWW logo…almost a retro eighties feel. Since the nav was only 4 categories, there was no need to collapse it when shrinking to mobile. Simple straight forward content accessibility.

I used fluid height/width percentages with max/min pixel widths where I could. Most of the site used styles to design…even the various top bar text is injected via css. Jquery was used for some effects like random color bars, grid animations, fixed menu, scroll to top, hire me drawer to name a few. I added html5 tags for future expansion but did see the need to spend too much time there. (css | jquery)

Since the TWW site is to be bare-bones info, it made sense to use WordPress as my backend cms system. The main plugins used are a customized LayerSlider and Foobox for my lightbox. The sidebar images are hard coded into text widgets, but I pulled all images from the fantastic WordPress media system.