Daniel Hughes

Best Link Strategies

Daniel — Fri, 18 Feb 2011 10:27:29 +0000

CLICK HERE. Have you seen this as a button for websites. Is this descriptive enough? What is wrong with this method? For the most part it lacks originality and just seems like the designer gave up on a linking strategy. Let’s take a look at some of the strategies that will equip you to design and code with usability in mind. This post will cover some of the best practices when it comes to links. Some of the newer practices that are cropping up on the scene aren’t necessarily the ideal method and we will discuss some bad habits that will be reminders for some of you.

Scan-ability
One important thing to remember with content is that users scan your content. This isn’t anything new but we need to realize this and know that this transfers to links as well. How this translates is that the links need to be scannable; just link scanning the content. For example, if your business is named Shark Boards and you have a list of links in which you use shark boards as the beginning for each link, this isn’t easily scanned by the user as they have to scan and read through every “sharkboards” to find where or what the link actually is.

www.sharkboards.com/audio
www.sharkboards.com/archive
www.sharkboards.com/video
www.sharkboards.com/morelinks

Just imagine if the name of the URL is longer than Shark Boards and you can see how that can be a hindrance to usability.

Generic Links
This was a poor practice that just took off and everyone used and that is the “click here” button. To this day many people choose to use this and it is not a valid choice when trying to decide what to use for your buttons or links. You should use meaningful words that tell the user what the link is for. So rather than “click here” you could use “Shark Board Items” or “Don’t forget to view our very own Shark Board surfers.

Color me Links
This one is a bit more open for discussion but let me just say reserve blue for unvisited links and a less saturated color for visited links. The hue blue is synonymous for links and great for usability; however, some designers work with a color pallet and they don’t want that blue so they change it. In this case I would definitely use an underline with this method to show that the colored text is a link as that is also a widely understood method for distinguishing links. This is done quite simply so let me show you how to do this.

Link states and some prep work

When the CSS is embedded in the page and not an external style sheet it resides in the .
The colors are irrelevant and you determine what these are but the order is what is important.
The /* */ is how you comment the CSS and in no way affects the code.
In the href=”URL” you place the destination such as http://www.cre8vedesign.com/blog.
The Target _blank tells the link to open a separate new page.
The “This is a link” is the text that you enter which displays; this doesn’t have to match the link.

So, my long URL http://www.cre8vedesign.com/blog doesn’t have to be seen by the user because in between the > and the < you enter the text of what you want the user to see. All of this together will give you a great link and the users will be able to discern a link and determine when the link has been visited.

a:link – a normal, unvisited link
a:visited – a link the user has visited
a:hover – a link when the user mouses over it
a:active – a link the moment it is clicked

Remember: that a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective and a:active MUST come after a:hover in the CSS definition in order to be effective(w3schools).


 
 
 
 
 This is a link

Some additional thoughts on the color of links is in regards to the unvisited state. Black is a poor choice due to usability issues as body copy is black the majority of the time or at least understood as body copy and it would be quite easy to overlook. Some sites recently have been using gray as the visited link color and this is an example of not following new trends just to do it because gray is known as something being unavailable.

Home Products Links Contact Us
This used to be a common practice which is using the word links as the menu text for the links page. This falls under the same category as using “click here” for a link. Instead name it according to what the links are for or what they are pointing to.

Linking non-web pages
If your linking to pdf files, audio, video or other sources that aren’t a web page you need to define this in some way. Audio icons, video icons and so forth need to be implemented so the user isn’t surprised or their browser crashes do to the resources that are needed for the computer if they happen to be on a dial up Internet or have 2 gigs of ram. If they see the video icon they would avoid it from the start and not have this unfortunate experience.

Case Studies
http://www.cnn.com/
If you notice some of their images are truly images but what if the videos lack the common play icon and the user thought the video was a simple image; this could effect that users experience. CNN does well by simply placing a small play button in the corner of the images that are video content.

http://www.foxnews.com/

Depending on when you read this and view the site it may vary; but, Fox News commonly will have text under an image that is a hyper link and they will often have a video icon such as a small camcorder to represent that the link is a video. This is a great example of linking properly.

