7 Ways to Improve a Small Business Website

As your small business evolves, you need to make sure that your presence on the web follows suit. Don’t worry – it doesn’t mean that you need to completely revamp your website every now and then, just that adding small improvements will over time help you build a great space for creating a strong brand and massaging that resonates with your target audience.

Here are 7 smart and easy ways to instantly improve your website.

1. Provide easier navigation

As a brand, you need to provide a smooth and enjoyable experience on your website. If users are looking for specific information and cannot find it in any of your pages, you’re in for trouble. Good navigation is paramount to your success, so add at least 5 top-level categories like Blog, Contact or About Us and make sure that they all reflect the content included on each sub-page.

2. Tone it down a little

Yes, your website should stand out and be characteristic, but taking this value to an extreme can simply hurt your brand online. Websites with lots of decorative elements, animated gifs, flashy buttons or other colorful and eye-catching details are just bad taste.

In order to stay productive, you should allow your visitors to focus on your products, content and brand. The color scheme of your website should match your logo and be simple. Leaving white spaces will only improve the readability of your content. If you’d like to have a look at the worst website ever published on the web, here it is.

3. Add a call to action

This is the part where you inspire your visitor to take action – join your newsletter, schedule a free demo, download information or purchase a product. What you need to do is take a close look at your website and identify the sections that could benefit from a call-to-action.

A call-to-action can be a targeted message, a visually eye-catching button or something else. The important thing is that you align the purpose of your call-to-action element with your general sales and marketing goals.

4. Write headlines that sell

Reading on the web is usually based on a short attention span. The minute users lay their eyes on the headings in various sections of your website is crucial. If you don’t hold their attention now, they’ll probably soon abandon your website.

Use smart headlines to improve the readability of your content as nobody wants to break through large chunks of text – just make it easy to scan. By including important keywords in your headings, you’ll also make them more searchable, which is always a plus for a small business operation that cannot spend thousands on SEO services.

5. Update meta descriptions

Meta descriptions are important – they’re the first thing users see when searching your website through search engines. Make sure each page has a unique meta description that is full of keywords your target audience considers attractive and clickable.

6. Include consumer testimonials

This is a simple step small businesses take to improve the credibility of their brand, which in turn encourages visitors to make a purchase. You can place consumer testimonials in one page or on various pages of your website – for instance, a bar that appears on the title page and product page.

7. Choose the right visuals

We process visuals way faster than text, so it’s important that you incorporate the right images on your website. Go for professionally-looking, crisp and high-quality pictures. Avoid stock photos that just scream ‘stock photos’. Always think about your target audience and their expectations about visuals.

Improving your small business website doesn’t have to involve considerable costs or time. These small adjustments will have a great impact on user experience on your website and the impressions visitors will have of your brand and products.

7 Ways to Improve a Small Business Website

Could More Vacation Time Improve Your Productivity? [30 Countries Compared]

Japan, known for its workaholic culture made headlines when its government was reported to be considering passing a law which force its workers to take leave. There are many reasons that contribute to such a drastic decision including the thought that this move could help to revive Japan’s economic growth after years of stagnation.

But is it really that simple? Do more leave days equate to increased productivity?

While there are many articles written on the Internet (including one of our very own) that say YES, fewer work days lead to higher productivity, the data is incomplete or usually uses only one country as a focal point. We thought we’d give the data a second look, and going much bigger with this.

So here’s what We Did

You may have come across reports that mention Switzerland as the most productive country, based on a Global Competitiveness Report. We’ve looked into the methodology and found that they fall back on the Global Competitiveness Index (GCI) as "an appropriate estimate of the level of productivity and competitiveness of an economy."

Technically, the higher up a country is ranked on this report, the higher the productivity of the country.

So we pulled the top 30 most competitive countries as ranked by the Global Competitiveness Report 2014/2015 and found the four following sets of data for comparison:

• average working hours per week


• minimum annual leave mandated by law


• days of parental leave allocated for each country


• parental leave mandated by law

Note: The data here is correct as pulled from their sources on Feb, 2015. Our sources are available at the bottom of the table.

Working Hours And Leave By Countries

