Web design help
May 10, 2011 2:28 AM   Subscribe

WebDesignFilter: Help a print designer with some questions about web hosting and free client friendly CMS options and general web questions.

I'm back again with another web question. I've read lot's of articles and tutorials, but none (that I was able to find) that cover my particular requirements.

I am more of a print designer/illustrator. I've taken a course on web and am generally familiar with any terms and/or jargon you throw at me.

I have landed a client (client owns a magazine about vintage caravans) who requires a simple multi-page HTML/CSS website and has decided they want a new host also. The thing is, the client has registered about 4 domains they want to redirect to the main domain.


- What are some good hosts to recommend to my client where I can achieve this domain redirection of the 4 registered domains?

- My client wants to be able to update and maintain the site themselves, can you recommend an easy to use, open source CMS?

-So I've created the entire website layout in Adobe Illustrator - where to from here (share your fave tutorial links)?

Any other personal start to finish 'website building for a client' advice that you have, please share. I'm looking for all the advice I can get to make this a good experience for my client.
posted by foxy to Computers & Internet (19 answers total) 10 users marked this as a favorite
Response by poster: Pee ess: Not Wordpress. I don't know how to use it yet and it seems like it's going to be fairly daunting. Unless you can talk me round!
posted by foxy at 2:50 AM on May 10, 2011

1. The redirection can be done at your customer's domain registrar. You need to change some DNS settings and most registrars have a control panel for this. As for a hosting provider, check out mediatemple.net - I haven't used them myself but quite a few high profile use them.

2. Wordpress all they way. It is open source, entirely free, easy to work with and designed to work with locked-down web hosting. Your client can set up multiple user accounts and do daily content stuff all by themselves but you or someone else will need to take care of maintenence.

3. So you're going with Wordpress and will need to convert your adobe illustrator design into a wordpress theme. This means learning how wordpress and theming works and you will need to know php/html/js/dom but it doesn't get any easier than with Wordpress. Also, there are TONS of free and commercial themes, so you could always find an existing theme that you customize according to your client's needs. This could save you countless of hours so I really recommend that you consider it.

Please remember that installing and setting up Wordpress, or any other CMS, accounts for a small portion of actual work you will be doing. Don't forget to "get money, get paid" for upgrades, new features, etc.
posted by Foci for Analysis at 2:53 AM on May 10, 2011

Let me talk you around, circle and triangle, then!

Wordpress is not only the single most used open source CMS, it's ideal for this type of simple web site. The advantage of its huge user base means tons of support, lots of documentation, videos and resources.

Although Wordpress might seem daunting, it's a bliss compared to other CMS's such as Drupal because Wordpress is much more simple in design and employs a fairly sane approach to theming.

Wordpress is also good for your client because they will know that they get a product that's well maintained and easy to find coders for should you not be able to continue working on the project.

Also, knowing Wordpress is a huge, huge bonus for future work because once you get used to it you can install it in a couple of minutes and instantly start experimenting with designs, plugins, etc. Yes friend, Wordpress can be used as a rapid prototyping tool by you and your client.

Send me a MeFi Mail if you got any questions further down the road.
posted by Foci for Analysis at 3:02 AM on May 10, 2011

"around, circle and triangle, then!" *facepalm*
posted by Foci for Analysis at 3:03 AM on May 10, 2011

Response by poster: Thanks so much Foci! I figured I would have to get around to learning Wordpress eventually - it certainly is very daunting!

But I have a feeling being a designer that needs to learn development/coding, it might take a while, and I don't want to put the client through waiting for their site and being my guinea pig so to speak while I LEARN to develop haha. I know people will say to me "Why did you take the job if you can't develop", but it's too late to turn back! Do you know much or anything about CushyCMS? It seems to be deemed as a CMS for designers.
posted by foxy at 3:12 AM on May 10, 2011

2. WordPress is really about as simple as it gets and there's a reason it gets so much love. The only thing simpler, I think, would be CushyCMS but I've never actually used it myself. You should give MovableType a spin as well, as it's marketed toward designers. Both CushyCMS and MT cost money, so that's something to consider. Honestly, I'm with Foci for Analysis— just use WordPress and call it a day.

