In a recent project for which I was recruited, I was required to produce a website in a tight turnover of just a few days, as time was of the essence. Sure, challenge accepted. Making a website isn’t and shouldn’t be viewed as a big scary thing and I advocate that everyone should try their hands at some level of website development as least once. Do it for the achievement!

I’m writing this guide documenting the steps that I took with the intent of empowering more people to create beautiful websites and enrich the internet with design beauty, and content of course.

Use a theme, you don’t have to reinvent the wheel

While I certainly don’t want the internet to become an unoriginal blur of stock themes, there is equally no need to start from scratch. Extend a theme that is close to what you have in mind or work with a skeleton template. I leveraged my very own HTML5 Blogfolio theme which is designed for traditional header/menu/content/footer sites. The template files are already built for me and properly hooked into the WordPress API; it was mostly the CSS that I had to tailor to my needs.

Graphics, make sure that they are pretty

Everyone has had their fun in MS Paint but unless you’re confident of your artistic ability it’s really better to have your graphics done properly. Appearances counts! I make no bones about it, Krae (she’s fantastic) was pivotal in the layout and visual design.

Legacy support? IE I’m looking at you

While I don’t particularly like flogging a dead horse, the fact is that people still do use older browsers, notably IE8 on Window XP boxes. That’s ok, you can still get IE8 to work with HTML5 tags by using the HTML5shiv. If you need more feature detection & support for legacy browsers, Modernizr is another useful bundle to consider and their site offers a decent list of browser polyfills used for filling in the missing browser features.

Special effects with jQuery

If you’d like to add snazzy effects to your site, there are several good JavaScript libraries for that. I personally use jQuery and jQuery UI. The difference being that the former provides the base API for building your own custom features & special effects while the latter builds up on jQuery to provide a set of easily configurable “standardized” UI components found in modern websites. For the site, I wrote a custom profile slider effect that expands and focuses the content of the selected profile while minimizing aside the others.

Make it Responsive

The desktop + big screen isn’t going anywhere, but desktop traffic is accompanied now more than ever before with mobile and tablet traffic. We don’t want them to feel left out do we. Enter Responsive Web Design. For a simple site without fancy UI components, it is quite feasible to make the layout flow naturally to the size of the screen using only CSS. Use percentage for dimensions & positional units, use min-width & min-height for ensuring that content containers don’t become ridiculously small.

Of course, it’s often the case on small or large displays that you simply need to tweak the layout beyond proportional flow to make better use of the screen real-estate. CSS Tricks has a great guide on how to leverage CSS media queries to your advantage. IE8 and older is out of luck as it doesn’t recognize media queries but then again, IE8 doesn’t really run on cellphones and tablets. Nonetheless, Response.js can painlessly polyfill media queries in legacy IE if required.

I’d like to mention the trendy way of Responsively displaying the navigational menu as an expanding nested menu with Mean Menu distinctly recognized by this 3 bar icon. If your menu is represented by the traditional nested list structure, this solution will mesh right in.

Translations, mais oui

To serve multilingual content, you must first ensure that your theme has been properly internationalized and localized. To manage translations for the actual site content, your pages and posts, the WPML plugin works really well. It isn’t free but if you’re serious about multilingual sites it’s worth its weight in gold as it manages translations for not just post/page content but also menus and taxonomies (tags, categories, etc). Technically, it’s able to translate all custom post types and taxonomies.

An added bonus, WPML’s String Translation module is handy for creating localized theme translations from within the WordPress admin dashboard if you don’t feel inclined to extracting and generating your own string locales. Furthermore, should you choose to part ways with WPML, your content remains completely intact and accessible as WPML creates distinct internal post objects for each translation and associates them through a management table.

Easy performance tweaks

Performance is a hot topic and there is a steady flow of articles on the latest and greatest techniques, but here are some simple ones that can and should be utilized

• Optimize your images for the web. Photoshop has a feature for this purpose but there are alternative free options for optimizing your images as well.
• Static content doesn’t need to be generated on every page request – spare your server with a caching layer. I’ve been quite please with the Hypercache plugin for WordPress.
• Minify your CSS and JS resources into single files to reduce HTTP request overhead. Better WordPress Minify plugin does a good job in this department.

And there you have it, a clear-cut guide to getting a website out instead of your hair.