Country	Working hrs per Week	Minimum Mandated Annual Leave (days)	Paid Public Holidays	Paid Vacation Days	Parental leave
(1) Switzerland	30 hrs*	20 days	N/A	20 days	14 weeks
(2) Singapore	40 hrs	8-14 days	11 days	7 days	16 weeks
(3) United States	34 hrs*	0 days; 6-20 days (doe)	0 days	0 days	0 days
(4) Finland	32 hrs*	30 days	9 days	25 days	15 weeks
(5) Germany	27 hrs*	24 days	10-14 days (depending on state)	20 days	14 weeks
(6) Japan	33 hrs*	10 days; +1 day off for each yos (max: 20 days)	N/A	10 days	14 weeks
(7) Hong Kong	40 hrs	7-14 days (depending yos)	N/A	7 days	10 weeks
(8) Netherlands	27 hrs*	20 days	10 days	20 days	16 weeks
(9) United Kingdom	32 hrs*	28 days	8 days (9 for Scotland)	28 days	39 weeks
(10) Sweden	31 hrs*	25 days	N/A	25 days	480 days
(11) Norway	27 hrs*	25 days	2 days	21 days	56 or 46 weeks
(12) United Arab Emirates	40 hrs	2 days/month for 1st year; 30 days for > 1 yos	10 days	25 days	45 days
(13) Denmark	27 hrs*	30 days	9 days	25 days	52 weeks
(14) Taiwan	40 hrs	7-30 days (dependent on yos)	25 days	7 days	8 weeks
(15) Canada	33 hrs*	10 days	5-10 days (depending on province)	10 days	50 weeks
(16) Qatar	40 hrs	15-20 days	10 days	15 days	50 days
(17) New Zealand	34 hrs*	20 days	11 days	20 days	14 weeks
(18) Belgium	30 hrs*	20-24 days (dependent on working days a week)	10 days	20 days	15 weeks
(19) Luxembourg	32 hrs*	25 days (extra 6 days of for workers with disabilities)	10 days	25 days	16 weeks
(20) Malaysia	40 hrs	8-16 days (depending on yos)	19 days	7 days	60 days
(21) Austria	31 hrs*	30-36 days (dependent on yos)	13 days	30/35 days	16 weeks
(22) Australia	32 hrs*	20 days (25 days for shiftworkers)	9-11 days	20 days	18 weeks
(23) France	29 hrs*	30 days (extra 22 days for > 35 working hrs/week)	1 day	25 days	16 weeks; 26 weeks for third child.
(24) Saudi Arabia	48 hrs	21-30 days (dependent on yos)	10 days	15 days	10 weeks
(25) Ireland	35 hrs*	20 days	9 days	20 days	26 weeks
(26) South Korea	42 hrs*	15-25 days (dependent on yos)	N/A	15 days	90 days
(27) Israel	36 hrs*	10-28 days (dependent on yos)	N/A	10 days	14 weeks
(28) China	44 hrs	5-15 days (dependent on yos)	11 days	5 days	98 days
(29) Estonia	36 hrs*	28 days (dependent on contract)	N/A	20 days	140 days (extra 2 wks for medical complications)
(30) Iceland	33 hrs*	24 days	12 days	24 days	90 days

*doe – depending on employer;

*yos – year of service

Sources:

1. Top 30 Most Competitive Countries, Global Competitive Report


2. List of statutory minimum employment leave by country, Wikipedia


3. *Average annual hrs actually worked per worker, OECD


4. Workweek and weekend, Wikipedia


5. Parental leave, Wikipedia

Leaderboard

Now, we understand that the table above is contains a truckload of data and who has the vacation time to go through the data cell by cell, right? In this section we will just give you the summary for each category, in what we will call the leaderboards.

Let’s start with the working hours in a week.

Countries with the most working hours:

• 48 hrs – Saudi Arabia


• 44 hrs – China


• 42 hrs – South Korea


• 40 hrs – Singapore, Hong Kong, Taiwan, Malaysia, Qatar, United Arab Emirates,


• 36 hrs – Israel, Estonia

Countries with the Least working hours:

• 27 hrs – Germany, Netherlands, Norway, Denmark


• 29 hrs – France


• 30 hrs – Switzerland, Belgium


• 31 hrs – Sweden, Austria


• 32 hrs – Luxembourg, Australia

If you are looking for the country that tops the chart in highest number of mandated annual leave, check this out:

Countries With Most Annual Leave (days):

• 30 days – Finland, France, Denmark, Austria


• 28 days – United Kingdom, Estonia


• 24 days – Germany, Iceland


• 25 days – Sweden, Norway, Luxembourg


• 21 days – Saudi Arabia

Countries With Least Annual Leave (days):

• 0 days – United States


• 5 days – China


• 7 days – Taiwan, Hong Kong


• 8 days – Singapore, Malaysia


• 10 days – Israel, Canada, Japan

If you wonder if vacation days actually have the influence on productivity in the workplace, then these are the leaderboards you want to see.

Countries With The Most Paid Vacation Days:

• 30 days – Austria


• 28 days – United Kingdom


• 25 days – Finland, Sweden, United Arab Emirates, Denmark, Luxembourg, France


• 24 days – Iceland


• 21 days – Norway

Countries With The Least Paid Vacation Days:

• 0 days – United States


• 5 days – China


• 7 days – Singapore, Hong Kong, Taiwan, Malaysia


• 10 days – Japan, Canada, Israel
  


• 15 days – Qatar, Saudi Arabia, South Korea

Parental leave, a controversial topic for many countries including the United States. Here are the countries that give parents a whole lot of time off, and those that didn’t.

Countries With The Longest Parental Leave:

• 480 days – Sweden


• 56 weeks – Norway


• 52 weeks – Denmark


• 50 weeks – Canada


• 26 weeks – Ireland

Countries With The Shortest Parental Leave:

• 45 days – United Arab Emirates


• 50 days – Qatar


• 8 weeks – Taiwan


• 60 days – Malaysia


• 10 weeks – Hong Kong, Saudi Arabia

Lastly, here are the leaderboards on paid public holidays, also known as holidays that you get to take a break while still on a payroll.

Countries With The Most Paid Public Holidays:

• 25 days – Taiwan


• 19 days – Malaysia


• 13 days – Austria


• 12 days – Iceland


• 11 days – Singapore

Countries With The Least Paid Public Holidays:

• 0 days – United States


• 1 day – France


• 2 days – Norway


• 5 days – Canada


• 8 days – United Kingdom

Visual Aid

To our readers who adopt the tl;dr approach, here’s an infographic that can help you better visualize the amount of data featured here, designed by our friends in Piktochart.

Editor’s note: This infographic is available at Piktochart and is free to use.

Conclusion

While our methods are far from scientific, we’re not seeing a pattern where more vacation days is contributing to higher productivity or competitiveness of a particular country. Then again, the data is all here and up for your scrutiny and interpretation.

Let us know what you think.

