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.

Designing for Your Ideal Customer

Is it bringing the you the business your need?

So, who are your customers? This may seem like a silly question. However, I do not want you to focus on the breath of customers your serve. Instead, consider the ideal customer you want to reach. This is who you want to design your wordpress website for.

Imagine your perfect customer just walk through the door. Describe them:

• Who are they?
• Why are they coming to you today?
• How will you solve their issue?

Once you know who your ideal client is, you can design your wordpress website to serve them.

7 Reasons to Choose WordPress for Your Website

If you’re ready to create your business website, “how” you build it – what software platform you choose – is one of the biggest decisions you’ll make.

As of Sept. 2009, 202 million websites worldwide used WordPress, making it the most popular blog software in use today. WordPress is a great tool for small business owners. It is versatile, free, and easy to use.

Here are 7 reasons why I recommend it:

1. WordPress is versatile. It meets the needs of start-up businesses and seasoned pros. If you just want a blog, WordPress delivers. If you want an easy-to-use professional website, choose WordPress for its type-and-publish simplicity. And if you want both a business website and a blog, there is simply no better program available today.
2. WordPress is free. You don’t have to purchase the software. The basic themes (and there are plenty to choose from) are free. Most plug-ins (software tools that help the site operate more efficiently) are free. Online resources, including blogs and forums, are also free: This means it costs you nothing to become proficient with WordPress.
3. WordPress is easy to customize. Begin with a basic theme, and you can change the colors, layout, theme elements, and more. You can also create a completely unique theme, one that is as individual as you are. This part isn’t free – but by leveraging an existing theme it is affordable.
4. WordPress is all about “WYSIWG” – what you see is what you get. That means updating your content (something you have to do often) is easy. You type, test the page, and go live. This is also called CMS – content management system – and no one makes it easier to manage your words than WordPress.
5. WordPress is a global solution. That means it is designed to work on every browser, in almost every country, in almost every language. There’s peace of mind in knowing that your business website can do its job – selling you – everyplace it goes.
6. WordPress works with Social Media. This means Twitter, Facebook, LinkedIn, and the other social media tools, all work seamlessly on your WordPress business website.

WordPress grows with you. As your business evolves, so will your website. WordPress makes it easy to update everything from your theme, logo, color scheme, to page layout. It’s a snap to add or delete pages. When you’re ready to add a blog, offer a free ebook, or build a mailing list, you don’t have to change software programs.

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.

Maximizing your WordPress Blog’s Marketing Effectiveness

Is your wordpress blog integrated with your website?

By this I mean, is the blog built into the website so it feels like any other page is the site. If it is not, you are missing a valuable opportunity to maximize your blogs impact on your business.

To understand why, let’s look at how traffic flows to your site. Typically, web traffic that goes to your homepage reflects someone who either knows of your business by name or is looking for a specific product or service. Your wordpress blog on the other hand tends to draw traffic based on an interest in a topic or a solution to a problem. In both cases they are each bringing new visitors to your business. What is missed by not integrating your wordpress blog seamlessly with your website is the cross marketing that can occur.

A new client may discover your business by searching for a service you provide. Yet, if you have not been recommended to them, how can you instill confidence that you are an expert? Likewise, a client may have Googled a topic you discussed at length in a blog post, yet how are they to your you offer services as well?

By integrating the two; your website and your wordpress blog you get the best of both worlds. I potential client who lands on your site can see you as an expert and build his trust in you through your business’ blog. Likewise, someone who happens to find your blog will notice that you are a business and offer relevant services. By having the two pieces presented the same way they work together to showcase your business.

Plugins In Review: Login LockDown

When you have a WordPress blog, one of the problems has always been hackers. While I have never had the displeasure of having my website hacked, I do know those who have. Of course, the default username ‘admin’ does not help with this. Through trial and error, hackers can get into your dashboard and have their way with whatever they want. The Login Lockdown plug in is an effort to stop anyone from entering your WordPress website without permission.

The plugin itself is pretty straightforward. You install it pretty much like any other WordPress plug in by uploading the file to the plug in directory of your website. Activate the plug in after installation and you are protected. However, there is a little bit of customizing you can do. Through the options panel you can set the number of failed attempts and the length of time the person is locked out of your blog. This is a good thing just in case you forget your password.

One of the great things about this WordPress plugin is that it also captures the IP addresses of those failed log in attempts. This way you can see who is trying to access your blog!

Plugins In Review: Redirection

Picture this, a potential client is searching on Google and finds a link to your site. They click on it and … yikes … a 404 page not found error! How embarassing …

One of the more useful WordPress Plugins that I have been using on my WordPress Website is something called Redirection. This handy little plugin helps to keep my site navigation clean and useful. Being highly configurable, Redirection provides many different options to help you keep your website navigation in check.

There are two specific cases when I turn to this plugin.

• First, in the event of a page url change or removal.
• Second, if I want to add an external website as a link in my navigation bar.

In the case of the first application, Redirection prevents visitor loss due to “page not found” errors (404s).  Instead, this plug in will redirect visitors to a specific page you select when the invalid URL is requested.

Additionally, Redirection tracks all “page not found” errors that occur on your site. This is important as it tells you exactly which URLs bring people to your site resulted in a 404.

The second application where I find Redirection comes in handy is the addition of and external site to my navigation. This comes in handy if something like a “calendar”, “event registration” or “homepage” exist on another site. To add these items to my navigation I simply create a page with the name I want to show up in my navigation. I then use Redirection to send visitors to the external URL I want when they click on the page name I created. It really is that easy.

Redirection is one of those gems of a WordPress plugin that helps you gain more control over where your traffic goes because of errors. Installation is quite easy, and works with WordPress 2.6 and higher.

Check out my video below to see how to install and use the plugin Redirection. (coming soon)

Good Copy Tip #3: Linking within your website

One opportunity that is often missed is linking to internal pages within your website.

This is valuable in several ways:

1. It enables easier creation of scannable pages.
2. It creates Google optimized, topic specific, pages.
3. It allows you to guide readers into older blog posts.

By linking deeper into your website you can provide a readers with simple lists that they can scan; with the option to learn more on that topic if they follow the link. In addition, linking within your website allows you a way to continue using older posts in your blog. Most blog posts are not looked at once they are about 5 posts old. By guiding readers to older posts and series you have written, you are able to maximize your imvestment in them.

Finally, linking deeper into your site helps to guide your guest through your site to the information that interest them the most. This is crucial as web surfers have little patience hunting for what they are looking for.

Good Copy Tip #1: It’s not about you

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

I often see website homepage text that reads more like an “About Us” page. While the history of your business and all the services you provide have their place in; make sure the homepage is engaging to your viewer. Speak to them. Why have they sought out your business? What needs do they have? What solutions to you offer?

By writing content that speaks to clients on an emotional level you can connect with them. If they feel understood then they will think … Wow, this business gets me – I’d like to work with them.