How a Cake-noob built TutorialMagazine.com in 14 days

by jorgtron
In this article I describe how I got from idea to launch of a tutorial-aggregate website using the CakePHP framework. Visit [url]http://www.TutorialMagazine.com[/url] to view the final result.
”Find out what people want, and then find a way to give them just that”
– the secret to online success

Every successful website needs to solve a problem, or fulfill a need. For me, and perhaps for many of you, finding good tutorials is hard. There are many tutorial-aggregate sites out there, but most of them link to thousands of poorly written, uninformative tutorials. My goal is to showcase only the best tutorials, those that are instructive, original and useful.

In this article I’ll describe how I’ve built the site with CakePHP, both from a designer and programmers point of view.

Along the way I will share some tips and thoughts that might be valuable if you are in the process of making your own website or web service. Let’s get started!

Be a rebel - do things differently!

First off you need to find out what will make your site unique. Is it functionality, design, ease of use, or the quality of your content? If you’re not going to do anything diffently than your competitors, why do anything at all? Dare to be different. Take what you think works on other sites and incorporate your own ideas. Here are some of the things I’ve decided to do differently from most tutorial sites.

  • Only great tutorials are showcased

    How do I decide which tutorials get to be added to the site? Basicly, if I like them and find them useful, they’ll be added. If not, they’re not worthy. It’s all about providing value to visitors. If you’re always featuring crappy content, why should people come back to your site?
  • Something new every visit

    I want my visitors to always find something useful on my site. Something that will make them think ”Wow, what a great site” and ”I should bookmark this!” I will try to add content so that there is something new on the site every single day.
  • Bigger images

    Most tutorial sites only show a tiny screenshot of each tutorial, which tells you little about the effect you can learn from it. I’ve used large (600px * 150px) images to stand out from the crowd. You wouldn’t buy a painting after seeing it from 200 meters away, so why would you be intrigued by the 40x40 pixel thumbnails most tutorial sites show you? I want to help visitors click on tutorial links, because if they do, they might find something that’s valuable to them, and if that happens they are more likely to come back to my site. Make it easy for users to accomplish their goals.
  • Less clutter

    I’ve visited a lot of tutorial sites, and most of them seem like their main goal is to show people advertisements. For me, filling up pages with cluttering ads isn’t helping my users achieve their goals. Focus on what is useful for your visitors. Read up on typography and whitespace.
  • Provide RSS feed of tutorials

    Some tutorial sites do let you subscribe to an RSS feed, however, when the tutorials that are added to their directories are lacking in quality, visitors probably don’t click on many of the items in their feeds either. I know I wouldn’t.
  • Avoiding Featuritis

    Don’t try to make your website do everything. Focus on the core features, and you’ll have less complexity to deal with later. You should spend 80% of your time polishing existing features, and only 20% on new features. In my case the core functionality is finding tutorials and suggesting new tutorials. Those are the two main things that need to be in place. Everything else is not important. Make your own decisions as to what the core functionality of your website or service needs to be.

Motivation

I’ve started on way too many personal projects that have never made it all the way to launch. The problem has rarely been that my website ideas have been poor or that I haven’t had the time to work on them, but simply that I’ve run out of motivation. Part of the reason why I decided to build and launch TutorialMagazine.com in 14 days was that I had a feeling I could complete it. It’s not a very complex site, but as a newbie everything does take a long time. It took me 14 days from idea to launch, and had it taken longer I would have gotten bored. Without CakePHP I don’t think I would ever have completed any projects! I’ve really pushed myself to finish the site in two weeks, and if you’re developing a site, you should too! Getting the site out there in its basic form requires that you can’t include every single feature you have in mind, but that’s a good thing!

Every time I decide to add a feature that I don’t know how to program (anything ajax, custom javascript, animations etc.) it always takes a long time find out how to do them. If I can’t figure out how to do something, I’ll get frustrated and maybe even abandon the project, thinking that if the fancy feature I’m working on isn’t in place the site won’t be successful. Usually the simple solution is the best solution. You probably don’t need ajax or fancy animations to fulfill your users needs!

