Website Redesign
Let me preface this post with a bit of background as to how this blog came about. I, IrishDev, was talking to the kids in the kitchen one day, trying to come up with a name for some side project I’d been working on. I occasionally try side projects as a means to learn some new technology like Ruby on Rails or iOS. Anyhow, I was cycling through anglicisations of Irish phrases and stumbled upon ‘ar scoil’ and its corresponding English spelling of airskull. I said it to the kids who thought it’d be a great name for a game, but IrishMum unilaterally declared that she wished to start a blog with that name… and so I got my first ever webdev customer. I should point out that this type of first customer, with unrealistic expectations, zero tolerance for time constraints and having a tendency to never ever pay, is not the sort of customer one should ever go out to try to ‘win’.
…but I digress! We have recently revamped the look of our blog a couple of times. We switched WordPress themes from PageLines to Themify a few months ago and then moved things around again last month. IrishMum was asked about it a few times, so she asked me to write a post on how we work through a site revamp, and this is that post.
As mentioned above, this blog is created with WordPress. WordPress is a content management system (CMS), which stores post, page and other data in a database, then retrieves the relevant data to display content to users via their browser. Other popular CMSs are Joomla & Drupal, but WordPress is the most popular largely because it is easier to configure.
Do you like TV?
To explain what all this means, let me offer an analogy; when you watch TV you plug the cable into the back of your set. The TV set in this analogy is the web browser. TV sets are made by any of several different manufacturers with differing TV menus, controls and options. Similarly, there are a few web browser manufacturers with differing options for customization. The TV cable is like the internet. Stuff comes through that port from the TV station and you can consume several hours worth of advertising whilst waiting for your favorite show to come back on air….like they say, “Winter is Coming,” but again I digress!
What can you change with your TV shows using your TV set?
You can turn up the brightness, turn down the contrast, make it black & white, turn the sound up full blast., you can even cut the ads out if you record your shows and watch later
What can you change about the webpage you are reading with your browser?
Almost everything. There are many ways you can use your browser to alter a web page you are reading; way more than you’d think. You can also use your browser to look behind the web page at the source code used to make it look the way it does. I’ll explain more on this below.
When you read a blog you are connecting to a server somewhere on the internet with a web browser. The server for our blog runs WordPress to store all the content that we have created and then produces a webpage for the client browser to read. The webpage has two distinct chunks of information; HTML (hyper text markup language) contains the actual content along with some HTML tags in angle brackets. The tags tell the browser how to display the information. The second really important chunk of data to flow from the server to the client whilst browsing is the CSS (cascading style sheets) file. The CSS file tells the browser how to structure the displaying of the content.
There are loads of free resources to learn how to style a web page using CSS but if you have a blog of your own then you should pay some attention to this trick. The best way to learn something new is to copy what other people have done before. If you come across a site you like the look of, or simply a part of a web page that you’d like to base your next design on then fire up you favorite browser; Chrome/Safari/Firefox, even some versions of Internet Explorer, and use the ‘inspect element‘ feature of the browser. If you want to see what plugins a site uses, then chances are there will be some clue in the HTML source pointing to the answer, if not the exact plugin name and developer URL.
So the short answer to how we redesigned our site is; IrishMum came up with some design requests and described what she wanted. I used the inspect element feature in chrome to see how similar sites did similar things, then googled, forumed, researched & invented our way there (all held together with sticky tape)!