Could More Vacation Time Improve Your Productivity? [30 Countries Compared]

Could More Vacation Time Improve Your Productivity? [30 Countries Compared]

Japan, known for its workaholic culture made headlines when its government was reported to be considering passing a law which force its workers to take leave. There are many reasons that contribute to such a drastic decision including the thought that this move could help to revive Japan’s economic growth after years of stagnation.

But is it really that simple? Do more leave days equate to increased productivity?

While there are many articles written on the Internet (including one of our very own) that say YES, fewer work days lead to higher productivity, the data is incomplete or usually uses only one country as a focal point. We thought we’d give the data a second look, and going much bigger with this.

So here’s what We Did

You may have come across reports that mention Switzerland as the most productive country, based on a Global Competitiveness Report. We’ve looked into the methodology and found that they fall back on the Global Competitiveness Index (GCI) as "an appropriate estimate of the level of productivity and competitiveness of an economy."

Technically, the higher up a country is ranked on this report, the higher the productivity of the country.

So we pulled the top 30 most competitive countries as ranked by the Global Competitiveness Report 2014/2015 and found the four following sets of data for comparison:

• average working hours per week


• minimum annual leave mandated by law


• days of parental leave allocated for each country


• parental leave mandated by law

Note: The data here is correct as pulled from their sources on Feb, 2015. Our sources are available at the bottom of the table.

Working Hours And Leave By Countries

Country	Working hrs per Week	Minimum Mandated Annual Leave (days)	Paid Public Holidays	Paid Vacation Days	Parental leave
(1) Switzerland	30 hrs*	20 days	N/A	20 days	14 weeks
(2) Singapore	40 hrs	8-14 days	11 days	7 days	16 weeks
(3) United States	34 hrs*	0 days; 6-20 days (doe)	0 days	0 days	0 days
(4) Finland	32 hrs*	30 days	9 days	25 days	15 weeks
(5) Germany	27 hrs*	24 days	10-14 days (depending on state)	20 days	14 weeks
(6) Japan	33 hrs*	10 days; +1 day off for each yos (max: 20 days)	N/A	10 days	14 weeks
(7) Hong Kong	40 hrs	7-14 days (depending yos)	N/A	7 days	10 weeks
(8) Netherlands	27 hrs*	20 days	10 days	20 days	16 weeks
(9) United Kingdom	32 hrs*	28 days	8 days (9 for Scotland)	28 days	39 weeks
(10) Sweden	31 hrs*	25 days	N/A	25 days	480 days
(11) Norway	27 hrs*	25 days	2 days	21 days	56 or 46 weeks
(12) United Arab Emirates	40 hrs	2 days/month for 1st year; 30 days for > 1 yos	10 days	25 days	45 days
(13) Denmark	27 hrs*	30 days	9 days	25 days	52 weeks
(14) Taiwan	40 hrs	7-30 days (dependent on yos)	25 days	7 days	8 weeks
(15) Canada	33 hrs*	10 days	5-10 days (depending on province)	10 days	50 weeks
(16) Qatar	40 hrs	15-20 days	10 days	15 days	50 days
(17) New Zealand	34 hrs*	20 days	11 days	20 days	14 weeks
(18) Belgium	30 hrs*	20-24 days (dependent on working days a week)	10 days	20 days	15 weeks
(19) Luxembourg	32 hrs*	25 days (extra 6 days of for workers with disabilities)	10 days	25 days	16 weeks
(20) Malaysia	40 hrs	8-16 days (depending on yos)	19 days	7 days	60 days
(21) Austria	31 hrs*	30-36 days (dependent on yos)	13 days	30/35 days	16 weeks
(22) Australia	32 hrs*	20 days (25 days for shiftworkers)	9-11 days	20 days	18 weeks
(23) France	29 hrs*	30 days (extra 22 days for > 35 working hrs/week)	1 day	25 days	16 weeks; 26 weeks for third child.
(24) Saudi Arabia	48 hrs	21-30 days (dependent on yos)	10 days	15 days	10 weeks
(25) Ireland	35 hrs*	20 days	9 days	20 days	26 weeks
(26) South Korea	42 hrs*	15-25 days (dependent on yos)	N/A	15 days	90 days
(27) Israel	36 hrs*	10-28 days (dependent on yos)	N/A	10 days	14 weeks
(28) China	44 hrs	5-15 days (dependent on yos)	11 days	5 days	98 days
(29) Estonia	36 hrs*	28 days (dependent on contract)	N/A	20 days	140 days (extra 2 wks for medical complications)
(30) Iceland	33 hrs*	24 days	12 days	24 days	90 days

*doe – depending on employer;
*yos – year of service

Sources:

1. Top 30 Most Competitive Countries, Global Competitive Report


2. List of statutory minimum employment leave by country, Wikipedia


3. *Average annual hrs actually worked per worker, OECD


4. Workweek and weekend, Wikipedia


5. Parental leave, Wikipedia

Leaderboard

Now, we understand that the table above is contains a truckload of data and who has the vacation time to go through the data cell by cell, right? In this section we will just give you the summary for each category, in what we will call the leaderboards.

Let’s start with the working hours in a week.

Countries with the most working hours:

• 48 hrs – Saudi Arabia


• 44 hrs – China


• 42 hrs – South Korea


• 40 hrs – Singapore, Hong Kong, Taiwan, Malaysia, Qatar, United Arab Emirates,


• 36 hrs – Israel, Estonia

Countries with the Least working hours:

• 27 hrs – Germany, Netherlands, Norway, Denmark


• 29 hrs – France


• 30 hrs – Switzerland, Belgium


