Web Design for Everybody

Web design is something that almost everyone interacts with on a daily basis, but it seems that surprisingly few people get to grips with what goes into a fully functional site. It’s something that I’ve grown increasingly interested in, both on the SEO / PPC side of things (what makes your website crop up when someone enters a search term in a browser) and the building blocks that make up a site. There’s something strangely satisfying about right clicking a web-page, hitting ‘inspect’, and having a good ol’ rummage around.

I’m in no way adept in the mystic art of coding. Last year I had a crack at the University of Michigan’s online Web Design for Everybody specialisation on Coursera and had a blast doing so. The workload and course structure were well devised and in no time I was tapping away; changing the colours of fonts, crafting my first navbar, and getting my head round the wonders of Javascript. As I traipsed my way through each individual course I found that the use of frameworks and templates was being referenced more and more. This surely must be the way forward for a pragmatic / lazy coder? The opportunities offered by the likes of Bootstrap when compared to writing all your own code came to the fore when I reached my final capstone project. We were presented with three options: code a site from scratch, use a template, or use a framework. The catch was that your code had to validate and feature a number of key elements and optional frills. I chose to go from scratch. The more complex systems of code that I could borrow or emulate offered beautiful finished products, but I wanted to be sure that I understood the role of every line on this first site.

The result was the groundbreakingly named ‘Contour Media’, an amalgamation of my various interests presented in such a way that I could tick all of UoM’s boxes. This wasn’t a thing of beauty by any stretch of the imagination, but it was empowering to have written an entire site by myself. It had a slideshow gallery that displayed a number of photos I’d taken (with some transition animations that I was particularly proud of), a music section where I banged on about some of the songs I’ve recorded over the years, and a blog section. I don’t regret choosing this option for a second, yet the frameworks or ready to go templates available online offer up a host of advantages.

cont.png

A few months later this lead me to giving a template site a whirl. My work for a local estate agent and a walking website allowed me to develop my skills in the realm of digital marketing and I decided to create a (purely speculative) site for a marketing company that offered services in social media marketing, PPC, analytics work to support these two channels, and some SEO tweaking. Now all I needed was a spunky name. Eventually I decided on ‘Greed Digital’, a brazen choice that I thought would get people’s attention. This digital marketing outfit would be lean, with a tight focus on strategy and ROI for the client – why shouldn’t they be greedy? This idea stuck and I went about looking for an appropriate template. I wanted to make use of large banner style image and title to introduce each page and then provide a more fleshed out breakdown of the company’s culture, focus, pricing, etc. I found a cracking CSS template on www.w3schools.com and tweaked it to my liking. Their example site was all on a single page, with the navbar using internal links to the different sections. I wanted separate pages, so sliced up the code on offer and began compartmentalising it into manageable chunks that I would link together as individual pages. I then had a dig through w3’s custom styling and started picking out my favourite logos, colours, etc., and inserted a number of my own photos. It’s in no way a finished product, I’m not happy with the padding and it requires some more content, but it came out looking far more professional than Contour and coding a contact page with a map widget was an interesting exercise.

greedsite.png

And this brings us to the most recent site I rustled up – this one. I wanted to try something that would be clean and simple, whilst simultaneously being able to handle a good number of posts, comments, etc. I’d already acquired a good working knowledge of the WordPress platform running a music magazine / website and personally found it infinitely preferable to Squarespace. I used the latter for a community based website called The Lenton Wire, but disliked its lack of flexibility and tendency to hide features behind a paywall. Don’t get me wrong, it’s great for creating fantastic sites quickly without any background in coding – it just wasn’t what I was after. I figured that if a WordPress site could make managing the hundreds of articles posted on The Mic (the aforementioned music mag) a breeze at a remarkably low cost it would suit my purposes just fine. I’ve done very little to jazz Currant up. I designed a logo and that was that. It’s a clean, responsive site that I can add features and visuals to as it develops.

It goes without saying that every method of approaching web design has innumerable merits and its fair share of shortcomings, of which I’ve barely scratched the surface. Whether you opt for a paid service such as WordPress or Squarespace, or code and host your own site, you can get great results and share your business and/or passion with the world – and that’s pretty neat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s