Melbourne Cup 2017 designs

Posted onLeave a comment

We have been working with Just Horse Racing to create and produce an easy to use yet informative web page for the 2017 Melbourne Cup.

The Melbourne Cup is the largest race on the calendar for the website and generates almost half of their yearly visitors over the week around the Melbourne Cup itself.

They again want to achieve their conversions for Melbourne Cup 2017 which is held on the first Tuesday in November and we feel we have aided in allowing them to do so by redoing some of the CSS as well as the snippets for google and the fields layout.

View the Melbourne Cup 2017 page at https://www.justhorseracing.com.au/melbourne-cup/

As you can see the spike during Melbourne Cup time is huge which meant all work had to be streamlined to prevent issues with the server during this time.

Make sure you checkout the 2017 Melbourne Cup page above.

How to Create an Image Pre-loader Without Javascript?

Posted onLeave a comment

In this article, you’ll learn how to create an image pre-loader without Javascript. CSS is the technique we are going to use. No fancy and hard to understand codes, but the smart use of codes you already know about.

Why use an image pre-loader? A lot of websites out there use CSS to display their navigation menu. In most of these menu’s, images are used. When you roll with your mouse over one of the menu items, the ‘hover’ image is displayed.

Sometimes, it takes a fraction of a second to load this ‘hover’ image. Your browser doesn’t load ‘hover’ images when the whole page loads, and therefore it has to load when the visitor asks for it. As the designer of that page you would like to display that ‘hover’ image right away. This is where the pre-loader comes in, which is an smart help in such situation.

Let’s start. In this article we’ll make sure ‘hover’ images are loaded together with the page. These are the codes we will start with.

CSS

ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px Lucida Grande, Arial, sans-serif;
}
ul li{
display: inline;
}
ul li a{
display:block;
width:120px;
text-decoration: none;
padding: 0.3em 1em;
color: #000;
background:url(images/link.gif);
}
ul li a:hover{
width:120px;
background:url(images/hover.gif);
}

My HTML codes looks like this:

We are going to add a pre-loader. Open up your HTML file and add the following codes just above your tag.

Inside this div, we are going to add images you would like to pre-load. Those images won’t be displayed when the webpage just loads, only when rolling over the menu item.

Now, open up your CSS file. Add the following codes:

div.loader{
background:url(images/hover.gif);
margin-left:-1000px;
}

These codes will tell the div with class loader it should be displayed 1000px to the left. Yes, outside your browser. Your visitors won’t notice this box, but your browser knows the box is there and will load the image(s).

If you would like to add more images to the div, just add more ‘background’ tags and you are done.

div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
background:url(images/hover4.gif) no-repeat;
margin-left:-1000px;
}

Now you could pre-load images without using Javascript! Good luck with using this on your website and thanks for reading.

How to Improve Your Website Usability?

Posted onLeave a comment

Web page usability is a vital criteria in any web design project as it is this factor that can get repeat visitors to a website. Improving usability of web pages may not be an easy job even for the most skilled web designers. Usability based web designing is all about habit formation, it cant be achieved in one day. The designers need to gradually evolve themselves into designing websites high on usability. The following are some tips that can help web designers to improve website usability:

  1. Improve your page load speed. A slowly loading web page can only irritate the visitors. A website can be made to load faster through efficient coding, like use of CSS and optimal use of multimedia content.
  2. Make your web design simple and conventional so that people wouldn’t need to spend time learning how to use your website. Don’t add flash intros about your company, this only tells the visitor that you don’t care about their time and that you are more interested in singing your own praises.
  3. Don’t go for too many unnecessary features, widgets, flash content, video, images etc. This can only slow up your website. Instead, use only elements that cannot be missed. You can add vital elements like those needed to get customer information like their email for example. This doesn’t mean you have to make them fill huge forms.
  4. Keep your website open for user comments regarding your web site’s usability. Note down these comments and make the necessary improvements.
  5. Avoid using irritating gifs, unnecessary background audio, pop ups, scrolling messages etc.
  6. Compress your images to make them load faster, you can use image optimizers to do this.
  7. Keep web page length to a minimum. Instead of going for one huge web page, you can have several smaller webpages that are more readable and easier to navigate. This can also help avoiding unnecessary use of the dreaded scrollbar.
  8. Always include a Site Map. A site map is a diagrammatic representation of the architecture of the website. A site map is not only a good way to improve the navigation in the website but also your ranking in search engines.
  9. Always go for contrasting Colors that can make your text more readable. Whenever you are using a dark background you need to use bright colored text. Also see that the text is big enough to be easily read.
  10. Provide relevant content that can be useful to the user. Adding too many advertisements and content that is not useful can drive the visitor away.

Finally, you need to do a complete usability test of your website before hosting it online. Check whether your website loads on all the popular browsers, check whether it can address the disabled visitors lie blind people. See that all links are working properly, check spelling mistakes, Load speed etc. And don’t forget to Validate your code. All these steps can improve the usability of your website and improve its popularity in a big way.

4 Crucial Elements for Any Website Design

Posted onLeave a comment

The services of the web-design agency should ensure that the website be efficient and effective enough not only in converting the visitor into a customer but also at retaining the existing customers. Some of the keys for successful web design services are as follows:

Customer: The website functions and services should be user-friendly and customer-oriented. A web design that does not meet the needs of the buyer is a waste of resources. The buyer profile must be kept in mind while designing a site. The customer behavior is variable depending on their demographic, social, economic, educational and mode of earning too. A simple to use but robust and bright website always has the potential to draw crowds better than the more techno-heavy and feature-loaded website.

Technology: Appropriate mix of technology needs to be used for maximizing performance of the website. The better the website performance, the faster the response from the users.

Billing: Web design Brighton (like Bozboz) and services are rapidly becoming a big buck industry. The business entities want to capture the customers at any cost. For this they are ready to shell out huge amount of money to these web design agencies. But it should not be implied that the web designing agency can bill the business entity unreasonably. All the cost structure and taxes should be disclosed completely by declaring them before signing the agreement in order to avoid any disputes that may damage the goodwill of both the parties.

Flexibility: The web design development and services agency shall offer a website-package that is flexible and not rigid. It can be easily scale-able, fine-tuned, upgraded and updated involving zero or little cost. Moreover the site must be designed keeping in view the latest and future evolution of relevant softwares so as to minimize the recurring costs to the business entity.