• 31 hrs – Sweden, Austria


• 32 hrs – Luxembourg, Australia

If you are looking for the country that tops the chart in highest number of mandated annual leave, check this out:

Countries With Most Annual Leave (days):

• 30 days – Finland, France, Denmark, Austria


• 28 days – United Kingdom, Estonia


• 24 days – Germany, Iceland


• 25 days – Sweden, Norway, Luxembourg


• 21 days – Saudi Arabia

Countries With Least Annual Leave (days):

• 0 days – United States


• 5 days – China


• 7 days – Taiwan, Hong Kong


• 8 days – Singapore, Malaysia


• 10 days – Israel, Canada, Japan

If you wonder if vacation days actually have the influence on productivity in the workplace, then these are the leaderboards you want to see.

Countries With The Most Paid Vacation Days:

• 30 days – Austria


• 28 days – United Kingdom


• 25 days – Finland, Sweden, United Arab Emirates, Denmark, Luxembourg, France


• 24 days – Iceland


• 21 days – Norway

Countries With The Least Paid Vacation Days:

• 0 days – United States


• 5 days – China


• 7 days – Singapore, Hong Kong, Taiwan, Malaysia


• 10 days – Japan, Canada, Israel


• 15 days – Qatar, Saudi Arabia, South Korea

Parental leave, a controversial topic for many countries including the United States. Here are the countries that give parents a whole lot of time off, and those that didn’t.

Countries With The Longest Parental Leave:

• 480 days – Sweden


• 56 weeks – Norway


• 52 weeks – Denmark


• 50 weeks – Canada


• 26 weeks – Ireland

Countries With The Shortest Parental Leave:

• 45 days – United Arab Emirates


• 50 days – Qatar


• 8 weeks – Taiwan


• 60 days – Malaysia


• 10 weeks – Hong Kong, Saudi Arabia

Lastly, here are the leaderboards on paid public holidays, also known as holidays that you get to take a break while still on a payroll.

Countries With The Most Paid Public Holidays:

• 25 days – Taiwan


• 19 days – Malaysia


• 13 days – Austria


• 12 days – Iceland


• 11 days – Singapore

Countries With The Least Paid Public Holidays:

• 0 days – United States


• 1 day – France


• 2 days – Norway


• 5 days – Canada


• 8 days – United Kingdom

Visual Aid

To our readers who adopt the tl;dr approach, here’s an infographic that can help you better visualize the amount of data featured here, designed by our friends in Piktochart.

Editor’s note: This infographic is available at Piktochart and is free to use.

Conclusion

While our methods are far from scientific, we’re not seeing a pattern where more vacation days is contributing to higher productivity or competitiveness of a particular country. Then again, the data is all here and up for your scrutiny and interpretation.

Let us know what you think.

Could More Vacation Time Improve Your Productivity? [30 Countries Compared]

How to Improve HTML Table Accessibility with Markup

Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers to read out the content in the web pages. The screen readers interpret the code present on the page and read out its content to the user.

<table> is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined. We’ll see below how this is achieved in markup.

The Scope Attribute

Even for a simple table with <th> tag that clearly defines the headers, you can improve its accessibility with the scope attribute and not give way to any confusion that may arise from similar types of data in the cells.

<table>
 <tr>
 <th scope="col">Employee Name</th>
 <th scope="col">Employee Code</th>
 <th scope="col">Project Code</th>
 <th scope="col">Employee Designation</th>
 </tr>
 <tr>
 <td>John Doe</td>
 <td>32456</td>
 <td>456789</td>
 <td>Director</td>
 </tr>
 <tr>
 <td>Miriam Luther</td>
 <td>78902</td>
 <td>456789</td>
 <td>Deputy Director</td>
 </tr>
</table>

What does scope attribute do? According to W3C:

Note: This attribute specifies the set of data cells for which the current header cell provides header information.

In other words it helps us associate the data cells with their corresponding header cells.

Please note that in the above example you can switch <th> for <td>. As long as its scope has the value col, it will be interpreted as the corresponding column"s header.

The scope attribute can have any one of these four values; col, row, rowgroup, colgroup to refer to a column"s header, a row"s header, a group of columns" header and a group of rows" header respectively.

Complex Tables

Now let us move on to a more complex table.

Above is a table that lists students in a class and their grades in practical and theory for three subjects.

Here is the HTML code for it. The table has used rowspan and colspan to create merged headers for the data cells.

<table>
 <tr>
 <th rowspan="2">Student Name</th>
 <th colspan="2">Biology</th>
 <th colspan="2">Chemistry</th>
 <th colspan="2">Physics</th>
 </tr>
 <tr>
 <th>Practical</th>
 <th>Theory</th>
 <th>Practical</th>
 <th>Theory</th>
 <th>Practical</th>
 <th>Theory</th>
 </tr>
 <tr>
 <th>John Doe</th>
 <td>A</td>
 <td>A+</td>
 <td>B</td>
 <td>A</td>
 <td>A</td>
 <td>A-</td>
 </tr>
 <tr>
 <th>Miriam Luther</th>
 <td>A</td>
 <td>A</td>
 <td>C</td>
 <td>C+</td>
 <td>A</td>
 <td>A-</td>
 </tr>
</table>

In the above table, each data cell, that is each of the table cells displaying the grade, is associated with three pieces of information:

• Which student does this grade belong to?


• Which subject does this grade belong to?


• Is this grade for the Practical or Theory section?

Those three information are defined in three different types of header cells structurally and visually:

• Student name


• Subject name


• Practical or theory

