Inspiring Web Designers and Website Lovers Since 2008 | SpicyWebDesigners.com

The Mobile Responsive Design Testing tool created by Matt Kersley is pretty useful in checking the design of your website quickly based on “Width only” or “Device sizes” by simply adding the URL of the website that you want to test.  With more and more website themes being developed to meet the needs of the businesses today this is a great tool to test your website.  The “Width only” option doesn’t take into consideration the true screen sizes of devices, for that I would recommend the “Device sizes” option that adjusts the height of the device to a standard viewing area that you would see on most devices.  Never the less, this is a great tool and definitely worth a look!  Check it out today!

I love free stuff!  Don’t you?  The team at StudioPress has created a Color Palette gallery that designers and developers can access and use for inspiration when developing their latest web projects.  With over 40 Color Palettes available this is an excellent resource if you need a little help coming up with a color scheme for your website.  What I personally like about these palettes besides the fact that they are free is that they include the Hex code values (as you can see below) for the colors making it easy to use and customize to your own liking.  Check it out here and enjoy! 

I wanted to share a tip with you for those of you who have websites that run on HTML5.  Traditionally in HTML 4 and its predecessors if you wanted to do validation on web based forms on your website that collect information from your visitors you had to reference and/or code JavaScript that would then validate what a user enters onto the form when they submitted it.

Now with HTML5 you can do a number of things to validate your website’s forms from simple validation by making a field required to adding fields on your web form that are structure specific like email fields and others.  Let’s have a look at a few examples starting with simple form validation.

<input type=”text” required>

When using the “required” attribute in HTML5 what this does is makes this field as required using boolean logic. Simply set it up with the required keyword and you are done.

Now let’s look at a few more input types to help you validate your website forms using HTML5 including email and url.

<input type=“email” …/>

The email input type field on a web form looks at the structure of what is entered to ensure that it follows the structure of an email address whereas the url input type checks to ensure that the characters entered in the text field use the structure of a url.

<input type=“url” …/>

I hope that these tips help your website to use the features and functions of HTML5 to make things easier for you and your website.

With most websites these days more and more web designers are developing sites that are responsive to the mobile devices that are being used to view the web pages.  Today I wanted to show you a tip on how you can code CSS to act in a more responsive fashion.  In order to do this we need to use a Media query in CSS and looks similar to the following code…

@media screen and (min-width: 1024px) {

}

/* iPads (portrait and landscape) ----------- */

Whether you are just starting an ecommerce website for the first time or you’ve been running one now for years there may be something basic you are missing when it comes to the categories your products are represented in and that is “Do the category names on your ecommerce website make sense to the average person searching for a product on your website?”  This may sound like a question that is hard to answer but the truth is that it doesn’t have to be.  Let me explain more about what I am getting at here.  Today I am talking about a technique called “Card Sorting”.

“Card Sorting” is a technique borrowed from user experience design that is used when planning the information architecture of a website such as an ecommerce website that allows you to present a number of categories and products and have a focus group figure out which products fit into which categories.  While this is a “low tech” approach it is highly effective in helping people to understand how people view and understand categories and can deliver some real insights that simply aren’t possible without this technique because it taps into the intuition that people have when confronted with choices, in this case, navigating an ecommerce website to find a certain product.

Now you may be asking yourself why is planning your categories and the products that appear in them an important task?  When people click on a category on your ecommerce website they are looking for something and when they navigate into categories they should be able to find exactly what they are looking for and if they don’t then they will leave your website.  Categories on a website allow the user to make a decision quickly but if the wording of the category is confusing or the products don’t represent what the category is then this can and will affect your ecommerce website’s conversion rate which is the rate at which people convert from users to customers.

So, how can you start card sorting exercise to increase conversions on your website or ecommerce website?  You’ll need a couple of things to use this technique including…

• A willing group of people with a understanding of your ecommerce website and what is sells
• Some index (recipe) cards with the product names written on these cards
• The names of categories on your ecommerce website currently

Next, what you are going to go is ask the people in the group to choose where they think the product fits under a specific category and collect these results.  From here you can derive some insights into how the everyday person experiences your business’ ecommerce website, the choices that they make to find the product they are looking for and eventually understand the logic that your visitors use in order to make adjustments to the website’s information architecture and improve your ecommerce website’s conversion rate.  Don’t assume that just because you understand how your business is run that you have all the answers about how people navigation your ecommerce website to find the products they are looking to buy.  Instead, experiment with the option of “Card Sorting” and consider the opportunities with doing this over simply not doing it.

