Verecom Web Design Blog

Coming to the point spot on, a web design company from Sydney would impart your website the following attributes to ensure superior website development by Sydney standards.

Logical and intuitive navigation

A neat and easy set up of internal links for browsing within the website determine the adhesiveness of your site. In other words, the ease with which a visitor can navigate across all your site’s web pages and come back to the home page, determines how much time he/ she would spend on your site.

Neat Layout Design

This is again critical. Keep the site layout such that it looks neat [hint: may be use white space a lot], maintains main focus on content and uses fonts that are generally available across computers worldwide.

Best website loading time

The shortest it is, the better. You can achieve better results by keeping graphics, flash and scripts to minimum; HTML & script code optimization; using Server Side Include (SSI) files wherever possible.

Pure CSS Programming

A contemporary web design in Sydney has moved beyond tables-based websites. It is in vogue to go for website development in Sydney using pure CSS programming, as it extends greater control over web design, reusability, accessibility and significantly lighter in file size.

Edited By Verecom Team

It is universally acknowledged at present that the web design of your website is extremely vital for the proper impact of your online presence. Your enterprise may be of any size or belong to any business area. Few aspects well taken care of would put your business right on track for success and speedy sales. And the good part is that web standards are equal everywhere for good web design, be it Sydney or Sri Lanka.
So, whether it is website development at Sydney or Somalia, you need to start with good ingredients. Quality of content, articles, images and efforts towards online marketing – all together make a website worthy of acclaim.

Another commonly committed blunder takes place during the designing phase. Ideally, it should constitute of many sub-phases, like identifying of a unique concept, building of the prototype, testing and upgrading. Only once a satisfactory and impactful design is finalised, should the development begin.

For designers, you may try designing the website from inside towards outside rather than working at it conventionally. Doing so, you will find it more convenient and fun to design the entire website step by step.

When feeling out of ideas, seek inspiration online or sketch something. Looking up magazines, newspapers and other offline media may also lend a spur of fresh ideas.

Edited By Gary Smith

404 error page “not found” page is not another way to say “server not found”, it is able to connect to the server but just unable to find the requested page.

You don’t want your visitors think it is the dead end, 404 error page needs to be taken into consideration to offer a more comfortable user experience, so you need to provide a way out.

A custom 404 page actually tells your visitors that you are not ignoring their request, but you are directing them what is next. Here is a list of things you can improve your 404 error page:

1. Help people go back by placing a “go back” link
2. Inform about the problem
3. Enable a life-saving link to continue visitors’ browsing from that point.
4. Place “previous visited page” tracker
5. Make an additional page, personalise your page

Effective 404 error page design

Users normally use their mobile to read, search, download and communicate at odd times. There are things need to be taken into consideration in the early stage of design.

In what state do users operate (understand the core needs and use pattern of users)

How to display message in a way that easily attracts users’ interest (screening suitable layout for mobile display)?

Why do users choose mobile to browser websites (analyze differences between web application and client application positioning)?

Mobile terminal user intended usage, operation behavior and potential difficulties are far more complicated than client side sitting next to a desk.  Quoting a graphical report released by Harris on study of mobile usage pattern, we can know more interesting mobile internet user behavior.

iPhone applications have three classifications: Efficient type application, utility type application and immersion type application (for detail, see iPhone HIG). Different product positioning will produce different design strategy, which may affect user interactivity.

Less is more design principle

Mobile application should follow less is more design principle, easy to interact, clear reminder or feedback, less demand but precise action.

Clearly define Application Definition Statement for mobile usage scenario, help user concentrate in obtaining information and finish current task.

For page design, you can try to summarize the core functions using simple sentences. If you find it hard to summarize in a simple and precise way, that may increase user understanding cost and memory burden.

Touchable interface requirement should consider links and widget size. Take iPhone 3GS as an example, a suitable size for finger is 44x44pix; according to variation of gesture weight, iPhone widget responding area should be between 22x22pix to 55x55pix.

Issue with resolution is an eternal topic for handsets. Designers cannot avoid the resolution difference on various model screens and aspect ratio display compatibility.

iPhone 3GS and iPad screen has similar density resolution (163 ppi and 132 ppi), so basic adaptability issue can be solved by tiling interface background.

iphone-ipad-screen

If directly copy iPhone 3GS photo to iPhone 4 Iris screen, the physical size of interface element will be reduced to ¼ of the origin, so both the image quality and the ease of operation reduce as a result.

iphone3gs-iphone4

Nowadays, In order to implement interface physical size resolution independence, we use pre-rendered method. Client side product needs to define interface independently according to various models; website product needs to differentiate versions, through recognize user agent to point to different URLs.