Let’s define the same for accessibility.

<table>
 <col>
 <colgroup span="2"></colgroup>
 <colgroup span="2"></colgroup>
 <colgroup span="2"></colgroup>
 <tr>
 <th rowspan="2" scope="col">Student Name</th>
 <th colspan="2" scope="colgroup">Biology</th>
 <th colspan="2" scope="colgroup">Chemistry</th>
 <th colspan="2" scope="colgroup">Physics</th>
 </tr>
 <tr>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 <th scope="col">Practical</th>
 <th scope="col">Theory</th>
 </tr>
 <tr>
 <th scope="row">John Doe</th>
 <td>A</td>
 <td>A+</td>
 <td>B</td>
 <td>A</td>
 <td>A</td>
 <td>A-</td>
 </tr>
 <tr>
 <th scope="row">Miriam Luther</th>
 <td>A</td>
 <td>A</td>
 <td>C</td>
 <td>C+</td>
 <td>A</td>
 <td>A-</td>
 </tr>
</table>

In the above markup we have added scope to cells that contain heading information about the data cells.

Column Group

Biology, Chemistry and Physics cells are to be associated with a group of two columns each (Theory & Practical). Just adding colspan="2" does not create the column groups, it only indicates that the particular cell is to occupy two cells" worth of space.

To create columns group you must use colgroup and then add the span attribute to it indicating how many columns that column group includes.

Note: You can learn more about col and colgroup elements in this W3C documentation.

The <th rowspan="2" scope="col">Student Name</th> markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.

Similarly, cells like <th colspan="2" scope="colgroup">Biology</th> containing scope="colgroup" helps users identify that the data in the cells that follow in the column group it spans over are associated with that particular subject.

Then there is the <th scope="row">John Doe</th> markup with scope="row" that defines that the cells following it in the same row, containing the "grade" information regarding that particular student name.

Row Groups

Now let us move onto another example, this example will have almost the same table as the one above except we"ll swap row and column headers, so we"ll be able to work with row groups.

 <table>
 <tr>
 <th colspan="2">Subject</th>
 <th>John Doe</th>
 <th>Miriam Luther</th>
 </tr>
 <tr>
 <th rowspan="2">Biology</th>
 <th>Practical</th>
 <td>A</td> 
 <td>A</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A+</td> 
 <td>A</td>
 </tr>
 <tr>
 <th rowspan="2">Chemistry</th>
 <th>Practical</th>
 <td>B</td> 
 <td>C</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A</td> 
 <td>C+</td>
 </tr>
 <tr>
 <th rowspan="2">Physics</th>
 <th>Practical</th>
 <td>A</td> 
 <td>A</td>
 </tr>
 <tr> 
 <th>Theory</th>
 <td>A-</td> 
 <td>A-</td>
 </tr>
 </table>

Now that we have our sample to work with let us start by creating row groups like we did for the column groups in the previous example.

However, row groups can not be created using a tag like colgroup because there is no rowgroup element.

HTML rows are generally grouped using <thead>, <tbody> and <tfooter> elements. A single HTML <table> element can have one <thead>, one <tfoot> and multiple <tbody>. We"ll use multiple tbody in our table to create the row groups, and add the respective scope to header cells.

<table>
 <colgroup span="2"></colgroup>
 <col>
 <col>
 <thead>
 <tr>
 <th colspan="2" scope="colgroup">Subject</th>
 <th scope="col">John Doe</th>
 <th scope="col">Miriam Luther</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Biology</th>
 <th>Practical</th>
 <td>A</td>
 <td>A</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A+</td>
 <td>A</td>
 </tr>
 </tbody>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Chemistry</th>
 <th>Practical</th>
 <td>B</td>
 <td>C</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A</td>
 <td>C+</td>
 </tr>
 </tbody>
 <tbody>
 <tr>
 <th rowspan="2" scope="rowgroup">Physics</th>
 <th>Practical</th>
 <td>A</td>
 <td>A</td>
 </tr>
 <tr>
 <th>Theory</th>
 <td>A-</td>
 <td>A-</td>
 </tr>
 </tbody>
</table>

We have added the rows "Practical" and "Theory" in each tbody creating row groups with two rows in each. We also have added the scope="rowgroup" to the cells containing the heading information about those two rows (which is the subject name the grades belong to in this case).

Note: You can look into more about accessibility guidelines in the W3C site.

Now Read:
Equal Column Height With CSS

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

How to Improve HTML Table Accessibility with Markup

How to Improve HTML Table Accessibility with Markup

Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers to read out the content in the web pages. The screen readers interpret the code present on the page and read out its content to the user.

<table> is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined. We’ll see below how this is achieved in markup.

The Scope Attribute

Even for a simple table with <th> tag that clearly defines the headers, you can improve its accessibility with the scope attribute and not give way to any confusion that may arise from similar types of data in the cells.

<table> <tr> <th scope="col">Employee Name</th> <th scope="col">Employee Code</th> <th scope="col">Project Code</th> <th scope="col">Employee Designation</th> </tr> <tr> <td>John Doe</td> <td>32456</td> <td>456789</td> <td>Director</td> </tr> <tr> <td>Miriam Luther</td> <td>78902</td> <td>456789</td> <td>Deputy Director</td> </tr> </table> 

What does scope attribute do? According to W3C:

Note: This attribute specifies the set of data cells for which the current header cell provides header information.

In other words it helps us associate the data cells with their corresponding header cells.

Please note that in the above example you can switch <th> for <td>. As long as its scope has the value col, it will be interpreted as the corresponding column"s header.

