5th July 2014
The New NothingNowhere
On wednesday I launched the new NothingNowhere website (fresh out of beta). This new site reflects much more of my clean and simple design style that I’ve been fine tuning, making more use of whitespace for effect. It also encompasses more of my technical knowledge to create a website that is fully responsive being built on Bootstrap, is fully editable thanks to WordPress and is my first site to use Sass for the entirety of css preprocessing. Not only does the site have a focus on clean design, its also the product a performance focused workflow.
Inspired by Matt Gaunts mini presentation for Google IO 2014, I set out to make this website the most snappy site I’ve made to date. Using Google’s PageSpeed insights I tweaked various aspects of the front and backend of the site, optimising and compressing All image assets (I actually got abit obsessed with this), enabling compression on the server, leveraging browser caching and minifying my code. All of these make the site faster and perform better, something thats especially important when your on a mobile in the middle of nowhere. My latest score is 83/100 with 100/100 of User experience. The only way to better this speed score is to integrate Grunt into my workflow, which is something I plan doing soon. I would like to upgrade the server architecture, which I may do soon. If I hosted the site on a vps, hybrid or dedicated server I could reduce the first byte time. At the moment, site traffic doesn’t warrant doing this but its an option for the future
The design of the website is inspired by two or three sites. The first is Upper dog, who are a local web design/development agency. Their site is clean and simple, using photo banners and header text on all pages. This inspired the NothingNowhere homepage where I used a large stock photo, blurred and recoloured it, then added header text to create a cool parallax styled header. Another site I found inspiring for this project was Degordians’ new site. It is stunning example of video backgrounds, simple but effective use of iconography and text to create a fantastic website. This inspired me to use more white space around text and images, along with animations to really make the website come alive. Lastly, the Thinking Juice website inspired by neutral colour scheme. It uses its brand colours alongside a white/grey/black colour pallet to create a really striking website. They also used whitespace with iconography with some great background image transitions. Its a very cool site.
Overall I’m quite chuffed with the NothingNowhere site. My favourite pages are the single portfolio pages which look really nice. I’m going to keep working on small aspects of the site with new features to be added soon (details will follow).
- New Brand styling used throughout + Facebook page and share styling
- Fully responsive – Built on Bootstrap
- WordPress backend
- Brand new portfolio page
- Mobile first approach
- Uses Sass for css preprocessing
- Uses server compression
- Uses image compression and optimisation
- Uses Gravity forms for contact submission
- Uses Google Maps API with custom colour pallet
- Leverages browser caching
Estimated Build time: 100hours (most spend on design aspect) + content creation time
Version 2.1 Update 8/7/14 18:30
- Added Facebook and Twitter sharing to Portfolio pages
- Added <picture> and srcset elements to Portfolio pages with picturefill.js to make animated gifs responsive
- Added 404 page
- Did abit of Refactoring to portfolio Sass – Making lists more uniform across the site using global variables