The Apple design team is widely regarded as one of the most talented group of designers in the industry today. The trends that they set are followed by not only every other major tech company, but by web designers in every conceivable product and service niche.

Follow along as we embark on an exciting journey through time and witness the evolution of Apple’s design style. You’ll get several amazing glimpses at Apple.com dating all the way back to 1997 as we witness the rise and fall of several important design trends.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Apple and Design

The image above is a snapshot of the Apple website as it currently stands. It’s a perfect picture of everything we love about Apple’s sense of design. It’s clean and minimal with a strong emphasis on the beauty of the product.

There aren’t a million different banners or mega drop down menus to sort through, just a simple navigation scheme, a featured product and four distinct content boxes along the bottom that serve as a universal way to highlight other important products and information.

Notice the copy as well: brief and to the point with a touch of hyperbole (where would Apple be without it?). Despite the fact that the iPhone 4S has hundreds of features to be bragged about, they’ve whittled it down to four basic bullet points, just enough to snag your interest and encourage you to look further.

Was It Always This Way?

Apple has long been known for their sense of style and superior design. Unbeatable innovation is at the forefront of their success, but pushing that success along has been a tightly integrated brand image that’s irrevocably ingrained in its products, commercials, web pages and even its stores.

As we look at Apple.com as perhaps the most prominent and frequently updating pulse for Apple’s visual brand, I can’t help but wonder about the journey. How did this brand evolve? What did early versions of Apple.com look like? Were they similar? Did they share the same simple aesthetic or were they more prone to reflect the busy web design styles from a decade ago?

Apple in Print

To get a feel for Apple’s brand evolution, we should briefly consider the time before Apple.com even existed. From the genesis of the company, Jobs always placed a strong emphasis on simplicity. However, that term had a very different visual translation back then. Mac Mothership has a delightful collection of vintage Apple ads that give us a glimpse into Apple’s brand image in the late 70s, as you can see, it’s a far cry from Apple.com today.

These ads are filled with sales pitches and informational copy. This may be a necessary evil for new product categories, but it goes beyond this. Even the logos show an evolution of Apple’s definition of itself. The original on the left is a very complex illustration of Newton under a tree, the updated version on the right is a colorful rainbow shooting across the page. Both are far more complex than the simple and ubiquitous symbol we see today.

For the next twenty years Apple would flirt with generous amounts of whitespace but only briefly in between ads that followed the same basic copy heavy approaches that we see above.

It could be said that the most important jump towards the simplicity of the Apple brand that we know today came from TBWA\Chiat\Day, the agency behind the original 1984 Macintosh commercial and subsequently one of the most famous ad campaigns of all time: Think Different.

By 1997 Apple had found its identity. In over a decade, the Think Different campaign hasn’t aged a day. It doesn’t feel antiquated like the original Apple ads, it is instead timeless and powerful enough to impact many subsequent generations.

Back to the Web

Think Different changed everything for Apple (this charge was of course led by the return of Jobs in 1996-97). It provided an amazing identity not only to Apple, but to its customers. Visually, it rocked Apple’s brand style into what we know today.

Nowhere is this clearer than on Apple.com. Using the wonderful time machine of The Internet Archive, we can travel back to the early days of Apple’s website. Think Different hit in 1997 so if our premise proves true, we should see this as a year of change for the site. Here’s a look at Apple.com around the middle of 1997:

Not quite what you’d expect from Apple is it? Like the early print ads, here we see type, and lots of it. To be fair, compared to the general state of web design at the time, this was in fact a fairly minimal design. Indeed, everything is laid out nicely, but there is a ton of content. In fact, what you don’t see in the screenshot is that those news paragraphs go on for miles (click here for the live version).

Keep in mind that this design is pre-Think-Different. The previous Apple.com designs shared this aesthetic. Now let’s jump to May of 1998, the first in-tact post-Think-Different Apple site I could find.

The difference between the two aesthetics is incredible, they don’t even appear to be from the same company (let’s face it, they really aren’t). Where we used to find clutter and an over-abundance of information, we now find whitespace; tons and tons of white space. Where we used to find a page that scrolled for miles, we now find brevity.

The simple headline just says “Apple,” the product shot has made its rise to the hero and there’s even an impressive animation of the iMac spinning into place via the wonder of the animated GIF.

Think Same

