Digital Deceptions WordCamp Toronto 2009


Published on

How Digital Deceptions transitioned from a Flash based website to a WordPress Content Management System and all the benefits and doors it has opened for me over the last year.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Digital Deceptions WordCamp Toronto 2009

  1. 1. Hello everyone how are you doing? My name is Duncan and I’m a freelance graphic and web designer. I would first like to start off by stressing the fact that I am not a technical guy at all, I’m neither a developer nor a programmer and you will often hear me say that throughout my presentation today.
  2. 2. When it comes to those disciplines I only know the basics and by playing around with the code and following standards I have learnt to go a little bit beyond that. Today I would like to talk to you about my website Digital Deceptions and how a graphics guy like me has made the transition from building plain old basic HTML and CSS sites to heavily animated Flash pages.
  3. 3. I will then tell you how I got into WordPress and all the benefits and doors it has opened for me over the last year. So before I get into all the WordPress stuff I think it is important to tell you a little bit about my background so you know where I am coming from and how I have gotten up to this point standing here in front of you.
  4. 4. For as long as I can remember I have always been quite creative, I could draw and paint but I was always more concerned with how things should look rather than how they worked. I could copy almost anything I wanted just by looking at it, and if I had an image in my head I was able to get it out on paper.
  5. 5. But I was the type of guy who would start a drawing on a page and soon run out of space. Yes I had talent but I lacked ambition, goals and training. Unfortunately I never took advantage of my talent and never really utilized or developed my skill when I should of in high school.
  6. 6. I must admit that it was a mistake and for a long time after I graduated I felt that I had missed out on a great opportunity. A couple of years after high school in 1995 when the internet came along my family got out first modern computer and soon after that we were online.
  7. 7. When I first started surfing the web it was so new and trendy and I would constantly hear about all the money people were making from it. It was like the Wild West and that aspect of it really appealed to me and right away I wanted to become a part of it somehow.
  8. 8. Although I didn’t know anything about computers at the time they fascinated me and the internet even more so. What amazed me the most was how intricate some of the web sites could get, it was like art and technology collided.
  9. 9. Without even knowing the first step in creating a page the seed had been planted and I knew I wanted to make web sites for a living. Believe it or not the first computer program I ever used was MS Paint which I thought had a lot of potential but just didn’t quite have the functionality I wanted.
  10. 10. I eventually grew out of Paint when a friend of mine later introduced me to Adobe Photoshop 4. I was instantly hooked. I knew right away that Photoshop was a very powerful tool but I didn’t realize at the time that is was also going to be a gateway to a long and interesting journey.
  11. 11. I actual learnt how to use the internet by looking for Photoshop tutorials and as I was surfing the web I was noticing that just like today some websites were much better than others. Even though some sites look really good they just don’t have much to offer either because the content is sparse, it’s not very well planned or laid out.
  12. 12. It seemed to me that the better sites I would find were not much to look at but the information they provided was excellent. So quite early on I realized that web users come for the content and even though I was a bit of a dumb ass I knew that I needed to develop my writing abilities if I was going to pursue this as a career.
  13. 13. So before I even knew the first steps to building a website I started teaching myself how to write properly by studying magazines. Specifically the “ Computer Arts ” magazine, I thought I might as well kill two birds with one stone and learn all about design as well.
  14. 14. I would first flip through the pages studying the graphics, colours and layout and then I would read them from cover to cover. I was finding inspiration, learning the latest trends and tutorials but most importantly I was learning about the industry. I soon began to craft the content for mine own website which little did I know wouldn’t exist for another couple of years.
  15. 15. Because of all the tutorials I was learning online and from magazines my Photoshop skills were getting much better. I managed to get myself a Geocities site and I was able to do all the basic stuff like inserting images, making links and adding content.
  16. 16. I found that adding content was going to be a huge hurdle and a reoccurring issue that I was going to have to face if I was going to be a web designer. You see I was thinking to the future and wondering if I had 40 clients, how was I going to manage to handle all those content updates? What was I going to do? Nothing.
  17. 17. I wasn’t going anywhere quick teaching myself how to be a designer and then one Sunday afternoon I happened to catch a TV commercial advertising a Graphic Design program in Toronto. It mentioned Photoshop and web design and a bunch of other stuff but all I heard was Photoshop and web design.
  18. 18. I had never thought about going to college before, yes I was a bit of a knucklehead but this could be my big break and I had to give it a shot. I enrolled in the course which started in late summer and I was under the impression that I would be taught everything I would need to become a web designer. but little did I know the computer graphics program that I had signed up to was just computer graphics.
  19. 19. Isn’t that funny? I was going to be taught how to make computer graphics for print design not how to program websites. The part that I had heard on the commercial was just them explaining about the little intro to web design and multimedia section that the course contained. I was so excited I just assumed it was a web program, see how much of a knucklehead I was?
  20. 20. The web design portion of the course was only one week long and we were just taught how to build an HTML site using tables and frames, not even a mention of CSS. Towards the end of the program we also did an intro unit on Multimedia which was a month long, this is where I learnt about animations, video and CD ROM design.
  21. 21. Although I may be an accidental graphic designer, taking that program taught me everything you could possibly imagine about graphics, Photoshop and Illustrator which are by far my strongest attributes as a designer today. The course also gave me a huge edge over my new classmates when I decided to continue my education by signing on to do another course, multimedia and web design.
  22. 22. But I kind of made the same mistake again. The new course covered animation, Flash, Director, HTML, a bit of Java and CSS. But just like the program before I believed that I was going to be taught how to program a website. All I wanted to do was easily update and change content, and maybe have a shopping cart.
  23. 23. I just wanted to get away from the plain old boring static sites that I could already do and make something that somebody wanted to use. Don’t get me wrong the course did teach me a lot and was very intense at times but it wasn’t what I thought it was going to be.
  24. 24. When it came to programming much like the first course this web design and multimedia program had an introductory class where we were only taught the basics. The first day of the class we talked about the difference between a web designer and a web developer. I never knew the difference before then but I finally got it.
  25. 25. If I was going to become a programmer I was going to have to take yet a third course, web development which I never did thank goodness. Because after the intro unit I had realized from the little bit of programming we covered that I really didn’t like programming after all. I knew enough Flash and HTML to get by so it kind of worked out in the end.
  26. 26. If I sound like I am dogging school a bit I’m really not, although you don’t need to go to college to become a designer I highly recommend it. Nothing beats somebody showing you how to use software as appose to reading about it in a book or online. And you also get the teachers experience.
  27. 27. So as school wrapped up I was kind of forced into working for myself because by that time the bubble burst and the age of the dotcom boom was over, I felt I missed an opportunity yet again. Design studio work was nonexistent and all the much more talented and experience designers were cleaning up all the freelance jobs. It was quite depressing.
  28. 28. In 2002 I took the leap and registered my company Digital Deceptions and struggled for about two years or so. I had to work fulltime and par time jobs in between to make ends meet until finally I started to get a little client base going. I was mostly providing graphic design services such as logos and flyers but then websites started being what clients were looking for most.
  29. 29. The websites I was building were mostly made using HTML but as I was starting to create larger sites I was running into that old issue with the updates and changes again. The problem being was each page in the site contained all the page elements, the header, footer and sidebar.
  30. 30. So for instance if I had a 40 page site and the client wanted to change the “ Contact ” button to “ Contact Us ” in the navigation bar I would have to make that change on every single page. The navigation code was literally in each page, so that would be 40 changes which is very inefficient.
  31. 31. So to avoid the problem I decided that I was only going to concentrate on making Flash sites. They were all the rage at the time. I was able to better utilize my graphics skills. Flash sites looked the same no matter what browser you used.
  32. 32. And updates were much easier because all the page elements were separate files that were all called to from the main Flash movie. That means if I needed to change something in the nav bar all I had to do was simply change that one file.
  33. 33. Everything was going well but over the years I was noticing clients were starting to want more functionality, mainly wanting to make little updates and changes themselves. So what I did was create a news scroller that would display content from an external text file. It wasn’t really secure and it wasn’t pretty either but it was a solution and a new selling point for me that worked at the time.
  34. 34. This enabled clients to do simple updates themselves or I could easily do them much quicker than before. Eventually I went on to create an XML news scroller which could be styled with css and was even easier to update, it was much better but was still far from perfect.
  35. 35. As time went on clients were asking for even more functionality it was getting to the point that I was going to no longer able to provide them with more advanced solutions, I had taken my skills just about as far as I could. Around that same time I had found PHP, as I was experimenting with that I realized that it was the perfect solution to my HTML changes and update dilemma.
  36. 36. PHP allowed me to split up the individual pieces of the HTML templates I created and assembled them for me. It was the same concept I had been using with my Flash sites so I had a good understanding of how the concept worked.
  37. 37. So now all my sites have one nav bar and with a tiny line of code every page calls to that file to be displayed. <?php include (&quot;navBar.php&quot;); ?> So if the client turned round and said can you change the “ Contact ” button to “ Contact Us ” it was very simple, after years this problem was finally solved.
  38. 38. As I was exploring further with PHP I kept running into MySql databases. I found them very complex and all the programming really put me off. I also didn’t like that I couldn’t work on my computer because I didn’t have a local server.
  39. 39. From MySql I found CMS, Content Management Systems. Over the years I have had to decline a lot of work because I just couldn’t build what the client wanted and a CMS would have been the perfect answer. I now knew that a CMS was the answer to all my problems but I didn’t know if I would be able to learn how to use one or how long it would even take.
  40. 40. I started playing around with DotNetNuke, Drupal, MoveableType, TYPO3, Joomla and Expression Engine to name a few and to be honest with you they were way too much for me to handle. I wasn’t going to need most of their features and a couple of them were just too complex and confusing for me to even get up and running.
  41. 41. Like I said I’m a graphics guy not a developer, all those programs were well beyond my scope of knowledge. I knew from my experience in the web design and multimedia course I had taken that I didn’t really want to get into all that programming to begin with.
  42. 42. Maybe this was as far as I was going to go with web design and I would just be better off concentrating on what I know and focus only on my brand of website. Static. So for the first time I was giving up, Content Management Systems and MySql had beaten me and instead of learning new tricks I decided I was just going to make my websites even better.
  43. 43. So as I always do for inspiration, I check out web gallery sites and study what all of the big boys do. I look at all their source code and try to get an idea of how they do the things they do. I was noticing more times than not that decent sized and highly respect design studios were using WordPress.
  44. 44. But isn’t WordPress just a free blogging program I thought to myself? You can’t possibly use WordPress as a CMS can you? For months I was seeing such an abundance of great websites using WordPress that weren’t even blogging so I had to investigate.
  45. 45. So I downloaded WordPress to give it a try and was amazed at how quickly I got it up and running. I was able to make pages and posts no problem but I didn’t know or understand how to use anything else and knew it was going to take some time to learn. Once I saw the WordPress back end I was impressed with how clean and tidy it looked compared to some of the other CMS’s I had tried.
  46. 46. But the big question was how hard is it to customize or even design a theme for? I started playing around with the default theme for awhile by ripping it apart. I quickly realized it was just an HTML template chopped up into pieces with some PHP code. I had actually already been doing this with my websites for some time and it felt quite comfortable to me.
  47. 47. Around this time last year I received an email from Flash In TO, if you don’t know it is a Flash user group in Toronto I have been a following for quite some time. In the email they had an ad for the Rich Media institute. The RMI offers state of the art courses for digital media professionals and they just so happened to have a course coming up for WordPress.
  48. 48. This was exactly what I needed, a little push in the right direction, so for the first time in my life I carefully read all the details the class offered and then I signed up. This is where I met Brendan, the man behind Backspace Studios and who also happens to be hosting WordCamp Toronto 09.
  49. 49. He was teaching the course and I have to say that it was by far one of the best decisions I have made in a long time. He showed how simple it was to set up a WordPress site, went through all the features and how they all worked, talked about plugins, template files, pretty much the whole thing.
  50. 50. <ul><li>It was like the course was specifically designed for me. Not only did I learn a lot, all my questions were answered. </li></ul><ul><li>He also gave us some real world examples of how and why do certain things such as: </li></ul><ul><li>Always backup your database. </li></ul><ul><li>Don’t give clients full admin roles. </li></ul>
  51. 51. He also spoke about search Engine optimization and the “All in one SEO Pack” plugin which I will briefly talk about later. That was July 19 th of last year, 294 days ago and it was only an 8 hr class. I was now ready to tackle my first real WordPress site.
  52. 52. The Flash site I had at the time had served me well but I had outgrown it in many ways and had seen the light. Although I had updating my portfolio down to a science it was still taking 20 to 30 min to do so because of the animations.
  53. 53. Nobody could find me online unless they typed Digital Deceptions into a search engine. For years I was constantly advertising my site every which way I could and it was like I was working for it instead of it working for me. By the time I got home from the class I knew what WordPress was capable of and I had a good idea of what I wanted my new WordPress site to do.
  54. 54. I researched, found and tested all the plugins I was going to use and I was ready to start designing. In less than six weeks I had my new site up and running and officially launched it on September 1 st .
  55. 55. After a couple of weeks had gone by I had learnt so much more from my new site that I really wanted to add new functionality. It was just so simple to do. But I decided it would be best for me to experiment with what I have got now for six months so I could accurately measure my goals.
  56. 56. Besides having a website that can be easily updated I wanted to rank high in search engines so right away I was into new territory. I installed the “All in one SEO pack” and started reading about Search Engine Optimization for the first time, something I had never gotten into before because I built mostly Flash sites.
  57. 57. I researched my local competition where I live in the Durham Region, tracked all their keywords to see where everyone was at in the searches. And decided that I wanted to at least be in the top ten when somebody searched for “ Durham Region ” and any of the services that I offer, that was my big goal.
  58. 58. In the first few weeks I was ranking in the 50’s and 60’s which was literally thousands of times better than when I had a Flash site. Soon after that I learned how to properly write my posts in conjunction with my own keywords using the “All in one SEO pack” plugin. That is when I really started to notice a change in traffic and search rank. Coincidence? I think not.
  59. 59. I was getting higher and higher rankings every week and at one point earlier on this year I was number one when you looked up any of my services in the Durham Region. At the moment I’m now ranked in the top 3 to 6 for most but I’m still number one with “ Design Durham Region ” and “ Graphics Durham Region ”.
  60. 60. I also went from a Google ranking of 2 to 4 in six months. This alone has been a huge boost to my business, local people who are looking for services I offer are finding me before they find most of my competitors.
  61. 61. Everybody knows that WordPress is much more search engine friendly than Flash but have you ever seen any proof? Well I just so happen to have some proof. I have pulled some of my web statistics to give you all an idea of the difference between my Flash and WordPress site.
  62. 64. I know my numbers may not be that impressive to some but I easily met and exceeded all my goals and expectations. Just to give you an idea of how much more traffic I was getting I averaged it out that my Flash site was getting me 1915 unique visitors a year.
  63. 65. On January 15 th of 09 I had 1081 visitors to Digital Deceptions in one day. That is half the traffic I use to get in one year on my Flash site. I have been getting more traffic every month than what I use to get in a year. WordPress easily lets you provide content to those who are searching for that subject matter and search engines just love it. Because of all the traffic I get now I’m being contacted all the time for quotes.
  64. 66. Although you don’t get all the jobs when a potential client contacts you there has been a steady stream of work ever since I launched my new site. Over the years to get work online I would scour job boards such as Craig’s List but having a Flash site made this time consuming and tedious. .
  65. 67. I would have a template email so if somebody was looking for say a logo I could send them a message with some links to logo work I have done. I would have to keep a separate little site and manually ad my recent updated work to show potential clients what I have done.
  66. 68. Using job boards with the WordPress site I no longer have to do this. Because of all the troubles I have run into over the years with making updates and changes to web pages I know the importance of structuring content. WordPress is pretty much set up to do this standard right out of the box.
  67. 69. So every time I make a post I use tags, not everybody uses them but they have become another great tool in my arsenal. By utilizing tags allows me to get potential clients to the specific work I have done quickly. When you offer services like I do time is money and the less time I spend getting potential clients to my portfolio the more time I can work.
  68. 70. So if somebody on Craig’s List was looking for a logo all I do is type “logo” into the search box on my site. The database pulls up all the posts I tagged with “logo” and creates the pages on the fly. I then simply use my email template and provide the link to the potential client so they can see the work I have done.
  69. 71. I do the same thing for all the different services I provide and if you haven’t experimented with tags yet I suggest you do so, they also help with Search Engine Optimization. WordPress is very forgiving making it very easy to ad tags at anytime. It is simply just a matter of typing the tag into the box under your post and then clicking on add, that’s it.
  70. 73. If you happen to use the “ All in One SEO” plugin make sure that you don’t use the same tags that are in your keywords, as I have found that certain search engine count it as a strike against you.
  71. 74. As you can probably tell by now I have also become a huge fan of web statistics. I have used Google Analytics over the years, it is very accurate and best of all it is free. You just simply sign up for an account, copy about a paragraph worth of code and paste it just above the closing body tag of your theme’s footer file and it is pretty much ready to go.
  72. 75. So when I have sent an email off to a potential client containing a link to some of my work I like to check up on them. it is very easy for me to use Analytics to see if they took a look at the link, and how long they looked for. Because you know exactly which page the potential client will be looking at gives you a huge advantage.
  73. 77. The longer they stay on your site usually means the more interested they are in your work which in turn gives you more confidence and leverage if it comes down to negotiating a price or a contract. I also use Analytics to provide details for existing clients. It is a service I offer as many of my clients like to know about their web users.
  74. 78. Statistics also allow you to spot trends and it is a great way to see what works and what doesn’t. Believe it or not web stats have also alerted me to missed opportunities, a big surge in direct traffic to a client’s site usually means they have done some sort of print advertising. That is a service I offer, have they found somebody else or do they not know that I offer that service?
  75. 79. Anyways as much as I would like to show you all the ins and out of Analytics, this is WordCamp not GoogleCamp so on with it. So last summer as I was learning how to use WordPress the economy was really starting to go south and quite truthfully it was starting to hurt.
  76. 80. I had lost a few of my bigger clients because the first thing that most companies do during a downturn is to cut costs. Before people start to lose their jobs advertising is usually one of the first things to go and that is how I make my living.
  77. 81. So as I was building my new site and experimenting with all the things I could now do with WordPress. I started thinking about all the new services I can now provide, a whole new market had just opened up for me. I can now very easily make updates to client’s websites but even better they can now do their own or even create new pages when they needed.
  78. 82. Also because of WordPress I can now get clients a better page ranking than before by providing Search Engine Optimization which I had to learn. All I do is research their competition, choose the right keywords and use a plugin. The more traffic, the more sales you will get it’s just the law of numbers .
  79. 83. During those weeks I was doing more and more advanced tutorials and testing the waters and I realized why WordPress was such a great platform, it was the community behind it. The Codex on the website is so well documented that whenever I had a problem or wanted to understand something better I was usually able to find the answer.
  80. 84. I have found that WordPressers are very passionate and you would be very surprised at the extent they go to help or point you in the right direction. If you show a little passion and are willing to learn they respect you for that. And in most cases I found it’s just a matter of telling them what you want to do and actually try to do it.
  81. 85. Me of all people, who couldn’t write code if my life depended was starting to understand and actually enjoying it. They say that knowledge is a dangerous thing but in my case the little bit of knowledge I was learning was allowing me to ask better detailed questions in the forums.
  82. 86. On top of that I have met so many great people all over the world who just love to help. Another thing that absolutely blows me away about WordPress is the ability to extend it with the use of plugins. There are so many to choose from and they are so simple to install.
  83. 87. I am easily able to add such things as “calendars” and “forms” something that was for me either very time consuming or impossible. I can then simply just edit their look using CSS and I don’t have to see any of the programming at all unless I choose to.
  84. 88. Things like adding “ LightBox ” to images was no longer a chore, just download the plugins, open up your FTP program and drag the files to the plugins folder. It is then simply a matter of activating them in the plugin section of WordPress. When clicked on all you images will pop up in a light box, how simple is that?
  85. 89. I also use a plugin called “ Google XML Sitemaps ” it generates a new compatible sitemap every time I create a new page or a post. Instead of waiting to be indexed by, Google, MSN Search and YAHOO the plugin lets them know I have new content.
  86. 90. It’s kind of like you are feeding the search engines and I guess in a way you are. I have actually seen a couple of my posts indexed in within 10 to 20 minutes after they were posted because of this plugin. Not only can you find plugins to extend the functionality on the outside of WordPress but you can also find plugins to help maintain your database, something I’m still learning about.
  87. 91. I know enough to backup my database before I make any new changes but I also have a plugin installed that makes a backup automatically for me once a week. It emails me a copy as well as keeps one on the server for a rainy day, it may sound like paranoia and I guess in a way it is but that little plugin has already saved me plus it is a value added service I now provide to all my clients.
  88. 92. I know it sounds like I am just using plugins and don’t know a thing about them but that isn’t the case. I always open them up in Dreamweaver and have a good look at them and try to figure out how they work by changing lines of code. You would be surprised by how much you can learn by changing hex and number values.
  89. 93. Soon after I started to do that I got into manipulating many of the PHP files in the WordPress admin folder I was trying to strip out and change certain things in the dashboard and users section. All the WordPress files are all so beautifully commented telling you what each part of the code does and with some trial and error I have a much better understanding of how the software works.
  90. 94. Not only have I got a much better understanding of programming now, I can inexpensively hire a developer when needed. Because I am now able to get my sites up to a point where the developer doesn’t have to really do much, just a few hours of code and that is it.
  91. 95. <ul><li>So for somebody like myself a graphics guy, WordPress has allowed me to take what I already know which is how to: </li></ul><ul><li>Design a layout in Photoshop </li></ul><ul><li>Cut it up into a XHTML and CSS template </li></ul>
  92. 96. But now I can also provide solutions for many more types of clients than I ever could before. I am now spending far less time creating websites with the ability to add almost any type of functionality when needed. In times like these when clients are looking to cut costs over the next little while, giving them the power to make their own changes has been a huge advantage when getting them to buy from me.
  93. 97. My last web project which launched just the other week was for the Canadian Fire Safety Association . They needed a website that had a “paid members only” section and they needed to tie the site into an existing database. The site also had to keep track of all the different types of membership subscriptions and alert users when their subscription would expire.
  94. 98. They also needed a way to renew their memberships through the site and a secure way for the members to retrieve lost passwords and usernames. A shopping cart was also going to have to be created so they could sell tickets to the various events that they schedule thought the year.
  95. 99. How was I going to accomplish all that? With a plugin, a plugin called WP-Member which I purchased a license for and was able to install and setup all by myself. I was able to get the whole site up to a point where all I had to do was hire a programmer for a few hours to create a shopping cart. This is a perfect example of a job I would have had to pass on just a year ago.
  96. 100. It just goes to show you that you never know what the future holds, without WordPress I think I would have been in big trouble financially this last year and might of even had to get a real job again. But I was able to use it to market and position Digital Deceptions much higher than before, offering way more options and services and best of all I can do it all much quicker.
  97. 101. Also because of the WordPress site I’m not just getting local work anymore, I have a few American clients as well as a couple of British clients and I am talking to people all over the world. This summer I plan on implementing some of the many new things I have learnt along the way and I will re-launch Digital Deceptions with more focus on social media and blogging.
  98. 102. I have been busy writing articles over the last 8 months that just don’t fit into the current version of the site and I would like to take it into a bit of a different direction. I also plan on launching a project I have been working on for years called the “ Process ”. It is the actual process I use to get the most out of my clients from doing any sized job from a logo to a website.
  99. 103. It can be used for just about any type of freelance work and it covers getting paid, problem clients, contracts and everything in between. I will be giving real world examples and sharing some of my experiences. The main part of the website is going to be a place where freelancers can ask questions.
  100. 104. The plan is to answer all the questions and then point the user to the part of my process where they went wrong. All the questions will be categorized and searchable and WordPress is by far the perfect platform to use.
  101. 105. Well that is about it, if anyone has any questions please feel free to ask.
  102. 106. I would like to thank everyone for giving me the opportunity to present today, I have never really done anything like this before if you hadn’t noticed and it was a great experience, enjoy the rest of the conference.