1
The web design challenge
Web design is the art of creating websites that are attractive and easy to use. But itâs complicated by all the different browsers and devices visitors use. Learn about the principles for building a site that keeps everyone happy.
The goal of this book
The diversity of devices
How devices affect design
Introducing key technologies
Degrading gracefully
What about mobile?
Understanding accessibility
Top accessibility principles
DIY or outsource?
How to set up your website
The goal of this book
The most exciting thing about the Internet is not the way itâs transformed virtually every industry, nor the way itâs enabled us all to be better informed about the world, and more in touch with our family and friends, than ever before.
Itâs the fact that anyone can join in. If youâve got something to share, the world is waiting.
You can find supporting resources for this book, including all the links from it (so you donât have to type them in) at www.ineasysteps.com or www.sean.co.uk
You donât need anyoneâs permission to set up a website. You donât even need that much money: you can sometimes host a site for free and can rent a domain name for a year for about $10 or ÂŁ10. Of course, you might choose to invest a bit more. You might want to pay for professional hosting with more advanced features.
If youâre promoting your business, you might prefer to commission professional designers, and maybe even pay someone to help promote your site.
If youâre doing it all yourself, youâll most likely pay through the time you spend on the design, although you might splash out on some software that makes it easier.
In this book, Iâll teach you the key principles of web design, which is the art and science of building effective and attractive websites. This book will introduce you to the key technologies of the web, and the design principles that underpin successful sites.
Whether youâre a budding designer who plans to build your own site, or you just want to be able to talk to professional designers in their own language, this book will give you an understanding of how websites are designed, so that you can make the right decisions in launching your own site.
I wonât lie to you and tell you that website design can be mastered in 240 pages. The best websites are built using a combination of technical and artistic skill, and a good understanding of how people use the Internet. Above all, it takes practice to learn how to make the most of the technologies the web offers.
But, as the philosopher said, every journey begins with a single step. And this book will ensure you set off in the right direction, with robust knowledge of not just the technologies and techniques you could use, but of those that you should use, and those that will deliver the best experience for your visitors.
The diversity of devices
One of the skills a web designer needs is the ability to put themselves into the shoes of the website visitor. Web designers have to think about what their visitors know, what they will expect the website to do, and how they will expect it to work.
The most basic part of this is understanding the range of different devices that people might use to view your website. These include:
âąA desktop computer, laptop or netbook
âąAn Android phone, iPhone or other handheld device
âąA tablet device, such as an iPad
âąAn cell phone with a small screen and keypad
âąA screenreader, which reads web pages aloud to blind people
âąA refreshable Braille display, which a blind person can run their fingers along to read the website content
âąA games console, such as the PlayStation, Nintendo Wii or Nintendo 3DS
Websites can be viewed using a number of different devices. Shown above, from the top: Apple iPad tablet; Nintendo DS games console; HTC mobile phone; Alva refreshable Braille display.
When we use the word âdesignâ, we tend to think of something visual. But, in its purest sense, a website isnât necessarily a visual medium. Somebody using a screenreader might experience it as a stream of spoken text. Some handheld devices with small screens include a mode to switch off the layout and just view the content, so that it fits better in the space available.
While you do need your website to look appealing, itâs a mistake to think that you can (or should) focus purely on the look of a website. Some of the most important work in web design goes on behind the scenes, where the visitors canât see it. Itâs about adding meaning to the web page, so that people can use it easily even if their device doesnât support all the features available on a desktop computer.
The challenge of web design is to create a site that is engaging and easy to use, whatever is used to view it. Visitors want the flexibility to use whichever device they prefer. Sometimes they will combine devices, using a desktop during their lunch break at work and a mobile on the way home, for example. All they care about is whether the site works or not. Itâs your job to make sure it does.
How devices affect design
Different devices have different capabilities, and this should inform the decisions you make while designing your website. For example:
âąThere might be no support for pictures (or âgraphicsâ) on the device. A screenreader and Braille display canât show images, and mobile devices sometimes enable users to switch them off to speed up their browsing.
âąThere might be no conventional keyboard. It puts everyone off if they have to type in lots of information to use a website, but those who have to use a virtual keyboard on their touchscreen might be especially deterred.
âąThe website animation technology Flash might not be supported. The iPhone and iPad donât use Flash, and non-visual devices (such as screenreaders) canât render it either.
âąThere might be no mouse. Some users struggle to use a mouse because of physical impairment, and some devices (including games consoles and netbooks) donât have a mouse. If you demand precise use of a mouse, you might lose visitors.
âąThere is a wide range of screen sizes. Even on a desktop computer, people will have different sized monitors and will open the browser window to different widths, depending on what else theyâre d...