Optimising Your Site For Facebook

Chris Anstey — Sun, 04 Sep 2011 09:18:15 +0000

Since the rise and the increasing popularity of Facebook, there has been an increasing pressure on ensuring that your site is social media friendly, and can be easily shared with a user’s friends. If a user decides they wish to share your page or site to their friends, it is important that you have prepared for this correctly, otherwise it will not display correctly on their Facebook profile, and therefore may cause them to unshare the link.

There are several steps to preparing for a user sharing your page, the first is to ensure that the correct Meta data has been used within the code of your website. Within Facebook, when a user shares a page, it takes the contents of the tag as the title for the page, and the Meta description as its description. For SEO purposes, this should already have been included within your page as good practice, as this description is also used as the description of your page within the Google search results, which a user will read before deciding to visit your page or not. Below is the Meta description used for my website:</p> <div class="code"> <p><code><meta name="description" content="The online portfolio of Chris Anstey, a web designer and developer based in and around London" /></code></p> </div> <p>Along with the title and the description, a thumbnail is used when sharing a link on Facebook. Usually, this is just an image on the page that is being shared. If there are multiple images within the page, the user is able to select which image to use when they are sharing the link. However, if there are no images within the page, or if the images are not exactly what should be representing the website (eg. a footer image, a photo etc), there is a real need for a thumbnail for the website. After all, this will be displaying on the user’s profile, and on their friend’s News Feed’s when they log into Facebook, so this thumbnail may be the turning factor which causes several visitor to come to your website. Thankfully, a line of code has been introduced with when entered into the <head> section, along with the other Meta data, calls an image to be used as the thumbnail for the website:</p> <div class="code"> <p><code><link rel="image_src" href="thumbnail.jpg" /></code></p> </div> <p>Here, the image called ‘thumbnail.jpg’ will be used as the thumbnail when the users clicks ‘Share’ on your website, or manually shares the link of your website on their Facebook. Take extra care to make sure the code is calling the image in the right place (eg. within an ‘images’ folder). If you have successfully followed these steps when preparing your website for being shared on Facebook, when a user clicks on share, they should see something like the following:</p> <p></p> </article> <article> <h1>Full Screen Page Background</h1> <p>Chris Anstey — Sun, 21 Aug 2011 10:37:47 +0000</p> <p>A new style of page background has been emerging into website designs and development over the last few years, which involves an image being stretched to 100% of the browsers height and width. However, because of variations in screen and browser size (especially on a Mac), several approaches have been introduced to enable the image to be kept in proportion, and therefore adjusting to these variations.<span id="more-413"></span></p> <p>This technique is not new, but the approach to how it is implemented is, and there are several ways to incorporate it into your page. Previously, the image would simply be applied to ’100%’ for both the ‘width’ and ‘height’ attributes of the page. In theory, this works, however when the window is minimised or maximised, the image is either cropped or taken out of the proportion of the image (depending on which browser is being used). Here is what it looks like when this technique is used on a wider screen/browser:</p> <p></p> <p>And then if the browser is minimised, the background is simply cropped:</p> <p></p> <p>The main issue with this approach lies with the fact that the image proportions are not taken into consideration when the browser renders the page, or if the browser is minimised/maximised by the user. Fortunately, because of the new popularity with this technique being applied to a lot of designs over the past few years, I have found several approaches on how to apply this effectively, in particular, two different ways of implementing it:</p> <h4 class="padding-top">CSS3 Approach</h4> <p>If you are fully confident in using CSS3 for your website, or are fortunate enough to have persuaded a client to accept the fact that you will not be supporting older browsers when developing their website, there is a simple CSS3 approach to this technique. Within your CSS, insert the following code into the ‘html’ variable, and that’s it!</p> <div class="code"> <p> <code><br /> html {<br /> background: url(INSERT BACKGROUND IMAGE PATH) no-repeat center center fixed;<br /> -webkit-background-size: cover;<br /> -moz-background-size: cover;<br /> -o-background-size: cover;<br /> background-size: cover;<br /> }<br /> </code> </p> </div> <h4 class="padding-top">JQuery Approach</h4> <p>However, if you are like me, and although you make the most of emerging technologies such as CSS3, you still have to provide a similar experience to users of older browsers, the JQuery approach will be safer. First, you need to ensure that you have referenced the latest JQuery library file, whether that is stored locally or remotely using the Google API. After that, you need to insert the following HTML into the top of the your page, straight after the opening <body> tag:</p> <div class="code"> <p><code><div id="page-background"></div></code></p> </div> <p>Next, using CSS, you need to apply ’100%’ to the ‘height’ of the ‘html’ variable, and then apply the following styles to the div that you have created above:</p> <div class="code"> <p> <code><br /> #page-background <br /> {<br /> position: fixed; <br /> top: 0; <br /> left: 0; <br /> width: 100%; <br /> height: 100%;<br /> }<br /> </code> </p> </div> <p>Now that you have the background image in place, and assigned to stretch to the edge of the browser, you need to tell it to keep the image in proportion when the browser is minimised/maximised. You do this by inserting the following code into your page, which takes the width and height of the image used, generates it proportions and restrcts it from being minimised/maximised to anything other than by these proportions:</p> <div class="code"> <p> <code><br /> resizeBG = function() {<br /> var image = $('#page-background img');<br /> image.removeAttr("width"); <br /> image.removeAttr("height");<br /> var imageWidth = image.attr('width') || image.width();<br /> var imageHeight = image.attr('height') || image.height();<br /> var ratio = imageHeight / imageWidth;</p> <p>var h = $(window).height();<br /> var w = $(window).width();</p> <p>$('#page-background img, #page-background').css('width', w);<br /> $('#page-background img, #page-background').css('height', w * ratio);<br /> }</p> <p>$(window).load( resizeBG );<br /> $(window).resize( resizeBG );<br /> </code> </p> </div> <p>After you have applied either one of these approaches, the following will show when you have implemented either approach correctly:</p> <p></p> <p>When the browser is minimised, the image in kept in proportion, therefore not giving the effect of the image being ‘stretched’ or ‘squeezed’:</p> <p></p> <p>This is a nice technique that is increasingly being incorporated into the page background of new websites. However, there is a thin line between it looking outdated because of the image being stretched and pixelated, and it being implemented subtly, where the image is dynamically adjusted to the size of the user’s browser or screen. Either one of these approaches will allow you to do this, and which you choose to use depends on the audience of your website (i.e. the browser capabilities of the majority of people who will be visiting the site).</p> </article> <article> <h1>Learning HTML5</h1> <p>Chris Anstey — Thu, 02 Jun 2011 13:25:48 +0000</p> <p>When I first heard about ‘HTML5′, I immediately thought it just was a newer version of HTML, a stricter and more structured programming language than XHTML Strict/Transitional 1.0. Even when I was reading ‘<a href="2011/01/hardboiled-web-design/">Hardboiled Web Design</a>‘ by Andy Clarke, which provided great information about CSS3 and newer approaches to web design and development, I was still unsure about what exactly HTML5 was.<span id="more-386"></span></p> <p></p> <p>My knowledge was broadened when I started reading ‘<a onclick="return !window.open(this.href);" href="http://www.amazon.co.uk/Foundation-HTML5-Canvas-Games-Entertainment/dp/1430232919">Foundation HTML5 Canvas: For Games and Entertainment</a>‘ by Rob Hawkes. Written in plain English, Hawkes marks out from the start exactly what the concept of HTML5 is, and how it can be learnt and incorporated into web development immediately. Hawkes states that it’s “not easy to define exactly what is and isn’t HTML5, as the specificiation is in a state of flux at the moment”, describing that HTML5 is about to bring with it a massive amount of improvements over the old document-orientated HTML language. After reading into a few chapters of the book, it’s clear to see that the content has been divided somewhat into two of the main improvements that HTML5 provides, the first being the newly incorporated structure and tags available with HTML5, and the second being the introduction of the ‘<canvas>’, and the animation and gaming capability that it allows to be incorporated into a webpage.</p> <p>For a front-end developer like myself, the structural section of the book was exceptionally easy to follow, especially as it seems that a lot of the problems with XHTML have been addressed and resolved within HTML5. For example, 95% of websites have a consistent header throughout their site, which usually contain several headers such as a main header, a sub header etc. Rather than the usual <div id=”header”> that is placed at the top of the page, HTML5 has introduced the <header> tag, which can sit inside of the <hgroup> tag, holding several <header>’s. This is also the same for the new <footer> tag, as well as <section> and <article>, which can become extremely helpful on a website that holds a blog. This section of the book was enjoyable to see, as I was able to see first hand the how the new approach to web design and development was being incorporated into the code and structures of new websites.</p> <p>The second section of the book, which introduced the ‘<canvas>’ and the animation ability of HTML5 proved far more difficult to grasp and understand. As a web developer with only a small amount of experience with Flash, my animation knowledge mainly lies with JQuery functions such as ‘animate();’ and ‘fade();’ etc. This meant that I needed to take a step back and really learn the basics of what Hawkes was trying to get across to his readers. After learning how to draw shapes and import images onto the canvas, I was able to see that the canvas was using JavaScript to drive it’s animation. Luckily, I was working in close contact with a Flash developer at the time, who has extensive experience with ActionScript, which meant I was able to see how easily the transition from a Flash developer to a HTML5 animation developer can be. Together we were assigned a task to create a HTML5 animation that would provide the introduction animation for a iPad application for a large automative company. Therefore, with my newly gained knowledge of HTML5 structure and tags, and with my fellow employee’s newly adapted HTML5 animation knowledge, we were able to create an animation that would work cross platform, including websites, mobiles, and within the iPad application that it was originally planned for.</p> <p>I am now confident that I can fully develop a website in HTML5, accommodating for new browsers and taking full advantages of the newly incorporated structures and tags, while using the most of sister technologies such as CSS3, and of course, JQuery. At the same time, using fallbacks and several tricks means that older browsers are not forgotten about, which can happen easily when excited about new technologies and the opportunities and features they bring. To see how others are making the most of HTML5 right now, head over to ‘<a onclick="return !window.open(this.href);" href="http://html5-showcase.com/">HTML5 Showcase</a>‘ to see live sites that have been developed using HTML5.</p> </article> <article> <h1>Cross-Browser Testing Made Easy</h1> <p>Chris Anstey — Thu, 17 Mar 2011 11:16:16 +0000</p> <p>An important portion of the work I do, which comes naturally to anyone working within the web industry is cross-browser testing. Without boring you too much into why it is needed, let’s just simply put it that not all browsers ‘read’ websites in the same way, which means that one aspect of a page may look differently in one browser to another. <span id="more-357"></span>This practice of ensuring that a website looks the same, or relatively similar across the browsers that the user is accessing your website from is called ‘cross-browser testing’, which usually involved altering little bits of design and code to ensure that all users are able to use the website. Up until recently, my outlook on this type of testing was to ensure that a page looks <em>exactly </em>the same in all browsers, which sometimes meant the sacrificing of certain features and innovative design aspects which could not be rendered within older browsers. This was my outlook until I started reading ‘<a href="2011/01/hardboiled-web-design/">Hardboiled Web Design</a>‘ by Andy Clarke, who emphasises on designing and developing from the bottom up, rather than the other way round. This ensures that you are able to use the latest web technologies (eg. HTML5, CSS3 etc) for users with the latest browsers, while still ensuring that users with older browsers (eg. IE6) are receiving the same/similar user experience (i.e. they can still use the website, it’s not ‘broken’). Looking back, the amount of time I have spent making sure that earlier versions of Internet Explorer still showed the website in exactly the same way is pretty ridiculous, after all, no-one looks in the latest version of Google Chrome and then looks in IE6 to ensure they look exactly the same, it’s just about ensuring IE6 users for example are receiving the same user experience and can view/use your website.</p> <p>Anyway, complaining about IE6 is for another day, I am going to talk about the different tools and apps that I have used to help me along my way with cross-browser testing, in an attempt to make it less of a headache task that can leave you pulling out your hair for hours. There are two main categories of applications that I have found which can be used for this testing, ‘screenshot’ type websites that allow you to visualise your website in several different browsers, and virtual machines, which enable you to run Windows, Mac or Linux, allowing for the installation of all different browsers that you can actually use and view your website in.</p> <h4 class="padding-top">Website Applications</h4> <p></p> <p>In the latest version of the <a href="http://www.adobe.com/uk/products/creativesuite/" onclick="return !window.open(this.href);">Adobe Creative Suite</a> package, a new feature was introduced called ‘Browser Lab’, boasting the ability to preview the page you have been developing in all different versions of browsers, allowing you to iron out any cross-browser issues during the development stage of a website. Later, this tool was incorporated into a website application, making a mockery of older similar tools such as <a href="http://browsershots.org" onclick="return !window.open(this.href);">Browser Shots</a>. Now <a href="https://browserlab.adobe.com/" onclick="return !window.open(this.href);">Browser Lab</a> enables you to simply enter your desired website address (which needs to be a live site, and not local), and click through the desired browsers to assess if there are any issues:</p> <p></p> <p>Once you have selected the browsers, or the pre-saved browser tests that you have created, you enter the live URL of your website and Browser Lab generates the view of the website within the different browsers you have specified. With a nice clean interface, it is easy to use and gives you easy access to view all the previews using a simple drop-down list under the website URL you have entered:</p> <p></p> <p>I have found Browser Lab extremely helpful since I started using it last year, as it gives you a quick preview of what your website will look like in the browsers you have specified, and allows you to assess any issues and make the relevant changes. However, leading on from this, this is where I see the only main problem with this type of tool, it only provides a screenshot, and does not allow you to actually use the website itself within the preview section. Therefore, you are unable to change any code within Browser Lab, and unless you have encountered a similar issue before which you know a fix for, you’ll find yourself looking through the code making guesses and changes for what could be causes problems, which can be <em>very </em>time consuming and frustrating.</p> <h4 class="padding-top">Stand-Alone Applications</h4> <p></p> <p>After using Browser Lab for quite a long period of time, I installed a virtual machine tool called ‘<a href="http://www.parallels.com" onclick="return !window.open(this.href);">Parallels</a>‘, which provides a lot more functionality than your usual virtual machine application such as <a href="http://www.virtualbox.org" onclick="return !window.open(this.href);">Virtual Box</a>. Virtual machines enable you to run multiple operating systems on the same computer at the same time, meaning that you can be using Windows XP while on a Mac or Linux computer for example. Using this type of application for cross-browser testing means that you can actually go within the operating system that you wish to test within, install all the relevant browsers you want to test your website and then assess any issues that may be present on your website across these browsers. For example, if you have a problem with the style of your footer section in Firefox on Windows, and you are using a Mac, you can quickly fire up your virtual machine, open up Firefox (which is the Windows version as you are within the virtual machine), and then use tools such as <a href="http://getfirebug.com" onclick="return !window.open(this.href);">Firebug</a> to assess why the problem is occurring, then make the necessary change(s) to resolve the problem. Below is a screenshot of testing within Google Chrome on Windows, while using a Mac:</p> <p></p> <p>As you can see, the virtual machine gives you the full functionality of the Windows operating system while you are within Mac OS, making it much simpler to cross-browser test and iron out issues across all platforms and browsers. However, that’s not where I end, Parallels has some amazing features to make it much simpler to run your virtual machine(s). Firstly, unlike similar applications, you do not have to ‘click out’ of your virtual machines, this means that while you are in your virtual machine having to press ‘CMD/CTRL + Enter’ for example to leave the virtual machine and roam your cursor within the main operating system your computer is running. Instead, Parallels enables the smooth transition between the two (or more) operating machines you are running, which does not sound like much, but becomes an absolute life saver when you are going back and forth between the operating systems, testing, changing code, testing, changing code etc.</p> <p>Parallels also offers features such as ‘Crystal’ mode, which means that instead of running your virtual machine in the tradition stand-alone window, you can run Windows (or other) applications in conjunction with your main operating system application. For example, below is Google Chrome on Windows running side-by-side with Google Chrome on a Mac:</p> <p></p> <p>Amazed yet? It doesn’t stop there, Parallels even puts a folder within your Dock for Windows (or other) applications to quick launch them, while also placing running applications on the virtual machine within your dock, next to the applications running within the main operating system (in this case, a Mac):</p> <p></p> <h4 class="padding-top">Conclusion</h4> <p>Cross-browser testing is always going to be, and always has been a right pain. Not one single developer can openly admit they enjoy it, but every one of them knows how important it is as a part of the development process, ensuring users from all different platforms using all different browsers are able to view and use your website. However, these are the type of tools that make it much more bearable, with the inclusion of add-ons for both Firefox and Chrome, as well as Internet Explorer capability for tools such as <a href="http://getfirebug.com/firebuglite" onclick="return !window.open(this.href);">Firebug</a>. I personally find tools such as Browser Lab very helpful for that quick preview of your website, especially as it is very quick to load in comparison to firing up your virtual machine. However, if you have established a problem, tools such as Parallels are priceless for the features they can offer, as well as enabling you to not just view your website in the specified browsers, but actually experience how it would look for the users who use that specific browser. After all, all the talk of cross-browser security and standardisation that you hear of with HTML5 and CSS3 etc sounds great, but until there is the smallest percent of users still using these old browsers, we still need to make sure they can use our websites. Until then, just keep on checking the <a href="http://ie6countdown.com" onclick="return !window.open(this.href);">IE6 Countdown</a>.</p> </article> <article> <h1>Hardboiled Web Design</h1> <p>Chris Anstey — Tue, 18 Jan 2011 14:10:17 +0000</p> <p>Over the last few months, I feel i’ve probably learnt more about emerging web technologies than during the whole three years of my university course. This is not purely down to added pressure with deadlines before and after Christmas, trying to provide the best solutions for clients in the short time available, but also as I have been reading up on certain technologies. <span id="more-245"></span>These sources have not only been a great source of information, but have emphasised on making use of the technologies now, rather than waiting until they are fully compatible with all browsers.</p> <p></p> <p>Over the festive period, I have been reading the book ‘<a onclick="return !window.open(this.href);" href="http://www.amazon.co.uk/Hardboiled-Web-Design-Andy-Clarke/dp/1907828001">Hardboiled Web Design</a>‘, by Andy Clarke. Although I have not finished reading the book, I have learnt a great deal already, not only about the different technologies, but the web development process as a whole, which has given me a different approach to the way I work from day to day. Clarke talks about the ‘hardboiled’ process, mainly stop attempting to completely please everyone and everything, and just focus on ensuring all users have the same experience. He also talks about designing and developing from the top-down, rather than the other way round, which I have been doing since I started designing and developing websites. For those not technical folk, this means that I have previously been spending hours, days and even weeks ensuring that a website looks exactly the same in all browsers, included outdated browsers such as Internet Explorer 6 (yes, a lot of people still use this, even though it was initially released in 1999, it is the equivalent of a large proportion of the gaming community still using Nintendo 64′s). Clarke emphasises on flipping this process around, designing for the best browsers first, ensuring they have the best experience of the website, and attempting to match this experience as best as possible in older browsers. Previously, I would have used JavaScript fixes, or even worse drop of a fully functioning JQuery feature as it did not work in older browsers, but now this has all changed.</p> <p>The book has given me a wake up call, after all, who opens up Internet Explorer 6, and then opens up Internet Explorer 8 to see if the website looks exactly the same? No one, that’s who. So why not just make sure the users who are using the older browsers have a similar experience, and provide them with a working version of the website. By all means, do not provide a broken version of the site, but why not just provide a quick working alternative to a JQuery menu that works perfectly in newer versions of different browsers, after all, people using Internet Explorer 6 are the type of people who aren’t going to be too interested in beautiful looking websites, if they were, they would have upgraded a long time ago, surely? Yes, you’re right, just make sure they are receiving the same or a similar user experience, and don’t call me Shirley.</p> <p>Let me show you an example of how i’ve applied this approach. For the latest project I have been involved with at <a onclick="return !window.open(this.href);" href="http://www.fpcreative.com">FP Creative</a>, creating a website for ‘Pure Print’, a print company based in the south-east of England, which is fully customisable through <a onclick="return !window.open(this.href);" href="http://www.drupal.org">Drupal</a>, I have used a few alternatives of features for earlier versions of browsers. After agreeing on the design that would use a smooth JQuery navigation that triggers sub-navigations when clicked, I found that there were severe problems in earlier versions of Internet Explorer, especially IE6 (of course). So instead of sitting down for hours of end writing CSS overwrites through the present ‘ie6.css’ file, I decided to provide a quick alternative menu for these earlier browsers, instead of wasting time trying to make the menu look pixel perfect in every single browser. Below is how the menu looks in Internet 6 compared to Firefox OSX:</p> <p></p> <p>The main problem with the navigation did not really lie with the functionality (i.e the JQuery code), although there were a few issues with the ‘active’ link disappearing when the user clicks on another link, but with the transparency that is present on the ‘diagonal’ side of the menu. Therefore, instead of making a fix for the problem in IE6, or even worse, reducing the performance of the menu in the newer browsers because it didn’t work properly in IE6, I simply used ‘blockier’ version of the menu. This way, the user will be able to use the menu in exactly the same way as if they were using a newer browser, users using these newer browsers will be able to see the menu in a nicer way, and I have not spent days on end trying to make the menu look the same, time which could be spent on more important things such as ensuring the client can customised all aspects of their website through <a onclick="return !window.open(this.href);" href="http://www.drupal.org">Drupal</a>.</p> <p>The book also highlights a major factor in the usage of emerging web technologies, which is that a lot of developers refuse to use these technologies until they are ‘fully’ released, in other words, compatible within all browsers. In Clarke’s words, "good luck with that", as by the time they are compatible in all browsers (and that’s if they ever will be), there will no doubt be newer technologies on the horizon to use. Leading on from the designing and developing for the newer browsers first, why not make use of new HTML5 and CSS3 features, which almost rewards users who are using these browsers by showing them content in the best suitable way. Again, this does not mean that users who are using older browsers are being neglected by being presented with broken websites that they cannot use, but it means they are shown a simplified version of a website, which is still usable and giving them a similar user experience.</p> <p>For the login panel of the ‘Pure Print’ website, I used my first CSS3 property on a live website, which is the ‘box-shadow’ property. This new property enables text, images or a content area to be provided with a drop shadow, in which you are able to define the size, the colour and the blur of the shadow, along with how far vertically and horizontally the shadow displays from the property it is shadowing. The good thing about most CSS3 properties is that if the browser (eg. Internet Explorer 7) does not support or is compatible with the property, it will safely ignore it, so in non-technical terms, if you put a ‘box-shadow’ property on a website, it will show on Google Chrome, but not in Internet Explorer 8. Below is the login panel that I mentioned:</p> <p></p> <p>As you can see, the shadow does not appear on Internet Explorer 8, as it is not compatible with this browser, however the user can still use the form with no problems, in order to login and add content to the website. As both HTML5 and CSS3 are still in development, and are yet to be compatible with all browsers, a useful tool to see which properties are compatible with different browsers is <a href="http://caniuse.com" onclick="return !window.open(this.href);">caniuse.com</a>, which outlines what is compatible, and what is not in each browser.</p> <p>I am only just over half way through the book and you can see I have picked up some great tips on the ‘hardboiled’ approach to web development, and I feel I am working more productively than ever, yet still ensuring that all users are able to perfectly use the websites that I am designing and developing. I am currently on the web fonts section of the book, where Clarke talks about the approach to using embeddable fonts for websites using tools such as <a href="http://typekit.com/" onclick="return !window.open(this.href);">TypeKit</a>, while provided safe fallbacks for earlier browsers to ensure that websites are still readable in older browsers, and ground-breaking in newer browsers. I’m sure these new techniques and tips with follow me through into my career, not just in the long-term but for upcoming projects.</p> </article> <article> <h1>Drupal vs WordPress</h1> <p>Chris Anstey — Sun, 19 Dec 2010 11:14:38 +0000</p> <p>I can now successfully say that i’ve had a good amount of experience with both <a onclick="return !window.open(this.href);" href="http://www.drupal.org">Drupal</a> and <a onclick="return !window.open(this.href);" href="http://www.wordpress.org">WordPress</a>, but there is a lot of talk out there comparing which of the two is the best, so i’m going to jump on the bandwagon and give it a go myself. <span id="more-262"></span></p> <p></p> <p>Since my placement year at <a onclick="return !window.open(this.href);" href="http://www.redwiredesign.com">Redwire Design</a>, I have gained a good amount of experience with the using of content management systems, using the in-house built system <a onclick="return !window.open(this.href);" href="http://www.codewire2.com">Codewire</a> to enable clients to add, edit and maintain the website that had been created for them. However, it was not until I was urged by a university module leader to create a portfolio (or ‘blortfolio’ – blog & portfolio) to show employers my skills, history and work that I had completed when applying for jobs. For this task I began to use WordPress, which I had a small amount of prior knowledge when using a WordPress hosted blog for a university <a onclick="return !window.open(this.href);" href="http://ansteychris.wordpress.com">iPhone project</a>, however I decided to download WordPress and host it within my own web space. This enabled me to theme, edit and fully customised my WordPress site into what I wanted, rather than being restricted to the themes and features which are available on WordPress hosted blogs. This portfolio has evolved into what you are visiting today, a place for me to store my latest projects, as well enabling people to see my past projects, work experience and education qualifications.</p> <p>When I began work at <a onclick="return !window.open(this.href);" href="http://www.fpcreative.com">FP Creative</a>, I was asked to take some time to read up about Drupal, watching several <a onclick="return !window.open(this.href);" href="http://www.lullabot.com">Lullabot</a> videos and tutorials that the company had invested in. At first, I didn’t fully see why WordPress couldn’t be used, especially as Drupal looked over complicated and very complex at first glance (well, it still does, but I understand it more), however as more demanding projects were taken on board, it was evident that Drupal was better suited for these types of jobs. After completing a website for ‘Anthony Davidson’, I quickly saw that the rigidity of WordPress would not be able to keep up with the features and functionality that the website needed, where as Drupal had more than enough to handle what was needed.</p> <p>I now see Drupal and WordPress as two completely different systems, which differ greatly, especially in how flexible they are. WordPress is quite strict on how a website can be laid out, emphasising on using a header, a sidebar and a main content. With this in mind, it is almost productive to take a similar theme that you are aiming for and tweak it to what you want. A perfect example of the standard WordPress website is <a onclick="return !window.open(this.href);" href="http://www.djmarkknight.com">Mark Knight</a>, a Ministry of Sound DJ who I designed and developed a website for along with a <a onclick="return !window.open(this.href);" href="http://www.tomhoad.com">friend</a>. As you can see, the whole website uses the standard header, sidebar and main content sections, in which the content differs across the site, but the structure remains throughout. In Drupal, the development process is very different (and subsequently a lot longer), as it is best to hand code your website first statically, and then put it into Drupal using the standard PHP includes to enable different sections of the website to be customisable through the backend.</p> <p>Both systems have similarities, such as both using template PHP files, plug-ins (called ‘modules’ in Drupal) and enabling the end-user to edit content with little or no prior knowledge of coding. However, I personally feel this is pretty much all that is similar, especially because of the differences in flexibility in both systems. This is not to say that WordPress is too rigid, or that Drupal is too flexible, but that I feel they are both built for completely different purposes. I see WordPress as more of a blogging system, which is perfect for websites such as this portfolio, however I see Drupal as a content management system, as you are not held down to a blog and related pages, but instead you are able to enable any content to be maintained. Drupal reminds me of Codewire, the content management system I used on placement at Redwire Design, as I used to statically code a website, then put it into the CMS to enable the end-user add and edit content.</p> <p>So that’s my conclusion, I hate sitting on the fence but I personally feel that you can’t compare these systems, as I feel they aren’t built for the same things. It’s like comparing a Playstation 3 with a PSP in the gaming world, although they are similar, they are built for different purposes, which they both do a great job at. So as for me using both of the systems, I will use WordPress for clients who basically want a blog, or a website where they just need a news page and a few pages on the side, then Drupal for clients who want a fully customisable website that is not held down to certain structures, layouts or a generic backend system, all of which are present in WordPress.</p> </article> </main></body></html>