Welcome for the 4th edition of Learning Web Design.
There has been a lot of change since the last edition! When it was looking like
Things were starting to settle down following the introduction of web standards.
By the browser’s creators and the developers’ community and then there’s the
“Mobile Web” to shake things up. Web is making its way into tiny screens and in contexts where it has never been before. This has brought about several

difficult challenges for web developers and designers in the race to
Discover ways to make your experience making use of our sites enjoyable no matter what
how they can how they could be the way they could be accessed.
As I write, there are many of these problems are related to how to present the best image
for the appropriate device, is still being debated. It’s a very exciting moment
Web design is filled with collaboration and experimentation. In a way, it is reminiscent of
remind me from my childhood memories of Wild West days of the Web back in 1993 , when I first started my
web design career. There’s so much to consider! So many possibilities! And to be
truthfully, it’s an arduous time to grasp the technology of moving targets and
Techniques are laid out in methods in a techniques in a. That’s why I’ve tried to highlight the
subjects that are changing and give you a few internet resources that will help you.
up to date.

Website deisgn of Amarillo

Two new standards: HTML5 (the 5th revision to

We have it now, and have been rumours at the time I published this book.
The HTML section of the book has been updated to reflect what is currently the HTML5 standard.
I will cover the components of the evolving CSS3 standard which are now ready for use in prime
time, and a brand new chapter that discusses the addition of motion and interactivity to
Transitions and Transforms. Our tools let us accomplish a lot more in
an efficient method that is better that was not even the last few years.
In the end, since JavaScript has grown to be such important to the web, this latest edition contains two chapters that introduce JavaScript syntax, as well as some of its applications. I’m not a JavaScript expert However, I’m very fortunate to have it.
Find someone who’s. Find someone who is. JavaScript sections were developed by Mat “Wilton”
The Companion website
Make sure to check out the site that has a companion
to purchase this book at
It contains materials for exercises,
Downloadable documents, links and lists from
the book, references to the book the book, book references, and more
good stuff.
xii Preface
How This Book Is Organized
Marquis is an architect of A List Apart.
Similar to the previous 3 editions of the book, this one is geared towards the particular demands and issues of students of all backgrounds, which includes veteran graphic designers.
programmers seeking a imaginative outlet Office assistants, new
college graduates, moms who work at home and everyone else looking to know more
How to create how to design websites. I’ve tried to convey the feeling of sitting in

Amarillo Website Design

My web design course for beginners to a book, complete with tests and exercises along the
This way, you can have hands-on training and assess your performance.
It doesn’t matter if you’re reading the book on your own , or making it an accompanying book
To a course in web design I’m hoping it gives you a beginning and that you
Enjoy the process and have fun.
How This Book Is Organized
The process of learning Web Design, Fourth Edition is broken down into five parts, each of which covers
that is an important element of web development. This is an essential aspect of.
Part I: Getting Started
Part I sets the stage for all that follows in the book. I begin
with important details about the design and development environment for web sites that includes the many possible roles you can take on, and the tools you can use, and the tools
You may learn something, and there are tools are at your disposal. You’ll be able to learn, and tools you
immediately with HTML immediately with HTML CSS and understand how to make you can use the Web and pages on the web work.
generally , they work. I’ll also introduce some big concepts that can help you
The way web designers consider their craft in the same way that web designers think of theirs.
Part II: HTML for Structure
The chapters in Part II go over the details of each component and give an explanation of
Available to provide content semantic structure, which includes the new elements that can be used to give content semantic structure, including the new
Introduced that was introduced in HTML5. The markup is for links, text images, and text.
Forms, tables, and tables. Part II concludes with a thorough discussion of HTML5
and the way it differs from earlier standards.
Part III: CSS for Presentation
In Third Part, students will start through the fundamentals of making use of
Cascading Style Sheets that allow for changing the way text is presented, create
multicolumn layouts as well as adding animations and interactivity based on time to the pages. It also addresses commonly used CSS techniques, such as
how to design a website by using the Responsive Web Design.

Best Amarillo Website Design

Part IV: JavaScript for Behaviors
Mat Marquis starts Part IV out by describing JavaScript syntax.
You can distinguish that a variable is an operation. It is also possible to learn the different ways to tell a variable from a function.
methods that JavaScript is utilized, including DOM scripting, as well as current
Conventions Used
In This Book
The typographic
Conventions are utilized within this publication:
It is used to signify URLs, emails
addresses directories, filenames, and addresses
names, and to emphasize.
Text in roman fonts colored with color
It is used for terms that are used to describe
defined , and cross-references.
Constant width
Useful to identify code examples and
keyboard commands.
Colored uniform width
For accents when coding examples are used.
Constant width in italic
Useful to identify placeholders used to identify placeholders
Property of style sheets and attributes
Preface xiii
JavaScript tools like library polyfills that allow you add JavaScript
To use swiftly to use quickly, even if you’re not yet prepared to create your own code
starting from scratch.
Part V: Creating Web Graphics
Part V discusses the different formats of files that are suitable for the
Web and explains the best ways to optimise them in order to make their files as small as possible
as possible.
I’d like to express my gratitude to my editor Simon St. Laurent who I’ve had a great time with. an enjoyable experience.
collaboration projects, and look at the future with anticipation of more. Thank you also to
To my co-author, Mat Marquis for making JavaScript
fun and maintaining your spirits whilst working with a
Control freak.
A lot of smart and beautiful people were there to support me on this issue them.
my most important tech reviewers are Aaron Gustafson
from their schedules to ensure that the chapters’ details were accurate.
on. Also, thanks to the following individuals on reviews of their “surgical strike” reviews:

knowing the many experts in this field who have written their books,
Slide decks, personal contact was the source of the information that
I was able to keep up and going. I wouldn’t be able to do it without the assistance of these brilliant people

Website Design in Amarillo

(in an alphabetical fashion):
as well as Jeffrey Zeldman.
a book and I’d like you to show my gratitude
thanks to the efforts to the work of Melanie Yarbrough (production editor and proofreader), Genevieve d’Entremont (copy editor), Rebecca Demarest (figure
production), Newgen (page layout),
In closing, I’d like to be grateful to Edie Freedman (best boss I’ve ever had) for her kindness and patience.
The book has sucked me into a trance. My dearest lovelies, Jeff
and Arlo and Arlo. I’m thrilled to finally be able to say “I’m back.”
xiv Preface

She was the graphic designer.
Designer for Global Network Navigator, the first commercial site. In
In addition to this, she is also the author as well of Web Design in a Nutshell in addition to this book.
HTML5 Pocket Reference (which is also available as an iOS application) Both are produced by O’Reilly. The past few years, Jennifer spoke at various conferences.
which includes Seybold as well as South By Southwest, and has taught beginner web
design in Johnson and Wales University in Providence, RI. She is at present
A digital product designer at O’Reilly Media, where she is particularly interested in
Information layout, design for interaction and creating apps, websites,
and eBooks that are easy and easy to and ebooks that are enjoyable to. If she’s not working, Jennifer enjoys making
Things, indie rock cooking, being a mother.
Using Code Examples
job completed. You can make use of the
This book’s code can be included in your programs as well as documentation. You do not need
Contact us to request permission unless you’re reproducing a substantial portion of the work.
of the of the. Examples include creating a program that makes use of various chunks
The code in this book doesn’t require permission. Distributing or selling the book
CD-ROM with examples from O’Reilly books requires permission.
A response to a question that is based on the book’s reference and quoting code examples does
Do not require permission. The incorporation of a large amount of code examples
Integrating the information from this book into the documentation of your product is required to have the author’s permission.
We are grateful, but we do not need, an acknowledgement. A attribution is usually
This includes the title, author as well as the ISBN. For example: Learning Web
Design, Fourth Edition by Jennifer Robbins. Copyright 2012 Littlechair , Inc.,

If you believe that your code usage violates fair use or is not permitted, please contact us.
reach us via
We’d like to hear from You
Send your comments and inquiries regarding this book to the editor:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472

Preface xv
There is a website for this book, on which we provide examples, errata as well as any
More details. The page can be accessed by clicking here:

For comments or technical questions regarding this book, email:

For more information on our conferences, books and Resource Centers and
The O’Reilly Network, see our website at:

Our style is inspired by reader feedback and our own experiments, and
feedback from feedback from distribution channels. Different covers compliment our
unique approach to technical issues giving personality and life into
Potentially dry subjects. The font used for text can be Linotype Birka; the heading font is
Adobe Myriad Pro.

In this particular section
Chapter 1
Where Do I Start?
Chapter 2
How the Web Works
Chapter 3
Some Big Concepts You
Need to Know
Getting Started Part I

Website Design for Amarillo

In This Chapter
How do I begin?
What exactly is an
web designer do?
What languages can I speak?
Do you need to be educated?
What software do you use and
equipment do I
Are you in need of a purchase?
The Web has been in existence for over 20 years, and has seen
A euphoric, early expansion, and an economic bust, innovative-driven
The Web is constantly evolving and reborn, with constant changes throughout the course. There is one thing that is certain that is the Web
as a commercial and communication medium that is not going away. It’s not just that,
It has made its way into devices like televisions, tablets, smartphones and
more. There’s never been more chances to put your knowledge of web design to work.
Through my teaching experience of web design classes and workshops I’ve
backgrounds that are interested in
Learning how to create the foundations of web pages. Let me show you just some of them:
“I’ve been a graphic designer for over 17 years and now I’m being pressured to
provide web design services.”
“I am secretary in a tiny office. My boss has required me to create
A simple internal website that allows employees for sharing company information among employees.”
“I’ve been an expert in programming for a long time however I’d like to get my hands on designing. I’m thinking of doing it.
such as such as Web can be a great way to learn new capabilities.”
“I am an artist, and would like to know how I can get some of my artwork and
art online.”
“I experimented with web pages while in high school, and I believe that it could be something
I’d like doing for an income.”
Whatever the motive whatever the motivation, the initial question is constant “Where do I
Where do you begin?” things to learn, but it’s not that easy.
to determine where you should jump to know where to jump. However, you must start somewhere.
This chapter aims to help put the learning curve into perspective by providing
the most frequent questions I am asked by those looking to take the leap.
It offers an introduction to the various disciplines, technologies, and tools used in web design.
Where Do I
Chapter 1
4 Part I, Getting Started
Where Do I Start?
Where Do I Start?
Your specific starting point will depend on your personal background and
goals. A good first goal for everyone is to gain a basic understanding
of how of how Web and the web pages function. This book will help you understand the fundamentals.
After you have mastered the basics There are a lot of resources available on the Web
and at bookstores to continue your education in particular fields.
There are various different levels of involvement in web design, ranging from the creation of an initial site to managing
Make a site for yourself, and then make it into a full-time job. You can be a full-service webmaster or a specialist in a particular specific area. There are a lot of
different ways to go.
When your web-designing involvement is as a hobby or you are not a web designer,
Have just one or two projects on the web you’d like to share You might find is a
Combination of research done by oneself (like the book) and taking advantage
of templates available of available templates in a design of tools
Such as Adobe Dreamweaver may be all you require to complete the job at
hand. Many continuing education programs provide introductory courses for
Web designing and development.
web production or design as a profession, you’ll
you must take your knowledge up to the professional level. Employers may not
need a bachelor’s degree in web design. However, they’ll expect to see examples of working sites
that show your expertise and knowledge. They could be the outcome of
Assignments for class, personal projects or even a simple website for a small company or
organization. The most important thing is that they appear professional and are well-written. clear HTML styles sheets, style sheets, and even scripts in the background.
A job at an entry-level and working in an organization is a great method to
Find out how bigger websites are built and assist you in deciding which elements to focus on.
of web design you’d be interested in exploring.
What Does a Web Designer Do?

Website Design on Amarillo

Over time the phrase “web design” has become an umbrella for the process of
It encompasses many diverse disciplines, ranging from the user experience to
design, documenting markup, and finally to serious design, to document markup, to serious. This section
lists many of the commonly used characters.
If you’re designing a website of a modest size by yourself it is necessary to put on
Many various hats. The best part is that you’ll probably not be able to. Think about it.
The day-to-day maintenance of your family is a part-time chef.
housekeeper accountant, diplomat, gardener and construction worker-
However, to you, it’s things you do in your home. The same way you see it as you’re a
as a solo web designer You could be a part-time graphic writer, designer HTML
Author, and information architect, however for you, it’ll seem like “making web
Pages.” There is nothing to be concerned about.
I Just Want a Blog!
in order to begin
posting your own words and photos
via the Web. You can create your own
“blog” or personal journal website using
one of the blogs that is free or cheap. blogs. It is a free or cheap
Hosting services. These are hosting services.
offer templates that typically
Save yourself the hassle of having to study HTML
(although it’s still not too bad). These
are among the most well-known as of
This article:
WordPress WordPress
Another site with drag-n-drop design.
Hosting service that goes far beyond
The blog is Squarespace
The concept of “web design” has come to
include a variety of disciplines
y Visual (graphic) design
y Experience and interface for users
web document, style sheets and
Writing and programming
y Content Strategy
y Multimedia
What Does a Web Designer Do?
Chapter 1, Where Do I Start? 5

Website Design of the Amarillo

There are experts on the market that you can engage to assist with the gaps in
There is nothing you can’t do. For instance, I’ve created websites since 1993.
I continue to employ developers and programmers when my clients need it.
interactive features that are interactive. This allows me to concentrate on what I am good at (in my
In this case, it’s the structure of the content, the interface as well as the visual design).
Large-scale websites are typically made by a team of people, which ranges from a few people to hundreds. In this case, every person on the team
The focus is on one aspect of the building process. If this is the case, you might be
You can easily modify your existing skills (writing, Photoshop, programming etc.).) and passions to the new medium.
I’ve separated the various tasks and responsibilities that are usually assigned to the umbrella of
The umbrella term “web design” into four broad categories that include design, development, content strategy and multimedia.
Ah, design! It’s pretty straightforward, but this straightforward need is divided into a variety of different specializations regarding
designing websites. Here are some of the job descriptions that deal with creating sites.
A site is important, but keep in the mind that the disciplines may cross-cut and that the person
her self-described “Designer” often is responsible for more than one (if she is
All) of all) of.
Interaction, User Experience and the User Interface design
In most cases, when we think about design, we are thinking about what it looks like. On
When it comes to the Web the Web, the most important aspect of business is to design the way that the site functions. Before
choosing fonts and colors choosing fonts and colors, it is crucial to establish the purpose of the website and the way it will accomplish them.
is utilized, as well as the way visitors navigate through the site, and the way visitors navigate through. The tasks are categorized under
fields of Interaction Design (IDX), User Interface (UI) design and the User Interface (UI) design.
Experience (UX) design. There is plenty of overlap in these roles and it’s not unusual for one person or a team to take on the three.
The purpose for the Interaction Designer is to make the website as simple, efficient, and effective as possible.
It is as enjoyable and fun and enjoyable to use as often as is possible. In close proximity to design for interaction is user experience. It is as enjoyable to use
Design for interfaces, which generally tends to be focused on the function
The layout of the page, as along with the specific tools (buttons and links, menus,
and and so on) and so on) that users utilize to browse content or complete tasks.
The most recent designation for the job market in the world of web design is User Experience
Designer. The UX designer has an encompassing view, ensuring the whole
Experience with the website has been positive. UX layout is built on an extensive understanding of users ‘ requirements based on observations and interviews.
As per Donald Norman (who coined the term) the term “user experience design” was coined by Donald Norman.
It covers “all elements of the customer’s interactions with the product, including the way it works
experienced, learned and utilized.” A application or website, this includes
If you’re not interested
to become a jack-of-all-trades in becoming a web designer on her own,
you may choose to
Work as part of a team and specialize
of a team , or as a freelancer

