Think no one is trying to hack into your WordPress site? Think again. When I completed the redesign of this site around May 1st, I installed a plugin called “Limit Login Attempts”. From the plugin page:

“By default WordPress allows unlimited login attempts either through the login page or by sending special cookies. This allows passwords (or hashes) to be brute-force cracked with relative ease.

Limit Login Attempts blocks an Internet address from making further attempts after a specified limit on retries is reached, making a brute-force attack difficult or impossible.”

I set the options to lockout the IP address of the user attempting to log in after 4 failed attempts. In 9 weeks this plugin has lockout out 2,992 attempted log ins. That’s almost 48 per day. I’m guessing since my site gets a relatively small amount of traffic compared to a lot of sites, that this is well below the average for hacking attempts.

The bottom line is, if my little site is getting attacked this frequently, it’s safe to say any WordPress installation is getting attacked regularly. If you do not take measures to prevent it, it’s only a matter of time before your site gets hacked.

My next post will discuss some measures you can take to protect your WordPress site from being hacked.

The post Protecting your WordPress site against hackers appeared first on Blue Hat Design.

However, there are situations where you want your forms to be a little more fancy. In these cases, the solution is to use JavaScript to hide the default form element and replace it with a styled version using substitute markup such as an unordered list. Enter Chosen by Harvest. This little plug-in will take a standard list box with a single class and make it awesome.

As an example, it can turn this:

into this:

Chosen features support for standard select elements, multiple select, select with option groups, default text, no results text, change and update events and more. If you want to make your select boxes look awesome while improving their user-friendliness, take a look at Chosen.

The post Chosen- a JavaScript plug-in for styling select boxes appeared first on Blue Hat Design.

I’m often asked about the process I use for designing web sites. If you are a potential client, hopefully this will give you some insight into how I work and what you can expect during the process. If you are new to web design, this should serve as a template for your own procedure. Each designer’s approach will be different. There is no one, best way.

It’s tempting for a designer to jump right into Photoshop and start creating a visual design comp. The truth is, the creative process starts long before actually putting color to pixels. Following an established web design method will dramatically increase efficiency and will help the client understand what is taking place and what to expect at each phase of the project. One of the major advantages of this process is that it gets the client involved early and keeps them involved throughout the project.

Learning

The first phase of any web design project is all about discovery. This is the most important step in the process. Before any designing takes place, it’s crucial that you learn as much as you can about the company that the site is being created for.

A good way to start this process is to use a creative brief.  The brief is a series of questions, the answers to which outline the major goals of the project. It can be as simple or as detailed as you wish, but it’s important to get a full understanding of the project scope. I generally ask these questions in a face to face meeting, but many designers provide a questionnaire on their web site that a potential client can fill out and submit.

Whatever method you use, you’ll want to know at the very least:

• What is the personality of the company? This includes branding characteristics and style. (If the company were a person, would it be formal, elegant, casual, humorous, etc.)
• What are the primary and secondary business goals of the site?
  • Why do you need a web site in the first place? This might seem obvious, but it’s important that the purpose of the site is clearly laid out.
  • If this is a redesign, where is the current site failing to fulfill business goals?
• Who is the target audience?
• What are the tasks that site visitors will be expected to accomplish?
• I like to have the client provide a list of several web sites that have a look and feel or features that coincide with their vision for the site.

Planning

In the learning phase, we’ve laid out a series of problems. Our task now is to plan how we are going to solve these problems.

For me, the planning phase starts and ends with content. It’s surprising to me how often content is almost an afterthought. Every aspect of the planning, designing, development and maintenance of your web site revolves around your content. It’s important to establish a detailed site map, or outline of the content architecture.

Card Sorting

A great way to go about this is through a technique called card sorting. You jot down each main content concept, page, interactive element, etc. on a 3×5 index card. Once you have a stack of cards, you sort them into related piles. The ideal situation is to have several potential users complete the task of sorting  the cards so you get an idea of how users see the relationships within the content elements. However, even if you decide not to perform an actual test, this method is a great way of visualizing your content and it’s very easy to move pieces around until you are satisfied.

Once the content structure is established, you’ll need to decide what design elements will appear on the home page. Here, you’ll want to take into consideration the  business goals for the site. A discussion of design theory is beyond the scope of this article, but suffice it to say, you should organize the remaining elements in descending order of importance so that the main call to action is the most noticeable element and so on.