The scope attribute can have any one of these four values; col, row, rowgroup, colgroup to refer to a column"s header, a row"s header, a group of columns" header and a group of rows" header respectively.

Complex Tables

Now let us move on to a more complex table.

Above is a table that lists students in a class and their grades in practical and theory for three subjects.

Here is the HTML code for it. The table has used rowspan and colspan to create merged headers for the data cells.

<table> <tr> <th rowspan="2">Student Name</th> <th colspan="2">Biology</th> <th colspan="2">Chemistry</th> <th colspan="2">Physics</th> </tr> <tr> <th>Practical</th> <th>Theory</th> <th>Practical</th> <th>Theory</th> <th>Practical</th> <th>Theory</th> </tr> <tr> <th>John Doe</th> <td>A</td> <td>A+</td> <td>B</td> <td>A</td> <td>A</td> <td>A-</td> </tr> <tr> <th>Miriam Luther</th> <td>A</td> <td>A</td> <td>C</td> <td>C+</td> <td>A</td> <td>A-</td> </tr> </table> 

In the above table, each data cell, that is each of the table cells displaying the grade, is associated with three pieces of information:

• Which student does this grade belong to?


• Which subject does this grade belong to?


• Is this grade for the Practical or Theory section?

Those three information are defined in three different types of header cells structurally and visually:

• Student name


• Subject name


• Practical or theory

Let’s define the same for accessibility.

<table> <col> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <th rowspan="2" scope="col">Student Name</th> <th colspan="2" scope="colgroup">Biology</th> <th colspan="2" scope="colgroup">Chemistry</th> <th colspan="2" scope="colgroup">Physics</th> </tr> <tr> <th scope="col">Practical</th> <th scope="col">Theory</th> <th scope="col">Practical</th> <th scope="col">Theory</th> <th scope="col">Practical</th> <th scope="col">Theory</th> </tr> <tr> <th scope="row">John Doe</th> <td>A</td> <td>A+</td> <td>B</td> <td>A</td> <td>A</td> <td>A-</td> </tr> <tr> <th scope="row">Miriam Luther</th> <td>A</td> <td>A</td> <td>C</td> <td>C+</td> <td>A</td> <td>A-</td> </tr> </table> 

In the above markup we have added scope to cells that contain heading information about the data cells.

Column Group

Biology, Chemistry and Physics cells are to be associated with a group of two columns each (Theory & Practical). Just adding colspan="2" does not create the column groups, it only indicates that the particular cell is to occupy two cells" worth of space.

To create columns group you must use colgroup and then add the span attribute to it indicating how many columns that column group includes.

Note: You can learn more about col and colgroup elements in this W3C documentation.

The <th rowspan="2" scope="col">Student Name</th> markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.

Similarly, cells like <th colspan="2" scope="colgroup">Biology</th> containing scope="colgroup" helps users identify that the data in the cells that follow in the column group it spans over are associated with that particular subject.

Then there is the <th scope="row">John Doe</th> markup with scope="row" that defines that the cells following it in the same row, containing the "grade" information regarding that particular student name.

Row Groups

Now let us move onto another example, this example will have almost the same table as the one above except we"ll swap row and column headers, so we"ll be able to work with row groups.

 <table> <tr> <th colspan="2">Subject</th> <th>John Doe</th> <th>Miriam Luther</th> </tr> <tr> <th rowspan="2">Biology</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A+</td> <td>A</td> </tr> <tr> <th rowspan="2">Chemistry</th> <th>Practical</th> <td>B</td> <td>C</td> </tr> <tr> <th>Theory</th> <td>A</td> <td>C+</td> </tr> <tr> <th rowspan="2">Physics</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A-</td> <td>A-</td> </tr> </table> 

Now that we have our sample to work with let us start by creating row groups like we did for the column groups in the previous example.

However, row groups can not be created using a tag like colgroup because there is no rowgroup element.

HTML rows are generally grouped using <thead>, <tbody> and <tfooter> elements. A single HTML <table> element can have one <thead>, one <tfoot> and multiple <tbody>. We"ll use multiple tbody in our table to create the row groups, and add the respective scope to header cells.

<table> <colgroup span="2"></colgroup> <col> <col> <thead> <tr> <th colspan="2" scope="colgroup">Subject</th> <th scope="col">John Doe</th> <th scope="col">Miriam Luther</th> </tr> </thead> <tbody> <tr> <th rowspan="2" scope="rowgroup">Biology</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A+</td> <td>A</td> </tr> </tbody> <tbody> <tr> <th rowspan="2" scope="rowgroup">Chemistry</th> <th>Practical</th> <td>B</td> <td>C</td> </tr> <tr> <th>Theory</th> <td>A</td> <td>C+</td> </tr> </tbody> <tbody> <tr> <th rowspan="2" scope="rowgroup">Physics</th> <th>Practical</th> <td>A</td> <td>A</td> </tr> <tr> <th>Theory</th> <td>A-</td> <td>A-</td> </tr> </tbody> </table> 

We have added the rows "Practical" and "Theory" in each tbody creating row groups with two rows in each. We also have added the scope="rowgroup" to the cells containing the heading information about those two rows (which is the subject name the grades belong to in this case).

Note: You can look into more about accessibility guidelines in the W3C site.

Now Read:
Equal Column Height With CSS

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

How to Improve HTML Table Accessibility with Markup

How to Interpret Data to Improve Your Website Design and Performance