Push for launch

Getting the site out there in the world gives you a sense of pride. Hearing from others that they find your site useful is a great compliment, and tremendously rewarding. My challenge to you is to build something you want to build, do it quickly so you have a chance of actually completing it, and see what people think. Those are my thoughts on motivation, now let’s look at my design process.

Design

When I got the idea for this website, I was picturing a newspaper layout. I wanted the website to look similar to a real newspaper with text-columns and photos. Although my vision has changed a little along the way, I’ve maintained some of the elements of a newspaper, among them the giant header text at the top of each page.

Who are my users?

Keep in mind who you are designing for. Are you making a site for young people, old people? Web professionals, real estate agents? Try to find out what is important when designing for your potential users. In my case, I was making a site for people who are trying to learn about design and how to use Adobe Photoshop, Illustrator and Flash. It’s safe to assume that these visitors might be more experienced with computers than average internet users. Therefore, I decided to use many graphical elements (as most of my visitors have broadband) but at the same time limiting the size of image files to not punish those still using dial-up connections.

Working from a 960pixel width grid ensures that the site looks good for users using resolutions of at least 1024*768. Smaller resolutions are less common these days, and I’ve not done much to cater to these visitors. You might say ”what about mobile users?” Well, I don’t think many do tutorials from their cellphones (yet) so a mobile version of the site is not a priority. Don’t do something just to do it, think about how and under what conditions users will be visiting your site, and for what reasons.


Naming your website

The name and URL of your website is crucial. I decided early on that I wanted to have the word ’tutorial’ in the name of the site. Try to find a catchy name that conveys something about what your site is about. My site presents tutorials in a magazine-style format, so TutorialMagazine.com is a natural fit. Had i named it something web 2.0-like, or completely unrelated to tutorials, the odds of users remembering it are slim. However, if you can find a name thats short, web 2.0-like and that also conveys meaning (i.e. Flickr) my hat’s off to you! Also, it is beneficial for Search Engine Optimization (SEO) if you have important keywords in your URL.

I was also lucky enough that http://www.tutmag.com was available, this short address might come in handy later in the lifespan of my website.

