Mozak Design Blog

Robust CSS Website Design

I have seen numerous post by designers struggling to transition into the world of CSS from table based design. One book I have found extremely useful is “Bulletproof Web Design” by Dan Cederholm.

This is one of the first books I picked up when I was learning and one I still grab every now and then. It is readable, clear, and thorough.

Topics covered by this book include: Flexible Text, Scalable Navigation, Elastic & Fluid Layouts, and Creating Floats.

While each of these topics warrants it’s own blog (and hence its own chapter in the book) I want to highlight how each topic makes for a high quality final web design.

Flexible Text:

• This is the concept of using relative font sizing instead of hard coding in a font size. The author gives a great example of a website for eyeglasses where the font was hard coded at 11px. While this might work for someone with healthy eyes, someone searching for eyeglasses might prefer to have control of setting the default size to something larger. By coding text size in relatives, this allows users the ability to control the overall font size of the site. The design controls the relative font sizing of headers and content.

Scalable Navigation

• This next topic goes hand in hand with flexiable text. Now that the font size can change, the website needs to behave well with these shrinking and growing letters. Scalable navigation allows for this. Instead of having fixed size images for your navigation. Buttons can be created using thin images slices that can be arrayed. Link button names can then be written as text with the graphic slices arrayed as needed behind them. This not only saves design time & graphic maintenance it make the website faster and more accessible to search engines.

Elastic & Fluid Layouts

• This chapter provides a great discussion on the benefit of layouts without tables. Furthermore, it explains how to utilize your viewer screen size by defined sections as percentages of the entire space. This enables websites to present well on both a wide and narrow screen. It also enable the ability to have the html content order different from the website presentation order. In other words you can place higher quality content at the beginning of your html even if it is not the first item displayed on the website.

Creating Floats

• Floats is a powerful part of table free web design. However, with all the wonderful browsers out there that each seem to interpret directions differently getting things to work as desired can be tricky. This chapter does a great job explaining how to achieve cross browser compatibility.

These are just some of the topic covered in this book.

I highly recommend this book to anyone looking to refine their web design skills. It will take you from creating an okay site to building a high quality site you will be proud of.

The best tip for a great WordPress Web Design

When it comes to designing a business website, there is really only one design tip I ask my clients to consider. And while it might not increase traffic by the thousands, it does make my clients – many are first-time business owners – feel proud.

Here’s my best tip: Design your professional website for where you want your business to be in five years, not today. This allows you to create a platform that grows along with your business, not one that you outgrow.

It’s a common-sense approach, but one I had to experience myself. Back when I started Mozak Design in 2008, I decided I wanted my site to reflect the design skills I’d have in 5 years – not where I was that day. So I hired a graphic designer to help me appeal to my target market – small business owners looking for a professional WordPress website.

Since that time, I’ve been able to update my website so it keeps looking like my business vision five years from now. This is an important point: You don’t want to launch your website and leave it be. You want to keep revamping your professional website, moving it forward as you build your business.

When your website looks like “business success” in five years, it will help keep you pushing forward. Invest in a professionally designed business website, and you will have a virtual business card that you’ll be proud to promote. And with the WordPress platform, it will be easy for you to update the content, make special offers, and attract more visitors.

All about layout

Good design and your WordPress business website

Once you decide to use WordPress for your business website, you’ve solved a big part of the “what makes good design” equation.

The next step is to design a layout that is simple and streamlined. You can use an existing WordPress theme (sometimes called a template) or have a custom one designed by a web designer.

A well-designed WordPress business website should:

1. Connect with visitors – make them feel comfortable on the page

2. Present information in a way that guides the eye

3. Help the user find information quickly and easily

All good layouts follow a basic design principle: Every page should guide the reader’s eye left-to-right, top-to-bottom. The call-to-action – sign up for a newsletter, call, or send an email – should be visible and easily accomplished. Good layouts are also intuitive: This means first-time visitors should quickly understand what your site is selling, and what action they need to take.

Whether it’s your first professional website or you are updating an existing one, WordPress themes are ideal for business owners in any industry. Basic themes can be further customized so your website is as unique as you are.

Be predictable: A business website should be easy to scan, with key information placed in predictable locations.

Why is predictability important?

You might think – “Because I am different, I want my website to be different.”

But that’s not a good design decision. Over the years, internet users have come to expect that website pages should look a certain way. When people visit your site for the first time, they orient themselves by looking at the main navigation bar and skimming the content on the page.

If your layout is dramatically different, the user becomes frustrated and leaves the site.

Pair predictability with the intent of your website: Think of your first-time visitors: What is the first impression you want to create? What kind of experience do you want them to have? Match that goal with a WordPress theme – either basic or customized – and you’ll soon have a business website that generates results.