What “best” practices to you adhere to when working with links?

Regards

Share/Bookmark

6 Steps to Deciding on Content

Daniel — Wed, 16 Feb 2011 00:49:55 +0000

So in this series I was reviewing some of my notes from a class I had taken. I thought I would re-organize the notes and post them as a series on visual design. I will provide links to sources and resources for you to check out that will be a great supplement. My notes were taken from a class that used the book Site-Seeing: A Visual Approach to Web Usability as one of the textbooks. This is a lengthy post but I believe it contains some great information to help you with your designs and clients.

Step 1: We must learn to think before we speak

This simply means that we have to think about images, text, organization, interaction, motion, video, and more. We need to work these things flawlessly together to create amazing presentations. Wroblewski states, “Speaking ‘web’ means thoroughly thinking through the organization and interaction of a Web site, and how it is presented to an audience (Wroblewski).” To successfully communicate over the web we have to merely communicate well. Does that seem confusing; basically, even though it is different to communicate over the web than other forms of communication, it is still communication and follows some of the same rules.

Step 2: Knowing what to say

Some communication can be interpreted by two different people two different ways; so it is vital to recognize this to be successful at speaking “web.”

So, how do we communicate well?

How do we make sure user #1 and user #2 both receive the same message and that what they see or hear is our planned message? Sometimes just thinking through the most important message that you want to get across and how to effectively articulate often does the trick. Basically, we have to make sure we are conscious of what we are saying and to whom we are saying it to.

Who is saying what to whom?

Step 3: Saying it in our new “web” language

There is a message whether we are aware of it or not. Every web page and web site has a message; sometimes these are deliberate messages and other times they are not. This message is communicated by imagery, content, colors, sounds and many of the items listed already in step 1. If we don’t give enough thought to what were “saying” then sometimes our message can come across mistaken.

