I need to make a simple, professional website by the end of the month.
September 16, 2010 9:53 AM   Subscribe

I need to make a website for a family member (a classical musician) by the end of next month. I'm familiar with basic HTML and CSS, but I need to become fluent. Any web developers on MF?

The website needs to be professional. I'm shooting for something minimalistic and efficient, and impressive all the while. I've seen this done simply with nice typography and a clean layout, so I figure it won't be too hard.

First of all, I need some resources to brush up on my HTML and CSS. I've Googled and found some messy ones, but I want to know if any of you experienced web developers can personally recommend anything. Also, are there any other languages that I'd be better off learning?

Next, is there any advice you can give me? Anything I should or shouldn't do when it comes to coding or aesthetics? Any guidelines you may have for me?

The main purpose of this website would be to impress people in the industry and make things easier in terms of jobs, contacts, etc. It would be nice to have some subtle but cool effects to really set this website apart from the rest (classical musicians are still catching up to the internet).

If all else fails, we will just hire a professional to make the website. For now, though, I'm giving this a shot.

Any help would be greatly appreciated.
posted by jykmf to Computers & Internet (23 answers total) 13 users marked this as a favorite
What do other similar websites look like and do?

In this day and age, I wonder if it wouldn't be better to go with a Content Management System or a hosted CMS-style service like SquareSpace, rather than to do raw code.
posted by ZeusHumms at 9:59 AM on September 16, 2010

I suggest browsing sites like Tuts+ and TutVid. Free for a lot, and dirt cheap for the stuff that isn't.

I pay $9 a month on Tuts+ and get access to some really impressive resources, like their tut on going from Photoshop to Word press theme (worth much more than the whole $9). And you can download and keep them well beyond the month you pay for.

They help explain things like work flow and have many many tips and tricks. Very good.
posted by dozo at 10:02 AM on September 16, 2010

Oops, TutVid.
posted by dozo at 10:03 AM on September 16, 2010

Honestly, for the kind of site you need, I would just use Wix. You can get a seriously sophisticated looking site without needing to learn any coding.
posted by MexicanYenta at 10:07 AM on September 16, 2010

Response by poster: What do other similar websites look like and do?

In this day and age, I wonder if it wouldn't be better to go with a Content Management System or a hosted CMS-style service like SquareSpace, rather than to do raw code.

I actually did look into SquareSpace. I suppose the next step (if I should fail) would be to use some sort of CMS. But, I guess I just want to try this.

In any case, something like Wordpress or SquareSpace would still require good web development skills for total control (if I were to edit the code directly). I find that, as easy as they make them, you don't get exactly what you want.
posted by jykmf at 10:07 AM on September 16, 2010

Clicked too soon - just below the fold on this page, they have some examples of musician's sites made with Wix.
posted by MexicanYenta at 10:09 AM on September 16, 2010

If you're familiar, but not fluent and really want to learn it, I suggest Andy Clarke's "Transcending CSS." It's more about best practices but he includes some great out of the box examples.

However, I don't think a month is enough time to both get a handle on it and make a good looking website unless that's all you're doing. My suggestion would be wordpress and a sensational theme. Wordpress isn't just for blogging anymore, there are so many sites, and templates, that are for every type of site imaginable.
posted by [insert clever name here] at 10:14 AM on September 16, 2010

I don't have any great resources, but if you're looking to use a CMS like Wordpress and you're thinking about going into the template and changing it, you should look into the basics of PHP

Are you just looking for a really minimalistic, "static" website? You might be better off finding a template to base your work off of. Themeforest offers templates that are html/css (no backend CMS) that you can start with. There are also scads of free template resources out there.

Clean and simple and professional does not have to mean "rebuild the wheel". There are many horrible busy ugly templates out there, but there are also a number of frameworks on which to build.
posted by kellygrape at 10:15 AM on September 16, 2010

Ideally, it will need updating. Partly as a genuinely reflection of the new things s/he's done. Partly because never updated sites do poorly in search engine rankings. Unless you want to be doing it every time, that generally means using a CMS so that the client can do it themselves without technical knowledge. And that, I'm afraid, generally means knowing a little bit of other things too (PHP for example). I'm sure you can find a "software as a service" offering that gives you a working install of wordpress, or drupal, or whatever, but you'll probably still need a bit of (e.g.) Smarty to template it.