Effective design is crucial to a website’s business goals. In the same way that attractive people tend to get more attention, a well-designed site stands a better chance of imparting its message and funneling its users towards its desired outcomes. In a lot of cases, website owners go with what they feel is pleasing to their audiences. That, however, doesn’t necessarily mean that the audience agrees.

For web design to be considered truly effective, analytics data has to tell a story that supports the claim. The Internet is one of those rare spaces where artistic touches can be measured with hard numbers. Design elements can be tested, quantified, and improved to truly capture the collective taste of a user base.

If you ever wondered why Apple and Google are leading the way in terms of design, it’s not just because they can hire the most talented people. A big part of their success is their tenacity in testing every design variable they use. Fortunately, you don’t have to be a mega corporation to do what both these iconic enterprises do. With simple tools, no budget, and a little effort, you can start refining your site’s look en route to better usability and conversion rates.

Measuring the Elements of Web Design

Effective design should adhere to the core principles of what makes a site good. According to WebProNews, there are four elements that need to be considered at all times when putting a site together. These are:

1. A Clear Objective

Every site needs to send a strong but implicit message to the users about what it wants to accomplish. Whether it’s a sales pitch, an opt-in offer, an invitation to consume content, or to participate in a discussion, each page has to reflect a motive that’s beneficial to both the visitor and the webmaster.

Site design should serve as a guiding force for site objectives – it should help move the audience in farther along a conversion funnel.

Metrics to Consider:

The following metrics can help you determine whether or not your site manifests a clear objective or if it’s driving away users with vague motives:

• Bounce Rate – In traditional marketing, they say that a confused mind always says no. Applying that to web design and usability, a confused visitor will always hit the “back” button on their browser. According to analytics guru Avinash Kaushik, the bounce rate is the sexiest metric in all of digital marketing. It’s simple yet it tells you so much in just one glance.

A bounce happens when a user lands on one of your pages and goes back to the referring page without clicking on anything. It suggests that the user’s intent was likely not satisfied and the user experience was largely unfulfilling. If your site has a bounce rate of 60% or higher, that may be a cause for concern. It’s an indication that your design, your messaging or both could be confusing.

The bounce rate is the percentage of visits that bounced off a site’s pages versus the total number of visits. Practically every analytics platform offers bounce rate data for an entire site and on a per-page basis. In Google Analytics, your bounce rate is one of the first things you’ll see in the dashboard.

• Conversion Rate – A conversion happens when a site goal is accomplished. This could be a visit to a page, a transaction, an opt-in to a mailing list, a phone call, etc. Your conversion rate, therefore, is the percentage of visits that went on to convert versus the total number of site visits.

Unclear objectives can make a site’s conversion rate suffer. Being clear in your messaging and having a design scheme that limits distractions can help keep your conversion rate healthy. If your site’s conversion rate is below 2%, you’ll want to review your design and see if it helps or hurts the clarity of your site’s objectives.

2. Compelling Content

Content is central to every user’s experience in a site. Whether it’s text, video, audio or images, it has to be properly laid out and formatted to attract the most engagement from your audience. When properly supported by good site design, content becomes easier to access and share. Conversely, bad design can limit content’s ability to influence users and extend your site’s reach.

Metrics to Consider:

Most analytics platforms will give you an abundance of data that will give you ideas on how well your content is performing. Page-level bounce rates, as described under the previous section, are valuable in narrowing down pages that may be suffering from design issues. Here are other metrics to look at when trying to find clues about content performance with respect to design:

• Average Time on Page – The duration of your users’ stay on your pages is an indication of their engagement level. Non-engaged traffic leaves your pages in a hurry and bad design can contribute to their eagerness to leave. If the average user spends less than two minutes on average when they visit your pages, you’ll want to investigate the matter immediately.

Average times on site/page stats are served up in Google Analytics and most other platforms. In fact, you can find this metric right on GA’s basic dashboard. For page-level time averages, you can go to GA’s “Site Content” section and generate reports for all your pages to see which ones are underperforming. From there, you might be able to spot commonalities and patterns which can help you identify design issues.

• Exit Rate – Which pages in your site are sending away the most visitors when they’re not supposed to be the final stop in a conversion funnel? This metric will let you know. Under Google Analytics’ “Site Content” report, you can sort site pages according to which ones lead users out of your site the most. Pages with abnormally high exit rates should be investigated for possible design improvements that can halt the visitor bleed.

3. Ease of Navigation

Ease of navigation pertains to how quickly a user can browse through a site to find what he or she wants to see. The strategic use of menus, search boxes, and categories will help facilitate better navigational experiences. Ideally, a user shouldn’t take more than four clicks to go from the home page to the subpage that addresses their intent. Anything beyond that usually means your navigational design is confusing or ambiguous.

Jeff Sauro of MeasuringU wrote an excellent post on what you should look out for when trying to gauge a navigation scheme’s performance. These include:

• Findability Rate/Completion Rate


• Time to Find


• Variability in Finding Time


• Initial Click


• Success Path


• Confidence


• Difficulty:


• The Most Difficult Items to Locate


• First Path Success vs. Second Path Success


• Reasons for Difficulty

You can read the definition of each in the post linked above as well as hints on how to gather the data for them.

If you’re looking for navigation analytics reports that are easier to come by but not quite as in-depth, you’ll want to check out Google Analytics’ Navigation Summary. This hidden gem can be found under Behavior>Site Content>All Pages in GA. It shows how visitors flow from one page to another so you can gain insights on which pages are promoting good navigation and which ones are acting as traffic stoppers.

The goal is ultimately to make sure that your design is facilitating visitor movement and discovery of pages that satisfy user intent. The faster and easier the navigation paths make things for your audience, the better your big conversion numbers get.

