Tag Archives: Web Design

Don’t Defeat Accessibility on Your Website

Some people need extra help surfing the Web. Some use readers to actually read the content of a web page and others need to enlarge the text of websites using Tools >>Text Size. When your web designer creates your page design and uses a pixel size for fonts instead of a percentage or an em, you are defeating the ability for readers who need extra help to get it.

As a web designer myself I do like to have control, but now there are many new options that designers and site owners simply need to be aware of to help. One new option is to use a global style sheet that controls your fonts, font sizes, colors, and links all on one page for the entire website. Another one to be aware of is to describe font sizes in a percentage or as an em, which is the width of the letter m in any font. Using these font descriptions instead of using a pixel width description allows your reader to resize the font as needed.

Web designers need to design especially for use of font accessibility, it is not something that can be added as an after thought but rather as an integral part of a new design.

I am currently in the process of redesigning my 1221 page website and am incorporating improved accessibility features in my new website. So when you hit a website where the font doesn’t change even when you click largest font, you will now that the web designer has defeated one of the biggest tools on the Web that shouldn’t be tinkered with to help people who need it.

Share

Three Web Design Layout Types – Liquid, Elastic, Fixed

There are three web design layout types. Use our information below to find out which one you want to use.

Liquid Layout

This layout style resizes to fill your browser screen regardless of your screen resolution.

Fixed Layout

This is the most popular layout style on the Web. It is a fixed size determined by the web designer. It gives excellent graphics control but may make your website appear dated as larger screen sizes become more popular.

Elastic Layout

This is a new design layout. One that resizes based on on screen resolution but rather resizes based on the font size that your viewer selects to view your site.

To complicate things even further there a wide variety of hybrid layouts that are popular on the Web. Some are:

  • liquid content section with elastic left and right sidebars
  • fixed side bars with an elastic content section
  • fixed side bars with a liquid content section

My own business site is currently done as a fixed layout. I am currently in the early stages of redesign and am leaning toward a liquid content block with elastic sidebars with padding around the whole container.

Choosing the layout style for your website is best not left to the novice but to the web design professional who can discuss which option is best for your viewing clientèle and type of content you will be displaying on your website.

Share

Top Five Web Design Myths

Here are my top five web design myths and answers to each one.

  1. Search engine spiders can index Flash so I’m okay if my website has been built in Flash.
  2. How long it takes to load a website page doesn’t matter – everyone has DSL anyway.
  3. I like an entry page for my website that is all graphics it’s pretty and sets the tone.
  4. I was promised by this firm top placement on Google if they overhauled my home page and website.
  5. I want my website to have a lot of video why are viewers complaining to me that they can’t see my video.

1.  Search engine spiders can index Flash so I’m okay if my website has been built in Flash.

Wrong, sorry, even Google states that they aren’t good yet on indexing Flash even though for nearly a year they have said they can index Flash. I can tell you that I get more calls for pay per click promotion and search engine optimization from websites done in all Flash. It is far better to use Flash judiciously say a hybrid html site with a Flash banner. What’s the purpose of having a website if no one can find you on search engines and if they can’t even bookmark a content page on your website?

2.  How long it takes to load a website page doesn’t matter – everyone has DSL anyway.

Wrong, sorry, even Google AdWords is now counting how long it takes for a page to load. The industry standard is a load time under 10 seconds. The faster your load time the better.

3.  like an entry page for my website that is all graphics it’s pretty and sets the tone.

Whoops, so sorry this one is wrong too. Splash pages are old news. Now search engines want content and they want it fast. Readers don’t want to watch a movie about your business. It is the Burger King Syndrome – my way right away!

4. I was promised by this firm top placement on Google if they overhauled my home page and website.

Hmm, the home page IS really important, but no one and no firm can guarantee top placement on Google. Google very closely guards the secrets of placement to prevent others from spamming the system. If they are not on the Google payroll, they simply cannot know how to guarantee top placement.

5. I want my website to have a lot of video why are viewers complaining to me that they can’t see my video.

Video is great, but the home page should be about spiderable content. When you do provide video make sure you provide options. I have found that videos turned into Flash are the quickest loading on the Web, then comes Windows Media Player files, and last of all QuickTime. If you are going to have video use only one on your home page and make it a Flash video. Try a preloader option in your body tag for other important videos and provide viewing options.

Share

Adobe’s Kool Kuler Picker – Kuhler

Adobe has a very cool, whoops kuhl, color picker our called Kuhler and it is KUHL!

This flash application allow you to custom pick colors for a new web design, graphic artwork, test new schemes, save them and in general see what works visually before you design it.

I consider this an excellent design aid and will be using it for my new website redesign. You can visit the application here: http://kuler.adobe.com/.

I have tried many color picking applications and this one is by far the most advanced, most interesting, and super easy to use. Even if you are not a designer, I think that you’ll have fun moving the dots around on the color wheel and seeing where the triads fall for the best color scheme. Check it out!

Share

Use CSS for Print Friendly Pages

It used to be that if you wanted a print friendly page version of each page of your website you made one and blocked the search engines from indexing them as duplicate content by blocking them in your robots.txt file, but now you can get your printer friendly page with just a wee bit of CSS code and a print style sheet.

With all custom web sites that we design now, we include the CSS to create a printer friendly page, just by clicking print – no new URLs just smart coding. It’s a fairly simple thing to do and yet so very elegant and much appreciated by readers.

In our print friendly versions, we block out colors, navigation, and sometimes images. In our current site www.mccordweb.com and www.mccordwebdesign.com we do not use CSS print versions as these sites are older sites and we will be replacing them with new designs this year, but all new client websites have CSS print friendly pages.

If you have a website in design right now, make sure to ask your web designer will they be doing CSS print version pages for you as well.

Share

Page Layout Slip Sliding Around

You’ve seen websites like this, the layout slides around over lays other elements and looks very different in Firefox and Internet Explorer. Although the world is moving to all CSS website design layouts, there is still use for table layouts combined with CSS.

I have found that these hybrid layouts may be more cross-browser compatible and may in some cases even load faster then pure CSS designs. I do like the ability to make fast global changes with CSS, but have not stopped using tables all together for best practices.

Case in point, in Dreamweaver CS3 use any CSS three column layouts and then insert a Spry navigation menu. Even with absolute positioning, the menu is not locked down and can slide around the page depending on which browser your use to view your site with. That’s a real problem! If you want it on the right, it needs to stay on the right! Lock the Spry menu inside a table and position the table with CSS and you’ve solved the problem across all browsers.

So will web design be all CSS in the very near future? Most likely not, but more will be moving into that same direction. Now, if we could only get all browsers to follow the same box model that would be huge step, but, sigh with IE not following the path of others, it makes it very difficult to embrace a pure CSS layout and have it look great for everyone. 

Share