Website Design for the Amarillo

6 Part I, Getting Started
What Does a Web Designer Do?
the design of the visuals the user interface the message and quality of the content
and the overall performance of the site. The user experience should be consistent with the
The brand of the organization and its objectives to ensure that they are successful.
A few of the documents that the IDX, UI, or UX designer could create may include:
Reports on user research and testing
Understanding the wants, needs or limitations that users have is essential to
the effectiveness that is the result of designing the website or the design of the web application. This strategy is a way to ensure the success of the design.
creating designs that are centered around the needs of the user is often referred to as the concept of User-Centered Design
(UCD) (UCD) is a key element of contemporary design. Designs for websites often begin
by conducting user research, which includes observations and interviews with user research, including observations and interviews
get a better understanding of how the site can address problems or explain how
It will be it will be. It is normal for designers to conduct an initial round of user testing during the time
every step in the process of design in order to make sure that their each stage of the design process to ensure that their designs are usable.
If you’re having trouble figuring where to look for content , or even how to get it,
for the next step of the process, and then you’re back on the drawing board.
Wireframe diagrams
Wireframe diagrams illustrate the web page’s structure with just
The outline of each type of content as well as outline for each type of content and widget (Figure 1-1)). The intent of
A wireframe diagram is used to show how the screen’s area is divided
and specify where content and functionality are available like navigation, search
forms, boxes such as form elements, etc. are arranged, with no ornamentation or decoration
graphic design. These are typically accompanied by instructions on how to use them.
Things should function so that the development team is aware of what they want to build.
Site diagram
Site diagrams show the layout of the entire site and the way it is structured
the individual pages connect to each other. Figure 1 shows how straightforward
site diagram. Site diagrams can take up whole walls!

