Designing Your Web Site For ALL Browsers
Let's face it. Building a web site that browses consistently on multiple platforms and multiple browsers is not always as easy as we would like.
It is safe to say that most designers spend most of their time building their sites on a given platform. Those with the highest standards should, upon completion, take a look at their creation in different browsers and different platforms.
Sure, you could see how it looks in Window 98 with Internet Explorer and let that be good enough, but do you really want to risk a bad web experience for millions and millions of potential visitors? Consider this....
A recent statistic I saw reported that 12% of internet users were Macintosh users. Ignoring this fact is like creating a catalog that can only be optimally viewed by one in eight of your customers.Furthermore, not all of the Windows users are using Windows 98. Windows 95 continues to be widely used, and Windows 2000 and NT represent a significant percentage of visitors.
It would be remiss to ignore the small, but growing contingency of Linux users. Though small in number at this time, the popularity of the OS grows daily.
Platform issues aside, Internet Explorer, despite Microsoft's inclusion of it with all Windows Installations, does not represent the only browser option. Netscape continues to enjoy a strong following of users numbering in the millions, and Lotus Notes is being used by numerous corporations as the "standard" browser and e-mail application.
Then, of course, there is AOL. Although basically an IE engine "under the hood" AOL continues to include certain differences. Considering the vast numbers of AOL users, this browser must not be overlooked. If your site does not look good in AOL, then you are risking turning away a huge percentage of potential visitors.
It should be clear that cross platform and multiple browser compatibility is a must. Therefore, understanding a few very basic and simple techniques to help keep your pages looking their best in the most places is also a must. Following, you will find a few tips and ideas to help you do just that.
#1 Paint the canvas your visitors will see
As a web site designer wanting to be as efficient in my work as possible, I have configured my Mac to use two monitors. As my mouse leaves the screen of one, it appears on the other. Thus, I have a canvas that, on most days, is 1856 pixels wide over 32 horizontal inches. If I want to, I can easily boost that to over 2000 pixels wide. But, my clients and the average visitor on the web do not have two monitors. In fact, most of them have the screen resolution set to 800 X 600 or 1024 X 768. What's more, every single time I have gone to a client who uses AOL, their browser window opens to what looks to be a 640 pixel wide default no mater how large the monitor or screen resolution.
On one of my first projects, I had designed a site to a modest 700 pixel wide format with a nice top navigation area. I went to my clients office to get some "point and discuss" feedback to find her new 21 inch monitor -- set at 640X480 resolution. My designs looked terrible!
If you intend your web site to appeal to the broadest range of visitors, you need to design in a way that will look good even at low resolutions. Check with some of your typical visitors and see what kind of resolutions they normally use.
#2 Use Tables to Control Width
Tables are great things when trying to control the way text and images go together. In order to achieve a nice looking design, using tables is the first technique to consider.
Tables can be assigned a fixed width in pixels or a fixed percentage of the window width. There are advantages to both approaches. If you are not concerned about the relative vertical arrangement of objects in a table cell, using the fixed percentage allows for more fluid layouts.
If, however, you want to keep text wrapped around an image with more consistency, using the percent approach could lead to major differences. Text will wrap quite differently in a cells of different pixel widths.
To have better control, consider using fixed pixel width. However, you must now start making some compromises. If you want to offer a site that looks good at 640X480, you will need to set your table width to 600 -- 620 MAX! You will want to center the table in the window to provide a nice look when wider windows are used. However, if your visitor has monitor resolutions set to 1600X800 and has the browser "maximized" your page will have 500 pixels of blank space on either side of your 600 pixel table.
Fortunately, few people will be browsing at this configuration. My experience visiting clients, friends, and family suggests that, even if monitor resolution is set at over 1000 pixels, the actual width of the browser window will be reduced to something less.
You must decide if you will risk an odd looking page for those few who have HUGE monitor resolution or risk the annoying scroll bar for those with the basic 640X480
#3 Compromise your Font Use.
Supposing you select a fixed width table and have a cell that is 300 pixels wide. You write a headline in this cell, pick a font, and size it to look just right. Good for you. Too bad that headline will come up different on different systems.
Even on the same computer, there are very slight differences between how Netscape and IE render fonts. Remember the 1 in 8 visitor using a Mac? For technical reason it is beyond the scope of this article to describe, fonts are significantly smaller on a Mac than on Windows. Don't forget that your visitors can also set the default size for font display in their browser, too. If they do that, you are really starting to lose control of how fonts are displayed!
One solution is to use cascading style sheets, but that technique goes beyond the casual designer's typical experiences. The other solution is to compromise. Make sure that it looks good on the predominant platform -- currently Windows -- but don't use the smallest font possible either or your Mac visitors won't be able to read it!
#4 Check Your Final on Multiple Platforms
I commit to my web design clients that their site will be look good to ALL visitors. To make sure this is the case, I have an Intel computer as well as my Macintosh. I have the Intel computer configured to boot into Windows 98, Windows 2000, and Linux. I test all the pages I design in these environments. I test in both Netscape and Internet Explorer on the Windows systems and the Mac. I enlist a partner to test with Lotus Notes and AOL.
This may seem excessive, but frequently there will be some little thing that shows up in one of the platform/browser configurations that requires some minor correction. Would it be good enough if I did not make the correction? Probably. However, it is always best to make a good first impression and on the web, where you have about 5 to 7 seconds to get visitors to commit to take an actual look, every little thing counts.
If you do not have access to multiple platforms, enlist your friends. Stop by a library or a Kinkos and use their computers (often these places may have Macintosh computers as well as Windows computers).
These four simple suggestions are the beginning of a journey toward the much larger goal of making the content of your web site universally available to your visitors. Ultimately, reaching this goal depends upon many factors. However, progress toward this goal must commence with awareness.
Understanding that your site will appear differently on different browsers and based on different user preference settings is an important first step toward awareness. Using tables and being conscientious with your use of fonts takes you one step further. Checking your work on various systems will begin to hint at how much further you have to go.
But, every journey must begin somewhere....
About The Author
Advertising research and development center
Jeremy McGilvrey, A Web Design Agency Announces Web Design Services In Pearland, Texas - Yahoo Finance
Jeremy McGilvrey, A Web Design Agency Announces Web Design Services In Pearland, Texas Yahoo Finance
Theorem Inc Wins Gold for Content Marketing / Blog Series and Platinum for Creativity (Web Design) / Website At AVA Digital Awards - Yahoo Finance
Theorem Inc Wins Gold for Content Marketing / Blog Series and Platinum for Creativity (Web Design) / Website At AVA Digital Awards Yahoo Finance
How Will Blockchain Impact Web Design And Development in 2023? The Crypto Basic
Women-Owned Software Agency DigitalDesign.NYC Launches New Division - DD.NYC®, Spearheading Branding, Packaging, and Award-Winning Web Design - Yahoo Finance
Women-Owned Software Agency DigitalDesign.NYC Launches New Division - DD.NYC®, Spearheading Branding, Packaging, and Award-Winning Web Design Yahoo Finance
Best Web Development Companies In India 2023 Read IT Quik
Rule Your Kingdom Launches SEO-Optimized eCommerce Website ... Digital Journal
Portfolio Requirements for Web and App Emphasis | Web Design ... Utah Valley University
Noble Webworks Is Offering End to End Web Development and ... Digital Journal
Learn How to Avoid Common Mistakes When Choosing a Web ... Digital Journal
DNA Digital Archives in Namibia | Web Design & Development Utah Valley University
Grandway Marketing Inc. Celebrates Over 5 Years of Being the Best ... 24-7 Press Release
Irrigreen Announces $15 Million in Seed Financing to Power Robotic Sprinkler Systems for Homeowners in the Age of Scarce, Expensive Water - Yahoo Finance
Irrigreen Announces $15 Million in Seed Financing to Power Robotic Sprinkler Systems for Homeowners in the Age of Scarce, Expensive Water Yahoo Finance
Gov. Lujan Grisham breaks ground on Creative Campus in Las ... Office of the Governor
Best AI Tools for Web Designers (2023) MarkTechPost
A Web Designer's Tech Stack Practical Ecommerce
Sagentic Web Design Celebrates 20 Years of Building Strong Online Presence for Businesses and Organizations - Canon City Daily Record
Sagentic Web Design Celebrates 20 Years of Building Strong Online Presence for Businesses and Organizations Canon City Daily Record
10 Web Design Trends to Follow in 2023 to Create a Sales-Friendly ... Digital Information World
Yoast SEO Founders Invest in WordPress Accessibility Plugin Search Engine Journal
Chicopee honors St. Joseph's Day at City Hall Reminder Publications
Texas Web Design Unveils Innovative Design Solutions for ... Digital Journal
Top 10 Web Development Companies in USA 2023 Read IT Quik
SystMD Celebrates 5 Years of Innovation in Web Design Digital Journal
Top 7 Product Design Trends for 2023 Fordham Ram
Global 3D Web Design Service Market Research Report 2023-2033 ... Los Alamos Monitor
10 Best AI Tools for Web Developers Designmodo
Web Development Business Opens in Downtown Lawrenceburg Eagle 99.3 FM WSCH
Top 11 Online UX/UI Courses To Enroll In 2023 Fordham Ram
Web development versus web design: What's the difference? Border Chronicle
WebWave shows a different approach to web design and lands in the group of top products on Product Hunt - EIN News
WebWave shows a different approach to web design and lands in the group of top products on Product Hunt EIN News
Bellevue Responsive Web Design Agency With Expert Lead ... Digital Journal
Global Responsive Web Design Services Market Research Report ... Los Alamos Monitor
Eastbay SEO Company Celebrates Quality Services Since 2015 Digital Journal
How to Start a Website Money
I don't want to log in to your website The Verge
Russia's Economy Is Starting to Come Undone The Wall Street Journal
ATV Maine announces Stephanie Miller as keynote speaker at ... Bangor Daily News
A massive BC break - PHP SitePoint
How Automation is Changing the Landscape of Web Development Robotics and Automation News
10 Steps to Choosing the Best Web Design Firm The Local Ne.ws
Retailers are using sneaky web design to catch you out Creative Bloq
Web design company owner learned the skills she needed to ... Ohio University
Simple Steps to Mobile-first Web Design Practical Ecommerce
20 Free Web Design Tools from Fall 2022 Practical Ecommerce
This Colorado web designer doesn't want to make wedding sites for ... Colorado Public Radio
Happithy Marketing Launches Custom Web Design, Virtual Reality, Social Media Marketing, App Development, and Gamification Services - Yahoo Finance
Happithy Marketing Launches Custom Web Design, Virtual Reality, Social Media Marketing, App Development, and Gamification Services Yahoo Finance
Top Web Design Trends 2023 Designmodo
System Breaks Down Barriers for Blind Web Designers Maryland Today
7 AI Writing Tools on Writesonic for Web Design MUO - MakeUseOf
How to Convert Any Website Into a Figma Design MUO - MakeUseOf
6 web design trends to watch in 2023 Creative Bloq
10 Professional-Level Web Design Tools to Get the Ideal Website Robotics and Automation News
This fiendish quiz tests your web design knowledge Creative Bloq
The 10 Best Web Development Companies MUO - MakeUseOf
Web Design: A Dive Into the Digital World The Piedmont Highlander
Wheelistic Web Design rebrands as Green Marketing Lawn & Landscape
What Rust Brings to Frontend and Web Development The New Stack
Understanding the Basics of Web Development Enterprise Apps Today
Engines of Our Ingenuity 2470: Spider Web Design Houston Public Media
Is It Worth the Cost to Hire a Web Designer for Your Business? The Motley Fool
Testimonials Can Increase Your Web Traffic
We've all seen and read product testimonials. They're a very valuable tool for merchant salesand can often tip the scales in determining a customer's decision to buy.
Is Your Web Site Turning Visitors Away?
One of the biggest problems with Web sites is that the very first pageon the site is turning people away.Why? Because most Web site owners talk about themselves instead oftalking about their Web site visitor.
Web Page Building for Beginners 4
Page ranking by search engines such as Google are not only overrated but unusually explained by "experts" in the SEO field. SEO stands for search engine optimization and is needed to get your website placed at the top of a web search.
Looking For A Designer To Re-Design Your Website?
If you were like me and you have just started an online business, you have a website that you have made or someone has made it for you, and this design does not match up to your expectations and the competition. Fear not, there is an inexpensive solution to your problem.
Leave Those Links Blue!
Don't mess with those links! When you're designing your site, you should leave your text links in their natural state--blue and underlined. We all want to be creative and not do the bland, expected, normal thing.
Its No Good Having A Killer Product If You Dont Have A Killer Website
Read the title of this article over a couple of times in your head so it really starts to sink in.So what does this title really mean.
Through The Looking Glass
My mother used to take me along when she visited an old ladydown a cobbled lane who had a crystal ball on her dining roomtable and a pack of playing cards. My mother was superstitiousand really believed a lot of what she was told by the old lady.
Web Designers Beware!
As a web designer, I have a personal interest in a new trend which threatens to put me and my kind out of business. That "threat" is Web Design Templates.
Web Design:10 Magnificent Millionaire Dollars Ad Copy Secrets To Empower Your Website..
Hello, how is your website doing?Are sales flowing in?If you answer no, may I offer you 10 eye-popping web design secrets to make your website sell!1. Use a hand written letter on your ad copy insteadof text.
Banner Enchancement - Designing Your Banner
A well designed web site is great to have, but what if no one ever comes to it? Most web sites either rely on advertising, or have used advertising at some point in their existence, to get people to come to view the site. This means that your going to have to have not only a well designed web site but also well designed banners to attract your visitors.
Flash - To Use Or Not To Use?
Out there in the WWW there are thousands sites using flash for their needs. But the majority sites are not in this list.
Colorblind People, Can They Really Read Your Web Site?
I once created a notepad-like editor. It is possible with this editor to write Russian text on a western Windows without using a Cyrillic keyboard in front of your computer.
Maximising Web Site Viewability - Browsers
With so many different configurations internet users have their computers set up with, it can be difficult to decide how web sites should be configured so that it is viewable in as many configurations as possible.So in the last 6 months i have been logging the statistics from my web design site to achieve as accurate a result as possible to answer this question.
My site is working fine. The links work.
Why Dot-Coms Fail - a Webmasters Perspective
Everyday we hear that another company goes out of business.When and why does a dot-com become a dot-bomb?After checking few dozen defunct companies, I think the main reasons for dot-coms failure are:Poor business plan.
Business Opportunity for Graphic Designers
As a graphic designer, you are sitting on a gold mine. Youhave a skill other people do not have, and you can use thatskill to earn a good living.
What Your Website REALLY Says About You And Why It Matters
Everything you say and do says something about you. This has never been more true than in a text based environment like the Internet.
Creating a Basic Web Design Template
A "template" is simply a design format which you can apply to all (or most) of the pages in your web site. The first advantage of using a "template" system is that it allows you to make your most important design decisions at the beginning, and then just focus on content.
Create Favorite Icon
Favorite icon appears to the left of your link in either address bar or in favorites menu of your browser. It gives your website more personality, better visibility in favorites menu and is easy to create.
Should You Bother Learning HTML to Build Webpages?
The most popular method to build webpages today is to use WYSIWYG (What You See Is What You Get) software. Microsoft FrontPage and Macromedia Dreamweaver are prime examples of WYSIWYG software.
|home | site map|
|Webdesign-box © 2006|