Design process: wireframing, photoshop and coding

  • Wireframing

    I do most of my wireframing on paper. I keep a sketchpad on my desk at all times, so if inspiration strikes, I can do a quick drawing of an interface element with comments that explain my thoughts. I’ve found that getting things on paper really helps in figuring things out. Try showing your sketches to others, you might get valuable feedback early on in your design process.

    For TutorialMagazine, i decided to base my layout on a grid (keeping with the newspaper/magazine theme). I found it useful to draw out boxes on a piece of paper showing where the different elements would be positioned. When I have a general idea of what a page should look like, I head over to photoshop.

  • Photoshop

    Using the wireframe mockup I’ve drawn on paper, I first add my 960pixel grid as an overlay on the document (check out http://www.960.gs for a downloadable .psd template). Then I draw up boxes showing where the tutorial boxes, the headers, the lists of links, and sidebar will be. Note that I follow a very iterative process here, I’m usually not satisfied with a design element until I’ve done at least 5 revisions of it. My way of doing this is simple: I save my document as for example ”Main_1.psd”. Then, after I’ve made a dramatic change on something in my design, I save again, this time as ”Main_2.psd” and so on. This way I can easily compare and contrast different versions of the page, and revert back to previous ones if i hit a dead end, design wise. Make sure that when you save your image files, you use appropriate file types (.jpg for photos, .png for graphics) as well as using the ”Save for Web” function to keep file sizes low.
  • Coding

    This has been the second project I’ve done in CakePHP, so I am still very much a newbie. One of my major goals in writing this article is to show people curious about the CakePHP framework that it really does simplify development, and sometimes even makes it enjoyable.

    The Bake script, for instance, is one of my favorite parts of the framework. What you do is simply to set up model files (put these in /models) containing data about the basic structure of your site. For my needs, I had to make one model called ”tutorials” and one called ”suggestions”. Now when you run ”cake bake” (read more about the specifics in the cakePHP book: http://book.cakephp.org) the script generates the controllers and views necessary to show a basic version of your site, including CRUD (Create, Read, Update, Delete) actions. Once you’ve done it a few times you realize how much time you’re saving.

    Then I simply start to edit the views and controllers made by Baking, customizing layouts and controller actions so they do what I want. For example, one function in my tutorials controller prints the top 10 most popular tutorials, as you can see on the front page. I then add pagination, validation and authentication to my project. You can learn more about these features of CakePHP at http://book.cakephp.org

    [p] I do most of my web development in Dreamweaver, using a local version of apache, php and mysql (i use http://www.wampserver.com). I test every link and all functionality in Internet Explorer 6 and 7, as well as Firefox and Opera (my favorite browser) to make sure that everything looks approximately the same in all of them. [p] Firefox has some addons that I’ve found useful when developing, one addon I would recommend that you download is Firebug. Firebug lets you inspect the page as you are viewing it in Firefox, so you can see ”under the hood” so to speak. It can be really helpful when you’re struggling with CSS and layout issues. To upload my files to my server I’ve also recently discovered FireFTP, which runs in your browser and takes care of keeping local and remote folders synchronized.

Adding content

Try to make the way you add content as painless as possible. I added over 60 quality tutorials last night, using about 3 minutes per tutorial. Simplify your administrative duties, don’t just design for your users, design for yourself! I’ve made an administration page with shortcuts to common actions (add tutorial, approve or reject suggested tutorials, check dead links, visit google analytics etc.)

Post-Launch

After launch, I’ve tried to build interest by telling friends, online and off, as well as contacting prominent design-centric sites asking to be featured in articles, submitting the site to digg(http://digg.com/design/Tutorial_Magazine_All_of_the_best_tutorials_in_one_place), etc. How you promote your site will of course depend on the type of site you are developing.

Analyze and Refine

I’ve used Google Analytics, feedburner and my own custom built admin-page to track how many visitors have stopped by, how many tutorials have been viewed and what the average user rating of the tutorials I’ve added is. That way, I can make sure that I keep adding only quality content. Focus on the user and the user’s needs, and you’re well on your way to a successful website!

Final thoughts

I hope you have enjoyed this article, and I’d be happy to answer any questions you might have.
Suggestions on how to improve the site are of course also very welcome! If you have any tutorials you’d like to submit, please visit http://www.TutorialMagazine.com/suggestions/add or email me directly at jorgen [at] tutorialmagazine.com

Have fun cakebaking!
Written by Jørgen T.

Report

More on Case Studies

Advertising

Comments

  • CountRemo posted on 08/09/10 06:24:10 AM
    Excellent work. I just love your site, its simple yet sophisticated and full of great knowledge.
    Please create more and share with us.


    PS : I hope you made good money. You just too cool bro. 14 days!!!! Damn.
  • designs345 posted on 02/09/10 05:28:53 AM
    it pays to be organized
  • bazik posted on 01/23/10 03:08:23 PM
    well, the result is close to perfect i like it, very organized you know how to design with simplicity, and doing the whole coding in 14 days is awsome, so congratulations for the next sites.
    I'm trying to build my first also and i walk very slowly so i think i'll just do like you said and try to achieve it quickly.
    good luck ;-)
  • jorgtron posted on 10/25/09 05:47:41 AM
    Thank you for your comment!
    There's a great tutorial for what you're looking for here: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
    960gs is a grid system, which is basically a grid that you put on top of your designs in Photoshop so that you can align elements to the grid. When you align to a grid, designs typically look better :) Do a search for 'designing with grids' and you might find some useful articles.

    Good luck!
  • victorivens posted on 10/24/09 10:18:17 PM
    Hi, I liked your tutorial, and liked your site too :)

    I'm in a project, and i want to use an caption on the images like that you've used, can you send me a link to a tuto for that?

    and other thing, how can i use 960.gs?
    I dont understood.

    tnks
  • jorgtron posted on 07/18/09 11:41:22 AM
    @alan reinhart

    Sorry for the late reply. I do use Dreamweaver for some work, mostly CSS stuff as DW has some handy helpers that make writing CSS quicker.

    An issue with DW is that it doesn't color-code .ctp & .thtml files, cake's template files. There is a way to fix that, but it didn't work for me. I use Notepad++ mostly for all my coding :D

    Cake is not a replacement for DW, you'll still need a good grasp on html and CSS to make everything look good.

    Thanks for your comment :D

    Jørgen
  • jorgtron posted on 07/18/09 11:37:02 AM
    I have an RSS feed, you can find it here: http://feeds2.feedburner.com/TutorialMagazine
  • leandrocp posted on 07/18/09 10:04:19 AM
    Great job, but you could add RSS feeds (http://bakery.cakephp.org/articles/view/rss-feed-them-cake)
  • harrzack posted on 05/07/09 09:13:07 AM
    I'm a cake noob - have done a few sites with Dreamweaver. Now I'm getting the idea Cake is a REPLACEMENT for DW. Can you give a few comments on how you use the two together? Do you have 'cake-in-dw' or do you use it after cake?

    I've seen the posts about how to set DW up to edit Cake files. My early thoughts was to NOT edit cake in DW - just use it for the 'look and feel', and edit Cake stuff (php) in editors (bbedit, textedit, etc).

  • timmy016 posted on 04/05/09 06:34:37 AM
    i just have to say ur site is great! article is awesome explains alot of whats going on and ive got some tips and trix on how to setup a new site! thx! alot of respect / timmy
  • jperras posted on 03/11/09 10:09:40 PM
    Hi Jørgen,

    we are currently in the process of reviewing our Bakery publishing criteria, and I have looked over your (already published) submission. While it is well written and descriptive, I feel that it is quite lacking in describing how CakePHP aided you in your development. The article as written would be an excellent candidate for publication on a general web developer/designer news site, but as it stands there is very little mentioned about how CakePHP and it's tools helped you build your application.

    I would ask that you please revisit the article, and attempt to answer as many of the following questions as possible:

    1) What features of CakePHP 1.2.x did you use & find most relevant? You wrote "I then add pagination, validation and authentication to my project" but then do not describe how these were used for your project. Keep in mind that nearly everyone reading this article already knows about http://book.cakephp.org ; simply providing a link to there does not satisfy the reader who is looking for a 'real world' application built with CakePHP.

    2) If you built any custom components, behaviors, helpers, what were they, and what problem were you trying to solve with them?

    3) Did you run into any problems/pitfalls ? How did you overcome these?

    4) Did you consult other articles on the Bakery? IRC? The google group? What did you find useful?

    5) Did you use any unit testing? If so, was it a TDD approach, or were the tests written after the fact? What was the effect of this on your development?

    6) Did you use any external javascript libraries? Which ones? To do what?

    7) What CakePHP methodologies & features allowed you to develop the application this quickly?


    I think you get the idea. We would simply like to hear more about how CakePHP was involved in your project; more than simply stating that it was the framework used & a few lines about the Bake console shell.

    If the content is not updated within a reasonable amount of time to reflect the questions/suggestions I have made above, then it's publication status will be up for review in the near future & may be un-published due to lack of relevance/information regarding CakePHP as the tool you used to build your application.
  • ydread posted on 03/11/09 01:07:58 AM
    Ydread: Thank u Jørgen,

    I had fun visiting the site and will recommend it to all.
  • jorgtron posted on 03/08/09 10:51:25 AM
    Henrique: The rating star system is not built by me, but is based on http://www.reversefolds.com/articles/show/rating2 :)

    - Jørgen
  • henriquemachado posted on 03/06/09 01:40:19 PM
    Can you share how you built the rating star system?
  • port23user posted on 03/03/09 11:57:10 PM
    Great work, Jørgen! It's a nice design and was well thought-out. And mostly, I admire how quick you were able to produce it.
  • jorgtron posted on 02/26/09 06:55:24 AM
    Thanks Giuliano! I appreciate it, let me know if you have comments on how to improve the site :D
  • giulianob posted on 02/25/09 10:48:30 AM
    Good job guys
login to post a comment.