That may be biting off more than you can chew by next month. Perhaps forget I spoke for now, build a static site, and cross that bridge when you come to it.

As for the non-CMS building, I was going to give you the best CSS link ever, but it seems to no longer exist. D'oh! You can't go too far wrong with w3schools for the basics. Broadly, I recommend writing the HTML pages with zero styling (protip: use a css reset for really zero styling.) Write it in such a way that it makes the most amount of sense even in this form. (In terms of order of stuff on the page, marking up lists as lists even if they won't look like bullet points in the final design, giving elements ids like "contactinfo" rather than "upperbox", etc).

Then style it. I recommend working in Firefox, Chrome or Safari as you go, get it shipshape there, and then apply the inevitable fixes to stop IE from doing whatever batshit insane things it is doing, rather than doing it the opposite way around. It's much easier that way.

If you run into weird issues, you could spend about 8 months tearing your hair out trying to work out wtf is going on, and rewriting things in byzantine ways to avoid it. Or, you could master all the bugs and respective workarounds here, which I find account for a large majority of common IE WTFs. Often they are downright bizarre and if it's not your field you could spend forever wondering why a margin has doubled, for example, let alone how to fix it. Whereas once you have these down, you can just stick in the known workaround and move on. Or even avoid it in the first place.

Then add the "cool effects". I recommend jQuery, there are plugins for almost everything (carousels, lightboxes, fadey/animatey transitions, etc) which take very very little javascript expertise to get working. And what code you do (have to) write yourself, browser incompatibility is more or less a non-issue. Whereas writing raw javascript... don't even go there. (jQuery isn't the only game in town, of course, other people will have their favourite frameworks; I don't mean to suggest it is better than these, it's just what I know, and I can only speak of what I know).

If you progressively build each layer on the previous in this way (content, presentation, behaviour) you stand a reasonable chance of getting something which will still work -- perhaps not pretty and pixel perfect, but baseline functional -- for the person who has javascript switched off, uses a strange resolution mobile device, uses a screenreader, etc. Which in my eyes is the absolute bottom line of competent web development.

Not wanting to be too patronising or self-impressed, but web design in a pretty large field these days, with a lot of specialisms, and really Doing It Right isn't going to fit into a MeFi comment. People write books about this stuff after all. So the next person along can no doubt find objections to some of the stuff I've said - incompleteness, oversimplification, etc. Still, as far as I can boil down my bare essentials for Doing It Hopefully As Right As Possible In The Circumstances, this is it.
posted by Slyfen at 10:29 AM on September 16, 2010 [4 favorites]

I agree with slyfen.

I would also suggest sitting down and really mapping out what exactly your family member wants. I used to freelance a little and the first step I would take with the client was to get detailed written, and sketched, specs.

From there, mock everything up in photoshop and have your family member approve it. This will cut down on the amount of back and forth there is and the time you have to spend trying to figure out what it is that they want.

Then you can start coding. I would recommend, for your first time, just using html/css. If you don't have dreamweaver, there are plenty of free/shareware wysiwyg editors out there that will help you navigate the code.

You can also look around on this site and just use one of the already created sites and tweak it to his specifications.

I'm pretty rusty with code, but miss it like the dickens as I'm now in more of a technical support role.

If you need any help whatsoever with this, please don't hesitate to pm me.
posted by TheBones at 10:40 AM on September 16, 2010 [1 favorite]

I recently used wordpress to set up my own professional web site. I currently have the site hosted on wordpress.com, but it's possible (and in fact fairly easy) to host the page on another site if you can afford $20 a month or so. Wordpress was convenient because it's extremely easy to update content and there are a lot of good, free themes available.
posted by philosophygeek at 10:47 AM on September 16, 2010

While it's not yet ready to be entered into MeFi Projects - there are a few features and a lot more entries to add first - I would feel okay in suggesting my blog as a possible resource, in addition to the suggestions above (and in terms of other resources, I have an entire entry on valuable, professional and knowledgeable web development sites I would recomend).

Essentially I'm taking my entire course content (I teach a two-year web development course as part of a New Media diploma) and making it open courseware / Creative Commons. I started a year ago, and am keeping pace with the current students - so far I've covered (X)HTML and CSS, and have started on PHP. Hopefully the site will prove helpful.

