Posts Tagged ‘Web Design’

Doteasy All-in-One Web Design Package

July 3rd, 2013

One of our priority goals at Doteasy is to help our customers quickly set up their website without any troubles. Therefore, we have included various website creator programs in our hosting plans such as WordPress, Joomla, and Doteasy Website Creator to help customers jumpstart their website with NO coding experience needed. We even created a WordPress resource web page for customers to quickly access free WordPress themes and plugins downloads as well as articles on web design elements featured on our blog. Bookmark these two web pages and visit them on a regular basis as they feature many informative resources on topics such as WordPress installations, web design elements, website creation, etc.

Website creation requires both technical skills and time commitment. If you lack of time to make a professional website for your business, our newly released All-in-One Web Design Package is the perfect solution for you. With our service, you can enjoy 1-on-1 design consultation and a professionally-designed 5-page website setup for only $695.

doteasy_web_design

We are experienced in creating websites for all sorts of businesses, such as restaurant, beauty and spa, general office-use, just to name a few. All these websites are mobile-friendly and optimized for search engines results. To view our design portfolio and view the demo websites, please visit our service page for full details.

More than 80% of the population in Canada and the US are online. Consumers use the Internet to search for products and services they need before they make a purchase. People don’t use phone books to look up businesses anymore – they assume your company has a website. A small business without a website is virtually invisible to consumers. If you don’t want to lose any customers, get your business a website today with our All-in-One Web Design Package.

Web Design 101: Tips on Colours

May 13th, 2013

In our last article, we talk about few tips on font and typography when designing your website. In this post, we will share some other tips on colours.

web design_colour

Colour Wheel

To start off, let’s discuss the importance of primary colour, secondary colour, and tertiary colour. These two terms give you the practical guidance to colour mixing and visual effects of specific colour combination. Primary colours refer to red, yellow, and blue and these three colours cannot be mixed by any combination of other colours. All other colours are derived from these three. Green, orange, and purple are the secondary colours which are formed by mixing the primary colours. Tertiary colours are yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green. These colours are formed by mixing a primary and a secondary colour. Below is an image of a colour wheel with the tertiary colours.

Example of Colour Wheel

Colour Scheme

Colour is an important aspect of your website because it can affect the entire mood, feel, etc. There are a few popular ways to create colour schemes. If you want to create a website with high contrast, vibrant and energetic look, you can choose complementary colours by choosing colours that are opposite from each other on the wheel. In contrary, if your goal is to create a harmonious website, you can choose an analogous colour scheme, which is comprised of colours that are next to each other on the colour wheel. For example, you can choose green, light green, and blue.

One important tip for you to consider is stick with 2-3 base colours for your website and also make use of tints, shades, and tones of these base colours. For more info about tints, shades, and tones, check out this website.

Colour Scheme Inspiration

kuler

Does this colour scheme look cool to you? Kuler.adobe.com is a website that features many colour schemes created by thousands of online web designers. Once you choose a scheme you like, you can even find the RGB and HEX colour so that you can fine tune it on different elements of your website such as top menu bar, vertical menu bar, font sizes and title, etc.

We hope you find the colour tips helpful. Feel free to share this blog post on your Facebook and Twitter. Stay tuned for more web design tips.

 

Designing for Smartphones

September 21st, 2011

Many people expect websites to work on their mobile phones. With this said, mobile support is now a standard for any website.

But how do you make your website mobile compatible?

The simpliest way – test them on all mobile devices and solving any problems that you encounter.

Unfortunately, due to the many operating systems and browsers on the market for mobile devices, it’s unpractical to test your website on every mobile device out there – not everyone can afford to buy multiple mobile devices just for testing purposes.

Choose your test device

According to ZDNet, the Top 10 Smartphones of 2011 and the Top 10 Smartphones of 2010, uses more or less these operating systems: iOS, Android, webOS, Windows Phone 7, MeeGo and BlackBerry. While the operating system is the most important ingredient of a platform, browsers are also important. Every platform has its own default browser. So, if a certain platform should become more popular, its browser would gain a large market share and thus forcing web developers to pay attention to it.

Installing browsers

Once you have decided on your test device, install additional browsers you can download on the device. Two browsers are inevitable: Safari and Opera Mini.

Keep in mind, according to StatCounter, the Opera has dominated the market with almost 22%. The iPhone and Nokia comes in at close to 17% each, with the Android at 15.5% and BlackBerry at 14%. Compared with stats from two years ago, the iPhone Safari has fallen while the Android has risen by a few percentages.

Designing for mobile devices

The basic principles – Easy, Visual, Results, Fast

  1. Easy – navigation needs to be simple and straightforward.
  2. Visual – Buttons should be big and spaced reasonably far apart. All clickable areas should be made large enough to grab attention of the user and easy enough to click with their fingertips.
  3. Results – understand the specific goals of the mobile users and design your site to accomplish those goals as quickly and as efficiently as possible. Just remember, a mobile site needs to help customers go directly to the information or content they require.
  4. Fast – make sure content is light weight so that it loads as quickly as possible. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.

Good-to-know: Screen, Resolution and Browsers Capabilities