Best Website Design Amarillo

Today’s Specials
Log in or Create Account
Try our app
Live assistance

All categories
contact | store locator | support | CART
1 2 3 4
Copyright declaration
Figure 1-1. Wireframe diagram.
Home page
FAQ Book Web design
External Links
Figure 1-2. A simple site diagram.

Best Website Design of the Amarillo

What Does a Web Designer Do?
Chapter 1, Where Do I Start? 7
User flow charts and storyboards
A storyboard shows the way through an application or site starting at the point
from the perspective of the perspective of a common in the eyes of a typical (a persona of a typical user (a persona UX of a typical user (a persona in UX). This usually refers to a
scripts as well as “scenes” consisting of screen views or the user’s interaction
using the screen. The goal of the storyboard is to show how to
perform tasks, possibilities of solutions, and even present some common
Page types. Figure 3 shows a basic storyboard. A flow chart that is used by the user is
Another method of demonstrating the various components of an application or site are
connected, which tends to concentrate on technical aspects rather than telling the story of
story. For instance, if the user is doing such a thing, the system triggers this function to
the server. It is typical for designers to develop the user flow chart for the server.
actions in a procedure that are part of a process, such as registration for a member or online payment.
Figure 1-3. An example of a storyboard (courtesy Adaptive Path; drawn by Brandon Schauer].
Visual (graphic) design
Since the Web is an image-based medium, websites require careful attention to design and presentation. Graphic designers create what is the “look and feel” of
the website’s logos, graphics, the layout, type, colors, etc.–to ensure that the website is properly designed and maintained.

Best Website Design for Amarillo

gives a great first impression and is in line with the brand’s message and branding
of the company of the organization it of the organization it. of the organization it represents.
of the way the website could look, as shown in of the way the site might look, as shown in Figure of how the site could look as illustrated in Figure. Of course, they could also be
responsible for the creation of graphics files in a manner that can be optimized to be suitable
delivery via delivery over Web (see chapter 21 ).”Lean” and “Mean Web Graphics for
image optimization techniques).
If you’re interested in the design and visuals of commercial websites professionally, I strongly suggest graphic design education and a solid
proficiency ability Photoshop (the market standards) as well as Adobe Fireworks. Figure 1-4. Sketches that you can feel and look at to help you design the design of
Simple site.
8 Part I, Getting Started
What Does a Web Designer Do?
If you’re currently a professional graphic designer, you’ll be able to improve your abilities
access to access the Web effortlessly, however this won’t stop users from accessing a quality
comprehension about HTML, CSS, and other web-related technologies. Because most
websites have at the very least a couple of images. Even hobbyist web designers must
Know how to edit and create images, at the very least.
Also, I would like to point out that all the responsibilities could be in the hands of
of a single designer who designs both the appearance and function of a website. But
for larger sites that have bigger budgets There is a chance to locate your own
A distinct niche that is unique to the designing process.
A significant portion of the process for designing websites is the creation and troubleshooting the documents styles sheets, scripts, style sheets and images that compose the web design process.
site. In web design firms, the team responsible for the design of the files that are created for the
The website is made up of (or template pages for websites that are created dynamically)
is often referred to as the production or development department.
Web developers cannot develop the style or the structure of the site by themselves.
However, they must communicate effectively with designers and comprehend the
The site’s goals were originally set, so they could suggest solutions that achieve those goals.
The main disciplines that are under development include writing styling, writing and
The term “authoring” is used to describe the process of creating the content to be delivered
on the Web in particular in the Web, marking the content using HTML tags
that define the content and purpose. web designer,
You must be able to comprehend HTML and how it works on
diverse devices and browsers. There are a variety of devices and browsers. HTML specification is continually changing, so you’ll need to be up to date with the most recent standards and best practices.
Opportunities but also opportunities as well as. There are many opportunities, but also bugs and limitations. it’s not hard to begin with the basics, and then you’ll gradually build your knowledge.
We’ll explore HTML within Chapter 2 of What is the Way the Web Works and then
We will discuss it in detail in the second part of this book.

Best Website Design on the Amarillo

Web design is the look of the site in the browser is determined by
Style rules are defined within CSS (Cascading Style Sheets). We’ll dive into CSS
The book’s third chapter is Part III (including the definition of “cascading” means! ), but for now
It is important to know that in the current Web design, the design of the site is
is handled in a different way apart from separated from HTML markup for the page. Again, if you are
are interested in in web development? You must know how to use CSS
and how it is accepted (or or not and how it is supported (or not) and how it is supported (or not) by the browser is certain to be
Part of the part of your.
Style Tiles
Another way to capture the
the appearance and feeling of the web site is to convey the appearance and feel of a site.
tiles, which show an example of colors
schemes, branding elements, content
and UI treatments, as well as mood boards
without relating them to a particular
page layout. The idea is to come to a consensus
upon a consistent visual language for
The site. To learn more about this method,
Read this article “Style Tiles and How
They Work,” by Samantha Warren