In the last couple of months MacGazette has remained largely inactive as mine and Chris’ (who i run the site with) lives have been dominated by University finals. Now that they’re over we’ve been working on a revival. Stage one being to give the site a fresh, modern, responsive design.
This is how Macgazette used to look. The design is cramped and dated, it failed to utilise white-space and was the result of a lot of small modifications to the design rather than one vision created from scratch and fit for purpose. As my flagship website (and since it shares its design with TechChoices) it was destined to get my primary focus. With a refresher on html5, css3 and a book on javascript work began.
The Design
It only took a few days to put the site together and polish it off, here are some of the design choices i made and why.
Front Page
The front page now has a larger logo, and more prominent featured boxes. the search box is back at the side and more focus is brought to subscribing (through RSS and twitter).
Instead of borders each element casts a shadow, is rounded and uses subtle colours – the background is even slightly off white. This then supports the contrast with the navigation bar and buttons which uses a striking blue and sharp corners. The navigation bar itself was simplified and features a dropdown for sub-catagorys. Each clickable element also features roll-over effects to confirm its ‘clickability’.
Single Post page
When designing the single post page we wanted the posts to be easier to read (which means smaller post widths) and to give the information we want (related posts, main sidebar, comments and mentioned apps) without forcing the user to scroll into the abyss. For these reasons we kept the original sidebar but added another for related posts (powered by nrelate). By traversing down the page you’ll arrive at the mentioned apps section which scrapped the download button in favour of being a click-able unit.
Responsive Design
When designing this new site it was important that the site looked great not just on your computer, but on your phone and tablet. To do that the site changes as your change its width (go on try it, go to macgazette.net and slowly drag your browser width smaller). This meant choices such as making the logo and ad banner take their own lines, the sidebar to drop, the featured image to enlarge and take its won line etc. The best way to illustrate this is by looking at a few examples.
iPad
With a smaller screen resolution, one of the sidebar drops below the other to not crowd the screen. and the logo takes prominence (in a retina resolution).
iPhone 4
The iPhone with a smaller resolution still was trickier. To make it feel more like an app the dropdown navigation was removed, the feature boxes spread onto two lines and the page exists as one column. The related posts and mentioned apps resize to fit and slot in below the post.
Conclusion
At MacGazette we love the new design and have a few new updates panned for it. In the meantime I think its time to refresh and complete this site and continue with the other aspects of the MacGazette relaunch.