A simple example: Let’s say your favorite color is red and so you design your site strongly in red. What are you communicating? Does the user know it’s your favorite color? According to Color Wheel Pro website red is the color of fire and blood; so it’s often associated by rage, war, danger, strength, power, love and determination (http://www.color-wheel-pro.com/color-meaning.html). Now what if this was for your new family Diner; did you want to portray danger, war, rage or love? The intended message needs to match the users interpretation of what we are saying. We need to make sure that when user #1 and #2 visit your site, they interpret your message the same way. In order for the user to be able to use the site it has to be understood.

Step 4: Effective communication
We can ask several questions that can help us understand our sites goals and mission.
(Some questions came from usability.gov)

1. Who are the users of your Web site and what are their tasks and goals?

2. What information and functions do your users need, and in what form do they need it?

3. What hardware and software will the majority of your users use to access your site?

4. Who is your audience?

5. How would you describe the site?

6. From an organization’s viewpoint?

7. From a user’s viewpoint?

8. Why are they coming to your site?

9. How do users think your Web site should work and what are their experience levels with the Web site?

When talking goals we need to make sure these are clear goals. Instead of saying my client needs a cool menu; we could say, we need an interactive menu that never loses the user or leads them to a dead end. Just make sure your goals and tasks and other answers to your usability questions are clearly defined.

Step 5: Getting to know you client

Before we start designing for a client we need to spend some time educating ourselves with the client. What do they do, what do they need and what do they expect of you? Before we speak for the client we have to be familiar with the client. This can be done by analyzing their brochures, examining their business plan, trying their products or research their industry (I find this one to be a great way to learn about what you need to do).

Step 6: Mission statement

Now that you’re entirely overwhelmed with all these steps and information we need to put it together. This allows you to refer back to it to keep you on track. Write a mission statement in response to your usability questions.

Sources:

http://www.usability.gov/

http://www.color-wheel-pro.com/color-meaning.html

Site-Seeing: A Visual Approach to Web Usability by Luke Wroblewski (Highly recommend this book)

Share/Bookmark

Introduction to Dreamweaver CS4

Daniel — Tue, 15 Feb 2011 09:21:07 +0000

I will be posting some Dreamweaver tutorials for the beginner. There are many tutorials out there, though they provide good content, I am noticing with the response of many of you out there that you get left in the dust with advance work mixed in with beginner content. Many are just frustrated as they don’t know what panels are and keyboard shortcuts and many other things that others instinctively know and just move entirely to fast for someone who just opened Adobe Dreamweaver and wants to start ant square one. These tutorials are for you.

To start I am posting this image for reference; so when I say that I am in the property inspector you can reference this image to see where I am at and it helps you remember where things are without referencing th image. Make sure you click the image to view the High Resolution form so you can see clearly the marked up information.

Application Bar: This contains all of the DW menus (Windows) and it includes 4 menus that are shared by Mac and Win users. It also has the search field and workspace switch drop down menu.

Workspace Dropdown: Here you can choose between workspace layouts. You can also create custom layouts to suit your needs or reset your current layout.

Search for Help: You can enter your search term and this will search and find results on the internet. If your not connected there are still built in search features so you will still get some help with your topic.

Document Toolbar: There are three options here and they include design view, split code, and code view. Design view is for working with your site in a What You See Is What You Get (WYSIWYG). Split code will allow you to work on the design view and the code view by splitting your screen in half. Code view is similar to using a text editor in that you manually type the code in to get your results.

Additionally you can preview your page in the Document Toolbar, check your code for mistakes and work with a remote server.

Document Window: This is your main area in which you see your content whether its in design view or code view; you simply use this for your editing.

Tag Selector: This is a great way to see where your at in your site by the mouse cursor. It is the document tree that reveals which page elements, ID or class you have selected. This is great in combination with the Property inspector as you can select an element then move to the Property Inspector and make your changes.

Property Inspector: This is DW main area for working with code for the area that is selected; and this changes its features depending on what you have selected. This is called content sensitive which basically means that it changes when you choose certain ID’s, Classes, or other areas of your site. You will also notice that you can select HTML or CSS on the left to make your changes.

Status Bar: This is information that is for the current page; this includes encoding, size and dimensions.

Panel Groups: These panels control how your work with your file. They can be docked together, floated, changed and customized. They include panels for common features like site files, CSS and they change depending on your workspace that you choose.

That is it for this post; next I will talk a bit about workspaces, creating your own custom workspace, describe the difference between the default workspaces and working with the panels.

Share/Bookmark

3 Ingredients for Great User Experience(UX)

Daniel — Fri, 11 Feb 2011 10:09:31 +0000

The key to successful UX can be a combination of three things: Organization, Presentation, and Interaction. We will cover various aspects of presentation with these tutorials or posts in this series.

Presentation: Everything related to how the web site looks; such as, fonts, images, colors and so forth.
Organization: This includes everything related to the structure of the site; such as, information architecture.
Interaction: Interaction takes into account how users and systems behave.

To get these to all work together is another story. With this blog series I want to help you along the path of learning about presentation, known by several names but I will choose visual design to usability. As you will see as we go along, you could come up with another name for it and that may be a better choice for these posts; however, getting the “right” name for it isn’t as important as learning some of the principles of usability and visual design.

Next post: Content: What to say?

Share/Bookmark

The Fossil of the Layout World

Daniel — Thu, 10 Feb 2011 09:34:34 +0000

Miguel Saavedr

Table based layouts are a little outdated, yet some people still use them and they can be made more proficient then the way most people use them. I want to give some pointers on how to use tables in the cleanest way possible if that is your choice of weapon.

Efficient use of tables is all about writing basic HTML code that is fat free. Remember, basic HTML elements outside a table, will display before the table. The reason behind this is that browsers parse the content of the table before it can be displayed in the browser.

Common pitfalls that designers make:

Creating tables with separate rows for each part of the content
Nesting tables within tables within tables within…well you get the picture.

Devil’s advocate
When these two options are chosen and then implemented, your site will be bogged down. This domino effect creates an ineffective site. The solution is surprisingly overlooked; and the answer is to not use nested tables. Anyways, I know it sounds uncomplicated but if we can stay away from nested tables and make use of simpler design methods such as CSS layouts or even

layouts.

So let’s say you are going to use tables no matter what or it may be all you know at this point in time; there are ways to help your table layouts work for you and not against you.

Your mission if you choose to accept it
Now I am not going to offer some key answers or numerous steps to enhance your site. Your mission is to compose the table as straightforward as possible by using hardly any rows and implementing exact codes. When you do this you will get pages that load faster. To make this even better, use CSS to be in command of the design of your HTML. Remember as you design with tables not to commit the two cardinal sins that were mentioned in the common pitfalls section.

I know many will say just don’t use them and that CSS and

is the way to go. Even though I agree and I don’t use tables for layout. Many designers or self taught individuals still do and so I just wanted to give a couple of pointers and things to avoid.

Do you have any helpful advice to those who are using tables for layout?

Share/Bookmark

FREE HD Images and Textures

Daniel — Sun, 06 Feb 2011 08:41:10 +0000

I spent the day at the ocean today and took some pictures. I am just passing them along totally free for your use. Link or share in the comment section if you use please(not required).

Zip file of 4 textures both fully saturated and desaturated.
http://cre8vedesign.com/blog/wp-content/uploads/2011/02/ocean.zip

Click for HD image to download.

Share/Bookmark

Creating and Editing Artboards in Illustrator

Daniel — Sat, 05 Feb 2011 11:37:31 +0000

Share/Bookmark

]]>