The most amazing part of the 1998 design to me is just how similar it is to what Apple is currently using going into 2012! The typography, logo and splashes of color serve as an important design lesson in what type of elements you can expect to age over time in your design, but the fundamental layout here is shockingly close to what we see on Apple.com today.

The top portion of the site is reserved for the main product feature (in this case the original iMac), and the bottom is split into a few horizontal rectangles that feature other important products.

Key Differences

As I mentioned, the typography is a main element that stands out in this evolution. There’s a reason we refer to sans-serif typefaces as “modern,” you can clearly see how Apple’s current font brings their designs forward in time compared to the classic old style serif from 1998.

One of the most important changes I see here is the navigation, notice how far down the page it is. These days we’re so accustomed to topside navigation that this design would certainly throw many users for a loop (perhaps even an infinite one). Apple has obviously learned that helping you get to where you want to go on the site is quite literally a top priority.

A very important component of the layout that you don’t get from the cropped screenshot above is that the fixed width content sits on the left side of your screen. These days modern sites usually center their layouts so that the origin is the middle of the browser window.

Also worth mentioning is the Apple news feed, which remained a staple on the site for years and was only removed earlier this year.

Moving Forward: 1999

By October of 1999, Apple was still using the same design. The products are evolving but the page design is almost exactly like it was the year before. Notice the shout out to Pixar’s Toy Story 2 right on Apple.com, can you tell that Steve is at the helm of both companies?

Also notice a big change in the logo, by now Apple has killed the rainbow in favor of a solid white Apple. Apple would prove to be a strong leader in a logo simplification movement that’s still going on today. You can read more about this in our article, Pepsi vs Coke: The Power of a Brand.

2000

When we hit May of 2000, we see a few big changes take place. For starters, the entire layout is now centered in the browser. Further, the navigation has finally been moved to the top and closely resembles the aqua-style interface that Apple made famous with OS X. Notice the how complicated the navigation is with the two layers of links.

Glossy buttons and tabs were a huge movement in web design and were the standard “cool” for several years. The current web designer obsession with simple, minimal buttons with flat colors or subtle gradients is a direct response to this more ornate style

2001

Fast forward to November of 2001 and we see a few more important jumps. The aqua style has made its way down to the news feed, sans-serif type is beginning to take hold (notice the subhead) and the content boxes have evolved dramatically. We’ve made the jump to four instead of three and the boxes are now fully distinct shapes with rounded corners like those we see in the tabs at the top. They’re still rounded today, but Apple has pulled back dramatically on the border radius.

Though Adobe takes the center stage in this screenshot, 2001 was a monumental year for Apple due to the release of iTunes and the iPod. This marks their first foray into a generation of non-traditional devices that would entirely redefine the company. This was also the year they made the jump to OS X, a decisive move to a much more friendly and intuitive system which would prove helpful in winning over Windows users drawn to the Mac by their love of the iPod.

2004

By late 2004, Apple had begun to experiment with highlighting its main content area with a solid color rounded corner box. More typically, you would see this box in black, which made for beautiful contrast with the white background, but the iPod’s colorful advertising marked an occasion to bring some life to the page.

Another really important aspect of the 2004 design: they’ve made the jump to all sans-serif type. This is a major milestone in the advancement of design trends.

2005

Flirting with black in 2004 led to a major experiment for the release of Tiger in 2005. Here we see most of the Apple.com homepage flooded in black. A trend that carried to many of the product pages.

Also a very big deal by 2005 were product reflections, visible on the bottom of this page with the iPods. I fully remember seeing these and immediately ripping them off for the projects I was working on at the time.

2007

Apple trends stayed fairly static for the next few years, it wasn’t until late 2007 that they finally made a huge and very welcome leap towards the site that we know today.

The site’s homepage has been completely overhauled. They’ve widened up the content considerably and killed the old aqua navigation, replacing it with a greatly simplified version utilizing the smooth gradients that I already mentioned would follow the aqua trend for most designers. The expanded content width can definitely be attributed to the widescreen displays that were now present on most desktops and notebooks alike. It’s very important to stay aware hardware evolutions that can and should affect UI design trends.

Also notice that the search bar is finally at the top of the page. This was an afterthought thrown in at the bottom for far too long and it was great to see it finally get the attention and prominence that it deserved.

2011

Apple found its stride with the previous design and it stuck largely unchanged until January of 2011, an impressive run by any standard!