I'd agree with Slyfen that the website you're thinking of will very likely need updating/correction/improvement over time. It's an area where the CMS really shines, in terms of allowing non web-developers to create and maintain their own sites. So, you have three choices, at least to me:
  1. Use a pre-formatted CMS template and theme and add content and photographs (fastest, cheapest, but least induvidual and satisfying, at least to me.)
  2. Brush up on HTML, CSS, and PHP, and learn how your chosen CMS system works, allowing you to customise it. Both this and the former option allow you to pass off the work of entering and altering content to your client.
  3. Brush up on HTML and CSS, build the site from scratch, but be prepared to do basic upkeep and content entry on the site for as long as it exists.
I hope this helps!
posted by Bora Horza Gobuchul at 11:14 AM on September 16, 2010 [1 favorite]

Please don't use Wix, they're Flash only sites, and as such really are not the way forward, even if they are free.

If you need a professional site, your family member is going to be reliant on it, and it needs to be done for the end of the month, then I would really recommend using TemplateMonster.

2 weeks just isn't long enough to become fluent in HTML and CSS, let alone making it look nice, unless you're already a designer of some sort.

The templates are about $60. Buy one, pick some nice photography from iStockphoto (starting from $1), bash it all together in an afternoon, and bam, you have a website that's better than 90% of the competition.

If you are eager to learn, then next time you can reverse-engineer the professional product, rather than starting from a blank sheet of paper.
posted by derbs at 11:18 AM on September 16, 2010

ps. Templatemonster link was supposed to be the music category
posted by derbs at 11:26 AM on September 16, 2010

I'd set up a Wordpress site and install an existing theme. There are thousands of them out there, many of them are extremely nice. Apart from that, using a CMS just makes a hell of a lot more sense.

If the theme is one you'll want to tweak, use a simple one that doesn't have a lot of javascripty effects. I'm convinced that it's easier to modify an existing theme that's kinda-sorta close to what you want than it is to build a theme from scratch—I've done both.

I recommend choosing a theme that uses a grid-based CSS framework like Blueprint or 960.gs: they impose a certain discipline on the design, and make a lot of design work a lot easier.

Set up a local development server using MAMP or WAMP (depending on whether you're using Mac or Windows) and work on your development theme while the standard theme is running on your production server.

Once you've got your theme tweaked and working the way you like, upload that and switch the site over to it. If you discover you've messed things up, you can switch back to the standard theme in a snap.
posted by adamrice at 11:30 AM on September 16, 2010

I'll recommend CSS Tricks again. His screencasts are particularly helpful, I think.
posted by backwards guitar at 12:04 PM on September 16, 2010 [1 favorite]

We've moved well beyond the point where someone with a little HTML and CSS can build a "professional" website. People (even web professionals) come to me all the time with their websites, and I'm often struck by how 2000-2005 they look. Often the culprit is the boxiness, but even little things like color matching and (especially!) typography can scream "AMATEUR!!" to any graphic professional.

This isn't a putdown! I'm a web professional, but not a designer, and wouldn't even THINK of trying to design my own site.

The best way to handle this is to:
1) Show the person lots and lots of free Wordpress templates (easily googled).
2) Have them pick one.
3) Use Wordpress + template to create the site. I recommend Dreamhost for hosting, with their 1-click Wordpress install.

Wordpress doesn't have to look like a blog - you can easily use Pages to make a simple, basic site with one of thousands of free templates designed by a graphic professionals.

As a bonus, your family member will be able to make changes and updates to it themselves, without needing HTML.

Also, if you want nice effects that degrade (mostly) gracefully, you'll want JQuery. It's mostly cut-and-paste.
posted by coolguymichael at 12:47 PM on September 16, 2010

If you're on a tight deadline, which I'd respectfully suggest that the end of next month is, I'd recommend you look into a CMS-ish DIY website builder:

Jimdo (where I work)
Weebly, Wix (though for previously mentioned reasons, you should avoid flash), Webs, Yola (formerly Synthasite), and Homestead is another one, though I haven't tested them in a while.