Give it a try on your company’s ecommerce website today and learn to enjoy using “low tech” and “Low cost” user experience design techniques like “card sorting”.

Luc Arnold

If you’ve ever been on a website and thought to yourself “So who runs this website?” then you’ll know how confusing answering this simple question can be. After all it should be an easy answer. Some of the best websites out there do this very well. Most website have an “About” or “About Us” web page in the website’s structure and yet the information that is sometimes found here is either confusing, misleading or not there at all. A lot of bloggers use trust to establish a relationship with readers and these websites also showcase some of the best about page examples you can find on the net.

What to consider when you are writing content for your about page on your website?

Who are you? – This may sound straight forward but the truth is that sometimes it isn’t simply because you question the scope of the information you should present to clients, customers and everyone else coming to your website. Here are a few common scenarios that you may help you…

• A consultant/blogger/other professional – This is for the self employed type of person working for clients and customers. People sometimes fall into the trap of building their business or brand into something bigger than themselves but here is the problem with that… it’s misleading.  Sometimes I personally find it hard to talk about myself as an “I” but then again saying “we” unless I am talking about my audience doesn’t make sense when it’s just me running the show. Embrace being the self employed guru and your clients will be willing to trust you because after all that’s who they are buying… You!
• A sole proprietorship WITH a clearly defined business owner – If you are the sole business owner of a company the question then becomes how do I represent myself on the website? Some business owners want to have themselves front and center so that when people visit their website they know who is running the business. However, some business owners don’t feel this way and would rather talk about the business on the “About” page and take themselves out of the spotlight. The choice is yours!
• A group of professionals/consulting firm – This would apply to a group of taxation professionals operating a business together. In this case using “we” makes a lot of sense on the “About” page because you’re a group of people as opposed to just one person. It may also make sense to showcase the management team or partners of the firm and give a brief breakdown of their professional experience, education and their role within the group or firm.  Another area worth mentioning is clearly stating milestones that you’ve achieved since first starting the business as this can speak highly to clients and potential clients alike.
• A corporate organization – When I say “corporate organization” I mean that there is usually a board of directors and that it is a publically traded company on a stock exchange. If this is the case then chances are people coming to your website’s “about” page could be looking for information about the company’s past performance (annual reports), wanting to understand who is running the company, wanting to understand the company’s mission, vision and values and allowing them to get a feel for the organization as a whole.

Once you can say just exactly who you are its much easier to write about yourself, your business and what makes you special.

What do you do? – Maybe you can communicate clearly in person but remember your website is working for you 24 hours a day and if it doesn’t communicate to people clearly will most people be patient enough to ask you?   Here are some great examples from people who did this right…

My name is __________. I’m a designer, an illustrator, a speaker, and an author.

__________ is located in Oakville Ontario, and has been serving individuals and small businesses throughout the Milton, Mississauga, Georgetown, Oakville, & GTA areas since 19XX.

_____________ began in business in the year 18XX as _____________, when ________________ established a cartage business to serve the needs of arriving residents of Atlanta and the surrounding area.

There are countless examples out there of people how haven’t done this well but the point is that you need to be clear and direct when you write about what you do or what your business does otherwise you are going to confuse people that visit your website.

The “About” page might we one of the most under thought pages on your website but it says so much so put a little time and attention to it and you might find that people contact you more often, spend more time on your website and become your customers.

Sometimes it’s easy to forget that web design is a business and like all businesses people exchange their money for your services.  Chances are if you’ve just started designing websites and have built a few you’ve probably created an invoice for your clients using Microsoft word or some other word processing application.

If you have clients on a regular basis and you do regular work then you need a system to track it, bill it and monitor it so that you can spend time doing what your good at… designing website.

There are a lot of solutions on the market and more are being developed every day to help web developers and designers and other freelance professionals bill and track their time accurately, easily and quickly so let’s explore some of the top ones.

FreshBooks – Now even though I’m proudly Canadian I mention Freshbooks not because it’s based in Toronto, Canada but instead because it’s a solid billing system that plenty (over 1,000,000 users) of designers, developers and various freelancers use.  Some of the features that make this billing system a success are the fact that you can send invoices online, track and re-bill clients, manage contractors, track your time on projects accurately not to mention that it extends to other business solutions like SalesForce.com, PayPal, Authorize.NET and countless others!

PayPal – Most people out there know that you can use PayPal to accept and receive payments and it’s a good solution for invoicing clients as well.  If you aren’t concerned about time tracking or more business related tasks then this might just fit your needs to invoice clients but it by no means is a complete billing system so if that is what you need this is not a solution you’d be impressed with.