At the beginning of this year, we saw Apple take a step back and return the navigation to a glossy look, albeit an updated dark finish. They also began experimenting with some subtle background noise texture, a painful move in my opinion that made their typically leading design team seem like they were jumping on popular trends set by countless others before them. Click the image below to see the texture up close.

What’s Next?

It’s difficult to predict where Apple’s homepage will go next, but we see some interesting experiments taking place further in the site. Despite the fact that the home page has dropped the noise texture, the current iPhone page has introduced a much heavier implementation of a textured background, with an inset product area.

There are also some really impressive animations of the iPhone flying in and out of view. These replace the animated GIFs of 1998 with modern web technologies, but the heart of the idea is definitely the same.

Going forward, will we see Apple return to old tricks like animated products and glossy buttons? And will they trudge on in their implementation of textured backgrounds, perhaps introducing more of the textures that we see in iOS? Your guess is as good as mine!

Conclusion

This study of the evolution of Apple.com is so much more than a look into the whims of a single company, it serves as an important lesson on several major web design trends for all companies in the last decade. We witnessed the simplification of layouts and reduction of text, the rise of sans-serif type and the several year love affair with gloss that we’re still toying with today despite the resulting rebirth of minimalism.

We can easily spot other trends as well such as the increase in importance of search bars, the realization that navigation should be prominent and easy to find and the richness that new web technologies are bringing to web design in a post-Flash era. Apple has been responsible for pushing HTMl5 and CSS3 perhaps more openly than any major tech company in a direct assault against Adobe’s reign.

A huge thanks is owed to the folks at Internet Archive for preserving these and countless other important pieces of design history. I greatly look forward to seeing whether Apple will serve as a leader or follower in web design trends in the years to come.

For the average webmaster these tools provide a very powerful and free resource to setup as your backend. Google can be used to fuel your company and track visitor stats, revenue, plus tons of other metrics! We have gone over some of the most prosperous services and how you may benefit from them. With just a single Google account you have access to all of their apps completely 100% free. Talk about a sweet business deal.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Google Webmail

Most people get started using Google Accounts in Gmail. Upon signing up you get your own e-mail address and a personal inbox for your stuff. But Google also includes a few extra tools – namely a contacts book and tasks list. These are great for managing the many details you have to juggle as a digital professional.

As you e-mail back and forth contacts are automatically saved into the address book. You can add further details and export the database to another system such as Outlook or Mac OS X. Additionally these contacts will carry over from Gtalk buddies who you can add in the left sidebar of Gmail.

By default GTalk is enabled on all new profiles. Since some conversations better handled instantly, this is a meaningful alternative to e-mail in some cases. But you do have the option to turn this off at the very bottom of the inbox pane. And since Gchat can run through any 3rd party Jabber client, you can actually use Talk for IM and setup Gmail solely for messages!

As if all this isn’t enough you can also attach personal POP/IMAP e-mails to your account. Such as if you have myname@designshack.net Google will pull from your web server and download all new messages right within Gmail. This completely streamlines your workflow for checking e-mail messages in more than a few websites.

Business Documents

The cloud has become a popular resort for digital works. And Google is thinking the same way by constructing Google Docs to run within your browser window. This means Microsoft Word has a tough competitor for document processing.

Google Docs actually includes the tools to create spreadsheets and presentations as well. This makes collaboration between partners and groups extremely simple. Everything is stored remotely within your Google account on their external servers. However you always have the option to backup a copy of your file and download locally to your hard disk.

The apps feature a fully-equipped toolbar with all the formatting options you would expect. Documents can be shared with contacts or even just by e-mail address. By default everything you create is private, but you can include a party of friends to leave comments and edit content. I find that Google has become the best alternative for creating professional docs, all of which are stored securely within my own account.

Google+ Network

There have been plenty of opinions about the new Google social network. This incorporates everybody who has been using Google into one Facebook-esque news feed. At first it seems like a social networking app for techies, which to an extent is very true. But there can be a lot of business done here as well.

The root URL is http://plus.google.com which either redirects to your home or will display a sign-in page. When you add friends into GTalk you can access a full menu by default on the Google Plus homepage. This is an alternative to using Gmail, where now you can separate e-mails from live chats.

But Google+ also has something called a Hangout where you invite multiple friends to chat via web cam. Of course this is a great way to keep in touch with friends and family around the world. But why not hold business meetings from within Google+? Many users don’t understand GTalk or don’t have the proper plugins for video chatting.

