Posts Tagged ‘web development’

Tips to Improve Your Web Design

Thursday, January 7th, 2010

 

Coming from a print background has helped my web design greatly. Some of these helpful hints come directly from print design, while others were simply learned through experience. They are not in order of importance.

 1. Use typography to grab attention instead of a graphic. - You’ve heard to saying, “less is more.” It is most effective in web design because you have a very small window of time to get the reader’s attention. A big heading using only text will be more effective than a large graphic. Think about newspapers. In the same way a reader scans the newspaper they will scan a website looking for a heading to tell them what to read or what to do.

2. The grid is by far the best framework. - After you’ve gathered information about the site, start sketching a grid. Figure out how many columns are appropriate. Try to stay under 16 columns. Any higher and might find it hard to stay consistent. At the same time, a one or two column grid will probably be too restrictive. Do not simply guess the width of an element. Readers will positively respond to a mathematical layout.

 3. Don’t be afraid of white space. - This might be the most difficult concept to sell to a client. Break away from the old conventions of web design where you need a left and right border. While borders are purely preference, white space should not be. White space does not just mean the color white. It simply means to leave a little extra “air” in between your elements. Too tight and your elements will visually appear as one confusing mess.

4. The fold is very important. - Keep in mind most screens are still around 1280×760, so the fold will most likely under 760px. Try to keep your most important elements, like call to actions, above the fold.

5.Follow common typography rules.

- Hang your first quotation mark outside the body of text.

- Line height for body text should be at least 4px above the font size. For example: 12px Helvetica should have at least a 16px line height. Lines of text that are too close will be harder to read.

- Your main body of text should be around 10-16 words per line. Too long and the reader will struggle to find the next line down.

- Use no more than 2 font-families. I generally try to use just one. There are times, however, where you might want to use a different font for headings.

- Keep it simple. If you want a heading to stand out from the body, use no more than two differences. A good example: bigger type size and bold. A bad example: bigger type size, bold and italic. Sometimes just making the type size bigger is the perfect solution.

6. Reset your CSS browser defaults. - When it comes time to code your design remember to reset browser defaults in your css document. Different browsers like to add their own padding and margins to elements on the page. This will save time and major frustration.

Designing Web Pages for the iPhone

Wednesday, November 4th, 2009

Make your Web page shine on the iPhone

Everyone has seen the commericals that showcase the iPhone screen’s capabilities to flip around, expand and zoom  in every which way imaginable to creatively display a web page. Now that the iPhone is out there and in full-swing, there is an interesting set of challenges that web designers are going to face more and more as mobile devices become more Internet friendly, and that is how to design sites for these devices.

The iPhone uses Safari, which should not recquire any extra work from web designers to create a page that is compatible with the device. But, if you are looking to create a page that ”wows” its  iPhone viewers, instead of simply ”working”, there are some things you should consider.

When building a Web page you need to consider who is going to view it and how it is going to be viewed. Some of the best sites take into account what type of device the page is being viewed on, including resolution, color options and functions.

 

When testing and creating pages for iPhone compatibility, don’t forget …

-The more phones you can test on the better-   see for yourself what works. Test on as many  phones as you can to make sure your page’s look, feel and navigation is just right.

-Make your page degrade gracefully- You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special feature

-Build a wireless specific page - Make your wireless specific page highly available. Most people come to your home page, and if the link to your wireless page isn’t there, they’ll leave if the page if it is too difficult to use.

-The Iphone has a very small screen- The narrower the content is on your normal page, the less it will have to shrink to fit a cell phone window.

-Divide page content- It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes it easier to read.

-The shorter the links, the better- If you’ve ever tried to type in a URL on a cell phone, you’ll know it is a pain – keep the URL short as possible.

-Do not place navigation at the top of the screen- There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you’ve looked at Web pages that were designed for cell phones, you’ll see that the first things that show up are the content and headline. Then, below that is navigation.

-Make your images small- Yes, the iPhone can zoom and unzoom in on images, but the smaller they are, in both dimensions and download time, the happier your wireless customers will be.

 

Lastly, It is true that the iPhone can display most Web pages exactly as they would appear on a personal computer. But it is also possible to create Web sites and applications that look and work much like the iPhone’s built-in applications, and sites that do are the ones that will win the hearts and fingertips of iPhone users.

Apple has provided a set of resources for developers to use when designing for iPhones at:  http://developer.apple.com/iphone/program/

 

What makes a Great Web Site?

Wednesday, March 4th, 2009

A great website starts with a goal. Ask yourself what it is that you want from your site. What image of your company do you want to portray? Are you looking to begin ecommerce and sell products and services straight from your site?

Once you have the answers to these questions then you can begin to design and develop your site. If you are new to this you might want to contact a web development and design company to assist you.

No matter if you get help or do it on your own you want to be sure to follow some simple guidelines. You want the content on your site to be focused. A visitor to your site should immediately know what services or products you are offering. If they don’t know what you provide they will quickly leave your site. The information needs to be useful and up to date. The content on your site should give you credibility in your industry so that visitors feel they can trust you and your products or services. Include newsletters about the latest occurrences in the industry or with your company, provide statistics, offer former client testimonials. The more information you have provided the safer a visitor will feel with your company.

A website will allow you to provide a wealth of information to your site visitors. Don’t throw all of that information at them on the main page. Include navigations that are simple and smooth. It should be easy for them to get through the information as they navigate around your site. Good organization and smooth navigations make it easy for them to find the information they are looking for so they don’t get frustrated and leave the site.

The look of your website should be appealing. The background colors and text colors and font should complement each other. If your site is hard to read people won’t read it, they will leave it. Remember that different browsers sometimes read colors differently so something that looks great on your screen might look horrible on a different screen using a different browser.

These are just a few of the things to consider when creating a great website. As you design your site, don’t forget your main goal. Don’t build your site geared towards your business gear your site toward the visitors so that they will become customers.