BlinkSale – This service is solid on one thing specifically, invoicing.  It is really intended for invoicing only because it allows you to create, track, follow-up and email clients about invoices.  It was developed and is managed by the team behind 37signals.

Billing Manager – This service was created by Intuit (the guys who make QuickBooks, Quicken and TurboTax) to help professionals keep track of and bill for their time.  The service also allows you to accept credit cards, debit cards and electronic checks using its Merchant Service portion of Billing Manager.

Choosing your billing system comes down to considering a few important things to consider including costs, ease of use, number of invoices allowed, and ability to accept payments.  These are the core needs of any web design company out there today from a freelance designer working out of their bedroom to a professional studio with a team of designers and developers.

With the dawn of database driven websites and website platforms like WordPress, Drupal, ExpressionEngine and countless others it’s clear that lots of people want to run websites that use database technology to generate web pages.  Originally before this trend in web development you would simply host HTML pages on your web hosting server and preserve the URL structure and it would look similar to this…

http://www.mysite.com/category/page.html

Everything was great, then as dynamically driven websites (a.k.a. websites that use databases to grab content and display that content in a generated web page) became more popular there was a problem.  The problem was that the URL structure became and looked dynamically generated as well leaving it looking like this…

http://www.mysite.com/?p=881

This left things looking messy, confusing and not very pretty to look at.  That’s why they call it an “Ugly Permalink”.  So what was the solution to this problem? Pretty Permalinks, of course! But what are permalinks exactly?

Permalinks come from the concept of “Permanence” meaning that people want to link to something that is “permanent” so that they can source it, refer to it or link to it without thinking that it is going to change.

A permalink looks like this…

http://www.mysite.com/my-about-page

So what CMS website platforms support using permalinks?  Here is a list that should help you choose a website platform that uses the permalink structure.

• WordPress
• Drupal
• ExpressionEngine
• Moveable Type
• TypePad
• Blogger

Using Permalinks in WordPress

WordPress has done a great job for a while of allowing people to use Permalinks in their blog and website posts and pages and I believe the reason is because they’ve made it easy to use for everyone.  If you currently use WordPress for one of your websites and you’ve never tried to customize your permalinks or you don’t know the first place about where to begin then hold on tight.  The first thing you need to do is log into your WordPress website and follow these steps…

• Look for the “Settings” section and then look for the “permalinks” section and click on it.

• Next, you’ll see something similar to the screenshot below that allows you to customize your permalinks in WordPress

Depending on how you want to custom your permalink structure you should be able to find a solution that allows you to display URLs the way that you want to show them.  If you are interested in all the supported permalink attributes click here to get a list of them that WordPress currently supports then click here.

For those of you that don’t currently use WordPress on your website here are some links to other documentation for different platforms like Drupal, ExpressionEngine and others.

• Permalinks in Drupal
• Creating permalinks in posts using Blogger
• Using the permalink variable in ExpressionEngine
• Publishing Settings in Moveable Type
• Using Permalinks in WordPress

Benefits of Permalinks

Some of the benefits of customizing permalinks include that it can help you in a number of ways like optimizing your URLs for search engines and specific keywords, having a pretty link that people can link to and read, removing the “chronological” structure from your site and allowing you customize the URL as you see fit!  It gives you a great amount of choice as to what your readers see, how they see the content and experience your website.

What are post slugs?

No they aren’t the kind of slugs that you find in the garden on your Tomatoes and the term “slug” does really give you a good impression of what it actually does.  Simply put, a “Slug” is a one or two word description of a post that is used in the permalinks when you post an entry in WordPress.

How to edit Permalinks in WordPress at the Page or Post level

If you are creating a page or a post in WordPress then you might have noticed once you’ve entered the Page Title or Post Title the Permalink is filled in automatically with the contents of the title you’ve entered.

At the Post level the permalink will include the structure you’ve chosen under Settings > Permalinks mentioned above but at the Page level the only thing included is the contents of the page title.  Have a look at what I am talking about…

Page Level Permalink Example

Post Level Permalink Example

Are Hackable Permalinks bad?

A note about “Hackable Permalinks”: “Hackable” Permalinks are permalinks that are easy to break down and allow the user to navigate to a different part of your website easily.

Hacking and being hacked has had a bad reputation associated with it in the computer and internet world but the truth is that Hackable Permalinks are some of the best kinds of permalinks available according to WordPress.  WordPress has this to say about Hackable Permalinks…

