Loading...

SO...THE TEAM WERE CHATTING THE OTHER DAY

Entry to mid level web design and development in the last few years has become a highly marketed product. If the TV adverts are to be believed then anyone with the ability to drop and drag and a valid credit card can have a fully functional responsive company website tomorrow that will ensure your phone rings off the hook with new customers.

We thought it would be an interesting idea to set ourselves the challenge of seeing if you could really design and build a fully responsive website in just 1 day?.

Coding

MY CHALLENGE

A coding novice with only a limited, self taught understanding of HTML - what I do have on my side is strong layout, brand and image design skills.

I started in all the usual places - shopify, go daddy, wix, weebly and strikingly and soon came to the conclusion that the immediate draw back (from a design perspective) of the templates offered on these sites is that while they offer the illusion of web design customisation - everything really just looks the same, it's the imagery that really sets designs apart.

So, if you are happy for your site to look like everyone else’s then knock yourself out, but for me as a designer I wanted much more flexibility in the grids. (If you don’t follow, responsive sites are built to a grid to allow for stacking on devices of varying sizes)

THE STARTING POINT

In the end I decided that a highly customisable template was the way forward, you can find plenty on the web and as long as you have some software that can you can use to edit the code (such as dreamweaver) or a good online html editor, then you are up and running.

I found and bought a good up-to-date fully responsive parallax template for just $15 and started the clock with a web launch date of 24hrs later. The template code was well marked up and easy to get my head round, the code was designed in blocks that could be copy and pasted and ordered as you needed them and the responsive grid and the css style sheet were logical enough for me to customise large chunks of the image blocks, text and layout in a relatively short time.

Responsive Web Design

CONTENT

Then I needed to write content and thankfully I could transfer most of it from our existing site (with some serious editing). Where the time really started to run down was producing images that worked with the style of the template and with each other. 80% of the build was spent sorting, laying out and refining imagery, but as this was a website for a design studio that relies heavily on imagery to sell itself, it's hardly surprising that that is were most of the time went.

So 18 hours in and I had a site built but it was far from ready to go and this is where the issues suffered by templates and platforms came to light.

PAGE LOAD SPEEDS

These are really hard to manage with a template - in our case the site is calling a large number of Java scripts, many of which we didn’t utilise in our design. But with the help of our developer we were able in minify a lot of the code, ditch unwanted scripts and bring the load speeds up slightly. We use tinypgn.com to compress all the images files (whist maintaining retina size requirements) and finally we used ‘Cloudflare’ to halve the loads speeds again. You can find out more about how it works at www.cloudflare.com

THE GRID

Though the template contained most building blocks there were plenty of alignment and spacing issues we would just not allow in a custom design. The appearance of customisation in many areas (as per the platform templates) was simply just that.

SEO AND CONTENT BALANCE

I could get our developer to write a couple of pages on this area of template downfall, but for the sake of this article lets put it in layman's terms: It’s utterly rubbish and it actually could hurt your marketing efforts on the internet. Thankfully as a business we don’t rely on searches for new clients.

Broken Code

BROKEN CODE

No matter where you get your template from the code is likely to be out of date in some areas, in this case a totally unsupported php mail form that Rackspace (our host service) would have blocked any mail that came from it - in this case I ditched it and copied some code to make a simple email button.

SO.. WHAT DID I LEARN?

Yes it really is possible to create a brand new fully responsive site in 24hrs, (if you understand HTML and have access to Adobe CS for image design) but I would never try it again. I have ended up with a site that looks great, is easy to navigate but doesn’t really perform at it's best unless you are on a desktop or using a solid wifi connection to view it. I have been able to make large compromises on content balance, SEO and design, yet I know from experience that this is something our clients would struggle with. I asked our developer if we could take the design and start again with cleaner and leaner code but the short answer is on a site design like this the java script alone would take 3 weeks to rewrite and that just isn’t cost effective.

I can see the draw for clients - they get a site delivered quickly that looks good but it can be painfully slow for users and can contain so many script errors and poor SEO that it defeats the object of having a site in the first place.

Templated Website Design

CONCLUSION

For me, the key - if you really want to go down the template or platform service route (if the issues raised don’t really bother your business - which they should!) is to have very strong image and brand design. I do wonder if over time as more and more sites are simply rehashes of the same grids if that the focus will shift for designers like us back towards strong brand and image design rather than web design as we have known it over the last 5 years.