Wire Frame

A wire frame is simply a sketch of the layout of a web page. It can be as simple as a scribble in a napkin, or as fancy as you want to make it. Many designers use software such as Fireworks (sadly discontinued now) or OmniGraffle for creating wire frames. I usually use good old pencil and paper (are you seeing a pattern here?).  Typically, you will have at the least, two wire frames. One for the homepage and one for the interior pages.

The wire frame is gray scale and contains no actual design elements. It simply shows “what goes where”.

Visual Design

Mood Boards

A mood board is a quickly thrown together collage of photos, colors, typography elements, scraps torn from magazines, etc. that together, give an overall feel for the visual direction of a design. They contain no structural elements and can be as organized or as loose as the project demands.  They are intended to invoke an immediate emotional response. Typically, a client will glance at three mood boards and immediately point to one of them and that’s the one I like.

Design Comp

Now that we’ve got the content and the structure for the site and a good idea of the general look and feel we are after, we can finally open Photoshop and get started on the fun part design comp. Because we took the time to organize the content and create wire frames, the job of creating the design comp will be much easier.

When I first started designing web sites, I would create two or three design comps and present them to the client so that they could choose the one they liked. This often led to a painful revision process that would often include the client choosing parts from each of the comps and attempting to combine elements from each. This “patchwork” design would invariably be weaker than a single, focused design would be.  I have found that if I spend time on content, structure, mood and layout first, the design comp almost completes itself. There are usually very few revisions.

Development

Front End

The front end development of the site involves creating the visual presentation of the web site. This involves:

• Markup – The HTML documents that are the structural foundation of a web site.
• Style – The cascading style sheets (CSS) that control the layout and formatting of the pages. This is the look and feel.
• Cross-browser and cross-device compatibility – These days, web content is being viewed on an ever-expanding variety of devices using various software. The goal of this process is to present the content of the site in such a way that it is easily viewable regardless of the device in use.
• Accessibility – Visitors accessing your web sites are often hampered by some type of disability. These can include visual, motor or cognitive disabilities, but also any situation where there is some barrier to the desktop computer experience that most of us have become accustomed to. Following W3C standards helps to ensure that the web content is accessible regardless of the method of access.
• Usability – Simply put, how easy is it to use the web site. Depending on budget and complexity of a site, usability testing is sometimes employed to ensure that the site is easy to navigate and that visitors can efficiently complete the objectives that they desire.
• Performance – Web site visitors are not patient. It’s crucial that the HTML, CSS, JavaScript be as efficient as possible, images are optimized and the server environment is tuned properly so that the site is as fast as it can be. This is becoming more important as the percentage of web site visitors using devices on 3g data networks increases.

Back End

While the front end is the part of the site that the visitor interacts with, the back end has to do with how the web site responds to the information that the visitor provides. This includes the server, the application and the database. Content management systems such as WordPress provide both front end and back end functionality.

Testing

This is an area that often gets overlooked. Every aspect of a web site implementation needs to be thoroughly tested. Much of this can be done by the designer, developer and the site-owner, but getting users involved will almost always spotlight areas that those involved in the creative process never considered. This doesn’t have to be a complicated, expensive procedure.

Maintenance

A web site is never really finished. Most businesses are in an almost constant state of change and their web sites must reflect those changes in order to stay current. Businesses today rely on information and communication more than ever before and company web sites are often the portal for much of this communication.

In other words your web site will need to be maintained and updated regularly. Many companies offer maintenance contracts where the client pays so much per month to have updates done within certain limits. I have always felt that this type of agreement heavily favors the web designer and the client ends up paying much more than they would if they were simply paying an hourly fee for updates.

Following this web design procedure will ensure that your project is properly planned and efficiently executed. It will  help keep the client involved in the project from its early stages, allowing them to have some control in the process. And by encouraging you to create a workable plan and stay focused on the business objectives of the site, this process can save you hours of time.

The post A Six-step web design process appeared first on Blue Hat Design.

The post Case Study – Typography Design Patterns – Smashing Magazine appeared first on Blue Hat Design.

You may have noticed that things look a little different around here. A reworking of the structure and content of this site was long overdue.