To ensure a higher flexibility and lower budget redraw, it is recommended to use vector path tool in <a href=”http://www.verecom.com.au/”>Photoshop for visual design</a>. For more detail, please refer to article ‘<a href=”http://www.verecom.com.au/”>Designing for iPhone 4</a> Retina Display: Techniques and Workflow’.

High-end design spirit

What is the sort of high-end experience that brings pleasure? iPhone is an excellent representative of the mobile phone industry, but I prefer to consider it as an “art”. Its design elegance can be seen throughout every curves and material, as well as the design of the apps. Likewise high-end experience designer must treat it as a piece of art from the beginning to the end.

Balance between platforms

Touchscreen designs are mostly seen on iPhone and Android platform, (Symbian v5 is still restrained by keyboard, therefore is not counted as design target). Adaptation of different platforms needs to have balance between different software and hardware, in order to improve the interactive experience and system operation habit.

For example, iPhone only has home button (navigation is done through interface) no menu style, single page for single task. Android interface remain the back, menu, home and search functions.

If a more sophisticated design want to be achieved on Touchscreen, comparing Android-chrom and iPhone-safari, Android version is more complex, to ensure the unity of design, it often comprise the lower version, which makes it less attractive than Apple.

To pursue a higher level experience, you need to pass UA (user agent) in order to match different platform.

Online marketing is about creativity, how to interact with your target group, how to promote new product, how to improve user experience, and how to inform users to try their product.

If this website only uses boring colours and shapes, surely it results no user to the website. How to promote a new product or highlight key elements or value? You’ve got to

1. Draw their attention to the point (point G)
2. Desire to hit the link (content)

Visual perspective (make your point stand out)

1. eye catching colour

Make the focal point differ than other parts in terms of colour.

2. different shape

A different shape will also draw attention from users

4. Define logo alt text: to improve the usability and compatibility of the page

It worth mention that this also relates to SEO.

5. Define logo size: enhance efficiency of the browser.

Some people argued that it is not convenient for content maintenance. Perhaps it can be fixed by defining size in CSS.

6. Close all img tags for logo

We should not forget the standard of building a website, for those who are not familiar with W3C, here are two specs.

HTML 4.01 Specification
CSS 2.1 Specification

7. Compress logo with Gzip? Forget about it!

For logos that would stay for long time, we can set a longer cache to reduce requests to server. It is useless to compress with Gzip on server side, but different case for css/js/html documents, and it is compulsory if server pressure allows. (most css/js/xml document sizes can be compressed up to 70-80%)

You must have come across some slow loaded websites. They make you leave earlier before the whole page content loads. This week I want to start from <a href=”http://www.verecom.com.au”>optimizing logo image</a>, to ensure essential elements such as logo is loaded in no time. Below is a list I will be discussing in the following weeks:

• pre-load logo image: logo image and background should be the first elements displayed on the website, avoid empty space and without background;
• combine logo into background: to reduce page requirements;
• optimize compressed logo: keep the file size to the minimum;
• define alt text for logo image: increase page usability and compatibility;
• define logo size: to improve browser rendering efficiency;
• turn off logo tag: to improve browser rendering efficiency.

Pre-load logo

Before anything else, load necessary images first: in this way, logo can be displayed first on the page (unless you do not want it to show first). Google homepage uses this method to combine logo and background, do a right click on the logo, you can only view background image, but not logo as a separate image. On the search page, the original image around logo should look like this:

Images around logo

Optimize compressed logo

1. png8 is the first choice
2. fireworks does a better job in compress image than photoshop
3. at last, compress with dedicated compressing tool (e.g. PngOptimizer)
4. if you do not have this tool, install firebug onto firefox, then install page speed, as a performance analyzer, and directly save compressed image.
5. too complicated? Go for online compressing tool then http://www.smushit.com/ysmush.it/.

From the user point of view

Information design
For an interactive designer, whom needs to collect information on website content, positioning, target audience, and also a closed collaboration with the content provider in order to produce a appropriate solution with matching visual representation.

A former procedure to produce a solution is: Useful -> Ease of use -> Want to use

However most of users do not have the knowledge of graphic design and usability design, so their judgment on a website is heavily relying on the first impression, which therefore brings the visual design as a prerequisite, therefore visual design should not be overlooked.

Visual design
Visual design consists of use of colour scheme, texture, text and image and attention to visual detail. Successful visual design can create a powerful first impression to the user, but if colour scheme is over colourful, and too many textures applied on buttons, may leave user an impression that the website is not professionally designed and not reliable, as a result, they will not come back again.
Ultimately a website is to deliver an overall impression, and visual plays a heavy role.

Other factors
Stability is another consideration for the quality of a website. 404 error page should not appear on the website, and all functions should be tested before launching.

Edited By Dan Li