“The best Permalinks are “Hackable,” meaning a user might modify the link text in their browser to navigate to another section or listing of the weblog.”

Source: WordPress Codex

What are the best permalink structures available?

Having the best permalink structure to your links is up for debate because some people prefer to do some things one way or another and there is no standard out there that says “This is how you produce the best permalinks”.  Some of the experts out there have their own ways to produce the “best” permalinks but again this isn’t set in stone because largely what they (the experts) are writing about is what has worked for them.

• SmartBlogTips – Best Permalinks URL structure for your WordPress blog
• Zemalf.com – Quest for the Best Permalink Structure
• EnlightenedWebMastery.com – Best SEO WordPress Permalink Structure

Permalinks is a core topic if you are using a lot of website platform technologies like WordPress that are out there today because they control what types of links you generate and what types of links people can use to link back to your website.  Links are the bricks and mortar that hold the web together and paying attention to this means that you will build a stronger and more structurally sound website ready for search engines, referring sites and the people who visit your website.

Luc Arnold

Permalinks are cool and useful!

After writing one of my last articles “5 elements that can improve your website’s usability” I thought that it was time to let you in on some of the best plug-ins to help you accomplish better web usability in your own website.  A lot of web usability uses common sense and some things that may even seem dumb to the average web designer out there are considered by web usability experts as standards like labeling the search on your website “Search”.  In this article I am going to focus on breadcrumbs and the use of breadcrumbs in your website to help you enhance the usability of the website and also point you to some plug-ins that you can use to achieve this.  Jakob Nielsen, a web usability expert and author of UseIT.com defines breadcrumbs as…

“…a single line of text to show a page’s location in the site hierarchy…”

Source: UseIT.com; Jakob Nielsen

Now that we know what a breadcrumb is let’s explore them in a little more depth.

Breadcrumbs Explored

Many times (more than I’d like to count) you’ll see breadcrumbs on ecommerce websites, community based portals or other large sites but this doesn’t mean that you can’t or shouldn’t have this functionality on your own website.  Breadcrumbs, most notably the ones from the story of Hansel and Gretel and they act in the same manner allowing people to find their way back when they navigate back easily and they look like this…

When you think about improving your website’s usability regardless of whether you run it on WordPress, something custom or some other platform it’s important as web developers and web designers to understand that you don’t have the same knowledge of the web that your visitors do for the most part and it’s your job to make navigating the website easier to use.

Breadcrumbs are considered as secondary navigation on your website because they work similar to sitemaps in that they provide a site hierarchy breakdown and usually they only take up minimal space on the website.  They show users where they are currently in the grand scheme of things on your website and allow single-click access to higher levels of the website to help people go back without the use of the web browser’s back button.

So you may be sold on using breadcrumbs now but they aren’t included in your website’s current features.  No need to panic!  If you happen to be running WordPress, Magento, Durpal or some other pre-built website content management or ecommerce system here are some plug-ins that can help you get this functionality working on your website.

Adding Breadcrumbs in WordPress

Yoast Breadcrumbs – This great little plug-in allows you to all a breadcrumb trail to your website and gives you plenty of ways to tweak it.  It was designed by Joost De Valk to give people control in adding breadcrumbs to your website and also provides the ability to edit them in a wide range of ways with good SEO practices in mind.  Click here to read more about it and download it as well.

Breadcrumbs NavXT – This is a great plug-in for people looking for the ability to control their breadcrumbs specific to the Pages & Posts, Categories, Tags, Date Archives, Current and Miscellaneous web pages in your website.  In comparison to the Yoast Breadcrumbs plug-in if you are looking to be able to control your breadcrumbs specific to what is being accessed this will definitely help you out.  Click here to read more about this plug-in

Adding Breadcrumbs in Magento Commerce – Breadcrumbs are included in this ecommerce system by default under their “Catalog Browsing” features. Click here to read more about this

Adding Breadcrumbs in Joomla! – If your site runs on Joomla! They have some instructions on how you can go about adding breadcrumbs.  Click here for more information.

Adding Breadcrumbs in Drupal – If you run Drupal 7.x or later the ability to add breadcrumbs is included but if you run another version of Drupal before 7.x there are modules that Drupal specifies and that you can download to give your website this functionality.  Click here to get more information about this.

Adding Breadcrumbs in ExpressionEngine – If you run ExpressionEngine there is a simple piece of code that you can add to your website that allows you to display breadcrumb hierarchy.  Click here for this information.