In the process of redesigning, I made some profound changes to the content structure. The focus of the design is now much more heavily on the blog and less on Blue Hat Design as a web design company. Don’t get me wrong, I’m as focused as ever on the design company. However, I’m one guy (plus occasionally one of several amazing local designers and developers) and when someone hires Blue Hat Design, they’re hiring me. So one of the goals for the redesign is to create a much more cohesive and personal connection between myself, my clients and the web design community.

I made an effort to strip away a lot of the unnecessary marketing stuff on my site and reduce it to just the important few components with a strong emphasis on the text content. So a one-column layout makes sense in this case. I find it refreshing to read text without a lot of distracting elements in the margins.  In terms of responsive design, it’s a pretty simple case. It allows the font to be nice and large on wider screens without extending the lines to an uncomfortable length. And it should be comfortably readable on (hopefully) any device. That’s the pragmatic part. The other bit is my ongoing crush on the Bliss font family.

In any case, I want the site to be more personal- more of a conversation between myself, fellow designers and web site owners. It’s an experiment on several levels.  I’m hoping that my clients and other designers will find value here and also that the site will effectively represent my skills. I welcome any feedback you might have.

The post (Re)design appeared first on Blue Hat Design.

.header h1 {
    background-image: url("/images/logo.jpg");
    background-repeat: no-repeat;
    position: relative;
    text-indent: -30000px;
    top: 56px;
    display: block;
}

The purpose of this is technique is that the site visitors would see the beautiful logo, while the search engines would read a standard H1 tag with the site title text.

This is not considered a best practice because search engines do not look kindly on hiding text in order to game the system. As is almost always the case, it’s best to strive for transparency and let your content speak for itself. The logo is an important part of any company’s business web site and the search engines appreciate this.

The solution is to use an image with alt text which displays the site title:

<header role="banner">
<a href="#">
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>

Here is a quick Youtube video from GoogleWebmasterHelp that explains this.

I’m now in the process of going back through many of my sites and updating logos to use this more search-friendly method.

The post WordPress SEO best practices for logos appeared first on Blue Hat Design.

This article was originally published in 2010. I’ve updated it somewhat and re-published.

Mood boards are a great way for a designer to get their client actively involved in the process early-on in a web project. This allows the client to feel that they are being included and kept in the loop. And it gives them a way to participate in the design process.

I am a fairly linear person, (especially considering that I’m a designer). When I first started designing, I would want to jump in on a new design project, open Photoshop and bang out the design template straight away. I had a pretty good idea up front what would work in HTML/CSS and what wouldn’t, so I usually felt confident that I could come up with a good, usable design on the first couple of attempts. This approach worked well for me for the most part, for several years.

There was always that inevitable moment however, when I was finished with the draft of the template and ready to post it for the client. I would invariably think to myself, “What if they don’t like it? What if it’s not what they had in mind? Will I have to re-do this whole thing from scratch? Should I defend it? (I am the designer after all.)” At this point, I was already far enough along in the prototyping process that starting over would have been difficult.

I realize now that by keeping the client out of the process between the initial meeting and the reveal of the first comp, I was really doing both of us a disservice. The client potentially felt left out at this point and if the design was a departure from their initial vision, it could shake their confidence in me as a designer. It also meant that I was ignoring some potentially great creative input from the client.

I have always tried, in the early stages of a project, to get as much input as I can from the client about the look and feel of a project, asking about other sites that they like or don’t like, talking about colors, logos, etc. But I’ve come to realize that most clients don’t have a clear vision of what they want from the beginning. It’s all too common to spend hours on a finished Photoshop comp only to have the client realize that it’s not what they want (even though they may not have known what they wanted in the beginning).

A mood board is a quickly thrown together collage of photos, colors, typography elements, scraps torn from magazines, etc. that together, give an overall feel for the visual direction of a design.

Mood boards accomplish several things all at once:

• They are a useful tool for the designer to very quickly put down visual ideas for the design.
• They separate the overall “mood” of the design from the interface elements and content. This effectively removes potential distractions for the client at this early stage.
• They allow the client to give creative input very early in the process, thereby avoiding back-tracking after the design comps are viewed.
• Mood boards speed up the visual prototyping process because the style has already been established.

I will definitely be including mood boards in my methodology for all future design projects.

The post How mood boards can save you time, and your clients frustration. appeared first on Blue Hat Design.

I also occasionally write about web design, WordPress, photography, owning and/or running a web site and whatever else strikes me as important or helpful.

The post Hi. appeared first on Blue Hat Design.