4. Visual Appeal

Visual appeal refers to how a site holistically makes an impact to the visitor. Most people agree that visual appeal is a function of a site’s layout, color scheme, textures, fonts, and use of rich media. It’s also the part that’s the most subjective out of the four principles that make up a quality site. This means it’s the area where the most testing and analysis should be done to see which scheme pleases the majority of an audience.

For the most part, there are two types of testing done to see which visual elements work best for a site’s overall design. These are:

• A/B Split Testing – in web design and marketing, A/B testing is an experiment conducted to see which of two variants gets a better response from a small section of an audience. For instance, if you’re choosing between two calls-to-action button colors, you’ll want to perform this kind of test to see which one gets more clicked.

The same could apply to elements like fonts. If you want to know which one of two fonts promotes better reading, you can run a split test to see which setup yields better engagement signals. Average times on pages and scrolldown rates are some of the stats you’ll want to check.

Google Website Optimizer is an excellent tool for A/B testing. It’s free to use and is relatively friendly even to newbie webmasters.

• Multivariate Testing – If A/B testing tells you which one among singular elements works better, multivariate testing tells you which combination of elements promotes ideal user behavior. Does that button color go well with your background and the font style? Let user behavior give you the most honest answers.

Like A/B testing, Google Website Optimizer is a great tool for this type of test. VWO and Optimizely are also great options.

Tools to Help Improve Web Design and Performance

Planning and executing modifications to your website can be a daunting task, but this shouldn’t mean that you have to start from scratch. Listed below are tools that may help you get started.

Goal Setting and Tracking:

Setting goals are an integral part in making enhancements in web design, as well as tracking them to see how you are faring. Google Analytics provides a comprehensive setup in creating goals for the changes you wish to apply. With GA, you can create custom goals, set values, record your status, and share them. You can also use Goals on Track, an alternative analytics platform for goal setting and monitoring.

Site and Page Speed:
The changes you will implement in your site and webpages are likely to affect the loading speed. You can supervise these two activities using Pingdom, a tool that tells you how fast your site loads, and PageSpeed, a tool Google created that helps analyze how quickly your optimized webpages turn up.

Heat map:
Heat maps on your site allow you to determine the activities visitors do, such as clicks and scrolls, when they are on your site. It tells you which places they go to most and which areas are getting the least attention. Identifying your site’s heat map will clue you in to the aspects of your web design people consume the most. The tools that will help you monitor this are Crazy Egg and Inspectlet.

Coding Cheat Sheet
Coding is probably one of the most tedious tasks when it comes to implementing web design changes. Fortunately, ample guides are available to coders such as jQuery, CSS, HTML5, and Javascript to aid them.

Concluding

Ultimately, web design is a matter of continuous evolution. It’s good to go with artistry and best practices in the initial phases, but analytics and testing have to fuel the optimization process. Having a feel for what looks good and what works is nice; knowing for sure with numbers that don’t lie is even better.

All images by Bloomua via Shutterstock.

The post How to Interpret Data to Improve Your Website Design and Performance appeared first on Speckyboy Web Design Magazine.

Related posts:

1. The Dark Side of User Experience Design


2. Review of Popular Web Design Trends from 2012


3. Does the Web Design Work?

How to Interpret Data to Improve Your Website Design and Performance

5 Tips on How Casino’s can Easily Improve their Websites

The online gaming industry is huge. I got pulled into it in 2009 by a friend of mine and haven’t looked back since. However, more recently I’ve been getting a little carried away on the way the online casino’s are gearing their websites towards their customers. They are mostly focusing on themselves and revenue they are generating and not on the well being or advice of their customers.

Therefore I decided to put together a short article outlining a few tips for the online casino’s out there.

Redesign and refocus

When you look at the most Casino sites online, you find that they are still geared the same as they were a couple of years ago. They are mostly focused on generated revenue and seldom worry about what their web presence actually look like. These online casino’s do run major marketing campaigns to get more attention and people interested, but at the end of the day it comes down to the basics. If it looks beautiful, more people will come back to it.

Mobile Friendly

With Google rolling out new updates pretty soon it’s important that Casino’s focus on getting their websites mobile-friendly. I’m not talking about mobile applications though, that’s another topic for another day. I’m talking about the website itself. If Google sees that the website isn’t mobile compatible, they will push down its ranking.

Faster Site Speed

Site speed is essential to their ranking on Google too. A lot of online casino websites load pretty slow because they aren’t fully optimized. Without optimization not only rankings will lack, but having a returning user base will too. People are impatient and don’t like to wait.

Minimalistic approach

Having an over cluttered website isn’t a good approach if you are looking to attract more customers, you need to slim down and focus on producing a minimalistic look that works well for your online casino. Minimalism is one of the trends a lot of companies are focusing on and the users are loving it. It’s wise to say that if an online casino were to follow suit, it would work in their favor.

Consumer in mind

Any company, doesn’t matter whether it’s a casino or not that only focuses on themselves and what they like are definitely not making a wise choice for their company future. It’s important that online casino’s start putting their customer happiness on the top of their priority list and that means developing their website geared towards customer happiness, usability and engagement.

I can’t stress enough how many online casino websites I’ve seen are out of date and they are going to have to pull up their socks to get into the game. It’s 2015 and their competitors are going to start to outrun them. I’m yet to see a casino that went completely minimalistic. If and when that happens, I’m sure they will win over a lot of customers from other online casino’s.

5 Tips on How Casino’s can Easily Improve their Websites