I'm not quite sure what you were getting at with
It would be nice to have some subtle but cool effects to really set this website apart from the rest (classical musicians are still catching up to the internet).
but I do keep a list of sites that catch my eye in the course of work-related stuff, so here's some ideas or at least some examples of what other musicians are doing with their sites:

a countertenor/choral director
a pianist
another pianist
a composer

Above all, the site should be functional -- easy to navigate, simple to find the information people are looking for. It's really easy to distracted by building in cool effects and tricks, but in the end people just want to find your contact info, see your CV, and maybe watch a video or listen to a recording of a performance.

Reiterating what other have said above: before you get too far, sit down with the family member you're building the site for and make sure you talk through how it should look, how it should be structured, etc. There's a lot of room for misunderstanding and miscommunication (not using the same visual language) in these kinds of projects... and you don't want to be back with another AskMe in a few weeks about how to gently offload this web development project you took on for a relative that's grown to eat your life. Also a good reason to use a CMS - you don't want to be stuck making routine updates.
posted by polexa at 1:13 PM on September 16, 2010

Agreed coolguymichael. I do web stuff for a living but I'm not a designer, and when circumstances dictate I pretend to be one, however much I can keep it clean and innoffensive, the results are never quite the same as a 'real' designer.

On the other hand, it's still fairly rare (in my experience) to find actual designers with a 'real' grip on the web. Nearly every psd I get has stuff that doesn't fit well with the medium. Gradients and overlaps which go from something you can do with 0-10kb of graphics to something required several 100kb of graphics if it's even truly possible. Layouts that fit their lorem ipsum beautifully, but lose their balance or break completely as soon as you plug longer/shorter/different copy in. And so on. Unless you're lucky enough to have both people rolled into one, you usually need a load of back-and-forth.

Anyway, wandering off topic, sorry.

I've noticed most replies being along the lines of where to find templates and such, whereas I answered from a presumption that you actually wanted to DIY it, even if that was "the hard way", for your own sake/learning/enjoyment. Possibly this was not a correct presumption, I don't know. If that's not the case, then I would certainly question the economics of DIY. Assuming this is a pretty standard-issue News | Bio/Resume/CV | Audio | Photos | Contact type of site, for a seasoned freelancer the build is 95% sticking together well-known components; once the assets/brief are all nailed down they could pretty much knock it out before breakfast. Given the number of people out there prepared to whip these sort of sites up for pretty small amounts, and assuming you make anything above minimum wage, considering the amount of time it'd take you and the relative quality of result... essentially, if you get down to it I'm not sure there's any point in you doing it yourself unless you actually want to.
posted by Slyfen at 1:40 PM on September 16, 2010

W3schools.com is a great way to learn how to code anything for the internet.

Orangeserve.com is a fantastic web host that is free, and offers unlimited space for your website and emails, as well as infinite bandwidth. A subdomain is included at no cost, but if you want to be more professional you should buy a domain of your own at GoDaddy.

GoDaddy.com shouldn't be expensive. Popular domain extensions like .com .net and .org should be around $10, and lesser known extensions like .info and .biz will be around $1. Sometimes you come across a domain being held by somebody for thousands of dollars, but your can always get something similar for cheap.

Webs.com is another free web host. You can dig through menus while clicking and dragging your content around the screen to create a good looking website. Sadly, it only comes with a little bit of space and bandwidth, but it's a good way to plan out the look and design of your site.

I hope this helps you!
posted by EatingCereal at 2:04 PM on September 16, 2010

i got out of coding as css was coming in. i found the html playground to be a fun and useful tool!
posted by Rube R. Nekker at 5:09 PM on September 16, 2010

oh ... scratch that. the attributes palette didn't work in either of my browsers, and it's kind of useless without it. :(
posted by Rube R. Nekker at 5:13 PM on September 16, 2010

Response by poster: Everyone, you've been extremely helpful. I appreciate you all taking the time to help me out.

I think I will try to build from scratch and move to a CMS in the future (for the sake of the client). The skills I learn from this endeavor will be very useful...

Thank you all for the resources and advice! I will be taking everything into consideration.
posted by jykmf at 9:38 PM on September 16, 2010

« Older My nissan maxima 98 is having a battery issue or...   |   Magazine cover concept help: financial literacy +... Newer »
This thread is closed to new comments.