Absolute vs Relative Font Styling

Daniel — Tue, 26 Oct 2010 21:22:18 +0000

Image by: Zeeshan Qureshi

Relative

The reason that a designer would use relative font sizing is for scalability/flexibility for the user. Many consider this a “best” practice for designers. Using flexible font styling creates an accessible website that is more user friendly than absolute font styling (css/font/why7). In fact, relative font sizing is recommended by the W3C’s Accessibility Guidelines, U.S. Section 508 requirements, and other accessibility guidelines and requirements (css/font/why).

The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels (howtosizetextincss). It also demonstrates that text sized in ems can be re-sized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the re-sized text (howtosizetextincss).

Another reason to not use absolute styling is when it comes to screen display. They render inconsistently across platforms and can’t be re-sized by the user (www.w3.org/QA/Tips/font-size). For example, the style for print falls under this example. % are recommended but even better is the use of em.

Absolute

Example:

body {

font-size: 0.7em;

}

h1 {

font-size: 3em;

}

p {

font-size: 2em;

}

This looks good and many designers in fact design like this, but there’s a problem — if you set the “text-size” setting in Internet Explorer to “smaller” or “smallest,” the text becomes so small it is unreadable (alistapart.com/articles/elastic). As Internet Explorer is so popular and the “smaller” text-size setting is a popular one, ems do not appear to be a valid option (alistapart.com/articles/elastic).

There are many opinions and information out there and this was just my take on it for an assignment. What are your thoughts? Do you stick with one over the other?

Sources:

http://www.alistapart.com/articles/elastic

http://www.w3.org/QA/Tips/font-size

http://www.alistapart.com/articles/howtosizetextincss/

http://websitetips.com/articles/css/fonts/#why

Additional resources

Research and images of ALL the variations of type styling: http://www.thenoodleincident.com/tutorials/box_lesson/font/

Alternative style sheets: (used to create different versions of one site)

http://www.alistapart.com/articles/alternate/

Share/Bookmark

…and the Survey Says!

Daniel — Sat, 23 Oct 2010 19:34:47 +0000

What resolution do you prefer to design with? You have several options, and choices to make when choosing to use a particular resolution for your design. There is no hard and fast rule, yet there are some things to think about that will help you make an informed decision.

Make the decision to optimize
When designing a website you could optimize your sites with a resolution of 1024 x 768. As a designer you will have to make a decision such as which screen size is best or maybe you will conclude that it doesn’t matter which resolutions. Just a few years back, when we were strictly using web safe colors (say this more colorfully), everyone stuck with the 800 x 600 resolution for web design. Is that still relevant today? Should you design at the highest end of the screens that are on the market? Or perhaps, you can as a general rule, optimize uour designs for a certain resolution.

