Web Design in easy steps, 6th edition

Sean McManus

• Publisher: In Easy Steps Limited
• Year: 2014
• ISBN:
  9781840786743
• Topic: Design
• Subtopic: Webdesign

There are literally millions of websites on the Internet, but most are ugly and ineffective. So how do you create a site that looks good and makes money? Web Design in easy steps, now in its sixth edition, reveals the key principles of good web design. It guides you through the process of creating a website, from planning to search engine promotion. Learn: The fundamentals of professional web page layout and create content that’ll get your message across.All about effective navigation to make your website easy to use so your visitors stay longer.The techniques to make your website attractive for all and ensure it works on different devices.How to use HTML, CSS and JavaScript and get started with your new website.Ecommerce and social media basics to open your online shop, and start marketing it!Avoid creating another ineffective website on the net. Use Web Design in easy steps, 6th edition to create a successful site that looks good and achieves its purpose.

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...