As you can see the major CMS platforms and ecommerce systems have ways that are pretty easy to add this functionality to their web platform.  Even if you are developing your own custom solution adding a breadcrumb hierarchy will help your visitors get around your website quickly and keep them happy!

Luc Arnold

Remember “Follow the Breadcrumbs!”

Well its Christmas time and I don’t know about you but I’ve been busy visiting family, spending time with my wife (it’s our first Christmas in the new house) and also taking some time to relax over the holidays.  I enjoy reading and always find myself reading business books, technical manuals and those sorts of books.  I love digging into some new concept or principal whether it’s to do with web design or personal finance.

One of the gifts that I received for Christmas was Steve Krug’s book “Don’t Make Me Think”  It’s a quick little read, at around 200 pages that offers up some valuable thoughts for web design professionals from project managers to beginner web designers and everyone in between involved in the process of designing websites and it discusses the core concepts of web usability.

The book itself contains the interesting perspective that most web design professionals give users of their websites too much credit as to how they use the web and websites in general.  If you run your own website or you design websites for a living then you may have heard of the term “web usability” which is best defined by saying that…

“Web usability is the approach of making websites easy to use for end users.”

That is the plain and simple definition of web usability and the key to great web usability is that a website is “easy to use”.  This does not mean that it is easy to use for a web designer or web development professional but that it’s easy to use for the average visitor to your website who may not have the same technical abilities as the people who built it.  At the end of the day, most people don’t build websites in their spare time and can get lost easily if your website is not accommodating to the average website visitor.

The book “Don’t Make Me Think” contains hundreds of bite-sized chunks of valuable information about web usability but the true value of this information is in its application.  One such area that the book focuses on are the core elements that improve web usability specifically through how people use standard websites and their associated web pages.  The 5 key elements that help website visitors use a website more effectively are the “Site ID” also known as the Logo, the “Utilities” of a website, Sections and Subsections of a website, a way to search the website and Page Names.  So let’s explore each of these elements a little more in depth.

1. “Site ID” aka “Logo” – When users are on a website they usually identify where they are by being able to see the site name, branding and associated logo of the specific website they are surfing.  The Site ID allows them to make this distinction and allows them to trust in the website they are viewing.  The Site ID can and should be clickable allowing them to click and go to the Home page at any point in their journey on a website.
2. “Utilities” – Just like it sounds the utilities of a website are more about information or ways of getting to information that help you (the website visitor) when surfing a specific website.  Some examples of utilities are a sitemap, FAQs, Forums and an “About” page just to name a few.  As a general rule you should only include a few utilities because the more utilities you add to a website the busier it becomes and the more confusion it caused amongst your website’s visitors.
3. “Sections” and “Subsections” – The sections of a website are the main places you want people to go and are also referred to as the “primary navigation” of a website.  On an ecommerce website this would include sections like products, downloads, books and specials just to name a few.  These sections lead you to subsections of the website and if you have a section like Products some associated subsections would include Audio / Video, Computers, Gaming and other various related subsections.
4. A way to search the website – Not everyone that visits your website is interested in clicking and clicking some more to get where they are going.  Using search on a website allows you the freedom (if done correctly) to search and find things fast.  If the search is accurate then your visitors will be happy that they got what they are looking for in the first place and if it isn’t accurate then they will get frustrated and most likely leave.  The other thing that Steve Krug’s book states and something that I think most people forget is to name your search “Search” and not “Quick Search”, “Fast Search” or some other take on that because it confuses people and makes them think more then they need to.
5. Page Names – This particular element of a web page is important to website visitors like the ones visiting yours right now because it tells someone that clicks on a link that they’ve reached the correct page.  If your link is called “Store Hours” then the proceeding web page that is brought up should being called “Store Hours”.  Whenever you go into a store and look down the aisles what do you normally see?  Big signs that tell you what you are going to find in the aisle.  They are clear and you can see them from a mile away.  Page names should act in a similar way; easy to view and on a certain level easy to understand.  Put aside the styling and the color palettes for a while and draw attention to the page that the viewer is currently on because it builds trust and communicates clearly that they’ve found the correct page and no further thought is required.

Starting with these 5 key elements you can improve a website’s usability and its profits.  It’s all about clear and unified communication when maintaining, optimizing and designing websites that people actually want to use.  Without this your visitors can get lost, become frustrated and confused or simply give up and leave which raises that ever present “bounce rate” and stops people from coming back.  So give it a try and keep those “fans in the stands” so to speak.

Luc Arnold