Are liquid layouts the answer?
A poll taken at http://www.hobo-web.co.uk shows that 61% of their users prefer to design at 1280 x 800 resolutions; however, it is best to optimize for 1024 x 768. One way to do this is liquid layouts which are meant to present a website without the use of scrolling horizontal bars. You could design a site at 1024 x 768 using liquid layouts in %; but, there are many ways to do this and some of you may decide another way is better and that is fine. Okay now getting back to that special word optimize. What does it mean? Basically, it means that you as the designer should aim to create a site that’s made to work on the most common screens, which you fill see after very minimal investigation is 1024 x 768.

Reality check
Take a step back and let reality set in. Your number one goal is to design a site based on the UX (user experience) and not a screen resolution. Your first priority is the needs of your users and then work that in with the screen resolutions and are your users more likely to have a 800 x 600 monitor or is your audience a tech audience with large LCD screens.

Above the fold or not above the fold
Lastly, one way to judge your sites is to use what is known as ” above the fold “ (http://en.wikipedia.org/wiki/Above_the_fold). This just means when you arrive at a site what do you see without scrolling down. You want to be able to see your focal points in your visual hierarchy and not the bottom half of your masthead (banner). Test this on different computers to make sure your above the fold is the same as 2 or 3 others. This is subject to many considerations, but this post at http://www.boxesandarrows.com explains some studies that refute this design principle. One thing to remember is that people who are used to your site will scroll but will the new person give you the time and day to scroll to the bottom? This answer is up to you to figure out based on what you believe is needed in regards to your users. One thing is for sure, great design will draw the eye and naturally allow them to follow the site. Whether you use the “fold” technique or not, design well and use visual hierarchy to manipulate where your users look first, second, and so on.

Your thoughts
What are your thoughts?
Do you agree or disagree?
How long till we start optimizing for higher resolutions?
What are your thoughts on fluid layouts?

Sources.
http://www.hobo-web.co.uk/seo-blog/index.php/best-screen-size/
http://www.w3.org/TR/WCAG-TECHS/G146.html
http://en.wikipedia.org/wiki/Above_the_fold

Share/Bookmark

Triangle of Web Design

Daniel — Wed, 13 Oct 2010 18:56:34 +0000

How many of you are avid campers? Perhaps you are even into the more primitive art known as bush-crafting , as I am. One thing is certain; many of the outdoor enthusiasts understand fire building. When teaching the fundamentals of fire making we use the triangle of fire technique. Wikipedia defines this as, ”The fire triangle or combustion triangle is a simple model for understanding the ingredients necessary for most fires.”

Basics of Fire
I was walking around the house and decided to try and find some correlations between the two things that I enjoy. Surprisingly, this came quite quickly and it was the first thing I reflected on; the triangle of fire. Basically you have heat, fuel, and oxygen; or more commonly referred to as air, wood, and fire (other methods exist). You may be asking how on earth can we take this and apply it to web design. I liken wood as the structure since many if not all fires are built with some form of a wood structure, tepee being the most common. Oxygen is life and we all need it to live and fire is interaction to the extreme. You can smell fire, feel fire, and see fire.

The Triangle of Design
When building a site the first thing you need to do is provide some structure. Essentially, wood becomes HTML; and as you can’t heap a bunch of wood on the floor to make a fire, we can’t just toss together the HTML. We need to create art with HTML and shape a basic layout and assemble from there creating clean code. Next, we need oxygen; this comes in the form of CSS. HTML creates boring looking pages and we can breathe life into the structure with gorgeous CSS. Finally, we need a flame, something to make the site interactive; something that is tangible and hot. I liken this to JavaScript; however, there are many forms of scripting that can do this but for straightforwardness I will use JavaScript for my illustration.

Recap
As we wrap up this short post lets recap what we just learned. We have to collect up our small code or sticks and begin to put together the structure with bigger pieces of code and then we insert CSS to add some oxygen or life to the structure and finally we need scripting to bring our site to life and create interaction.

What are your thoughts on the triangle of web design? If you had to narrow design down to 3 things to form this theory what would it be?

Share/Bookmark