3. You need to know HTML/CSS more than PHP/JS. A bit of PHP syntax is enough to get you by, and you probably won't need to touch the JavaScript for the first revision of the site.

There isn't a single tutorial that will teach you frontend design, but here are some general resources:
  • StackOverflow is incredibly useful, especially for something like CSS (where designers basically solve the same problems over and over). If you know what to search for (e.g. "stretch div to 100% width"), you can probably find the solution.
  • If you're looking for books, SO has you covered.
  • A List Apart has pretty authoritative advice. When they recommend techniques, they go through all the edge cases so you know exactly what you're getting.
  • It's mentioned in most beginner CSS tutorials, but it bears repeating: use a reset.css. It will save you hours of testing.
  • Use firebug or the Chrome developer's toolbar to quickly edit and preview css, and check the dimensions of a div.
  • It might be smart to work from an existing theme for your first design. If you're going to start from scratch, start with some boilerplate code for the type of layout you want. For example, if you know you want a three column layout, search for "cross browser three column layout" and you'll find lots of good code. Very often, a recent ALA article will contain the best advice for you.
  • Good luck!

posted by yaymukund at 3:15 AM on May 10, 2011

:: Domain redirections
Almost any host can handle domain redirections, and they will typically do it for free as part of the hosting package you buy.

:: Hosts
A lot of people will probably recommend you DreamHost. They're cheap and for years they were my recommended host also, but the service has really declined there. About four years ago they did some sort of weird roll-back two hours after a project of mine went live, replacing the newer files with older ones from a back-up and completely screwing it up. Though it was a personal project and not a business one, I was bothered by how completely casual and unapologetic they were about it all.

So I switched to Media Temple. They've been pretty good so far, and I appreciate their 24/7 phone support with a toll-free number from Australia. The couple of times I've had to call, they've been incredibly polite and helpful.

:: CMS
I see your follow-up note, but I don't know of anything that's going to be easier than Wordpress.

:: Methodology
What I generally do is import the design into Photoshop and cut it up into the parts I'll need. Build the basic HTML/CSS framework first, laying out the areas and structure, and do some cross-browser testing to make sure the major stuff is all appearing where it should. Fill in the details, fonts, etc, and test some more.

If you're doing this with Wordpress, you'll need to build a theme. As Foci for Analysis recommends, you may be better off finding an existing theme and modifying it, because coding a theme from scratch can be fiddly. There's a lot of good free themes around, and numerous paid ones, as well. Woo Themes has some nice paid stuff.

Good luck!
posted by Georgina at 3:15 AM on May 10, 2011

Oh great, I screw up the tags on a question about html/css.
posted by yaymukund at 3:19 AM on May 10, 2011

I've heard about CushyCMS but not used it myself. I cannot, however, imagine that you can get around creating your own theme, unless you're content with the basic design and layout options that CushyCMS probably provides.

As for taking a job when you lack some of the required skills, well, that's just the way we roll in IT so welcome to the club ;) This is, actually, a perfect oppurtunity to learn Wordpress since the site seems simple in scope. BTW, what's your deadline?
posted by Foci for Analysis at 3:26 AM on May 10, 2011

Response by poster: The deadline is the end of this month - eeeek! I work full time as a graphic designer (9-5 kind of deal), so I only get the opportunity to work in the evenings. Which has worked well up until now. I recently finished a web design which I handed over to a developer. I wish there was always a developer to hand over to! But now development has rocked up on the scene I'm fairly worried about my client!

If WP is as easy as it get's, I am very scared after looking at their documentation! My client needs the most simple website. As it's a magazine, just a page about the mag, subscription and past issue ordering page (with PayPal), contact form. No blog or news feed needed. Y'know, the kind of stuff you'd expect a print magazines website to have. Is WordPress really best for this? Is there maybe an easy way to just avoid a CMS all together!?
posted by foxy at 3:39 AM on May 10, 2011

Is WordPress really best for this? Is there maybe an easy way to just avoid a CMS all together!?

If the site is basic, you could perhaps build them something with very clearly commented sections ("Front page copy here") so they can update it themselves, but it will require your client to be comfortable with both a text editor and FTP. They'll probably mess things up a few times before they get the hang of it, so make sure you keep a clean copy of the pages for emergency fixes.