Planning your Calendar

The all new Google Calendar actually features some really fun new tools. Firstly the tasks list from Gmail is tied into the sidebar by default. So in here you can set a specific day and time to have something completed, and even tie in a reminder through Google.

Most of the major holidays are added into the calendar right when you sign up. Everything is fairly straightforward to understand if you’ve used a calendar system before. I personally don’t use this app all too much since I use my physical wall calendar at home. But Google Cal gives you the opportunity to separate your personal and business life with ease.

Traffic Analytics

Google Analytics is easily the most popular and dedicated website analytics software to date. Webmasters would be foolish to use anything else since Google is both free and always reliable. The service will archive all of your numbers for years to come and you may compare trends over time.

Additionally, when you create a new website profile you may include other administrators on the account. This means you and a few friends can login to your own Google accounts and still check the same analytics data. In this way it’s possible to keep tabs on ten or even one hundred different website brands!

Google Webmasters tools is another directory full of helpful apps. This doesn’t tie into your Analytics settings, but you can get better search engine rankings by following a few suggestions. This set of tools is made for beginners and should be dead simple to get running on your site. The most important type of visitor is organic through a keyword search. So I definitely recommend webmaster tools to increase your rankings quickly.

Conclusion

There are so many other things Google can offer, it’s really hard to expand on them all. You can also become distracted from work through these many outlets. So be cautious of your time and start slow if you’re new to Google.

Depending on the type of business you run, some of these apps may feel a bit pointless. But that is the great part of Google since the whole development community is open to all career types. Maybe only a few webmasters will use the Google Blogger service, but mostly all digital professionals can find a use in Gmail. Keep this in mind as you explore other neat features Google has to offer, and let us know your thoughts in the discussion area below.

Open the safari preferences window, click on the ‘advanced’ option and then select the box entitled ‘Show develop menu in menu bar’. Straight forward! The result is a new field in the top menu which looks like the following:

Changing the User Agent

When testing your website, there are four main browsers to bear in mind – Internet Explorer, Firefox, Safari and Opera. We have covered testing these browsers on both the windows and mac platforms previously. If, however, you need to quickly use the user agent one of these browsers in order to check a piece of conditional formatting, Safari makes it easy. It is also possible to spoof the user agent of an iPhone or iPod Touch browser to check how your website would behave on a mobile device:

Whilst this does not allow you to test how your website looks in these browsers, it is possible to check that any conditional formatting, browser specific CSS or mobile device re-directs are working as expected.

The Network Timeline

Whilst user agent emulation is handy, by far the most useful piece of functionality in this update is the network timeline. This offers a visual representation of each item loading on your webpage, along with the time it took and the total file size. It makes it very easy to see which elements of a page are slowing the user experience and where your page needs cutting down.

Running Design Shack through the tool shows that our main bandwidth hog is the images on the site – fairly expected due to the nature of the website! It did highlight a few scripts which took longer to load than we expected and may be a basis for changes in the future. This is what the tool looks like when running:

Whilst similar analysis tools have been available for many years, this is a great way to visualise the back-end of your website. Try running your web page through it and let us know if you find anything interesting!

1. A CSS Styled Table

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

2. A CSS Styled Table Part 2

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

3. Creating a Dynamic CSS & AJAX Table

I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

4. Tables With Style

It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

5. Redesigning a Simple Table

A series of excellent examples, showcasing how to simplify a basic data table by eliminating unnecessary interface elements.

6. CSS Table Gallery

The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. It’s a great way to see a bunch of interesting examples.

7. Various Table Techniques

Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more… These examples are forward thinking, and also degrade well to older browsers.

8. Firefox Theme Table Example

I banned the use of tables in my works when I first switched to CSS based layouts. But I was still missing the point of tables, tables are a way to markup tabular data. Once I got that point in my head, I started to think of things that really were tabular data such as the next example of Mozilla Firebird themes. Each row is a record of a theme and the columns are the fields for each theme.

9. The Table Ruler

With a bit of JavaScript / DOM sorcery, we can provide our visitors with the same functionality for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

When the Internet was first conceived, there were only a couple of fonts available to use. With the introduction of CSS, designers now have much more control over which fonts are displayed and how they are laid out on the page.

Serif Fonts

Serif fonts have been around for thousands of years. Their characteristic is that they have a small flick at the edges of lines making up the letters, leading to legible and easy to scan type.