Screens on smartphones vary largely in both display size and resolution. Screen sizes range from 2 to 5 inches, with resolutions ranging from 240×320 to 640×960. The most common resolution is 480×800, which is higher than most desktop monitors.
Other good-to-knows:

  • Neither the iPhone nor the Palm Pre support Flash content.
  • Javascript and CSS support in mobile browsers is as good as it is in their desktop counterpart.
  • Most mobile devices have no cookie support.

Tips and tweaks

  1. You can tell the iPhone (MobileSafari) that your page is a certain size thus optimizing the viewport of your mobile website, add this code to the head of your HTML page:
    meta name=”viewport” content=”width=790”
  2. Single column layout work best. Remember, zooming in isn’t ideal because it adds an extra step and zooming in and out might not be as easy as said on all phones. Remove low priority content and present content with single column pages that use up the whole width of the screen.
  3. Take advantage of inbuilt functionality, such as making calls. Including your phone number on your “Contact Us” page allows users to automatically call that number when they tap on it.
  4. Touch screens can’t detect when a finger is getting close to touching it, so the concept of hovers or mouseovers does not apply.

Redesigning your website and how to make the transition smoother?

September 15th, 2011

Whether you are redesigning your website because you are unhappy with the way it looks or function, or you need to improve search engine rankings and sales conversions, it is important to understand what it is you wish to accomplish during the redesign.

Other things to keep in mind when redesigning:

  1. People love consistency. For the consideration of your visitors, you might want to make sure your redesign is not so drastic that it is not recognizable to your regular visitors.
  2. Do not break your brand with your new design. Consistency is important, especially when talking about your business’ branding.
  3. Create a planning sitemap. Draw out every page on your website in a map format so that you can clearly see the interaction and navigation between pages.
  4. Avoid unnecessary bells and whistles. Keep your redesign simple.
  5. Don’t forget the small stuff: favicon, custom default gravatar, broken links, etc.

Useful Tools:

  1. Google Analytics – it’s always important to take a look at what’s working and what’s broken on your current website. With Google Analytics, you can see what pages are being viewed, how people are navigating your site and what browsers and screen resolutions are most popular.
  2. Theme Switch (for WordPress only) – If you are redesigning a WordPress site, Theme Switch is a plugin that you should consider using. It allows you to view a different theme then the rest of your visitors.
  3. Adobe Kuler – it offers a collection of color schemes that will help finding the perfect colors fast and easy, and best of all, all swatches are sortable and exportable right into Photoshop.
  4. Adobe Browser Lab – nothing will slow down a redesign more than spending hours browser testing. The Adobe Browser Lab allows you to test your site across all major browsers, including Internet Explorer, Chrome, FireFox and Safari.

When and how your launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. A big relaunch around the holidays or at the start of a big promotion can draw traffic and general interest. For example, Smashing Magazine timed its redesign to coincide with the introduction of the Smashing Network.
Ways to make the transition smoother:

  1. Try to keep vital elements of your website similar to their existing counterparts (ie. the main navigation and header)
  2. Provide users a blog post or news announcement discussing the change
  3. Set up a 301-Redirect (permanent redirect) for all pages and URLs on the old website. This will ensure that visitors who click on indexed search results are still taken to the relevant pages and it also eliminates 404-Error pages from showing up as a result of your redesign’s new URL structure.
  4. Make sure error pages contain helpful, updated information

Biggest Mistakes in Web Design

September 6th, 2011

1. Designing your website for your needs, not your customers.
Mistake: Many businesses believe that a website is about opening a new marketing channel, promoting a brand, or increasing sales and revenue.

Why:
Most people visit a website to solve one or more of these four problems:

  1. They want/need information
  2. They want/need to make a purchase
  3. They want/need to be entertained
  4. They want/need to be part of a community

It’s just that simple, all visitors care about is solving their problems.
So, when designing a website, remind yourself:

  1. The only reason my website exists is to solve my customers’ problems.
  2. What problems do my webpage solve?

2. Visitors can’t figure out the purpose of your website in less than five seconds.
Mistake: After five seconds on your website, visitors are still wondering are you trying to sell something, what is your website about, etc.

Why:
Visitors are not going to stay around, dig around and find out. If your name or tag line does not tell them what your website is about, they will simply leave and go on to the next website.

3. Visitors can’t read the text on your website.
Mistake: Many web designers like to use light type on a white background.

Why:
Unfortunately, because you know your content so you can read it even if you can’t really see it. But, without proper contrast, visitors can’t see the text and if they can’t read it, they will leave.

Tools that can help you:

  1. Gray-bit.com – the best way to evaluate a website’s contracts is to examine the website in grayscale. Gray-bit.com will convert your websites to grayscale, so you can ask yourself: Can you read the text?
  2. Check My Colors – an easy-to-use contrast-analysis tool that will provide a thorough analysis of the website’s color combinations. It checks for contrast ratio, brightness difference and color difference.
  3. Color Scheme Designer – Not only can this tool help you choose a proper color palette, it can also simulate how people with colorblindness will interpret your color scheme.
  4. Coblis-Color Blindness Simulator – allows you to upload an image and view it as if you had different types of colorblindness.

4. Too much material on one page.
Mistake: You don’t know where to put most of the material so you’ve crammed them all on to one page.

Why:
With so much content vying for attention, it is difficult for the eyes to find the focal point. People get confused and they leave (and most likely find another site that is less confusing). A long web page also means you have failed to organize your website properly.