The beauty of a CMS is that it abstracts the content from the design. There'll still be a small learning curve for your client, but you can make things easier by clearly naming the pages in Word Press and getting rid of some of the unnecessary features from the WP admin interface.

However, your latest response adds a new snag: subscription and past issue ordering. You're going to need some kind of shopping system for that. I believe PayPal has a simple system you can use, but I've never tried it so I can't say whether it's any good. Info here: PayPal Solutions.

If it were me, I'd begin by installing Wordpress on a host of my own and trying out some themes. Look around and you can probably find a basic theme that echos your design, and modifying a theme is a whole lot easier than writing one from scratch. Alternatively, you can start with Starkers, a "completely naked" theme that lets you build from the ground up without having to put all the WP tags in, but I think in your case, modifying will be the best way to go.
posted by Georgina at 4:33 AM on May 10, 2011 [1 favorite]

I've used CushyCMS. You just add (CSS) classes to the (HTML) divs you want the client to be able to change content within. You set CushyCMS up with the FTP details to your web host, so that it can access and change the files, and then it uploads changed versions whenever your client logs into CushyCMS and edits their pages. It's as simple as you get (none of the initially daunting Wordpress-specific stuff): if you can build a site using a WYSIWYG program like Dreamweaver, and if you can access your hosting service via FTP, then you can make it work with CushyCMS. Seriously, it only barely qualifies (in my book) as a CMS. It's not database-driven.

However: the "past issue ordering page" concerns me in what you've mentioned you need the site to do. If not for that, CushyCMS could handle it, but that kind of functionality is outside of Cushy's capabilities. If you wanted to use it, you might have to see how flexible your client is on that order form. (Maybe use a variation on the basic contact form instead, with checkboxes for different issues, and offer a Paypal button and instruct the customer to make sure they've paid the right amount of money and entered their name the same as in the form. It's a bit clunky, but if your design's super awesome and/or your client's just a hobbyist you might be able to get away with it.)

I haven't used Adobe Business Catalyst (well, I toyed with it once from within my browser to see what it was about, but that's about it) but from memory it pitches itself at designers building sites ranging from simple to complex, but who want to build the thing by snapping already-built modules into it. Could be worth looking into another option - although as I say, I haven't used it so can't personally vouch for it!
posted by springbound at 6:21 AM on May 10, 2011 [1 favorite]

Ah, I should've read Georgina's post. If Paypal Solutions is actually any good, combining that (for your ordering system) and CushyCMS (for your "flat" pages) sounds like a workable solution.
posted by springbound at 6:24 AM on May 10, 2011 [1 favorite]

Response by poster: Good stuff folks! What about Concrete5?
posted by foxy at 6:45 AM on May 10, 2011

I've built quite a few Wordpress-based sites from scratch now, and while I would consider learning how to use it, it's definitely not a super-friendly development environment.

There are a whole bunch of lightweight CMS options that I'd consider.

CushyCMS is the only one that I've used. It's very, very easy to get going, though I imagine it could be improved upon.

I've heard good things about both Pagelime and SurrealCMS, though I've not used it.

Perch is also meant to be good, and I've been hoping to use it in a quick little project. It's not free, but it's cheap and self-hosted, so it'll be running on your server and you won't be dependent on anyone else.

Good luck, and feel free to ask any further questions on here or on MefiMail.
posted by Magnakai at 6:53 AM on May 10, 2011

Oh right, so your other questions seem to have been adequately answered by others, so I'm going to focus on this one:

-So I've created the entire website layout in Adobe Illustrator - where to from here (share your fave tutorial links)?

I did this (for the bajillionth time) literally a few days ago. I usually design stuff in Photoshop or Illustrator, but when it comes to coding time, I'll almost always transfer everything to Photoshop before exporting it. In any case, you want to look at the content of the page and how it's structured. Work out which bit's going to be the main H1 header. You only want one of these on a page. With practise, you'll see quite clearly how you're going to divide the page up into different divs etc. Then make a plain HTML page.