You can see above this is particularly noticeable on certain characters. Good examples of serif fonts include Times New Roman and Garamond.

Sans-Serif Fonts

Sans Serif fonts are much more recent, and are used heavily in online media. This is because they have less clutter, and are easier to read at much smaller sizes – lending themselves to use online where space is limited. On Design Shack, you can see that Serif fonts are used for headings and titles, with Sans-Serif for the main body of text.

Limitations

It is tempting when designing to feel that you are able to specify any of the fonts you have on your computer for your website. Unfortunately, this isn’t the case. Only fonts available on your visitor’s computer will work on your website, with the browser defaulting to its standard font otherwise. For this reason it is important to specify several fonts in your CSS file:

body {font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif; }
blockquote {font-family: Georgia, Garamond, serif; }

This ensures that you can degrade the font to your choosing if the ideal one isn’t installed on the viewers system.

Why typography is important

It is all too easy to focus on the layout, colours and pictures on your website and let careful font consideration fall to the wayside. This is a recipe for disaster! Your readers need to be able to navigate clearly through your website, and using headings, lists and fonts clearly can facilitate easy scanning of pages.

Splitting your writing up into small blocks of text also makes deciphering it’s meaning and message much easier. Take care when choosing fonts and you’ll reap the benefits. For more information, take a look at our further tutorials on Fonts & Typography.

1. Validate your XHTML and CSS

Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.

2. Add alternative text for images

Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.

3. Make sure your site works without JavaScript

As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.

4. Use CSS to seperate content and formatting

As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.

5. Provide a high contrast style sheet

Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.

6. Ensure link text is descriptive

Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.

7. Add “Skip to content” links on pages

Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.

8. Ensure every form has label tags

Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.

9. Don’t open links in a new window

Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.

10. Make an accessibility statement

Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.

The basics

The idea behind web accessibility is ensuring that everyone, regardless of their platform, browser or personal situation can easily browse your website. This often (but not always) involves the need for the following things:

• High contrast versions of your pages being available
• Alternate text being placed on links and images
• Links being appropriately named, for those with text-to-speech browsers
• Testing your site without Javascript and CSS turned on
• Providing appropriate META data

It’s not just about disability…

Obviously, designing our websites with disabled users in mind is an important task, and something we shouldn’t take lightly. But the fact is that web accessibility applies to so many other areas as well. If you’re browsing websites on your iPhone, 3G Phone or even WAP mobile, you’d better hope that the designer considered accessibility when putting the site together. Nowadays, people can browse the internet on a TV or game console, kiosk machine, handheld computer, or even a fridge! Ensuring your designs are accessible mean that you don’t prevent these people from visiting your site.

…but that’s also important!

Disabled users struggle when accessing websites for many reasons. Those who have sight problems won’t be able to pick out your intricate colour scheme, so providing an alternate – high contrast – CSS document will allow them to see your site clearly. Distinguishing links may also be a problem, so providing clear roll-over effects makes it obvious what can be clicked.

For the same reason, text-to-speech browsers are available which read out the contents of a web page to the visitor. Using ALT text for images and clearly labeling links is vital here, so that someone can navigate your website without actually having the visual elements.

People commonly also struggle to use a mouse and keyboard easily, and so use voice controlled browsers and software.

Accessibility statistics

According to W3Schools, around 6% of web users have Javascript turned off in their browser, or use a browser which doesn’t support it. This alone is enough of a reason to consider what your website looks like without Javascript, or other technologies such as CSS, Multimedia, Flash etc.

In May-June of 2001, about 38% of adults with disabilities used the Internet at home, compared to about 56% of adults without disabilities, a gap of 18 percentage points. In December 1998, about 7% of adults with disabilities used the Internet at home, compared to about 26% of adults without disabilities, a gap of 19 percentage points. In that 2.5 year period, the rate of home Internet use increased by more than 400% among persons with disabilities ( from 7% to 38%), compared to about 200% among persons without disabilities (from 26% to 56%). If the Internet use by persons with disabilities continues at the same growth rate, it should match the Internet use of the non-disabled in a few years.

(*Source: National Organization on Disability, 2001)

This excerpt from CSUN shows that a large percentage of disabled people do use the internet, and that it is continuing to grow yearly. In the USA, around 7 percent of internet users are registered as having some form of disability. It’s vital not to forget about this section of your audience, and consider accessibility in design.