You’ve been asked to design and develop a website? You’d better get a content management system(CMS). Your client will probably want to edit it when you hand them the keys. You’re also going to want to avoid cutting corners and play it safe with your code. The best way to test is with an actual server and actual browsers. Make sure you have the most common one’s installed (firefoxoperachromesafariie). A good rule of thumb is to only support 2 versions back. That’s right; don’t worry about IE6. If you are ever asked to support that browser, charge double — You’ll practically be making two websites.

So, lets assume you are building it with a CMS, I would suggest wordpress. It’s easy enough to set up and use on a basic level, but powerful and vast when you’re ready to start programming your own functionality. As with any CMS, you’re going to need to have ftp access to your web host as well as a basic understanding of databases. If you’re building in wordpress, it’s good to read through the codex. This site is an encyclopedia all about wordpress’s functions and languages. If you need to create a page that shows blog posts, it’ll tell you how to set it up. How about a page that returns the latest five uploads from a specific category? It’s all there.

That’s good info to have, but you’ve still got to come up with your own design. Try not to feel limited by how well you can code. There are a ton of resources across the web for building things like navigation menus, or image sliders. One of my favorite references is codedrops. If you’re looking to learn about best practices in the industry, look at alistapart.

Screen Shot 2013-10-15 at 10.38.43 AMimage from

As for the design; my best advice is to think big… and small… and in between. The new trend in web design is responsive layout. Essentially the same site but made to flex it’s layout into different screen sizes. A lot of developers are using twitter bootstrap these days. It’s a very well polished system for creating responsive scaffolding. It even includes psd and ai files with gridlines in place so that you can start developing a theme mockup that should fit seamlessly into the responsive grid system when you start coding. Unfortunately, it can be taxing to have to work against the default styles that they include (that is to say, you’ll spend more time getting rid of stuff you don’t need than actually building the site). If you want something a little more stripped down, look at skeleton grid. Alternatively, you could just start writing it without a pre-made grid system. No harm there, but the benefit of using a pre-baked system is that someone already wrote in all of the compatibility and responsive css for you. Another honorable mention goes to html5 boilerplate, though twitter’s bootstrap seems to be taking over as the best starting system to use.

You’re going to want to build it to be compatible with several browsers. To do that, utilize plugins like modernizrhtml5shiv, and/or normalize.css. Grid systems usually have the best one’s built in, so if you use one you won’t need to worry too much about this stuff.

Want to animate things? Jquery  is one of the more supported systems in use today.

What about SEO and social media? One of the more recent developments on the web was the Open Graph Protocol. This is a fancy way to say that you’ve got socially relevant information on your site. To give a more visual example: sites that have this get a thumbnail, title, and description (among other things) when shared on on sites like facebook. Site’s without it are just a text link. You’ll do better with SEO related things by simply creating relevant content on your pages. There are some tips and tricks here and there, but the truth of the matter is: Good content = high place in search results.

I’ve written all of this with the assumption that you would be designing and coding this masterpiece. Truth be told, it’s hard to switch gears when one sort of task requires creative thinking, and the other is based on math and logic. Either you’re a designer, or a developer. Very few people can juggle both tasks proficiently — of course, it’s not impossible (nothing is impossible).

Both kinds of people should at least have a basic understanding of the other’s job. Designers would benefit greatly from a simple understanding of html and css. Know the limitations of the code so that you don’t design something that’s insanely difficult to reproduce on a web page. Also, read this:

Seriously… read that…

As for Developers, the links above to alist apart and codedrops are a good place for you to start. Of course, you too would benefit from photoshopetiquette. Learn what you should expect from your designers.

That aught to cover the jist of it… I’ve been doing this whole design/developer thing for around 7 years in one form or another and I’ve still got a lot to learn. The best advice I can give is to take it in small doses. If you’re new to web design or development, don’t try to do all of this in a day. You will fail.


image from

Start with something simple, like this tutorial on codedrops. Go step by step; learn what does what and why. Spent time doing these simple tutorials. Don’t try to build a website from the ground up right away, instead develop your own icons, shapes, and imagery, build small animated menus, paralax scrollers, and collapsing divs — basically a bunch of experimental web pages. It may take months, but give it time and soon you’ll feel more confident in your code and design skills. Fast-forward another few months and you’ll be ready to learn some php and database related calls. Don’t stop there, you’ve come a long way. Dig into a CMS like wordpress, make your own custom template. Maybe develop your own plugin.

There’s a lot there; take your time. Baby steps!