You essentially want to end up with a page that makes logical sense and that is readable without any CSS. So go through and code up the HTML in a logical way. Don't bother putting in images at this point unless they're part of the content, not the design. You just want a functioning plain as possble webpage. When you're doing this, think about each of the different sections of your page. How can you divide it up? Which are repeating blocks? Which bit's an individual section? You'll want to be wrapping sections of the text in div and other appropriate HTML tags, and giving classes to sections that you need to specifically target, and ids to unique governing sections. Lastly, I encourage you to use the HTML5 tags for more semantic clarity. Also check out this handy-dandy HTML5 structual tag flowchart.

Once that's all done (I say done - you'll almost certainly have to go back and edit it at some point), it's time to get the css in order. I usually start by making my sections fit in the right place. The measurement tool in the graphics package of your choice will let you see exactly how many pixels big each section is. Go ahead and lay things out with floats and clearfixes and whatnot. You'll probably want to rationalise all your text styling at the same time. If you get stuck, there are great resources all over the web. Then start chopping out the bits of your design that will only work as an image, then fitting them in as backgrounds etc. You'll almost certainly need to go back a few times and rejig bits of your HTML.

Once you've got that all sorted (I know, easier said than done), you should have a fully functioning webpage that looks 99%-100% like your design. Then it's CMS time, which is another story.

This isn't the way that everyone does it, but it's the way that I do it, and I haven't seen a better way.

Once you're happy with the whole process, you can start using things like html5boilerplate to get a basic framework in place for you, but it'll just blow your mind if you go in there fresh.

Good luck!
posted by Magnakai at 7:28 AM on May 10, 2011

In terms of day-to-day use, Wordpress is as easy as most any CMS. In terms of developing a theme, however, it's a fair amount of work. It's not clear how conversant you are with HTML/CSS, but you'll need to be pretty comfortable with them and then you'll need to learn Wordpress' system of tags. Because WP's tags are PHP functions, you can go pretty crazy if you want to, which is nice if you know what you're doing.

The easiest thing would be to use an existing theme. The second-easiest thing would be to modify an existing theme. The third-easiest would be to use a starter theme and then build a child theme off of it, but this would be the easiest and most robust way to approach new theme development.
posted by adamrice at 8:07 AM on May 10, 2011

You don't have time to learn any CMS at all if you're doing this evening and weekends, and certainly not to apply an existing design to any kind of theme for any of those CMSs. (You may have been able to pull this off if you had designed around an existing theme for a pre-selcted CMS, but you did not.) Subcontract this without hesitation or you will tank this project.
posted by DarlingBri at 9:05 AM on May 10, 2011

Seconding the subcontracting. You're not going to learn how to theme any of the robust CMS options before the end of the month.

That said, if you're going to be stubborn about this, your best best is going to be wordpress. Here's a simple-ish way to get started.

1.) After you install, ftp in. In your wordpress root directory, navigate to wp-content/themes/twentyten. This is where all of the juicy stuff that the standard WP theme uses for presentation likes to hang out.

2.) Poke around until you get an idea of the general structure of WP theme. Each .php file is a separate chunk of your final page. Each different style of WP page has a different makeup of these chunks. The standard blog chunk is called "Loop". You're not going to need to edit that for what you're doing.

3.) Login to the site via your browser. Familiarize yourself with the admin backend. In the settings, set the default index page to point to a standard WP page instead of the blog page. Add and edit all of your static pages & content into separate pages.

4.) Look at the site. If you're using chrome, you can right-click on the different elements of the page and select "Inspect Element". If you're using firefox, download the firebug extension and you can do the same thing. This lets you see which CSS functions in the twentyten theme stylesheet are influencing each element.

5.) In photoshop/illustrator, measure out each element down to the pixel. Draw all of these sections out on a piece of paper. Include margins, padding, positioning, text-size, etc.

6.) Using firebug/chrome and your CSS chops, try to pound the twentyten theme into the right shape to acccept your graphics. Remember, in the pages menu you can choose different layouts for each page using the sub-themes.

7.) Chop up your .psd, use the save for web command, and drop them into the wp-content/themes/twentyten/images.

8.) Link it all up via your stylesheet.css.

Feel free to memail me if you decide to try this and get stuck.
posted by thsmchnekllsfascists at 8:08 AM on May 11, 2011

« Older How shall I cook a frozen duck breast?   |   Guy gets on the MTA... Newer »
This thread is closed to new comments.