IntroductionWelcome| 00:00 | (Music playing)
| | 00:03 | Hi! I'm James Williamson, Adobe Certified
Instructor and lynda.com Senior Author.
| | 00:09 | I want to welcome you to
Web Design Fundamentals.
| | 00:11 | This course is designed to
introduce you to the fundamental concepts,
| | 00:15 | terminology and best practices for
those who are new to, or those who were just
| | 00:19 | starting out, in Web Design.
| | 00:21 | To be honest, I've included all the stuff I
wish someone had told me as I was starting out.
| | 00:25 | First, we'll explore what it means to be
a web designer and the various areas of
| | 00:29 | web design that you might be
interested in specializing.
| | 00:32 | We'll discuss how the Internet works, as
a means of understanding the underlying
| | 00:36 | technology and processes
behind what you'll be creating.
| | 00:39 | This will allow us to define some
common terms and techniques that you'll be
| | 00:42 | encountering as a web designer, so
that you'll feel more comfortable with the
| | 00:45 | terminology and language
involved in working on the Web.
| | 00:48 | Finally, I'll discuss best practices,
skills that you need to learn as a web
| | 00:52 | designer, how to find a hosting
company and get online, and give you some
| | 00:56 | advice as to the next steps that you
can take in your journey in Web design.
| | 01:00 | I hope you're as eager as I
am to dive in to this course.
| | 01:02 | Let's get started.
| | Collapse this transcript |
| Who is this course for?| 00:01 | If you are brand new to Web Design or if
you've been working with it for a while
| | 00:04 | and just have missed out on the
background on the Web and why you do some of the
| | 00:07 | things that you do, then this course is for you.
| | 00:10 | I first started designing websites in
the mid 90s and like all web designers
| | 00:13 | from that time period, I had to train myself.
| | 00:15 | There really wasn't much out
there in the way of training.
| | 00:18 | So most of what I learned, I
learned through trial and error.
| | 00:21 | As you imagine, this led to many,
many frustrating experiences.
| | 00:25 | My goal for this course is to cover
the techniques and terms that I wish I
| | 00:28 | could've found all in one place
when I was learning Web Design.
| | 00:31 | Now obviously much has changed over the
years, but if your desire is to become a
| | 00:36 | web designer, there are some fundamental
concepts that you need to understand in
| | 00:40 | order to master your craft.
| | 00:42 | So, if you've never designed a webpage
before, or you feel like you've missed a
| | 00:46 | few things as you're starting out,
then you've come to the right place.
| | 00:49 | Unlike most of my titles, this course
doesn't feature hands-on exercise or code examples.
| | 00:53 | You won't find me describing any CSS
layout techniques, cool Dreamweaver tricks,
| | 00:57 | or JavaScript code snippets.
| | 00:59 | What you will find is a
roadmap to becoming a web designer.
| | 01:03 | Hopefully, this course can offer you
an understanding of how the Web works,
| | 01:06 | which areas you might want to focus on,
and steps that you can take to becoming a
| | 01:09 | better overall web designer.
| | 01:11 | Now if you've been doing web design
for some time and you're looking for more
| | 01:15 | advanced techniques or advice, this
course might not be the course for you.
| | 01:18 | However, I'd encourage you
to stick around for a while.
| | 01:21 | You never know when you might find
something you missed or just a different
| | 01:25 | approach than the one that you're used to.
| | Collapse this transcript |
|
|
1. Exploring Web DesignWhat is web design?| 00:00 | What is Web Design?
| | 00:02 | That sounds like a pretty
easy question, right?
| | 00:04 | Web Design is the process of
designing and creating web pages.
| | 00:07 | Well, there is a little
bit more to it than that.
| | 00:10 | Wikipedia defines it as, and I quote "Web Design
is the skill of creating presentations
| | 00:15 | "of content (usually hypertext or
hypermedia) that is delivered to an end-user
| | 00:18 | "through the World Wide Web, by way
of a Web browser or other Web-enabled
| | 00:23 | software like Internet television clients,
microblogging clients and RSS readers".
| | 00:27 | blah, blah, blah.
| | 00:28 | Huh? Well, the reason that Web Design is so
hard to define as it covers so much ground.
| | 00:35 | As the Wikipedia entry mentions, content
created by web designers can be consumed
| | 00:39 | in many different ways through multiple clients.
| | 00:42 | Browsers, screen readers, mobile
devices, RSS feeders, printers and a host of
| | 00:49 | other devices can now access
and consume your online content.
| | 00:52 | In that respect, Web Design is no
longer just designing for the browser, but
| | 00:56 | designing for all user experiences.
| | 00:59 | There is also the issue of what
type of content you're creating.
| | 01:02 | Is it hypertext, images, video, interactive
content, or a combination of all the above?
| | 01:08 | What about functionality?
| | 01:10 | Does it involve Ecommerce, responding
to user input, pulling information from
| | 01:13 | databases or other information
sources, or does it require you to access
| | 01:17 | services from other sites like
Flickr, Facebook, or Google Maps?
| | 01:22 | Taken at the highest level, Web
Design can be a pretty big umbrella.
| | 01:25 | Many new web designers are often
overwhelmed by the array of choices and the
| | 01:29 | amount of knowledge that they need to master.
| | 01:31 | Terms like HTML, CSS, PHP, JSP, FTP,
and Ajax can be intimidating and more
| | 01:37 | than little off putting.
| | 01:38 | More that once I've heard,
"I just want to design a simple site.
| | 01:41 | Do I really need to learn all these stuff?"
| | 01:44 | Well, depending upon what
you're doing, maybe not.
| | 01:49 | However, if you don't have a solid
understanding of how the Web works, who
| | 01:52 | you're trying to reach and what
technologies are involved in creating your site,
| | 01:56 | chances are your design isn't going to
work either, whether it's simple or not.
| | 02:00 | Imagine, for a moment, that you need to
build a bridge, but you only want to learn
| | 02:04 | how to pave it, since that's all the
drivers are really ever going to see.
| | 02:08 | Chances are that bridge isn't going to work.
| | 02:12 | Your websites are the same way.
| | 02:14 | Without really understanding all this
going on behind everything and how to
| | 02:17 | properly structure your site,
you're setting yourself up for failure.
| | 02:21 | So, does that mean that you have to learn
everything before you start to create websites?
| | 02:25 | Well, no, not exactly.
| | 02:27 | As the saying goes, the trick to eating
an elephant is to eat it one bite at a
| | 02:30 | time, so although web design
encompasses a wide array of disciplines, for the
| | 02:35 | purpose of this title, the term 'Web
Design' will be restricted to what we refer
| | 02:39 | to as Front-End Development.
| | 02:42 | Front-End Development includes the
visual part of Web Design, planning and
| | 02:46 | structuring sites, user interface
design, and client-side interactivity.
| | 02:51 | A large portion of front-end
development requires minimal scripting and little
| | 02:54 | to no programming at all.
| | 02:55 | I'd also like to point out that very few web
designers can do everything that I've listed.
| | 03:01 | Most specialize in areas that complement
their skill sets or that interest them the most.
| | 03:05 | From there, other skills are usually
acquired based on the type of sites they
| | 03:09 | work on and the features that those sites need.
| | 03:11 | I call this 'just-in-time' learning and
unfortunately, it's often the only type of
| | 03:15 | training that most web designers get.
| | 03:17 | So as you approach Web Design, you'll
probably want to start by focusing on the
| | 03:21 | area you are strongest in
initially and just grow from there.
| | 03:25 | However, don't neglect to learn the
fundamental skills needed by all web designers.
| | 03:30 | Skills like learning HTML, CSS, and
staying current with the ever-changing
| | 03:34 | web standards will ensure that your
sites are structured correctly, regardless
| | 03:39 | of your focus.
| | Collapse this transcript |
| Hobbyist or professional?| 00:00 | Before you spend too much time
learning the nuts and bolts of Web Design, you
| | 00:03 | really should ask yourself one
question. "Do I want or need to be a
| | 00:07 | professional web designer?"
| | 00:09 | I know that sounds like a strange
question coming from me, but it's a valid one.
| | 00:13 | Many times I have spoke with individuals
who have full-time professions other than
| | 00:16 | Web design, but nonetheless need
to create, edit or manage a website.
| | 00:21 | Those people are unlikely to have the
time or inclination to master the ins
| | 00:25 | and outs of Web Design.
| | 00:27 | Other individuals may truly be hobbyists,
interested in Web Design or creating
| | 00:31 | Web content, but not interested in
pursuing it as a career. Make no mistake.
| | 00:35 | Being a professional Web
designer is not a part-time endeavor.
| | 00:39 | Technical skills and knowledge required
by professional web designers takes as
| | 00:43 | much of a commitment, if not
more, than other professions.
| | 00:47 | Thankfully, there are
alternatives to creating sites from scratch.
| | 00:50 | And there are multitude of ways to get
your content online without requiring the
| | 00:54 | technical skills of a
professional web designer.
| | 00:56 | First, you could simply hire a web
designer or an agency to design your site for you.
| | 01:00 | Now, since you're watching this course, I
doubt that's the option you're looking for.
| | 01:05 | You could also try one of the wide array of
professional template sites that are available.
| | 01:10 | A simple search for Web templates
will return dozens of sites that offer
| | 01:13 | downloadable templates you can use
to build or extend your current site.
| | 01:17 | Using a pre-designed template can assist
you in your site's design, organization
| | 01:21 | and possibly allow you to add an
advanced degree of functionality to your site
| | 01:25 | that might be beyond your current capabilities.
| | 01:27 | In many ways, they're a great way of learning,
| | 01:29 | as you can deconstruct the
template to learn how they were built.
| | 01:32 | Of course, these templates can vary
greatly in both quality and price.
| | 01:36 | Some of them are fairly easy to
implement and update, while others require an
| | 01:40 | advanced skill set to control, so make
sure you research any template carefully
| | 01:44 | before committing to it.
| | 01:46 | Another way to get your content
online quickly is through using blogging
| | 01:49 | and social media sites.
| | 01:51 | Blogs can be set up quickly.
| | 01:53 | They don't require you to host them
yourself and they come in a wide variety of
| | 01:56 | themes and features.
| | 01:57 | They are also easy to maintain and
update, and many blogs can be customized
| | 02:01 | to add features like e-commerce and
forums, and in many ways, blogs can do
| | 02:06 | everything that you need a site to do, without
needing to create or even host the site yourself.
| | 02:11 | My own personal site,
simpleprimate.com, is a blog.
| | 02:15 | It's easier for me to update and post
using blogging software and it saves me a
| | 02:19 | considerable amount of time
over creating my site from scratch.
| | 02:23 | However, you should be aware that
blogs can be difficult to customize.
| | 02:27 | And if you're using a free blog, there are
often limits on what you can do with your site.
| | 02:31 | To learn more about blogs, explore
some of the more popular blog sites, like
| | 02:35 | TypePad, WordPress and Blogger.
| | 02:38 | In addition to blogs, social media
sites, like Facebook, YouTube, Twitter and
| | 02:43 | Flickr, allow you to extend your brand
and your content to your audience, all
| | 02:47 | without creating any additional sites yourself.
| | 02:50 | Most hobbyists employ a blended
approach, using a blog or a template to get
| | 02:54 | online quickly, and then taking more
and more of their site over as their
| | 02:57 | knowledge grows and their capabilities improve.
| | 03:00 | If however, your goal is to become a
professional web designer, you need to
| | 03:04 | realize that there are no shortcuts
to mastering the underlying technology.
| | 03:08 | You need to commit yourself to learning
HTML, CSS and JavaScript, at a minimum.
| | 03:13 | While there are tools available that
will allow you to create your sites
| | 03:17 | visually and then generate the code for you,
| | 03:19 | the truth is that very few of those
tools create professional level code, and
| | 03:24 | none of them can accurately anticipate
what your needs will be for items such as
| | 03:28 | Accessibility, Search Engine
Optimization, and User Agent Compatibility.
| | 03:32 | These types of things are the
responsibility of the web designer and they
| | 03:36 | underscore the importance
of mastering your craft.
| | Collapse this transcript |
| Site design| 00:00 | As we begin to explore some other areas
of web design that you might specialize
| | 00:03 | in, I want to start with site design.
| | 00:06 | Site design is what most people think of
when they think of web design, since it
| | 00:09 | deals with the actual look of the website.
| | 00:12 | If you're migrating from graphic design,
this is the most logical place for you to start,
| | 00:17 | since visual design skills
are a must for this discipline.
| | 00:20 | It is important to note, however, that
the web is its own unique visual medium,
| | 00:24 | and learning how to design correctly
for the web is just as important as
| | 00:28 | learning how to design effectively for print.
| | 00:31 | When creating websites, it's important
to strike a balance between the Visual
| | 00:35 | Design and things like site load time,
usability and consistent user experience.
| | 00:40 | Now speaking of Visual Design, color,
typography and layout all require a
| | 00:45 | slightly different approach for online design.
| | 00:47 | For example, on the web, viewers can
choose to resize the text in your layout,
| | 00:52 | or even replace the font entirely,
if they prefer something else.
| | 00:56 | This lack of control over the
designed environment takes a while for most
| | 01:00 | graphic designers to get used to.
| | 01:02 | Instead of trying to make web design
more like Print Design, I recommend
| | 01:06 | learning all you can about your new
environment, and designing specifically for the medium.
| | 01:11 | This means learning all you can about
how presentation is controlled on the web,
| | 01:15 | how to maximize readability for your
content and how standards and design
| | 01:19 | patterns have evolved for
certain types of websites.
| | 01:23 | The web is constantly changing and web
standards continue to evolve, so it's
| | 01:28 | best to look at this as a constant
point of focus during your career.
| | 01:32 | It's also important to remember that for
the web, you're not just creating visuals.
| | 01:37 | You're building a user interface that
should satisfy the needs of both the
| | 01:40 | client and the user.
| | 01:42 | With that in mind, let's take a
moment to examine a typical workflow common
| | 01:46 | to many web designers.
| | 01:48 | First, you should explore the
goals and the audience of your site.
| | 01:52 | I cannot overstate the importance of this step.
| | 01:55 | Many times I've sat down with the
client and although they know they want a
| | 01:59 | website, they haven't really sat
down and prioritized the site's goals.
| | 02:03 | Before the first thumbnail sketch, you
should make a list of all the things that
| | 02:07 | the client wants to accomplish with the site,
| | 02:09 | and then compare it with the
needs of the target audience.
| | 02:12 | Prioritize the functionality of the
site and make sure that it's going to respond
| | 02:16 | well to both the client's
goals and the user's expectations.
| | 02:20 | Completing this step will give you a
solid design direction, and give you an
| | 02:23 | idea of the functionality
needed to meet those goals.
| | 02:27 | Next, make sure that you focus on the
content of the site, and making that
| | 02:32 | content central to the site's design.
| | 02:34 | Moreso than in Print Design,
on the web, content is king.
| | 02:39 | All the animation, video and cool
graphics in the world won't prevent a site
| | 02:43 | from failing, if the content
isn't clear and accessible.
| | 02:46 | In fact, I've often seen the design
elements of the site restrict access to the
| | 02:50 | content and make it harder for
users to find what they're looking for.
| | 02:54 | Remember, good design is often
clear, concise and uncluttered.
| | 02:58 | Now, that's not to say that you
shouldn't focus on the visuals of the site, just
| | 03:02 | that in regards to the web, those
things should enhance and draw attention to
| | 03:06 | the content, not distract from it.
| | 03:07 | Take Flash for example. I love Flash.
| | 03:10 | I built this presentation in Flash.
| | 03:12 | However, if you can't justify using it
in a way that creates more compelling and
| | 03:16 | direct content, don't use it.
| | 03:18 | Because it's cool is not a justification.
| | 03:21 | Now, typically, once I have a clear
direction for the site, I'll start organizing
| | 03:25 | content and then wireframing it, so
that I know the structure of the site and
| | 03:29 | how the navigation should work.
| | 03:31 | While this is actually more
information architecture than design, it's a
| | 03:35 | very important step.
| | 03:37 | I'll discuss information
architecture in more detail shortly.
| | 03:40 | For now, it's important to understand
that understanding how the site will be
| | 03:44 | organized will dramatically
affect the overall design.
| | 03:47 | Proper navigation, content organization,
and the amount of pages necessary to
| | 03:52 | clearly convey the site's focus is
directly related to properly organizing
| | 03:57 | content before moving
forward with the design process.
| | 04:00 | Next, I'll generate some thumbnails, or
site mockups, for the client to review.
| | 04:05 | Now this usually involves homepage
design, secondary content areas, and graphic
| | 04:11 | and color treatments.
| | 04:12 | Depending upon the clients, this could
be anything from a sketch on a Post-it
| | 04:15 | note to a finished mockup in
Photoshop, Illustrator or Fireworks.
| | 04:20 | Now if the site has advanced
functionality, I may go so far as to create
| | 04:24 | clickable prototypes,
| | 04:25 | so the client can accurately
visualize how the site will operate.
| | 04:29 | Now once the client review is
complete, I'll begin creating the site
| | 04:33 | through HTML and CSS, images, any
additional required technology or
| | 04:38 | content, such as Flash.
| | 04:40 | Although everyone is different, I
usually create my sites directly from my
| | 04:44 | prototypes, exporting out the graphics and
using it as a reference for my HTML and CSS.
| | 04:50 | At this point, the design is finished
and I'm just assembling it using the
| | 04:53 | appropriate technology.
| | 04:55 | Also, one more thing. To make sure
that you're maximizing your site's
| | 05:00 | effectiveness, you need to test it.
| | 05:03 | You should study web usability continuously.
| | 05:05 | Now web usability is the study of how
people use the web and their personal
| | 05:10 | preferences involving navigating
and interacting with your sites.
| | 05:13 | Knowing how your target audience
prefers to use the web, and the barriers
| | 05:17 | that you might unwittingly put up through your
design is essential to creating effective sites.
| | 05:21 | Now I know this sounds like a lot,
and like most disciplines, it is.
| | 05:25 | However, I hope I've emphasized the
point that it takes more than just good
| | 05:29 | design sensibilities to
create well-designed sites.
| | 05:32 | It could be hard for most
designers to accept, but you have to be
| | 05:34 | comfortable with the idea that you
don't have total control over how
| | 05:38 | visitors view your site.
| | 05:40 | Your sites are likely to be consumed
by multiple browsers, user agents and
| | 05:44 | devices, all of which will to display
your pages with slight and sometimes not
| | 05:48 | so slight differences.
| | 05:50 | Understanding how these browsers and
devices work will enable you to create
| | 05:53 | designs that give a consistent user
experience across multiple devices, and
| | 05:57 | ensure the long-term success of your site.
| | Collapse this transcript |
| Information architecture| 00:00 | Take a moment to think about
some of your favorite websites.
| | 00:03 | They could be your favorite online
shop, a place to read news, or current
| | 00:06 | events, sports or any of the hundreds
of different types of websites out there.
| | 00:11 | Regardless of which type of sites you
were thinking about, I am guessing that
| | 00:14 | they have certain things in common.
| | 00:16 | Everything is probably right where
you need it, the interface is probably
| | 00:19 | extremely intuitive, and I am
betting it's a breeze to navigate and find
| | 00:23 | what you're looking for.
| | 00:24 | In fact, if you had to choose one word to
define successful sites, it would be effortless.
| | 00:31 | I can assure you that this ease-of-use
which viewers find so compelling is no accident.
| | 00:36 | information architecture is the
science, or art depending upon your view, of
| | 00:40 | organizing and structuring sites.
| | 00:42 | It's another area of Web design that
many individuals specialize in, and as
| | 00:46 | the Web has evolved, has become an
increasingly important part of the design process.
| | 00:52 | Based on the size of your site, you
could be solely responsible for the
| | 00:55 | information architecture or
you could work on a larger team.
| | 00:58 | For small sites, you and your client
will probably be the only people providing
| | 01:03 | the organization and structure for the site.
| | 01:06 | For large to medium sites, you could
hire an information architect or a firm
| | 01:09 | that offers those services.
| | 01:12 | If you're the type of person that
excels at planning and organization, you
| | 01:15 | could begin to specialize in it yourself as
part of a larger design firm or as a freelancer.
| | 01:20 | So what exactly does an
information architect do?
| | 01:24 | Typically, information architects are
involved very early in the planning of sites.
| | 01:28 | Before any visual design is started,
the goals of the site need to be defined
| | 01:32 | and the content then
organized based on those goals.
| | 01:35 | For smaller or more focused sites,
this is usually a pretty quick process,
| | 01:38 | but for larger multi-functional sites, this
could be a much longer and more difficult process.
| | 01:44 | Let's say, for example, that you're
working on a music site that's going to
| | 01:47 | feature hundreds of artists.
| | 01:49 | After talking with the owners of the
site, you determine that they want to
| | 01:52 | sell music, offer reviews and current news
and try to build a community around its users.
| | 01:57 | Without knowing which of those goals
was the most important, designing the
| | 02:00 | site would be very difficult.
| | 02:02 | Organizing the homepage to display the
most important information prominently
| | 02:06 | and designing the navigation to move
users quickly to their desired locations
| | 02:10 | will be difficult without such organization.
| | 02:12 | And then there's the music itself.
| | 02:14 | The music will need to be categorized,
tagged and labeled, so that users can
| | 02:18 | find what you're looking for.
| | 02:19 | Information architects
do all this and much more.
| | 02:23 | Let's take a moment and look at the
typical responsibilities of an information
| | 02:26 | architect in greater detail.
| | 02:28 | First, and most importantly, is
identifying the site's goals.
| | 02:33 | Knowing the goals of the site and
prioritizing those goals will drive the
| | 02:36 | organization of the entire site.
| | 02:39 | That sounds easy, but often sites
are a combination of diverse content
| | 02:43 | and competing goals.
| | 02:44 | So, it's important that enough time and
energy be spent in defining those goals properly.
| | 02:49 | Now next, organizing site content and
defining the flow of the site through the use
| | 02:54 | of wireframes and site maps will help
definite to scale of the site, and assist in
| | 02:59 | creating navigation.
| | 03:00 | Creating categories for site content
will make organizing the site easier and
| | 03:05 | assist with site searches.
| | 03:07 | When creating categories, be sure to
take future site growth in mind.
| | 03:11 | Being able to anticipate site growth is another
important key to keeping your site organized.
| | 03:17 | Without a doubt, one of the most
important facets of any site is navigation.
| | 03:21 | The navigation of your site should match
and complement the direction of your site.
| | 03:25 | Are you trying to move somebody
quickly through a checkout process?
| | 03:31 | Are you helping them find
information on a complex site?
| | 03:35 | Or, are you encouraging your users to
browse and explore few specific areas?
| | 03:40 | Hopefully, you can see how important
it is to have a navigation strategy that
| | 03:44 | matches your site's purpose.
| | 03:46 | Information architecture doesn't
usually get a lot of attention when
| | 03:49 | web design is discussed.
| | 03:50 | However, without it, sites would be
unorganized, lack direction and be difficult
| | 03:55 | for visitors to use.
| | 03:57 | When a site lacks planning, it shows.
| | 03:59 | I also want to stress the information
architecture isn't just something that you
| | 04:02 | do during the design of the site.
| | 04:05 | As site's age, content changes and
often the focus or even the scope of site
| | 04:10 | can change as well.
| | 04:11 | Be sure to monitor the site's
organization throughout its life span, so that you
| | 04:15 | can adjust it as needed.
| | Collapse this transcript |
| Interactive design| 00:00 | As Internet connections have gotten
faster, Multimedia and Interactive Content
| | 00:04 | have become an increasingly
important part of websites.
| | 00:07 | Consequently, interactive design has
become one of the largest and fastest
| | 00:12 | growing fields in web design.
| | 00:14 | Interactive design is a huge field
and we certainly won't have time here to
| | 00:17 | discuss everything involved in the
production and design of interactive content.
| | 00:22 | But if you were to take a broad look at
it, you could define it as the creation
| | 00:25 | and publishing of feature rich
interfaces, video, and blended media.
| | 00:31 | Looking at it in a bit more detail,
most interactive content is delivered
| | 00:35 | through either Ajax powered interfaces,
focused JavaScript interactions, Flash
| | 00:40 | based content and video or alternate plug-ins
like Microsoft's Silverlight and Apple's QuickTime.
| | 00:46 | As you can imagine, each of these
approaches requires a different skill set, so
| | 00:51 | most designers will either focus on
a single approach or move into other
| | 00:54 | delivery methods gradually.
| | 00:57 | The diverse skill sets required by
interactive designers makes it one of the most
| | 01:00 | difficult disciplines to master.
| | 01:02 | So diverse is this field, in fact, that
many people specialize in one specific area.
| | 01:07 | One person might consider themselves
as an Ajax developer and could even
| | 01:10 | specialize in many of the popular
JavaScript frameworks like Prototype or jQuery.
| | 01:16 | Another designer might focus on Flash
Design, Flash Application Development or
| | 01:20 | dedicate themselves to creating and
delivering video content. No matter what
| | 01:24 | the area of focus might be, having great visual
design skills is only one part of the equation.
| | 01:30 | Almost all interactive design
requires varying degrees of programming and
| | 01:34 | scripting skills as well.
| | 01:35 | If you are creating Ajax driven sites,
you'll need to be proficient in HTML,
| | 01:39 | CSS, JavaScript, and XML.
| | 01:42 | Delivering content through Flash will
require you to know ActionScript, at a
| | 01:46 | minimum, and XML and a
smattering of JavaScript as well.
| | 01:51 | At some point, you'll probably
need to work with web developers,
| | 01:55 | as many interactive applications tie-in
with larger application frameworks, so
| | 01:59 | knowing how PHP, .Net, ColdFusion, or
other server-side software works is an
| | 02:04 | important skill for interactive designers.
| | 02:07 | If you consider yourself more of a
visual designer, don't let all this
| | 02:10 | programming talk scare you off.
| | 02:12 | Many programs, like Adobe's
Dreamweaver and Microsoft's Expression, have
| | 02:16 | built-in features that allow you to
generate interactive content without
| | 02:19 | any scripting at all.
| | 02:20 | There are also a large number of online
templates available that can give you a
| | 02:24 | head start in adding
interactive content to the page.
| | 02:27 | So using these approaches to jump start
your interactive content as you learn is
| | 02:31 | a great way to start.
| | 02:33 | Regardless of the approach you take,
it's important to keep a few basic design
| | 02:37 | principles in place when
considering interactive content for your site.
| | 02:41 | First, don't just do it because you can.
| | 02:44 | Interactive content works best when
it complements your site's goals and
| | 02:48 | assist the user in achieving it. 'Just because
you can' is a horrible reason to do anything.
| | 02:52 | I have seen many sites lose focus and
effectiveness because they spent too much
| | 02:56 | time on multimedia and interactive
widgets and too little time on meeting the
| | 03:01 | user's expectations and needs.
| | 03:03 | Also, be sure that the interactive
content is appropriate for your audience.
| | 03:08 | Some target audiences will respond well to,
or even expect, a high degree of interactivity.
| | 03:13 | Others might find the content a bit
overwhelming or even distracting from the
| | 03:16 | information on the site.
| | 03:18 | As a designer, it's your job to decide
when the content is appropriate and to
| | 03:23 | make sure that it is enhancing the site's
purpose rather than distracting from it.
| | 03:27 | Finally, you need to keep in mind
that browsers aren't the only clients
| | 03:31 | accessing your content.
| | 03:33 | Some user agents might not support
JavaScript. Others might not have the proper
| | 03:37 | plug-in to view your content.
| | 03:39 | Because of this, you'll want to
familiarize yourself with the concept known as
| | 03:42 | Progressive Enhancement,
| | 03:44 | something we'll discuss in
greater detail a little bit later.
| | 03:47 | Simply put, progressive enhancement
is the practice of providing alternate
| | 03:51 | content or user experiences for
clients that can't display your rich media or
| | 03:55 | interactive interfaces.
| | 03:57 | It's a good practice and it ensures
that no matter how your site is being
| | 04:00 | viewed, your content is still
coming through loud and clear.
| | Collapse this transcript |
| Scripting and programming| 00:01 | I want to take just a moment to talk
briefly about scripting and programming.
| | 00:04 | While not technically a part of web
design, or at least the way that we've defined
| | 00:07 | it, scripting and server-side
programming are such an integral part of so many
| | 00:12 | websites that they're practically
unavoidable for most web designers.
| | 00:15 | With that in mind, let's discuss web
development and where it fits in the design process.
| | 00:20 | Most of what we have discussed so
far, the visual part of web design, is
| | 00:24 | sometimes called front end development,
since it deals primarily with how the
| | 00:28 | user agent interprets and views your sites.
| | 00:32 | Consequently, creating the server-based
applications and programming that drives
| | 00:36 | dynamic sites is often
referred to as backend development.
| | 00:41 | This is primarily the terrain of people
we like to call programmers or developers.
| | 00:46 | Fantastic people, developers. They find
joy in scripting hundreds and hundreds of
| | 00:50 | lines of code, all to make sure that
the shopping-cart works flawlessly or that
| | 00:54 | the database updates properly
each time a new blog entry is made.
| | 00:59 | It takes all types.
| | 01:00 | If that doesn't sound like a whole lot
of fun to you, I suggest that you make
| | 01:03 | good friends with the
developer if you haven't already.
| | 01:06 | At some point, depending upon the type
of sites that you create, your awesome
| | 01:10 | design is going to need
them to function properly.
| | 01:12 | If, on the other hand, that sounds like a
blast to you, you'll probably be one of
| | 01:16 | the rare individuals who are just as
comfortable programming applications as
| | 01:20 | they are creating cool site designs.
| | 01:22 | It's rare, but it does happen.
| | 01:24 | Now whether you choose to tackle
becoming a web developer or not, it's always
| | 01:29 | helpful to understand some of the basic
terminology and workflow involved with
| | 01:33 | creating application-based sites.
| | 01:35 | Often, you are going to hear terms
like client-side scripting versus
| | 01:40 | server-side scripting.
| | 01:41 | Well essentially this is the
same as front-end versus back-end.
| | 01:46 | Client-side scripting refers to
any scripts that execute in the
| | 01:49 | browser environment.
| | 01:51 | This is usually done through JavaScript
and allows designers and developers to
| | 01:55 | build rich-interfaces and applications
that don't require server support to run.
| | 02:01 | Now server-side scripting is usually
created using powerful server-based
| | 02:06 | development applications like
.Net, PHP, ColdFusion or Java.
| | 02:11 | Another key component to many
applications is the use of external data.
| | 02:17 | Data can be stored in anything from a
text file to XML, to robust databases, and
| | 02:23 | can be accessed and written
through a number of methods.
| | 02:26 | Server-side applications typically
use a language called SQL to communicate
| | 02:30 | with databases, while client-side
applications often use XML to store and retrieve data.
| | 02:37 | Now deciding to use a client-side or a
server-side approach is often driven by
| | 02:42 | the needs of the site.
| | 02:44 | Client-side scripts are typically used
to drive interfaces, build complex user
| | 02:48 | interactions or manipulate data
without making additional server requests.
| | 02:52 | Server-side applications usually
handle robust tasks such as e-commerce, form
| | 02:58 | processing and handling tasks
such as logins and registrations.
| | 03:02 | Often, developers will use a blended
approach, combining client-side and
| | 03:06 | server-side scripts to
create the finished application.
| | 03:09 | Now, whether you are interested in
web design, web development or a mixture
| | 03:13 | of both, you will find yourself
spending at least some time in the
| | 03:16 | development environment.
| | 03:17 | If you plan on creating some really
cool Ajax-driven interfaces, you'll need to
| | 03:22 | do some client-side scripting.
| | 03:24 | If your client wants a shopping cart
or an ongoing database of registered
| | 03:27 | users, you'll need to work with a web
developer or begin to develop those skills yourself.
| | 03:33 | At any rate, you should realize that
in today's multi-functional sites, web
| | 03:37 | development is a key ingredient.
| | 03:38 | Instead of being intimidated by, and
shying away from those opportunities, learn
| | 03:42 | as much as you can about the different
approaches to creating dynamic content
| | 03:46 | and begin to integrate them into
your overall web design workflow.
| | Collapse this transcript |
| The multidisciplinary approach | 00:00 | In the mid 1990s when I first started
designing websites, I lamented the fact
| | 00:04 | that I had to learn HTML.
| | 00:06 | I was a graphic designer and learning a
markup language was not at the top of my
| | 00:10 | list of things I wanted to do.
| | 00:12 | I still hear the same type of
apprehension in a lot of my students today.
| | 00:17 | For many new web designers, the
technical requirements seem daunting and many
| | 00:21 | don't see the need to learn so
many different technical skills.
| | 00:24 | So for those of you that find yourself
in that mindset, I wanted to give you
| | 00:29 | both the good and the bad news as
you start your journey into web design.
| | 00:33 | The bad news, well compared
to you guys, I had it easy.
| | 00:38 | I had learned HTML, how to create web
graphics, build complex tables and worked
| | 00:43 | through a JavaScript rollover or two.
| | 00:45 | That was it, no CSS, no JavaScript
frameworks, minimal back-end programming and
| | 00:50 | Flash was something we
used to build intro pages.
| | 00:53 | By comparison, today's web designer
must often integrate various languages,
| | 00:58 | multimedia content, and
external APIs into a single page.
| | 01:02 | That is a wide skill set.
| | 01:04 | So, what's the good news?
| | 01:06 | Well, the good news is it isn't that
hard, especially if you take what I call
| | 01:10 | the multidiscipline
approach to learning web design.
| | 01:13 | This approach recommends that
you start with your core skill set.
| | 01:17 | If you're a graphic designer, start
by being responsible for the visual
| | 01:21 | design of the page.
| | 01:22 | If your background is in project
management or organization, oversee the
| | 01:26 | information design of the site.
| | 01:28 | If you're a programmer, learn the web
development platform of your choice and
| | 01:31 | build the back-end of your site.
| | 01:33 | Have friends, contractors, freelancers
or even hire an agency to assist you with
| | 01:38 | the rest of the site's functionality.
| | 01:40 | Just don't stop there.
| | 01:43 | With every new project, challenge
yourself to take over one more aspect of your
| | 01:47 | site's functionality or create
personal projects that allow you to tinker and
| | 01:51 | experiment with new areas of web design.
| | 01:53 | The end result of this approach is that
you'll find yourself handling more tasks
| | 01:58 | quicker than you thought possible.
| | 01:59 | You'll have a broader skill set and
you'll have a better idea of which area of
| | 02:03 | web design interests you the most.
| | 02:06 | There is, however, a more important
reason to take this approach, and that would
| | 02:10 | be the current direction that
building websites is taking.
| | 02:13 | Let me illustrate that by breaking
down a sample webpage and the various
| | 02:17 | elements that make up its content.
| | 02:19 | Web pages are now truly compound
documents, with content, structure,
| | 02:24 | presentation, functionality, and media
often coming from totally different sources.
| | 02:29 | As I mentioned earlier, when I first
started designing websites, everything that
| | 02:33 | the browser needed to render the page
was found directly in the HTML itself.
| | 02:38 | Image tags pointed to external image
files, but that was about the extent of
| | 02:42 | any compound documents.
| | 02:44 | Compare that to the mockup
that I'm displaying here.
| | 02:48 | Like most documents, this
webpage starts off simply as raw text.
| | 02:53 | The HTML document provides structure
and tags the basic document markup.
| | 03:01 | External CSS files give the page its
presentation and control typography and layout.
| | 03:06 | The video is an external FLV file that's
played through an embedded Flash player.
| | 03:15 | The interactive menu, informational
widgets, and plug-in integration are all
| | 03:20 | controlled through
separate JavaScript libraries.
| | 03:24 | The table data is populated by an
external database and retrieved through
| | 03:29 | server-side scripting.
| | 03:30 | The Latest Headlines feature is being
floated into the page from an external RSS
| | 03:36 | Feed and formatted using a
server-side XSL transfer.
| | 03:40 | Finally, the interactive map is
provided by the Google Maps API and integrated into
| | 03:46 | the page using JavaScript. Man!
| | 03:49 | That's a lot of external content, and
it's a rather extreme example, but it
| | 03:53 | allows me to illustrate the fact that
most webpages separate content, structure,
| | 03:58 | presentation, and
functionality into discrete sources.
| | 04:01 | This creates a modular approach to
web design that makes it easy to update,
| | 04:05 | maintain, swap out or even eliminate
one area of your site without needing
| | 04:09 | to edit other areas.
| | 04:10 | It also makes it easier to degrade
content for user agents that lack the full
| | 04:15 | capabilities that the page has to offer.
| | 04:18 | The user might not see or experience the
page as you designed it, but they will
| | 04:21 | still be able to access your content,
and that is the most important part.
| | 04:26 | By taking a multidiscipline approach
to web design, you'll be able to handle
| | 04:30 | such complex structures and still have
your design aesthetic and sight focus be
| | 04:35 | clearly represented.
| | 04:36 | You'll also understand when you
need to bring in outside help for site
| | 04:40 | functionality and be able to work closely with
those team members to ensure the proper result.
| | 04:45 | Almost all web designers focus
on one discipline or another.
| | 04:49 | It's just human nature.
| | 04:50 | However, by dedicating yourself to
learning as much of the wide spectrum of web
| | 04:55 | design as possible, you will ensure
that you retain control over the entire
| | 04:59 | creative process and stay current with
the ever changing nature of web design.
| | Collapse this transcript |
|
|
2. Web TerminologyHow the web works| 00:01 | Often, in the course of learning new
skills, we focus on learning the skills
| | 00:04 | themselves and not the
underlying processes behind them.
| | 00:07 | This is certainly true in web design
where many web designers can tell you
| | 00:11 | how to compress images for the web,
write HTML or CSS or any number of web
| | 00:16 | design related tasks.
| | 00:17 | However, many of those same designers
probably couldn't tell you what a DNS
| | 00:21 | server does or when a
document type definition is needed?
| | 00:25 | Too often, we focus on learning a
specific skill to perform a specific task, and
| | 00:30 | then moving onto the next one, without
really focusing on the bigger picture.
| | 00:33 | As a web designer, it's important to
understand how the web works and the
| | 00:38 | processes involved in hosting,
serving, and rendering websites.
| | 00:42 | By understanding the terminology and
processes involved, you'll create more
| | 00:46 | efficient sites and have a concrete
understanding of why you do the things you do.
| | 00:51 | Before we move on to specific
terminology, let's take a moment to examine how
| | 00:55 | the web works as an overall process.
| | 00:58 | If you could compare learning web design to
building a house, consider this the foundation.
| | 01:04 | The web can be summarized as a series
of interactions between two types of
| | 01:07 | systems, clients and servers.
| | 01:11 | Clients are the devices that
request and render your web content.
| | 01:16 | Popular clients include browsers,
mobile devices, screen readers, e-mail
| | 01:21 | programs and chat clients.
| | 01:24 | We live in an increasingly connected
world, and the number of clients that can
| | 01:27 | access web content is growing rapidly.
| | 01:30 | In fact, trying to keep up with all
the new clients and how they access and
| | 01:35 | render your content is one of the
most challenging aspects of web design.
| | 01:39 | Servers are applications that deliver
web content or services to the clients.
| | 01:45 | There is a wide range of web servers,
from FTP servers, mail servers, database
| | 01:51 | servers, name servers,
application servers and more.
| | 01:54 | They are all involved, in some way, in
delivering the content you request or the
| | 01:59 | services you need performed.
| | 02:01 | If you're interested in the programming
aspect of web design, or in hosting your
| | 02:05 | own site, you'll need to become familiar with
the different types of servers and how they work.
| | 02:10 | Now that we understand the client-server
model the web is based on, let's take a
| | 02:14 | closer look at the process of
requesting and receiving web content.
| | 02:18 | Most of you probably already
understand that your browser request pages from
| | 02:22 | web servers based on the links that you click
or the addresses that you type into the browser.
| | 02:27 | As with most processes however, there's a
little bit more going on behind the scenes.
| | 02:32 | When your browser makes a request, it
uses a URL or Uniform Resource Locator to
| | 02:37 | locate the requested content.
| | 02:40 | This request is usually passed
onto a Domain Name Server or DNS.
| | 02:45 | The DNS then translates
the URL into an IP address.
| | 02:49 | The browser then uses this IP address
to locate the host server and send a
| | 02:54 | request for the content.
| | 02:56 | Now based on the file type
requested, several things take place next.
| | 03:00 | If the request is a simple HTML page,
the HTML text is sent to the browser,
| | 03:07 | where it's rendered, and
then presented to the user.
| | 03:09 | If the page contains additional
requests, such as CSS or images, these requests
| | 03:14 | are presented to the
server and rendered as well.
| | 03:17 | Any client-side scripts, such as
JavaScript or CGI, that are triggered by the
| | 03:21 | document loading are
also executed at this point.
| | 03:24 | If the file type requested is a type
that must first be processed by a web
| | 03:28 | application, such as PHP, .Net, or
ColdFusion, then before the content is sent to the
| | 03:33 | browser, the page is first processed
and then the appropriate data is returned
| | 03:38 | to the browser to be rendered.
As before, requests such as style sheets, images,
| | 03:44 | and client-side scripts are then executed.
| | 03:46 | This is a fairly broad, fairly big
picture view of how the web works.
| | 03:52 | In the other movies in this chapter,
I'll begin to discuss individual terms and
| | 03:55 | functionality in more detail to help
deepen the understanding of how these
| | 03:59 | processes work together.
| | Collapse this transcript |
| What is a URL?| 00:00 | Okay. I'm sure that most of you probably
know what a URL is and that it stands for
| | 00:05 | Uniform Resource Locator.
| | 00:07 | However, did you know that the URL is
actually made up of several parts and
| | 00:11 | the syntax used within it determines
what type of file you're looking for,
| | 00:15 | where to find that file and it
allows you to pass along several optional
| | 00:18 | parameters to the server?
| | 00:19 | Well, let's start by examining a common URL
and identifying the different parts of it.
| | 00:24 | If I type http://www.lynda.com into my
browser, it navigates me to the homepage
| | 00:33 | of lynda.com, just as you'd expect.
| | 00:35 | The first part like the link,
the HTTP, is known as the protocol.
| | 00:40 | We'll discuss protocols in more detail
later. For now, it's enough to know that
| | 00:44 | the protocol tells the server
what type of file it is requesting.
| | 00:48 | There are many protocols and you need
to be sure your URLs are using the right
| | 00:52 | protocol, based on your file type.
| | 00:54 | The HTTP protocol, for example, is
used primarily to transfer HTML files.
| | 01:00 | The second part of the link, the
www.lynda.com, is known as the resource name and
| | 01:07 | it is also made up of several parts.
| | 01:09 | The two forward slashes are for
correct syntax only and their inventor, Tim
| | 01:14 | Berners-Lee, has previously said he now
regrets making them part of the syntax,
| | 01:19 | adding that, "It seemed
like a good idea at the time."
| | 01:23 | The resource name is identified by
a series of domains, separated by
| | 01:27 | periods between them.
| | 01:28 | In this example, the www is the
subdomain, lynda is the domain name and com is
| | 01:35 | what we call the top level domain.
| | 01:38 | In many cases, the subdomain is no
longer required, which is why you could also
| | 01:42 | type in lynda.com without the www
and still arrive at the same page.
| | 01:48 | Most web servers are now instructed
to redirect to the default subdomain if
| | 01:52 | none is provided, giving us the freedom of
not having to type out the entire www syntax.
| | 01:58 | However, this is not always given.
| | 02:00 | So, when creating your URLs, you
should know whether this is allowed or not.
| | 02:04 | So, what is a subdomain, anyway?
| | 02:06 | Well, in the simplest sense, it's simply a
folder that your web content is located at.
| | 02:11 | Most web servers serve multiple types of
content and subdomains allow servers to
| | 02:16 | identify unique sites or
unique areas of content.
| | 02:19 | www has evolved as the default
subdomain for most web content.
| | 02:24 | When you upload your site to your
server as you publish it, chances are you're
| | 02:28 | looking for the www directory.
| | 02:30 | There are many subdomains
beside www, such as FTP or video.
| | 02:35 | In fact, the server administrator can
create as many subdomains as they wish.
| | 02:39 | So, in theory, this could be almost anything.
| | 02:42 | Now turning our attention back to our
link, the lynda portion of our URL is
| | 02:47 | known as the domain name.
| | 02:48 | This is the name that the browser uses
to check with the web server to see if
| | 02:52 | this site exists or not.
| | 02:54 | We'll learn more about that process
when we discuss domain name servers, or as
| | 02:59 | they're more commonly referred to, DNS.
| | 03:01 | The .com is a top level domain and
is also tied into the DNS system.
| | 03:07 | This is the name server that your
browser will use to resolve the location of
| | 03:11 | the site you're requesting. Common top-level
domains are com or an edu, although that
| | 03:17 | is by no means all of them.
| | 03:18 | Now it seems like we've examined every
part of our example URL, but, in fact,
| | 03:23 | there are a couple of parts
of it that we've left off.
| | 03:27 | A URL should also specify the path on
the server to the requested file and which
| | 03:31 | port on the server that you should connect to.
| | 03:34 | In this case, both of those requests
are left off, which means that both will
| | 03:38 | get the default values for the server.
| | 03:40 | It's a rare to see a port definition
within the URL and most servers default to 80.
| | 03:45 | Unless you are instructed otherwise,
it's almost always safe to leave the
| | 03:49 | port number off the URL.
| | 03:50 | The port is appended to the end of the
top-level domain and proceeded by a colon.
| | 03:55 | So, we could type in, http://www.lynda.com:
80 and there you go, we get the same result.
| | 04:03 | Every site has a default page and
that's often referred to as the homepage.
| | 04:08 | This is typically a page named index.htm
or default.htm, but in reality, the
| | 04:14 | server can set any pages it
wishes as the default page.
| | 04:17 | Note if you type in www.lynda.com,
the URL resolves itself to
| | 04:23 | www.lynda.com/Member.aspx.
| | 04:28 | In the case of lynda.com, Member.aspx
is the default page and as such, doesn't
| | 04:33 | have to be added to the URL in order
to have the browser navigate to it.
| | 04:37 | Of course, if we need to, we can tell the
browser exactly which page to browse to.
| | 04:41 | Let's say we want to sign up
for the lynda.com newsletter.
| | 04:44 | If we change the URL, here we go, to
www.lynda.com/news/newsletter.aspx, here we go,
| | 04:55 | The path of the URL is now
/news/newsletter.aspx.
| | 05:00 | This tells the server to find the news
directory and locate the newsletter.aspx
| | 05:05 | inside of it and there it is.
| | 05:07 | Now, finally, we can also use the URL to
pass parameters to the server to refine
| | 05:11 | the information retrieved by the server.
| | 05:14 | If we change the URL to this really long
string, I'm not going to read out, just
| | 05:18 | notice the end of it and
what's been added to it.
| | 05:21 | The ViewCourses page is filtered to
display only my videos within the lynda.com
| | 05:26 | OTL and you can see that in the page here.
| | 05:28 | Now, note the Question Mark
that comes after the path.
| | 05:32 | This tells the server that
additional information is on the way.
| | 05:36 | The lpk1 and 128 are what
we call name value pairs.
| | 05:41 | The lpk1 identifies to the server that
we want to filter by authors and the 128
| | 05:47 | is my unique author ID.
| | 05:49 | Of course, to know the correct name
and value pairs, we'd have to know the
| | 05:52 | name that represents an author within the
database and we'd have to know my unique author ID.
| | 05:57 | It's unlikely that any user is
going to know that information.
| | 05:59 | So, most additional parameters are
passed on to the form submittal, the user
| | 06:04 | clicking specific links
or other automated means.
| | 06:07 | Now when resolving URLs, you may
hear the term absolute versus relative.
| | 06:11 | An absolute URL is a unique URL that
contains the entire file path, including the
| | 06:17 | protocol, http://www.lynda.com is
considered an absolute link and will work no
| | 06:26 | matter where the user is currently.
| | 06:28 | A relative link points the resource
from a current reference point, usually
| | 06:32 | within the same domain.
| | 06:34 | So, if you create the URL
news/newsletter.aspx, that would assume that you are
| | 06:41 | in the same directory.
| | 06:42 | Look inside the news directory
and locate the newsletter.aspx file.
| | 06:47 | Absolute URLs are typically used to link
outside of the domain or website, while
| | 06:52 | relative links are typically
used within the same domain.
| | 06:55 |
| | Collapse this transcript |
| The DNS and why it matters| 00:00 | The DNS is one of the most important
processes on the web and it's also one of
| | 00:04 | the most overlooked.
| | 00:05 | Domain Name Servers or DNS, address
one of the most fundamental differences
| | 00:10 | between humans and computers.
| | 00:13 | When a web server hosts a website, the
site is assigned a unique IP address that
| | 00:18 | is used to identify its location.
| | 00:20 | The IP address for lynda.com, for
example, is 69.20.127.243. While computers
| | 00:29 | find working with these long
strings of numbers simple,
| | 00:32 | humans would struggle to remember them.
| | 00:34 | Imagine trying to remember the IP
addresses of every website you frequent.
| | 00:39 | In order to make the web more usable
for us primates, each website is also
| | 00:43 | assigned a unique domain name that
is then associated with the site's IP.
| | 00:48 | Now, this is where the DNS comes in.
| | 00:51 | Others have described it as the
phonebook of the Internet and I really can't
| | 00:54 | think of a better example than that.
| | 00:56 | When you type www.lynda.com into your
browser, the domain name is sent to the
| | 01:02 | name server, which looks up the
address and returns the proper IP to your
| | 01:06 | browser, which is then used to find the website.
| | 01:09 | All of this happens amazingly quickly.
| | 01:12 | To understand this process a bit better, look
at the flow of the DNS process in more detail.
| | 01:18 | The DNS system is an incredibly complex
and fluid database that is distributed
| | 01:23 | across servers all over the world.
| | 01:25 | When you register a newly hosted
website, it is assigned an IP address and
| | 01:29 | registered with the DNS.
| | 01:31 | Your hosting company usually handles
this step, associating the domain name
| | 01:35 | with the IP, behind-the-scenes.
| | 01:37 | Your website is now registered
and ready to accept requests.
| | 01:41 | So, what happens when a request is made?
| | 01:43 | Well, let's say you type in www.lynda.com
into your browser. Well, first, the
| | 01:49 | browser checks with your local ISP's
default DNS to see if the name server has
| | 01:54 | ever heard of that site.
| | 01:56 | If so, you'll receive
the IP and just keep going.
| | 01:59 | But remember, the DNS system is a
huge database, spread all over the world.
| | 02:04 | So, what happens if you make a request
that your local DNS doesn't recognize?
| | 02:08 | Well, this is where it
gets a little complicated.
| | 02:11 | There are a group of servers
called the root name servers.
| | 02:14 | These name servers, in turn, know all the name
servers for what we call top-level domains.
| | 02:19 | In the case of lynda.com, the root
name servers would give the location of
| | 02:24 | the .com name server.
| | 02:26 | The browser would then query the .com
DNS and receive the proper IP address.
| | 02:31 | If the address is still not found,
you'll get a dreaded DNS error message,
| | 02:35 | telling you that your site can't be found at
that location and you'll have to try again.
| | 02:40 | DNS caching helps to speed up
the retrieval process even further.
| | 02:44 | If you've visited the site within
about 24 hours, your default DNS will cache
| | 02:49 | the name for you, making the
retrieval very fast. Okay.
| | 02:53 | So, now that we know a little bit more
about DNS, why does it matter to web designers?
| | 02:58 | Well, if the DNS is not assigned
properly, when you register your site, no one
| | 03:03 | will be able find you.
| | 03:04 | So, it's important to monitor this process.
| | 03:07 | When registering multiple domain names
for one site, www.lyndatraining.com also
| | 03:13 | takes you to the lynda.com, for example.
| | 03:15 | You need to make sure that the domain
names are registered to the correct IP.
| | 03:19 | Most important, you need to
make sure ownership of the site is
| | 03:23 | probably registered.
| | 03:24 | Most clients are going to want you to
handle registering the site and getting
| | 03:27 | the host set up for them.
| | 03:29 | If you register it in
your name, you own that site.
| | 03:33 | Getting the site transferred from one
hosting company to another and thereby
| | 03:37 | changing the DNS listing will be
impossible without your assistance.
| | 03:41 | Hosting companies will not make
changes without the owner's consent.
| | 03:45 | If you're registering a site for a
client, make sure that relationship is
| | 03:49 | clearly understood and the
proper owner listed for the site.
| | 03:53 | One more thing. Most name servers don't
refresh their cache for about 24 hours.
| | 03:58 | That means that if you migrate your
site from one host to another, any
| | 04:02 | servers that cached your old location, won't
point to the new site for about a day or so.
| | 04:06 | That's why migrating sites over
the weekend makes the most sense.
| | 04:09 | You'll have fewer visitors
wondering where everything went.
| | Collapse this transcript |
| HTTP and web protocols| 00:01 | Have you ever wondered what the HTTP
portion of your URL is referring to?
| | 00:05 | HTPP stands for Hypertext Transfer
Protocol and is the standard protocol for
| | 00:10 | transferring resources on the web.
| | 00:13 | A protocol is simply a standardized format
for transmitting data between two devices.
| | 00:18 | In this case, your browser is an HTTP
client, while the web server that hosts the
| | 00:23 | requested site is an HTTP server.
| | 00:26 | The browser sends an HTTP request,
explaining what resources it requires,
| | 00:31 | prompting the server to send an HTTP
response, which, in most cases, include the
| | 00:36 | resources requested.
| | 00:37 | There are other web protocols commonly
used to transfer data, most that are based
| | 00:42 | on the type of data requested, which
data compression to use if any, and how
| | 00:46 | the client and server communicate to
each other that information has been
| | 00:49 | requested and received.
| | 00:51 | Other common protocols that you may
encounter include FTP, SMTP and RTP.
| | 00:58 | FTP stands for File Transfer Protocol
and is the most widely used protocol for
| | 01:03 | sending and receiving files over the web.
| | 01:06 | HTTP is what we call a one
-way stateless protocol.
| | 01:09 | Now, we're going to discuss that
stateless nature of HTTP in just a moment.
| | 01:13 | This one-way nature makes sending and
receiving large files over HTTP difficult.
| | 01:19 | By comparison, FTP connects to a File
Server instead of a Web Server and is
| | 01:24 | ideal for transmitting larger files.
| | 01:26 | Because of this, most designers use
FTP connections when uploading and
| | 01:30 | downloading files from their site.
| | 01:32 | SMTP stands for Simple Mail Transfer Protocol.
| | 01:36 | It is the Internet standard protocol
for e-mail transactions across the web.
| | 01:41 | In most e-mail clients, SMTP is used
to send e-mail while POP or Post Office
| | 01:47 | Protocol is used for receiving mail.
| | 01:50 | RTP or Real-time Transfer Protocol is a
standard protocol for delivering audio
| | 01:56 | or video over the Internet.
| | 01:58 | It's most commonly used in
Voice over IP and chat applications.
| | 02:02 | Over the years, many proprietary
protocols have been developed in this area, the
| | 02:06 | most recent being Adobe's RTMP, Real
Time Messaging Protocol, for sending
| | 02:11 | streaming media through the Flash Player.
| | 02:13 | Now this is by no means a complete
list of protocols that you may encounter
| | 02:17 | while creating and administering your sites.
| | 02:20 | However, it should give you an idea
of how protocols work and why so many
| | 02:23 | different protocols are needed.
| | 02:25 | I want to discuss one more
important fact about HTTP.
| | 02:29 | As I mentioned before,
HTTP is a stateless protocol.
| | 02:34 | That means that once a request has been
sent and received, it is discarded and
| | 02:38 | forgotten by both the
browser and the web server.
| | 02:41 | This makes HTTP a simple and efficient protocol.
| | 02:45 | Imagine if web servers had to
remember the billions of requests, sent
| | 02:48 | and received every day.
| | 02:50 | The web would grind to a
halt very, very quickly.
| | 02:53 | However, this stateless
nature does have its downside.
| | 02:56 | Nothing about the request is remembered.
| | 02:58 | So, tasks such as storing persistent
data like logins and browsing sessions, or
| | 03:04 | passing product information through a
shopping cart must be performed by means
| | 03:08 | other than the request.
| | 03:09 | Now, this is usually done through
using cookies, JavaScript, server-side
| | 03:13 | variables or server-based session management.
| | 03:16 | If you're interested in having data
persist throughout browsing sessions, you'll
| | 03:20 | have to account for HTTP's lack of memory.
| | Collapse this transcript |
| How does a browser work?| 00:01 | Most people use web
browsers like they use their cars.
| | 00:04 | They have little to no idea
of what's going under the hood.
| | 00:06 | They just turn the key and drive it.
| | 00:08 | For the casual web user,
there is nothing wrong with that.
| | 00:11 | For web designers and developers
however, knowing what's going on inside the
| | 00:15 | browser is very important, key, in fact,
making sure that your websites look and
| | 00:20 | perform the way that you design them to.
| | 00:22 | It doesn't help that there are so many
browsers and each of them perform tasks
| | 00:26 | a little bit differently from the rest.
| | 00:27 | We'll start by taking a look at the
basics of how browsers work, discuss why
| | 00:32 | differences exist between them and
finish by examining the evolving web
| | 00:36 | standards and what they mean to
designers when dealing with browsers.
| | 00:40 | The basics of how a browser works
are pretty much the same, regardless of
| | 00:44 | the browser itself.
| | 00:45 | Browsers use HTTP or Hypertext Transfer
Protocol to communicate with web servers
| | 00:51 | and request pages and content.
| | 00:53 | Once the requested page, usually an
HTML document, is fed to the browser, the
| | 00:58 | browser then uses its internal
rendering engine to translate the page and
| | 01:02 | render it on screen.
| | 01:04 | Any additional content, such as images
or video, is requested and rendered based
| | 01:09 | on whether the browser supports the
file type or whether the plug-ins necessary
| | 01:13 | to view the content are installed.
| | 01:15 | Client-side scripting, typically
JavaScript, is executed in the browser when triggered.
| | 01:21 | In the case of JavaScript, the browser
uses its internal JavaScript interpreter
| | 01:26 | to execute the script.
| | 01:27 | So, if the basics behind the browsers
are the same, why do different browsers
| | 01:32 | behave so, well, differently?
| | 01:35 | Well, it's important to remember that most
browsers developed independently of each other.
| | 01:39 | Because of this, multiple rendering
engines, each with slightly different
| | 01:43 | preferences and tendencies,
drive what we see on the web.
| | 01:46 | As a designer, it's important to
understand which rendering engines are used for
| | 01:50 | various browsers and how they
differ when laying out pages and content.
| | 01:55 | Another reason that browsers often
behave differently is in their level of DOM
| | 01:58 | support and JavaScript interpreter.
| | 02:01 | The DOM, or Document Object model,
allows designers and developers to use
| | 02:05 | scripting to control and create
elements within your documents.
| | 02:09 | Over the years, different levels of DOM
control have been created, but not all
| | 02:13 | browsers support the most current release.
| | 02:16 | The JavaScript interpreter, or engine,
is another key piece of why browsers
| | 02:20 | behave so differently.
| | 02:22 | Each browser has its own unique
JavaScript engine, which means that scripts that
| | 02:26 | execute the way you intended in one
browser may have a slightly different result
| | 02:30 | in another browser or not even work at all.
| | 02:32 | Now at this point in browser development,
it's incredibly rare for a script not
| | 02:36 | to work, but you should be aware of
the subtle differences in JavaScript
| | 02:39 | interpreters between browsers.
| | 02:41 | Now, by far, the greatest noticeable
differences between browsers is driven by
| | 02:46 | how their rendering engines work.
| | 02:48 | These differences often result in pages
that either look subtly different from
| | 02:52 | one browser to the next, to layouts
that look nothing like each other, depending
| | 02:55 | upon the browser used.
| | 02:57 | The four most common rendering engines
are Trident, Presto, Gecko and WebKit.
| | 03:02 | The Trident engine was developed by
Microsoft and is a proprietary engine used
| | 03:06 | in a multitude of browsers and web clients.
| | 03:08 | Internet Explorer and most
AOL browsers use Trident.
| | 03:12 | Presto is another proprietary engine
developed by Opera Software for their
| | 03:16 | browsers and licensed to other devices.
| | 03:19 | Gecko is an open source rendering engine,
originally developed by Netscape, but
| | 03:23 | released to the open source Mozilla
project which continued development.
| | 03:27 | It powers browsers like Firefox and Camino.
| | 03:29 | WebKit is another open source
rendering engine, developed by Apple,
| | 03:34 | Google, Nokia and others.
| | 03:36 | It powers browsers such as Apple's
Safari browser and Google's Chrome.
| | 03:40 | It's worth noting that these rendering
engines are still being developed and
| | 03:43 | older versions of the browsers will have
older versions of the rendering engines as well.
| | 03:48 | This is why web designers should test
their pages in not just multiple browsers,
| | 03:51 | but multiple versions of the same browser.
| | 03:54 | Although many differences still exist
between how these browsers handle events
| | 03:58 | and render page elements and layout,
| | 04:00 | there aren't as many differences
now as there have been in the past.
| | 04:03 | This convergence in browser behavior
has been driven in large part to something
| | 04:07 | called Web Standards.
| | 04:09 | To understand what Web Standards are, it's
useful to engage in a little bit of web history.
| | 04:14 | In the mid to late 90s, two browsers,
Netscape and Internet Explorer, were
| | 04:19 | battling each other for market dominance.
| | 04:21 | Some refer to this period as the Browser Wars.
| | 04:24 | In order to build better browsers with
cooler capabilities, each would release
| | 04:28 | proprietary features that were
not supported by other browsers.
| | 04:32 | This meant that with every new release,
web designers would have to learn new
| | 04:35 | ways of developing websites to
take advantage of these features.
| | 04:39 | This would often lead to designers
needing to develop multiple versions of
| | 04:42 | pages for different browsers or just
picking a browser to design for and not
| | 04:46 | worrying about the rest.
| | 04:47 | Does anybody remember those
Designed for Netscape Navigator badges?
| | 04:51 | It was inevitable that as the browser
market became more crowded, designers and
| | 04:54 | developers would face an impossible
task when trying to create pages that
| | 04:58 | looked good everywhere.
| | 04:59 | Now, this led to the creation of the
Web Standards Project in 1998 by a group
| | 05:04 | of designers and developers frustrated
with the current state of browser development.
| | 05:09 | They began supporting, in an organized
way, the adoption of the World Wide Web
| | 05:13 | Consortium's recommendations.
| | 05:16 | The World Wide Web Consortium, or W3C,
began in 1994 and attempted to standardize
| | 05:22 | web protocols and technologies by
issuing a series of recommendations for
| | 05:26 | everyone to follow, but obviously,
at this point, no one was listening.
| | 05:30 | So, the Web Standards Project
started referring to the recommendations as
| | 05:34 | standards in an attempt to convince
browser manufacturers to follow them.
| | 05:39 | They began an education initiative, to
make sure designers and developers were
| | 05:43 | aware of these standards
and would push for them.
| | 05:46 | They also educated the general public
by encouraging the use of browsers that
| | 05:49 | supported these standards.
| | 05:51 | Now, in the end, the outcry from the
design and development community along with
| | 05:55 | the rise of open source browsers, such
as Firefox, helped other manufacturers
| | 06:00 | realize the advantages of
supporting Web Standards.
| | 06:02 | Now you can learn more about the Web
Standards Project, and even join it, at
| | 06:07 | www.webstandards.org.
| | 06:09 | So what makes understanding Web
Standards so important to designers?
| | 06:14 | Well, if most modern browsers support
Web Standards, and to an extent they do,
| | 06:19 | that means that by learning these
standards and staying current with their
| | 06:22 | development, you ensure that your sites
will have a consistent design and user
| | 06:26 | experience across multiple browsers.
| | 06:29 | You can simply design with these
standards in mind and make minor tweaks when
| | 06:32 | needed, based on browser deficiencies.
| | 06:35 | It is important to note that
Web Standards are a moving target.
| | 06:39 | New recommendations are being published
often, in an effort to drive the web forward.
| | 06:43 | The adoption of new standards
can be slow and in most browsers,
| | 06:46 | it's a gradual process.
| | 06:48 | So, it's important to track which
standards are supported, which are partially
| | 06:52 | supported, and which lack support,
based on specific browser versions.
| | Collapse this transcript |
| What is HTML?| 00:01 | HTML stands for Hypertext Markup
Language and is the standard markup
| | 00:05 | language for web pages.
| | 00:06 | I've also found it to be the number
one source of apprehension for new web
| | 00:09 | designers, specifically those of you
who have backgrounds in visual design.
| | 00:13 | I can't tell you how many of my
students have asked me if there is a way to
| | 00:16 | design web pages without
having to learn HTML. Hey!
| | 00:20 | I can sympathize.
| | 00:22 | Looking at HTML code for the first time can
seem kind of daunting to any new designer.
| | 00:27 | However, I would like to stress that
HTML itself is actually very simple.
| | 00:31 | As a markup language, HTML contains
tags, which are used to identify the
| | 00:36 | elements of a document and provide structure.
| | 00:39 | Here for example, I've identified this
is a paragraph by surrounding it with an
| | 00:42 | opening and a closing paragraph tag.
| | 00:46 | So learning HTML is basically learning
the syntax of the language, the elements
| | 00:50 | supported and the basic
structure of HTML documents.
| | 00:53 | Hopefully, in the course of this movie,
I'll be able to inform you about what
| | 00:56 | HTML is and the history of its
development and ease any concerns that you might
| | 01:00 | have about your ability to
learn and write HTML yourself.
| | 01:04 | Although, this might surprise some
people, the Internet was functioning for
| | 01:07 | years before the creation of HTML.
| | 01:10 | HTML specifications were first
drafted and used in early to mid 90s.
| | 01:16 | The HTML 2.0 specification was released
in 1995 and marked the first release of
| | 01:22 | the language as a standard.
| | 01:24 | The first releases of HTML were fairly
basic and lacked many of the structural
| | 01:28 | elements that we have today.
| | 01:31 | During the 3.0 release, browsers began
to implement their own proprietary tags
| | 01:35 | that were not part of the
official HTML specifications.
| | 01:39 | This created many problems for web
designers and developers in trying to create
| | 01:43 | consistent sites and threatened
the stability of the HTML standards.
| | 01:47 | Thankfully, the HTML 4.0 release
stabilized the language and was released in an
| | 01:52 | environment that was increasingly
more supportive of Web Standards.
| | 01:56 | Modern browsers were quick to adopt
HTML 4.0 and it became the recognized
| | 02:01 | standard for years and in many ways, still is.
| | 02:04 | In 2000, the W3C, or World Wide Web
Consortium, the governing body that issues
| | 02:11 | standards for web technology, released
the XHTML 1.0 specification in hopes that
| | 02:17 | it would replace HTML 4.0 as the standard.
| | 02:21 | XHTML was meant to move the language
to a more structured XML-based approach.
| | 02:28 | Although, embraced by designers for
its stricter rules, and move towards pure
| | 02:32 | structural markup, it wasn't a
dramatic departure from HTML 4.0.
| | 02:38 | To keep up with the changing nature of
the web, work on XHTML 2.0 began with a
| | 02:43 | focus on becoming a semantic, or think
structural, language only.
| | 02:49 | Because XHTML 2.0 broke with the
previous practice of being backwards
| | 02:53 | compatible, designers and developers
were slow to back the working drafts and
| | 02:58 | after years of work, the W3C finally
ended the Working Groups Charter in 2009,
| | 03:04 | effectively ending XHTML 2.0
before any browser supported it.
| | 03:09 | So, does that leave us stuck with HTML 4.0
and XHML 1.0 to work with? Absolutely not.
| | 03:16 | In a true display of the open nature of
web development, a group of developers
| | 03:21 | and designers, unhappy with the
direction XHTML 2.0 had taken, got together and
| | 03:26 | formed the awkwardly named Web Hypertext
Application Technology Working Group or
| | 03:32 | WHATWG to continue the development of HTML.
| | 03:36 | Their efforts were eventually
recognized by the W3C, which adopted the work
| | 03:40 | under the name HTML 5. Since the
XHTML 2.0 charter had expired, HTML 5 is
| | 03:48 | considered to be the new standard of HTML.
| | 03:51 | Although browser support for HTML 5, at
the time of this recording, is minimal,
| | 03:55 | it is expected to be supported by
all major browsers in the future.
| | 04:00 | HTML 5 retains the backwards
compatibility of previous versions while adding new
| | 04:05 | structural tags and support for APIs to
allow elements to be edited, dragged and
| | 04:10 | dropped, and facilitate communication
from within the HTML document without
| | 04:15 | needing outside scripting.
| | 04:16 | It remains to be seen how much of
this functionality will be implemented
| | 04:21 | inside browsers.
| | Collapse this transcript |
| HTML document structure| 00:01 | Although various versions have been
released over the years, the basics of
| | 00:04 | HTML remain the same.
| | 00:07 | Being a Markup language, HTML consists
of a series of tags that identify the
| | 00:11 | types of elements within a document.
| | 00:13 | Most tags feature an opening and a
closing tag that surround the tag's content.
| | 00:18 | To identify tag as belonging to a
paragraph, for example, one simply needs to
| | 00:22 | encase the text within a paragraph tag.
| | 00:25 | The structure of HTML documents is easy
to learn and the tag set is small enough
| | 00:30 | to learn within a day or two.
| | 00:32 | To help you become more comfortable with
HTML, I'm going to take a few moments to
| | 00:36 | discuss the basic structure of HTML documents.
| | 00:39 | Learning this structure, as well as a few
of the most common HTML tags, is all you
| | 00:43 | really need to learn before
writing your own basic HTML files.
| | 00:47 | Now the best analogy I've ever heard
used to describe the structure of an HTML
| | 00:51 | document is to compare it with a sandwich.
| | 00:54 | That stuck with me so I'm going to use it here.
| | 00:57 | To have a sandwich, you need
to have two slices of bread.
| | 01:00 | Without those, you don't have
a sandwich. You have a salad.
| | 01:03 | To have an HTML document, you need to
have an opening and a closing HTML tag.
| | 01:09 | These tags, like the bread of a
sandwich, surround everything else.
| | 01:13 | Immediately after the opening HTML tag,
you'll find the head of the document,
| | 01:17 | identified by an opening and a closing head tag.
| | 01:21 | The head of an HTML file is much like the
condiments, lettuce, or tomato of a sandwich.
| | 01:26 | They help make the sandwich better,
but they aren't really necessary.
| | 01:30 | The head of an HTML file contains
all of the non-visual element that help
| | 01:33 | make the page work.
| | 01:34 | Here you'll find elements such as meta
tags that might contain keywords or page
| | 01:39 | descriptions to help identify the
document's contents, links to external
| | 01:43 | resources like CSS files and external
script libraries that can control the
| | 01:47 | page's presentation, layout and functionality.
| | 01:49 | It could also contain internal CSS or a
script content if the designer wishes to
| | 01:54 | embed those elements within the page.
| | 01:57 | Things inside the head tag are not
necessarily visual or structural elements.
| | 02:01 | They just help to make the page look
and function the way you want it to.
| | 02:05 | After the head tag, you'll find the body tag.
| | 02:08 | The body tag is like the meat of the
sandwich, the ham, the roast beef, the
| | 02:12 | cheese, whatever else you like in there.
| | 02:14 | All visual, structural elements
are contained within the body tag.
| | 02:19 | Headings, paragraphs, lists, quotes,
images and links are just a few of the
| | 02:24 | elements that can be
contained within the body tag.
| | 02:27 | Simply stated, if it's a visual element,
it appears in the body tag, in the order
| | 02:31 | in which you want it to appear.
| | 02:33 | There are other
syntaxual rules you must learn.
| | 02:36 | You might've noticed, for example,
that if one tag is open inside of another
| | 02:39 | tag, that tag must close
before its parent tag can close.
| | 02:43 | Other rules govern things such as
which tags can be contained inside of other
| | 02:47 | tags, which attributes are allowed to
modify or extend the meanings of certain
| | 02:51 | tags and things like that.
| | 02:53 | Overall, however, the structure I
presented here is the same in every
| | 02:58 | single HTML document.
| | 03:00 | If you learn this basic structure, you
are well on your way to writing clean,
| | 03:04 | valid HTML and making a great sandwich.
| | Collapse this transcript |
| What is a DTD?| 00:00 | Writing valid HTML code should
be a goal of every web designer.
| | 00:04 | Valid HTML will help ensure that
your pages will render correctly across
| | 00:08 | multiple devices, that the content
can be consumed by the widest array of
| | 00:12 | devices and that your document is
written within the established web standards.
| | 00:16 | While learning about web standards and
writing valid HTML, you're bound to come
| | 00:20 | across the term DTD.
| | 00:23 | In this movie, we'll discuss DTDs and
how they assist you in writing valid HTML.
| | 00:28 | DTD actually has two meanings
involving writing valid markup, and often the
| | 00:34 | terms are confused or
interchanged with each other incorrectly.
| | 00:37 | First, DTD can stand for
Document Type Definition.
| | 00:42 | There are many types of markup
languages and many different versions of HTML.
| | 00:47 | In order for a client to properly
parse and understand the document being
| | 00:50 | provided to it, it's important that the
client knows the rules and the syntax of
| | 00:55 | formatting that document type.
| | 00:58 | Document Type Definitions are the
machine readable files that describe the
| | 01:02 | structure, elements and attributes
contained within a particular document type.
| | 01:07 | These are highly technical documents,
designed to be parsed by user agents, and
| | 01:11 | unless you're looking for a little light
reading, it's doubtful you will spend a lot
| | 01:14 | of time looking through them.
| | 01:16 | DTDs can also stand for
Document Type Declaration.
| | 01:20 | This is often shortened to Doctype
declaration and is something that, as a web
| | 01:24 | designer, you'll have to
be much more familiar with.
| | 01:27 | Doctype declarations allow you to
identify a document as belonging to a
| | 01:32 | specific document type.
| | 01:34 | In terms of HTML, it allows you to
identify which versions, or flavor, of HTML
| | 01:38 | that your document belongs to.
| | 01:40 | This will tell browsers how to interpret
your code and determine if you're using
| | 01:44 | valid markup or not.
| | 01:45 | Doctype declarations are found at the very
top of your document preceding the HTML tag.
| | 01:51 | They look much like any other tag,
but unlike many HTML tags, they don't
| | 01:55 | require a closing tag.
| | 01:57 | The syntax is fairly simple and is
used to identify the document type,
| | 02:01 | whether the specification is Public or
Private, and where user agents can find
| | 02:06 | the Document Type Declaration.
| | 02:07 | As simple as this structure is, very
few people have doctype declarations
| | 02:11 | memorized and typically, they're
going to copy and paste them from one
| | 02:14 | document to the next or allow
programs like Dreamweaver to add them
| | 02:18 | automatically for them.
| | 02:19 | Now, I've listed here some of the
more common doctype declarations.
| | 02:23 | Note the differences between the
versions of HTML and how some versions of HTML
| | 02:28 | have multiple versions.
| | 02:30 | Strict declaration tells user agents to
use the rules of the doctype declaration
| | 02:34 | only and not allow for
any backwards compatibility.
| | 02:37 | Transitional declarations tell the user
agent to be more forgiving when parsing
| | 02:41 | the syntax and allow elements or
structure found in previous versions.
| | 02:46 | Frameset doctypes alert the user agent
to the use of frames within the document.
| | 02:51 | It's important to note that
this is a small representation of
| | 02:54 | doctype declarations.
| | 02:56 | There are doctypes for mobile profiles,
XML files and other markup language types.
| | 03:01 | I also want to point out here
the doctype declaration for HTML5.
| | 03:05 | HTML5 validation does not
require a Document Type Declaration.
| | 03:09 | So, the doctype declaration merely
identifies the document type and is
| | 03:13 | considered optional.
| | 03:14 | In future versions of browsers, we may
not need a doctype declaration at all as
| | 03:18 | support for HTML5 increases.
| | Collapse this transcript |
| What is CSS?| 00:00 | Of all the changes HTML has undergone
over the last 10 years, one of the most
| | 00:05 | important has been the emphasis
on HTML as a semantic language.
| | 00:09 | This means that the language focuses
on identifying elements and defining
| | 00:13 | document structure, not on how those
elements should be presented or formatted.
| | 00:18 | Presentation markup, such as the font,
bold and italic tags, have either been
| | 00:23 | discouraged or deprecated entirely.
| | 00:26 | This separation of presentation from
HTML is a conscious decision and one that
| | 00:31 | has had major benefits for web designers.
| | 00:34 | CSS, or Cascading Style Sheets, is a style
sheet language developed to control the
| | 00:39 | presentation of HTML documents.
| | 00:42 | While its early support in browsers
lag, now almost all modern browsers
| | 00:47 | offer robust CSS support.
| | 00:50 | As the name implies, Cascading Style
Sheets are a collection of formatting rules,
| | 00:54 | usually contained in an external file,
that can control a range of pages from a
| | 00:58 | single page to an entire website.
| | 01:01 | The term cascade refers to how
the styles are applied to pages.
| | 01:05 | Styles may be contained in external
files, embedded within the head of an HTML
| | 01:10 | document or applied as an
inline attribute to page elements.
| | 01:14 | Based on where styles are found, the
styles are allowed to overwrite one another
| | 01:18 | when conflicts arise.
| | 01:20 | This creates a cascading order to your
styles that allow you to control entire
| | 01:24 | sites through a single CSS file and
exercise a granular level of control by
| | 01:29 | applying a smaller set of
styles within individual documents.
| | 01:33 | Learning CSS is fairly simple.
| | 01:35 | Take this simple CSS rule.
CSS styles are made up of two parts:
| | 01:39 | the selector and the declaration.
| | 01:42 | The selector here, p, for paragraph, tells the
browser which element or elements to style.
| | 01:48 | Based on the selector, this style
would change the formatting of all
| | 01:51 | paragraphs site-wide.
| | 01:53 | The declaration enclosed in
these curly braces gives the
| | 01:56 | formatting instructions.
| | 01:57 | Here there are three rules.
| | 01:59 | One telling the browser which font to
use, which size to render the font and
| | 02:04 | what color to make the paragraph text.
| | 02:06 | All rules are made up of two parts:
| | 02:08 | the property and the value.
| | 02:10 | These are separated by colons and use a
semicolon to tell the browser to move
| | 02:14 | on to the next rule.
| | 02:16 | While the syntax is simple, you will
need to learn how to write more specific
| | 02:19 | selectors to exercise a greater
amount of control over your page elements.
| | 02:24 | And you also have to learn the
various properties and values that you can
| | 02:27 | set for each element.
| | 02:29 | One of the major benefits that
CSS brings to web design is to enable
| | 02:34 | highly modular design.
| | 02:36 | By controlling the structure of the
document through HTML and the presentation
| | 02:39 | through CSS, you can change
one independently of another.
| | 02:43 | You also speed development and site
maintenance by controlling the formatting
| | 02:46 | for an entire site through a
very small number of CSS files.
| | 02:50 | Another benefit of this separation
of style and structure is the added
| | 02:54 | portability that it brings to your content.
| | 02:56 | Media types can be declared for style
sheets, meaning that you can have one set
| | 03:00 | of styles controlling how
the document looks on screen,
| | 03:03 | another that controls it when printing
and yet another that controls how the
| | 03:07 | content looks on specific mobile devices.
| | 03:09 | As more and more devices consume web
content, this standard allows new style
| | 03:14 | sheet media types to control the
presentation of your content within that
| | 03:17 | device, all without having to
change the structure of your file at all.
| | Collapse this transcript |
| What is XML?| 00:00 | XML or Extensible Markup Language is a
semantic markup language much like HTML.
| | 00:07 | Unlike HTML, XML does not
contain a specific set of tags.
| | 00:11 | Rather, it contains rules for
defining document structure and data.
| | 00:14 | In fact, XML's primary purpose is to
store and transport structured data from
| | 00:20 | one system to another.
| | 00:21 | It's been wildly successful in doing
this and is the accepted standard for
| | 00:25 | sharing data among applications.
| | 00:27 | The magic of XML is not any set
of tags or rigid specifications.
| | 00:32 | Rather, it's in the language's flexibility.
| | 00:34 | The extensible part of its name refers
to the fact that you are free to create
| | 00:38 | any tags or tag structure
necessary to define your data.
| | 00:41 | Let's say you want to create an XML
file to store information on all the
| | 00:44 | vacations that you've taken.
| | 00:46 | You could create a vacations tag to
serve as the top level parent tag and then
| | 00:50 | create individual tags for items such
as trip, price, duration and description.
| | 00:56 | You can also assign custom attributes
to further define tags such as a name
| | 01:01 | attribute on the trip tag to
help identify the trips. Wow!
| | 01:04 | That's awesome.
| | 01:05 | You're probably saying, "What does
that have to do with me, a web designer?
| | 01:09 | Sounds like that's more the
role of a web developer, right?"
| | 01:12 | Well, for the most part, you're right.
| | 01:14 | However, XML has been so widely
adopted across the web, and within so many
| | 01:18 | applications, that you're bound to
encounter in one fashion or another
| | 01:22 | during your career.
| | 01:23 | If you specialize in certain areas,
like interactive design, learning how to
| | 01:27 | create and handle XML is an essential skill.
| | 01:30 | As a web designer, there are a few
areas that you should be aware of, where
| | 01:33 | you're most likely to encounter the use of XML.
| | 01:36 | RSS Feeds, which we'll discuss in more
detail shortly, are XML documents that
| | 01:40 | conform to a specified standard.
| | 01:42 | This allows a website to publish
content, such as current headlines or blog
| | 01:46 | postings, and be picked up and
reprinted by any other site on the web.
| | 01:49 | Now, often this process is
performed by the back-end systems of a site.
| | 01:53 | But designers have to format and
define the tag structure of the content that
| | 01:58 | the site is either publishing or reading.
| | 02:00 | Being familiar with the XML format
for RSS feeds is crucial to working with
| | 02:05 | those feeds and styling them properly.
| | 02:07 | When creating interactive applications
or interfaces, designers often use Ajax.
| | 02:12 | Ajax is short for asynchronous
JavaScript and XML, which should give you some
| | 02:16 | idea of how important XML is to
most Ajax driven applications.
| | 02:20 | XML is typically used to either store
or write data within such an application,
| | 02:25 | or for that matter, XML is commonly used
to get information into and out of Flash
| | 02:29 | applications as well.
| | 02:30 | Learning how to write, parse and
display XML data within your application is an
| | 02:36 | important part of any
type of interactive design.
| | 02:39 | An increasingly popular practice in
web design is to enhance the power and
| | 02:42 | functionality of websites by using
exposed application interfaces from other sites.
| | 02:47 | Sites such as Google Maps, Flickr and
Twitter expose their APIs to allow the use
| | 02:52 | of their applications within your own websites.
| | 02:54 | XML is the primary means of exposing
data from these sites and to probably
| | 02:58 | integrate those services into your sites,
you must become familiar with the XML
| | 03:02 | standards of each application.
| | 03:04 | In many ways, XML works behind the
scenes within web applications, making it
| | 03:09 | easier to share information
from one system to another.
| | 03:11 | In most instances, web developers and
Server-side applications will handle the
| | 03:15 | bulk of any XML-based work.
| | 03:18 | However, as a designer, you should
understand these processes and be prepared to
| | 03:22 | work with XML when necessary.
| | 03:25 | If you're interested in interactive
design or working with RSS feeds, I would
| | 03:29 | advise not only learning how to work
with XML, but also learning technologies
| | 03:33 | associated with XML, such as XSL and
XSLT, which are used to transform XML to
| | 03:39 | other file types such as HTML,
| | 03:41 | also XPath, which is a query language
that is used to parse through and select
| | 03:45 | data within XML files.
| | 03:47 | I think you'll find that learning XML
and the common specifications that you
| | 03:50 | might work with isn't hard at all.
| | 03:52 | As a web designer, you are bound to
interact with XML documents at some point,
| | 03:56 | and understanding how they're
structured is crucially important.
| | Collapse this transcript |
| RSS feeds| 00:00 | RSS is short for Real Simple
Syndication and it is the standard means of
| | 00:05 | publishing and syndicating content over the Web.
| | 00:07 | Now what does that mean?
| | 00:08 | Well, let's say you design a
website for a client that has a section
| | 00:11 | featuring movie reviews.
| | 00:13 | This section will be updated
regularly as new movies are released.
| | 00:16 | You client wants to make sure that
her reviews are being read by the widest
| | 00:20 | amount of people possible.
| | 00:22 | By creating a RSS feed for her reviews,
newsreaders, other websites and mobile
| | 00:27 | devices can subscribe to her reviews
and have them update automatically.
| | 00:31 | Looking at RSS feeds from the other
side, the client may also wish to display
| | 00:35 | current movie industry news
in another section of the site.
| | 00:39 | These articles could come
from one or many sources.
| | 00:42 | By finding and subscribing to other
site's RSS feeds, you can display their
| | 00:46 | content and link directly to their articles.
| | 00:49 | The RSS feed will automatically
update when new content is published.
| | 00:53 | Well, how does all this work?
| | 00:55 | Well, RSS is a standardized XML-based
format designed for distributing content.
| | 01:01 | Designers or developers create an
RSS file that contains headlines,
| | 01:05 | descriptions, links, author name and
other information specific to that content.
| | 01:09 | Although the list of information RSS
Feeds can contain is incredibly broad, most
| | 01:15 | RSS feeds are brief and focus on
the basics of the published content.
| | 01:19 | Creating those documents by
hand can be time consuming.
| | 01:22 | So, the process is usually
automated using JavaScript or Server-side
| | 01:26 | software such as PHP.
| | 01:28 | Most blogging platforms will
automatically create RSS Feeds based on the
| | 01:32 | user's preferences.
| | 01:33 | Most individuals consume RSS Feeds through
the use of newsreaders or feed aggregators.
| | 01:40 | There are many free newsreaders
available and many popular aggregator sites that
| | 01:44 | present feeds based on categories or popularity.
| | 01:47 | well, what if you want to integrate
an RSS Feed into your site though?
| | 01:50 | For the most part, this requires either
a JavaScript or Server-side solution to
| | 01:55 | translate the XML file into
readable content on your site.
| | 01:59 | Now this is usually not the
task of a novice web designer.
| | 02:01 | It has security issues, XSL
Transformations and properly parsing the XML feed
| | 02:08 | can be a little tricky.
| | 02:09 | However, there are online tools, both
free and subscription-based, that can
| | 02:13 | perform this task for you, leaving you
to simply copy and paste the appropriate
| | 02:17 | code into your site.
| | 02:19 | If you decide to use one of these
services, I recommend researching and
| | 02:22 | experimenting thoroughly before
committing them to your finished site.
| | 02:26 | Although utilizing RSS Feeds often
requires back end development, which is
| | 02:30 | generally the responsibility of web developers,
| | 02:32 | you should be aware of how RSS Feeds
work and the tools required to integrate
| | 02:36 | them into your sites.
| | 02:37 | Publishing and consuming RSS Feeds are a
common requirement of many websites and
| | 02:42 | chances are pretty high that you
encounter them at some point as a web designer.
| | Collapse this transcript |
| JPG, GIF, and PNG| 00:00 | The Web will never be lacking for
acronyms and sometimes it's difficult to keep
| | 00:04 | track of them and what they refer to.
| | 00:06 | As you learn web design, you'll
encounter terms like JPG, GIF and PNG, often
| | 00:11 | without any reference to what
they are or what they stand for.
| | 00:14 | Those three acronyms refer to the three
most common Web graphic formats and in
| | 00:19 | this movie, we'll explore
those formats in more detail.
| | 00:22 | Understanding how those formats work,
will make deciding when to use one type
| | 00:26 | of graphic over another much easier.
| | 00:28 | Before we start discussing
individual formats, I want to just a moment to
| | 00:32 | discuss Web graphics in general.
| | 00:34 | Designing images for the Web requires
you to understand how images work within
| | 00:38 | browsers and the unique
considerations required for Web graphics.
| | 00:41 | You'll find yourself always trying to strike
a balance between file size and image quality.
| | 00:47 | Bandwidth considerations are a serious
concern for websites, so keeping images
| | 00:51 | as small as possible, while maintaining
quality, is an important skill to have.
| | 00:56 | For a browser to display your image, the
image must be in a format that the browser supports.
| | 01:01 | Almost all browsers support JPGs, GIFs
and PNGs, so they've become the accepted
| | 01:07 | standards for online graphics.
| | 01:09 | As we move into discussing the
individual formats, I'll start with JPG.
| | 01:13 | JPG stands for Joint Photographic Experts Group.
| | 01:17 | This standard was established around
1992 and has become widely used in many
| | 01:22 | areas, including the Web and digital photography.
| | 01:25 | The JPG format supports millions of
colors, making it ideal for photographs or
| | 01:30 | images with subtle color transitions.
| | 01:32 | However, to keep file size down, JPGs
are compressed with what we call Lossy
| | 01:37 | Compression, meaning image data
is thrown away as they're saved.
| | 01:41 | Now depending on the level of
compression you choose, JPGs are going to chose
| | 01:45 | areas of color that are similar.
| | 01:47 | One area is tagged and the
remaining areas are discarded.
| | 01:51 | As the JPG is decompressed, the tagged
area is plugged-in to those discarded areas.
| | 01:56 | At a high-level compression, this
matching becomes less exact, resulting what we
| | 02:01 | call artifacting and lower image quality.
| | 02:04 | One thing to remember about JPGs is that
they're compressed each time they're saved.
| | 02:08 | Therefore, working with JPG
images as source images is discouraged.
| | 02:13 | You should save the original graphic in
another format and simply overwrite the
| | 02:17 | JPG as its updated or changed.
| | 02:20 | A GIF is short for Graphic Interchange
Format and it was introduced in 1987 by
| | 02:25 | CompuServe, as some people refer to it
as Jiff, I say GIF because Jif makes me
| | 02:30 | think of peanut, butter but either is correct.
| | 02:33 | Now in short order, GIFs became the
most common image type used on the Web.
| | 02:37 | GIFs are 8-bit graphics, meaning
they're limited to a maximum of 256 colors.
| | 02:43 | Although they do use lossless
compression, this color limit prevents them from
| | 02:47 | displaying subtle tones in color shifting.
| | 02:49 | As a result, GIFs are typically used to
display solid colors or a flat artwork
| | 02:53 | like logos or icons.
| | 02:55 | GIFs also support transparency and limited
animation, which are not supported by the JPG format.
| | 03:01 | This makes GIFs the favorite format
for Web icons and smaller animations.
| | 03:06 | A relative newcomer to the world of Web
graphics, PNG stands for Portable Network
| | 03:11 | Graphics and it has several
advantages over GIFs and JPGs.
| | 03:14 | PNGs were developed around 1995 as a
response to copyright disputes over the GIF format.
| | 03:21 | PNGs, like GIFs, support transparency
and use a lossless compression format.
| | 03:27 | Unlike GIFs, they can support
millions of colors, making them ideal for
| | 03:31 | displaying photos and subtle color tones.
| | 03:34 | Despite these strengths, PNGs
suffer from a few disadvantages.
| | 03:37 | They typically have larger file sizes
than JPGs and GIFs and PNG transparency is
| | 03:42 | not supported in older browsers,
most notably IE6, so while PNG usage is
| | 03:48 | increasing on the web, it won't be
replacing GIFs or JPGs as the most common
| | 03:52 | file type for some time to come.
| | 03:54 | Now when deciding which format to
use, take into consideration color
| | 03:57 | requirements, image dimensions and the
weight of all page content. Knowing how
| | 04:03 | the file types compress graphics into
color and support additional capabilities
| | 04:07 | such as transparency will help you
make an informed decision, when choosing
| | 04:11 | which graphic formats to use for your site.
| | Collapse this transcript |
| What is JavaScript?| 00:00 | When students ask me what are the
most important technologies for new web
| | 00:03 | designers to focus on, I always
reply with HTML, CSS and JavaScript.
| | 00:09 | Many designers are hesitant to learn any
type of scripting, but modern web design
| | 00:14 | depends on it so much that not
learning it, at least at a basic level, will
| | 00:19 | severely limit your ability
to build functional sites.
| | 00:22 | JavaScript is a scripting language,
used in web design to add interactivity and
| | 00:25 | application functionality to sites.
| | 00:27 | It was created in 1995 by Netscape to
increase the capabilities of its popular browser.
| | 00:33 | Now, contrary to popular belief,
JavaScript has absolutely nothing to do with
| | 00:37 | the programming language Java.
| | 00:39 | Netscape licensed the term Java from
Sun to speed the acceptance of their new
| | 00:43 | scripting language. Based on the ubiquity
of JavaScript on the web, I'd say it worked.
| | 00:48 | And JavaScript can perform a number of
tasks for your site, including allowing
| | 00:52 | you to create interactive elements,
dynamic menus, open new browser windows and
| | 00:58 | update data in the browser. HTML is static.
| | 01:01 | So making your content respond to user
interaction, animate or change based on
| | 01:06 | other factors is usually the task of
JavaScript or Server-side Scripting.
| | 01:11 | JavaScript has the advantage of
being performed in the browser or what we
| | 01:14 | call client-side, meaning page content
does not have to be refreshed in order
| | 01:19 | for changes to occur.
| | 01:20 | One of the most helpful developments
in adding scripting functionality of the
| | 01:23 | sites has been the development
of multiple JavaScript frameworks.
| | 01:28 | These frameworks are JavaScript
libraries that have prewritten functions and
| | 01:32 | objects built into them.
| | 01:33 | They make creating interactive
applications, widgets and implementing advanced
| | 01:37 | JavaScript functionality
much easier for designers.
| | 01:40 | Take creating a dropdown menu, for
example. Rather than having to write the
| | 01:44 | hundreds of lines of JavaScript
required to create the menu, the JavaScript
| | 01:48 | framework will already have the menu
code written, in a generic way that allows
| | 01:52 | you to use it with whatever
menu in your site, you want.
| | 01:55 | You simply add a few lines of code
within your site to create a new instance
| | 01:59 | of the menu and tell the framework
which elements it is controlling.
| | 02:02 | The framework handles the rest.
| | 02:05 | Although this is a great deal easier
and speeds development considerably, you
| | 02:09 | still need to understand how
JavaScript works, in order to integrate these
| | 02:12 | frameworks successfully.
| | 02:13 | I recommend learning as much about
these frameworks as you can before you
| | 02:17 | attempt to use them in your sites.
| | 02:19 | Some of the more popular frameworks
are Prototype, jQuery, Mootools and
| | 02:24 | Adobe's Spry framework.
| | 02:26 | Each are free and you could download,
read the documentation and get started
| | 02:30 | with them anytime you'd like.
| | 02:31 | Most have really good tutorials,
showing you how to implement the frameworks
| | 02:35 | within your own sites.
| | 02:36 | My suggestion is to learn the basics
of JavaScript, experiment with what it
| | 02:40 | can do for your site and then look
into using frameworks to deliver more
| | 02:44 | robust experiences.
| | 02:46 | While JavaScript is widely supported
among browsers, it is important to note
| | 02:50 | that each browser has its own JavaScript
interpreter and certain user agents may
| | 02:55 | not have JavaScript enabled at all.
| | 02:57 | As such, it is important to have
a strategy for either providing
| | 03:00 | alternate content or giving access
to content when JavaScript support is
| | 03:04 | absent or disabled.
| | 03:05 | Progressive enhancement is a term
usually sided when discussing this type of
| | 03:08 | strategy and is a concept that we
will discuss later in more detail.
| | Collapse this transcript |
| What is AJAX?| 00:00 | Recently, the term Ajax has gotten a lot
of attention in web design, becoming one
| | 00:04 | of the most used buzzwords in recent memory.
| | 00:07 | Now despite this attention, there is still a
great deal of confusion over just what Ajax is.
| | 00:12 | Before discussing what Ajax is, I want to
take a moment to define what Ajax isn't.
| | 00:17 | First of, Ajax is not a new technology.
| | 00:20 | It is not a programming
language or a scripting software.
| | 00:23 | In fact, Ajax isn't any one thing at all.
| | 00:26 | Ajax is actually a very loose term that
refers to the development of interactive
| | 00:31 | applications, widgets, and interfaces
through the use of existing technologies.
| | 00:35 | It is short for Asynchronous JavaScript and XML.
| | 00:39 | And the name denotes the two
technologies that form the core of most Ajax
| | 00:44 | driven applications.
| | 00:45 | Most Ajax applications make heavy use
of HTML, CSS and the DOM, or Document
| | 00:51 | Object Model, for structure,
formatting, and element interaction.
| | 00:55 | None of these technologies
are new to web development.
| | 00:57 | So rather than thinking of Ajax as a
new technology, you should think of it
| | 01:01 | more as a specific approach to web
development that focuses on building
| | 01:06 | engaging user experiences.
| | 01:08 | Ajax is a huge subject and there are
entire books and titles on some of the
| | 01:12 | various aspects of it.
| | 01:13 | Rather than trying to cover everything
in five minutes, I want to explain Ajax
| | 01:17 | by breaking down a typical Ajax application.
| | 01:19 | This will help show the advantages
to using Ajax and why it is becoming
| | 01:23 | increasingly more popular.
| | 01:25 | Let's say you have a website that
allows the user to browse and purchase
| | 01:28 | paintings from several artists.
| | 01:30 | You may want to first show a list of
all paintings available, including a
| | 01:33 | thumbnail of the painting, the
artist, medium used, and price.
| | 01:37 | Most shoppers would want more detailed
inspection of the artwork, so you'd like
| | 01:41 | them to be able to select an
individual painting and learn more about it.
| | 01:44 | Now traditionally, most of this
process would be handled by server-side
| | 01:48 | application software.
| | 01:49 | You would create a database of the
artwork, and then create an initial page that
| | 01:53 | dynamically populates the
list, based on the database.
| | 01:56 | Clicking on one of the paintings would
traditionally take you to what is known
| | 01:59 | as the Detail Page where additional
information would be presented from the
| | 02:03 | database, based on which item is clicked.
| | 02:06 | To return to the list, the user
would browse back to the listing page.
| | 02:09 | Now while functional, this approach
highlights a glaring deficiency with most
| | 02:13 | server-side applications.
| | 02:15 | In order to update the data, a new
request must be made to the server, which then
| | 02:19 | must refresh the entire page.
| | 02:22 | Even something as simple as sorting the table
by Price or Artist would require a page refresh.
| | 02:28 | Ajax applications can take advantage
of JavaScript's ability to make request
| | 02:32 | to the server in the background, and
return data without requiring the entire
| | 02:36 | page to be refreshed.
| | 02:37 | Data can be stored in an
XML file or JavaScript object,
| | 02:41 | allowing data to be sorted or refresh
from within the client without requiring
| | 02:45 | interaction from the server.
| | 02:47 | Let's return to our application to see how
the interface can be improved through Ajax.
| | 02:51 | The list of paintings can still be
retrieved from the existing database, but
| | 02:55 | through Ajax, the list can be
sorted by Price, Title, or Artist without
| | 03:00 | requiring the page to be refreshed.
| | 03:02 | More importantly, clicking on the
painting will now update a detailed region
| | 03:06 | created on the fly by JavaScript,
animated for enhanced user experience and then
| | 03:11 | populated asynchronously through a
JavaScript request to the server.
| | 03:15 | This creates a much more
compelling user experience.
| | 03:17 | It is faster for the end-user and in
many ways, uses less bandwidth, as it
| | 03:22 | only request information the
information it needs each time, instead of
| | 03:25 | refreshing the entire page.
| | 03:27 | I'm sure by now that you've caught on
that Ajax driven applications have many
| | 03:30 | moving parts, and require a high
degree of specialization to build.
| | 03:34 | Many web designers decide to specialize
in building Ajax applications and it is
| | 03:39 | often necessary to engage their
services for complex solutions.
| | 03:42 | However, if Ajax development interest
you, I would suggest mastering HTML and
| | 03:46 | CSS, learning JavaScript, utilizing
XML, and focus on manipulating the
| | 03:51 | Document Object model.
| | Collapse this transcript |
| PHP, .NET, JSP, and ColdFusion| 00:00 | Although this title focuses on web
design, not web development, it is inevitable
| | 00:05 | that as a web designer, you will
eventually face a request for site
| | 00:08 | functionality that will
require server-side programming.
| | 00:11 | HTML documents are static, meaning that
other than linking to other web pages,
| | 00:15 | they can't perform a lot of the tasks
that you might want your website to do.
| | 00:18 | They kind of just sit there looking
the same to every user that views them.
| | 00:21 | Now on the other hand, utilizing
server-side software allows you to build
| | 00:25 | pages that are dynamic.
| | 00:26 | Dynamic pages allow you to provide
a wider variety of page content and
| | 00:30 | functionality than static pages.
| | 00:32 | You could present different content
based on which users are accessing the page,
| | 00:36 | create pages populated with content
from a database, build shopping carts,
| | 00:40 | process forms from your site
and the list goes on and on.
| | 00:43 | So, obviously, building dynamic web
pages allow you to build more powerful
| | 00:47 | and engaging sites.
| | 00:49 | However, dynamic websites are driven
by server-side software that can require
| | 00:53 | complicated programming.
| | 00:54 | It is not always an easy task
for the budding web designer.
| | 00:57 | As such, you will probably find
yourself partnering with a web developer
| | 01:00 | frequently, unless you decide
to develop the skills yourself.
| | 01:04 | Truthfully, there's
nothing wrong with that approach.
| | 01:06 | I love designing sites.
| | 01:07 | And I know enough server-side
scripting to handle many of the basics of some
| | 01:10 | of the dynamic sites.
| | 01:11 | However, if I need to build a robust
client login system or a secure ecommerce
| | 01:16 | site, I'm calling in the professionals.
| | 01:18 | There are people that dedicate their
careers to being awesome at that, and I'm
| | 01:22 | more than happy to let them.
| | 01:23 | Still, if you're designing the
website, you're the one calling the shots.
| | 01:27 | As such, you should understand the
differences between the most popular
| | 01:30 | server-side solutions so that you can
choose the one that's right for you or your site.
| | 01:35 | Often, your choice of platform is
limited by the hosting company that you choose.
| | 01:40 | Many hosting companies only offer
support for one or two platforms and pricing
| | 01:44 | plans for hosting your site can very
dramatically based upon your choice of
| | 01:47 | server applications.
| | 01:49 | More than likely, you'll be choosing
for one of the four most popular
| | 01:52 | server-side solutions.
| | 01:53 | PHP, JSP, .NET or ColdFusion.
| | 01:57 | Let's take a moment and
discuss each one individually.
| | 02:00 | PHP, which is short for Hypertext Preprocessor.
| | 02:02 | Well, PHP is an open-source server-
side scripting language. Unlike many
| | 02:07 | server-side languages, the PHP code
is embedded within the page as HTML.
| | 02:12 | The code is then processed on
the server and replaced by HTML.
| | 02:16 | To the end-user, the PHP code is invisible.
| | 02:18 | Since PHP is open-source and free,
it's available on almost any hosting plan.
| | 02:24 | Its popularity is further enhanced by
supportive MySQL, a free database, and
| | 02:28 | Apache, the most widely used web server today.
| | 02:32 | Using PHP, it's easy to find hosting
plan that can fit almost any budget,
| | 02:36 | and there is a large pool of talented PHP
developers to assist you with your projects.
| | 02:41 | If you're interested in eventually
scripting the dynamic portions of the site
| | 02:44 | yourself, PHP is a good choice.
| | 02:46 | PHP Syntax is fairly easy to learn and
extensive programming knowledge is not
| | 02:50 | required to begin adding
dynamic content to your sites.
| | 02:54 | JSP stands for JavaServer Pages and
is a powerful server-side application
| | 02:58 | tool developed by Sun.
| | 03:00 | As part of the larger Java
frameworks, JSP can be an amazingly powerful
| | 03:05 | development tool, and is the
favorite of traditional Java programmers.
| | 03:09 | JSP is similar to other server-side
applications, in that the JSP code is
| | 03:13 | embedded directly into the HTML
and then processed on the server.
| | 03:17 | The scripts are a
combination of XML and Java Scriptlets.
| | 03:20 | So JSP might have a steeper learning
curve to those new to programming.
| | 03:25 | JSP also has a reputation of only being
used for large-scale enterprise sites.
| | 03:29 | Now, while certainly powerful enough
to handle sites of any scale, JSP can be
| | 03:34 | used for any sites, even small
ones with modest server-side needs.
| | 03:39 | JSP can be ported to almost any
server environment, so finding a hosting
| | 03:42 | company is relatively easy.
| | 03:44 | However, there are many Java
platforms and the cost of hosting may vary
| | 03:48 | greatly by platform.
| | 03:50 | It's important to understand which
platform your site requires for hosting,
| | 03:53 | especially if you're working with a
Java developer in developing your site.
| | 03:57 | Next, I want to talk about .NET.
| | 04:00 | Now .NET itself is not a
server-side application.
| | 04:03 | .NET is the name used by Microsoft to
identify its entire application framework.
| | 04:08 | What most people think of as .NET is
actually a Visual Basic .NET, just one of
| | 04:13 | the many languages that can
be used in the .NET framework.
| | 04:16 | If you're working with a developer to
build web-based applications, make sure
| | 04:20 | that you discuss the pros and cons of which
language you'll be using within the framework.
| | 04:24 | Much like Java, .NET allows developers
to build large-scale applications, both
| | 04:28 | for the web and for the desktop.
| | 04:30 | As such, .NET is typically more
complicated than PHP and ColdFusion and
| | 04:35 | is unlikely to be the choice of
web developers that focus only on
| | 04:38 | developing dynamic websites.
| | 04:40 | Sites built using the .NET framework
must be hosted on a Windows server.
| | 04:43 | So, hosting companies can be limited
and the pricing structure is typically a
| | 04:47 | little higher for those sites.
| | 04:49 | ColdFusion was originally developed by
Allaire, and it's since been acquired by
| | 04:52 | both Macromedia and then Adobe, both
of which have continued development.
| | 04:56 | ColdFusion differs from other server-
side applications in that it is added to
| | 05:01 | HTML by using its own markup language, CFML.
| | 05:05 | Many web designers find that the
similarities between writing CFML and
| | 05:09 | HTML makes learning ColdFusion relatively
easy, especially for simple web applications.
| | 05:14 | The ColdFusion Administrator also
handles common tasks such as connecting to
| | 05:18 | databases, and setting up mail
objects that usually require additional
| | 05:21 | programming and other server-side applications.
| | 05:24 | This and the simplicity of the tag-
based approach, means that ColdFusion
| | 05:28 | Applications typically require
less code than other approaches.
| | 05:32 | ColdFusion integration with other
Adobe products allow ColdFusion developers
| | 05:36 | to easily generate PDFs dynamically and
integrate with Flash and Flex-based applications.
| | 05:41 | The ColdFusion server is not free
however, so ColdFusion hosted accounts are
| | 05:45 | typically more expensive than PHP.
| | 05:48 | Be that as it may, the pricing
structure for ColdFusion sites has dropped
| | 05:51 | dramatically over the years as
ColdFusion's popularity has increased.
| | 05:54 | Now obviously, this is a very general
overview of server-side technology and
| | 05:58 | some of the capabilities
regarding your choice of platforms.
| | 06:01 | For most web designers, choosing a
platform comes down to three main factors:
| | 06:05 | cost and hosting availability, partnering
with qualified developers, and ease-of-use.
| | 06:11 | My advice for any new web designer without a
programming background would be to take it slowly.
| | 06:15 | Find a talented Web developer or firm
that you can build a relationship with and
| | 06:20 | have them help you make decisions
regarding server technology that's right for
| | 06:23 | your client, and their budget.
| | 06:25 | Most of all, educate yourself.
| | 06:27 | Learn as much as you can about the
various platforms so that when the time comes
| | 06:30 | to make a choice, you're making an informed one.
| | Collapse this transcript |
| SQL| 00:00 | SQL, or Structured Query Language, is
the standard for managing and retrieving
| | 00:05 | information from databases.
| | 00:07 | Web applications typically use SQL or
some form of it to update, create, delete,
| | 00:12 | or retrieve information
from relational databases.
| | 00:15 | Relational databases are the most common
form of data storage used by web applications.
| | 00:20 | Relational database store
related data in one or more tables.
| | 00:24 | If you've never dealt with databases
before, picture an Excel Spreadsheet.
| | 00:27 | Data is stored in rows and columns with
the columns describing the data and the
| | 00:32 | row restoring the data itself.
| | 00:33 | Using simple SQL queries, web
applications can parse and use this data
| | 00:38 | within the application.
| | 00:39 | SQL uses simple logical syntax that
is very easy for most people to learn.
| | 00:44 | Common statements like Select, Insert,
Update, and Delete make it very easy to
| | 00:49 | retrieve or manipulate data.
| | 00:50 | And SQL queries can be refined to
filter data sets even further or join related
| | 00:55 | tables together to create a larger dataset.
| | 00:58 | Take this simple SQL query.
| | 01:00 | As you might imagine, this request
would parse the data in the Tours table and
| | 01:04 | find Tours price below $200.
| | 01:07 | Further manipulation, allows us to display
the tours in alphabetical order, by Tour name.
| | 01:12 | The data returned from our Tours table is
referred to as Dataset and could be used
| | 01:17 | by a web application to populate a
table on a web page, display data based on
| | 01:21 | user searches or any number of
data related tasks within the site.
| | 01:25 | While SQL is relatively easy to learn,
it should be noted that there are several
| | 01:29 | different versions of it and most
feature proprietary extensions to the language
| | 01:34 | that are unique for each version.
| | 01:36 | SQL queries are typically found as
strings inside web application syntax and
| | 01:41 | passed to the database as the page is processed.
| | 01:43 | There are many dedicated applications
that use SQL to manage databases and many
| | 01:48 | web applications use database
management applications such as MySQL to control
| | 01:53 | data within the application itself.
| | 01:55 | Now, for most of you, that might be more
information about SQL than you ever wanted to learn.
| | 02:00 | This, of course, poses the question.
| | 02:01 | Do web designers needed to know SQL?
| | 02:03 | Well, the short answer is No.
| | 02:05 | Web or programmers will write the
code that will perform most data
| | 02:09 | manipulation within your sites.
| | 02:11 | However, on smaller sites or sites
where you need to perform simple web
| | 02:14 | application scripting, a basic
knowledge of SQL is a good thing.
| | 02:18 | Learning the basics of it is simple.
| | 02:20 | So it is a good idea for any new web
designers to spend some time working with
| | 02:23 | simple queries and becoming
comfortable with the syntax.
| | 02:26 | This will make life easier for you if
you ever need to manipulate a query within
| | 02:30 | your application or tackle some
basic data manipulation yourself.
| | Collapse this transcript |
| Content management systems| 00:01 | The use of Content Management Systems,
or CMSes, is an increasingly popular way to
| | 00:06 | create and manage sites.
| | 00:08 | Creating websites manually can be a
long and sometimes complicated process.
| | 00:12 | In fact, in many cases, it's just the
beginning of what the client needs.
| | 00:15 | Most websites change frequently and
it's not uncommon to have a client
| | 00:19 | request the ability to update, add and alter
the content and functionality of their website.
| | 00:24 | If you have a client that needs to
update their website frequently, wants
| | 00:27 | control over the updating process
themselves, or requires additional features
| | 00:31 | and functionality, a CMS can help
make this entire process easier.
| | 00:36 | A Content Management Systems, or CMS, is
an application that helps control the
| | 00:40 | creation, publishing, and
archiving of your site's content.
| | 00:44 | A good CMS can speed up the creation of
sites, make updating, and creating new
| | 00:48 | content easier and less technical,
create groups of users that have varying
| | 00:52 | degrees of control over site content
and easily allow added site functionality
| | 00:56 | by installing prebuilt modules.
| | 00:58 | Let's take a quick look at the typical
workflow involved when working with a CMS.
| | 01:03 | As a designer, you can create a template,
or a series of templates, to control the
| | 01:07 | layout and the design of the site.
| | 01:10 | Many CMSs separate page regions as well,
allowing you to design multiple headers,
| | 01:14 | footers, and content regions that can
be assembled into custom pages later.
| | 01:19 | The content for the site is then ingested
into the CMS and stored into a database.
| | 01:25 | This can be anything from text,
images, or even multimedia.
| | 01:30 | Now the content can be added as
pages are created or uploaded separately.
| | 01:34 | To create a page, you choose a template
and then assemble the elements that you
| | 01:38 | want onto the page or you can add
content through the use of the CMSes Page
| | 01:45 | Editor, which is typically a WYSIWYG,
What You See Is What You Get, editor that
| | 01:50 | resembles using a word processor.
| | 01:52 | Now as you create pages, you can
also use the CMS to structure the site
| | 01:57 | and build navigation.
| | 02:00 | As a designer, this can make creating
and deploying sites incredibly fast.
| | 02:05 | For most web designers, the real
benefits of the CMS are what they allow you do
| | 02:09 | after the site is published.
| | 02:11 | Updating page content is usually
done through the WYSIWYG editor, allowing
| | 02:15 | non-web designers and non-technical
people to update the site's content.
| | 02:19 | Depending upon how you organize the site,
you can turn site management over to
| | 02:22 | the client entirely.
| | 02:24 | CMSes also allow you to extend the
function of your site in powerful ways.
| | 02:29 | Often just installing modules or plug-
ins will allow you to add things like
| | 02:33 | blogging, ecommerce, calendars,
are other features to your site.
| | 02:39 | This ability often allows you to scale
up a site's functionality without having
| | 02:43 | to engage a development team or
add additional skills on your own.
| | 02:47 | So CMSes sound great, right?
| | 02:49 | Well, yeah, but just like anything
else they have their pros and corns.
| | 02:52 | Setting up a Content Management System
can be complicated, so expect a learning
| | 02:56 | curve when setting up and
managing any CMS for the first time.
| | 03:00 | Some CMSes drastically limit the amount of
customization you can do to page design
| | 03:04 | or the number of page layouts available,
which many designers find frustrating.
| | 03:08 | Bottom line, don't expect to be up
and running with a CMS without prior
| | 03:11 | web design experience.
| | 03:13 | Like anything else, make sure you
research Content Management Systems thoroughly
| | 03:17 | before deciding to use one.
| | 03:19 | Here are few things to consider when
choosing a Content Management Systems.
| | 03:23 | Make sure the CMSes core focus
matches the focus of your site.
| | 03:27 | Some CMSes were built with blogging in
mind others with ecommerce and others still
| | 03:31 | with overall site control.
| | 03:33 | If a client wants blogging at a core of
their site, one of the many blogging CMSes
| | 03:37 | may be the best choice.
| | 03:39 | However, if their needs change or
if they want a good deal of extra
| | 03:42 | functionality, you might limit yourself
with the wrong Content Management System.
| | 03:46 | Now with this in mind, take a close look at
the modules or plug-ins available for any CMS.
| | 03:52 | These modules can scale up of site's
capabilities quickly, but if they're poorly
| | 03:56 | written or hard to integrate, they can
slow a site down and disable it entirely.
| | 04:00 | That's not something you want to find
out after already committing to a solution.
| | 04:04 | Also, make sure your CMS has adequate support.
| | 04:07 | If you are setting up and working with
the Content Management System for the
| | 04:09 | first time, you are going to need some help.
| | 04:12 | Make sure you can get answers to
problems quickly and correctly.
| | 04:15 | Another question you want ask yourself: is an
open-source or vendor specific CMS right for you?
| | 04:21 | Open-source Content Management Systems
are often free and they offer a low-cost
| | 04:24 | way to get up and running.
| | 04:26 | Like most things, in open-source
however, you're often on your own on
| | 04:29 | configuring and customizing your CMS.
| | 04:32 | Now, a CMS offered by the vendor
often offers 24 hour support and can be
| | 04:37 | configured out-of-the-box to meet your needs.
| | 04:39 | These are more expensive so you
might not have the budget for that option,
| | 04:42 | depending upon your client.
| | 04:43 | If you're planning on doing it
yourself, make sure the CMS is easy to
| | 04:47 | install and configure.
| | 04:49 | Take some time to investigate the
administrative features of the page editor as well.
| | 04:53 | If you're planning on turning
over site updates to your client, the
| | 04:56 | administrator pages and editors
should be simple and easy to use.
| | 05:00 | Finally, as a web designer, you're
probably going to want a high degree of
| | 05:03 | control over the layout and design of your site.
| | 05:05 | Make sure you choose a CMS that
allows a high degree of customization and
| | 05:09 | control over templates and the site's CSS.
| | 05:12 | Being tied to specific layout or
template with no option to change it will be
| | 05:16 | very frustrating for most designers
and will likely result in unhappy clients
| | 05:20 | when they request design
changes throughout the site.
| | 05:23 | If you want to learn more about CMSes, I
suggest going straight to the source.
| | 05:28 | Some of the most popular CMSes on the
market today are ExpressionEngine, Frog,
| | 05:33 | Drupal, Joomla, Movable
Type, Radiant, and WordPress.
| | 05:37 | I recommend exploring those CMSes for an
overview of their capabilities and then
| | 05:42 | spend some time taking a closer look
at their support and user communities.
| | 05:46 | With a little research, you should have a
good idea as to which CMS is right for you.
| | 05:50 | One final thing.
| | 05:52 | For your first CMS-driven site, I
recommend utilizing a consultant.
| | 05:57 | A consultant, whether an agency or
freelance developer, can assist you with the
| | 06:01 | installation, give you expert
advice on how to control the CMS's
| | 06:04 | functionality and even assist you in
choosing the Content Management System
| | 06:08 | that's right for your needs.
| | 06:10 | It's a great way to get your feet wet
with your first CMS-driven site without
| | 06:13 | having to figure out
everything yourself the first time.
| | Collapse this transcript |
| What is an API?| 00:00 | An API or Application Programming
Interface is an exposed set of functions that
| | 00:05 | one application makes available to
other applications, so that part of its
| | 00:08 | functionality can be accessed by other
services, without having to give direct
| | 00:12 | access to it's source code.
| | 00:14 | Now what does that really mean?
| | 00:15 | And more importantly, what
does it mean to web designers?
| | 00:17 | Well, the best way to explain
it is through using an example.
| | 00:20 | Let's say that you're building a site
for a client that focuses on rare books.
| | 00:23 | Wouldn't it be great if you could
leverage the power of huge sites, like Amazon
| | 00:27 | and eBay, to find rare first editions
and offer those for sale on your site.
| | 00:32 | Well, using Amazon and eBay's API, you can.
| | 00:36 | The concept of open APIs, which are
APIs exposed for other people to use, has
| | 00:41 | dramatically changed the way that the web works.
| | 00:44 | Websites can now leverage the power
of larger online applications to offer
| | 00:48 | services and functionality that would
be far beyond their normal capabilities.
| | 00:52 | Developers can also combine services
from multiple APIs that can create what
| | 00:56 | are called Mashups. Those leverage the power
of multiple sites into a single application.
| | 01:01 | This allows the web to grow in
multiple and very organic ways.
| | 01:04 | Larger sites like Amazon and Google are
happy to let others use their services,
| | 01:08 | since it expands their brand and their audience.
| | 01:11 | Smaller sites like taking advantage of
APIs to create more powerful services and
| | 01:15 | user experiences for their audience.
| | 01:17 | As a designer, chances are, you
won't be doing much with APIs yourself.
| | 01:21 | Each API is slightly different and
usually an experienced developer is required
| | 01:25 | to integrate those services into your site.
| | 01:28 | However, by understanding the power of
those application interfaces and thinking
| | 01:32 | creatively about how to use them, you
can design sites that offer compelling
| | 01:36 | content and powerful features.
| | 01:37 | There are a few things to consider
when planning on using other site's
| | 01:41 | services on your own site.
| | 01:42 | Many APIs limit the type of data that
they expose or the services that they allow.
| | 01:47 | Knowing that you can tie into Facebook
via their API is one thing, but don't
| | 01:51 | assume that you'll have access to all
of Facebooks features and information.
| | 01:55 | Take time to research exactly what a
site's API will allow you to integrate
| | 01:58 | into your own site.
| | 01:59 | Also keep in mind that APIs change over time.
| | 02:02 | Engaging a developer to build an API
sourced application on your site can be an
| | 02:06 | expensive undertaking.
| | 02:07 | If the API has changed, your code
could no longer work, leading to disabled
| | 02:11 | services and another round of coding.
| | 02:13 | And one final thing, all those
sites like Amazon and eBay are
| | 02:16 | extremely reliable.
| | 02:17 | Sites do go down occasionally
or even shut down altogether.
| | 02:21 | Before using an API from a smaller or
lesser-known site, make sure they are
| | 02:25 | stable and have a good track record for up time.
| | 02:27 | You don't want to create a
compelling app that never works.
| | 02:30 | If you're just starting out, I
wouldn't recommend tackling integrating other
| | 02:33 | site services into your site right away.
| | 02:36 | However, it is important to realize
that there are powerful resources available
| | 02:39 | to you, through the use of another site's API.
| | Collapse this transcript |
|
|
3. Getting StartedWhat should I learn first?| 00:01 | It is easy for web designers to get
a bit overwhelmed at times when they
| | 00:04 | are just starting out.
| | 00:05 | The web is a big environment and often
it seems like you need to be an expert in
| | 00:08 | a million things, all at
once to be a successful.
| | 00:11 | Well, there's no hiding the fact that
to be a successful web designer you need
| | 00:15 | to master your craft.
| | 00:16 | To do that you need to put in the time
required to get the necessary experience
| | 00:20 | and make sure that you are diligent
about learning how to do things the right way,
| | 00:23 | as opposed to just
getting them done quickly.
| | 00:26 | I am constantly being asked by
students for advice on how they can build
| | 00:30 | complicated websites without knowing how to
do scripting or write CSS or hand-code HTML.
| | 00:35 | I think you get the picture.
| | 00:37 | And the truth is there is no Make Web Site
button, regardless of which tool you use.
| | 00:43 | With that in mind, the best advice
I can give you is just to slow down.
| | 00:47 | Realize that learning web design
requires investing as much time into it as any
| | 00:52 | other career and actually
more than some to be honest.
| | 00:55 | So, where should you focus your efforts first?
| | 00:58 | More than anything else that
would be driven by two things:
| | 01:02 | which area of web design
you plan to specialize in
| | 01:04 | and where your current strengths are.
| | 01:06 | What interests you more, Visual Design,
Information Architecture, Interactive
| | 01:11 | Design or Back-End Development?
| | 01:13 | Are you currently a graphic designer,
technical writer, instructional designer,
| | 01:17 | educator or other profession?
| | 01:19 | Take some time to think through those
choices and be honest about your strengths.
| | 01:23 | That more than anything else will give
you a roadmap of what you need to focus
| | 01:27 | on first, and where you should go from there.
| | 01:30 | Now although I don't usually
deal in absolutes, I will say this.
| | 01:34 | Regardless of what area you decide to
focus on, make sure that one of your first
| | 01:39 | tasks will be to learn HTML and CSS.
| | 01:42 | These two technologies form the
backbone of all websites and required skills
| | 01:47 | for any level of Web design.
| | 01:49 | Yes, there are tools like Dreamweaver
that will handle much of the HTML and
| | 01:53 | CSS generation for you.
| | 01:55 | However, if you don't truly
understand how to write standards-compliant,
| | 01:59 | efficient code you'll find that these tools
are sometimes a hindrance in the long run.
| | 02:03 | Besides, you might find just like I did
that hand-coding your sites is actually
| | 02:07 | faster, regardless of the tool that you use.
| | 02:10 | Second and third, usability,
accessibility and user experience should be your
| | 02:15 | constant focus as you learn the
various aspects of web design.
| | 02:19 | Don't get distracted by the technology.
Visitors to your site don't care if you
| | 02:23 | use Flash, Ajax, CSS, JavaScript,
ColdFusion, PHP, Joomla or Drupal.
| | 02:27 | All they care about is if it works for them.
| | 02:31 | Place yourself in your users' shoes, and
all of them, not just you are typical user.
| | 02:36 | As you learn new techniques, think
about how you can make their experience
| | 02:39 | better with what you're learning.
If you can't, you need to ask yourself if it's
| | 02:44 | a valuable use of your time.
| | 02:45 | Now finally, I have some
good news and some bad news.
| | 02:50 | The bad new is regardless of how hard
you try and how much you learn, you will
| | 02:54 | never really learn everything
that you think you need to know.
| | 02:57 | The good news, no matter how hard you
try and how much you learn you will never
| | 03:02 | really learn everything that
you think you need to know.
| | 03:04 | It's the journey that's important.
| | 03:07 | The web is a moving target. I used to be
really, really good at laying out pages
| | 03:11 | using HTML-based tables.
| | 03:13 | That's a skill I haven't used in years.
| | 03:15 | The web and the technologies
related to it are constantly evolving.
| | 03:19 | That means that your skill sets and
focus should be constantly evolving and
| | 03:23 | changing right along with it.
| | 03:25 | My hope is that you'll find that this
makes web design an exciting and dynamic field
| | 03:29 | and a very rewarding one.
| | Collapse this transcript |
| Getting online quickly| 00:00 | Okay. Let's say that you're brand new to
Web design and that you're watching this title
| | 00:03 | because you need to get
a site up and going immediately.
| | 00:06 | Chances are after watching movies on
HTML, CSS, JavaScript, and how I advocate
| | 00:12 | learning to build pages by hand as a
way of giving yourself a solid foundation,
| | 00:15 | well, you might be pretty
discouraged, but please don't be.
| | 00:19 | The truth is there are many people who
for one reason or another need to get a site
| | 00:24 | online quickly before they have
time to properly learn Web design or they
| | 00:28 | might have areas of focus other than
Web design but still need to get a site
| | 00:32 | online themselves quickly.
| | 00:33 | In these cases, I wanted to offer a
few recommendations about getting online
| | 00:37 | quickly and establishing an online presence
without needing advanced technical skills.
| | 00:42 | One way to get a site up and running
in a single day, even with no technical
| | 00:45 | skills at all is to create a blog.
| | 00:47 | Now blogs have come a long way since
they first started offering a way for
| | 00:51 | people to publish their thoughts online.
| | 00:53 | The basic premise of a blog, a quick
way to publish archive content, hasn't
| | 00:57 | changed that dramatically, but the
abilities, features and designs of blogs
| | 01:02 | have come a long way.
| | 01:04 | Many blogs have become so powerful in
fact, the line between what is a blog and
| | 01:08 | what is full-featured site is increasingly blurred.
| | 01:11 | There are basically two paths
to take when considering a blog.
| | 01:15 | The first would be to use one of
the many free blogging sites and
| | 01:17 | services available online.
| | 01:20 | For those, often just signing up for a
free account is all you need to get started.
| | 01:24 | From there, you can usually choose
a theme, upload a few graphics, and
| | 01:28 | just start publishing.
| | 01:29 | In my opinion, it's simply the
fastest way to get your content online.
| | 01:32 | Now this approach does have a few drawbacks.
| | 01:35 | Since you're using a free service, your
address will likely share that if you're
| | 01:38 | a provider. Rather than being www.
myblog.com for example, you would be
| | 01:44 | www.myblog.wordpress.com, if
you're using a blog through WordPress.
| | 01:49 | Many blogging sites will also serve ads
on your page without your approval and
| | 01:54 | feature sets can be limited.
| | 01:55 | Honestly though are so many choices of
blogging platforms available to you,
| | 02:00 | a quick Google search and a single day
of research should be all you need to
| | 02:03 | choose a blogging solution that's right for you.
| | 02:05 | Now if you want to take blogging a
bit further, you could register your own
| | 02:09 | domain, choose a hosting company and
install blogging software yourself to run
| | 02:13 | and manage your own blog.
| | 02:14 | This is a bit more technical than
going through a blogging service and will
| | 02:18 | probably take a few days to
get your site where you want it.
| | 02:21 | But don't be intimidated by this approach.
| | 02:23 | First, most hosting companies have
blogging installs that they will do for you.
| | 02:27 | So, you can look for a hosting company
that has WordPress, MovableType or other
| | 02:32 | blog engines ready to go.
| | 02:33 | Second, there are a lot of really cool
themes you can install into your blog, so
| | 02:38 | that you don't have to customize it yourself.
| | 02:40 | Themes control more than just layout
and they can add an advanced degree of
| | 02:44 | functionality to your blog.
| | 02:45 | Most blogging platforms have powerful
administrative controls that are well
| | 02:49 | documented and easy to use.
| | 02:50 | From that standpoint, maintaining a blog
is a quick and easy way to get a robust
| | 02:54 | site online quickly.
| | 02:56 | Now, if you already have some web design
experience, or if you want to challenge
| | 02:59 | yourself to learn by doing, you may want
to explore using a template-based site.
| | 03:04 | There are a lot of sites online that
specialize in offering site templates that
| | 03:07 | you can customize and use for your own website.
| | 03:10 | Often these templates have rich
interfaces, Flash integration, and a high degree
| | 03:14 | of design and functionality.
| | 03:16 | You simply register a domain, choose
a hosting company, and download the
| | 03:19 | template to your website.
| | 03:21 | From there, you customize the site by
changing out graphics, replacing the
| | 03:25 | placeholder text with your own and then
adding or deleting pages as necessary.
| | 03:29 | If Flash content, e-commerce, or
database integration is part of the template set,
| | 03:33 | you will need to have the ability
to customize each of those areas for your
| | 03:37 | own page used as well.
| | 03:38 | Now often this takes more knowledge
than many novice designers possess.
| | 03:41 | So make sure that you look for a
template site that offers detailed
| | 03:45 | documentation and support
features to make sure you can update your
| | 03:48 | templates correctly.
| | 03:49 | Often, using templates is a good way
of easing yourself into designing sites
| | 03:52 | from scratch, customizing the CSS,
modifying the existing HTML, and exploring
| | 03:58 | the site's structure and functionality
can be a great way of exposing yourself
| | 04:02 | to how sites are put together
before attempting to build your own.
| | 04:04 | I do want to caution, however, that the
quality of these templates can vary wildly.
| | 04:09 | So, make sure you are getting templates
from a site that practices good design
| | 04:13 | and offers well-written code.
| | 04:15 | Finally, if you're looking to get
content online quickly, don't underestimate
| | 04:18 | the power of social media sites like
Twitter, Flicker, LinkedIn, Facebook.
| | 04:23 | While not technically offering you a
way to host a site, these sites allow you
| | 04:27 | to get your content online and network
with your target audience in a way that
| | 04:31 | your own site can't. A better way of
looking at social media is to use it as a
| | 04:35 | way to support your site, and
enhance your online brand and presence.
| | Collapse this transcript |
| Tools for building sites| 00:00 | One of the most important decisions
a new web designer can make is which
| | 00:03 | programs to use for
creating and building websites.
| | 00:06 | At a minimum, you will need a
graphics editing program to create your site
| | 00:10 | graphics and an HTML
editor to edit the site's code.
| | 00:14 | Using the right tool can make you
more efficient, ensure the creation of
| | 00:17 | quality content, and help you create
a workflow based on your own personal
| | 00:21 | preferences and strengths.
| | 00:23 | Choosing the wrong tool can make
editing your pages a frustrating experience
| | 00:27 | and possibly result in pages with non-
valid markup and inconsistent user experiences.
| | 00:33 | HTML editors come in many flavors from
simple text editors, to kitchen sink
| | 00:37 | applications and in many price
points, from free to hundreds of dollars.
| | 00:42 | When choosing an HTML editor, you
should consider whether you're the type of
| | 00:45 | person that prefers to hand code everything,
or if you prefer more of a visual interface.
| | 00:50 | Do you need powerful integration with
other programs or is your workflow more
| | 00:54 | conducive to working
separately in each application?
| | 00:57 | Either way, here are a few of the more
popular choices for a web page offering.
| | 01:01 | By no means is this list complete, but
it should give you enough of a head start
| | 01:06 | to begin comparing which type
of program best meets your needs.
| | 01:09 | KompoZer is a free open source Web Design
program with Mac, PC, and Linux versions.
| | 01:16 | Like Adobe's Dreamweaver and Microsoft's
Expression, KompoZer has both a WYSIWYG,
| | 01:21 | which means "what you see is what
you get," and a code view editor.
| | 01:24 | KompoZer also features site
management tools, a CSS editor, JavaScript
| | 01:29 | editing and debugging, and FTP support
for uploading your files when you're
| | 01:33 | ready for them to go live.
| | 01:34 | Although powerful and free,
KompoZer's feature set doesn't quite match up to
| | 01:39 | Dreamweaver's or Expression's.
| | 01:41 | The open-source nature of the program
means that documentation and support are
| | 01:44 | a bit light as well.
| | 01:46 | For free software, KompoZer is amazing.
| | 01:49 | However, if you've been using
Dreamweaver or Expression, it's unlikely that
| | 01:52 | you'll want to make the switch.
| | 01:54 | BBEdit is one of the few
HTML editors that are Mac only.
| | 01:58 | BBEdit does one thing and it does it very well.
| | 02:02 | It makes editing and writing HTML a snap.
| | 02:05 | If you're the type of person that
prefers to hand code and doesn't need your web
| | 02:08 | editor packed full of features,
BBEdit is a compelling choice.
| | 02:12 | Code snippets, code completion, and
could support for over 20 languages makes
| | 02:17 | BBEdit a logical choice for a web
designer that needs to work heavily in code or
| | 02:22 | switch between scripting languages.
| | 02:24 | Unfortunately, it's Mac based only.
| | 02:26 | CoffeeCup's Software HTML editor is
another clean and standards-compliant HTML
| | 02:32 | editor that is packed full of powerful features.
| | 02:35 | Code validation, multi-browser testing
support, code completion, code snippets,
| | 02:40 | and site management tools make this
a very powerful web authoring tool.
| | 02:43 | Although it's not free, the low price
tag makes it an attractive alternative to
| | 02:47 | the more expensive programs in the market.
| | 02:49 | Unlike Adobe, who releases integrated
software in bundles, CoffeeCup releases
| | 02:54 | separate programs for specific tasks.
| | 02:56 | As such, you could simply buy the programs for
the functionality that you need a la carte.
| | 03:01 | While cheap at first, buying several
programs quickly moves CoffeeCup's price
| | 03:04 | point more in line with the
larger web authoring tools.
| | 03:08 | Microsoft Expression replaces
FrontPage as their web page authoring program.
| | 03:13 | In every single category,
it's a very welcome replacement.
| | 03:17 | Expression is a powerful, feature-
rich program that rivals Adobe's
| | 03:21 | Dreamweaver in capabilities.
| | 03:23 | It produces clean standards-compliant
code and has terrific CSS capabilities.
| | 03:27 | It's obvious when using it that
Microsoft heard of the oft-voiced criticisms of
| | 03:32 | FrontPage's lack of web
standard support and proprietary code.
| | 03:35 | Expression even supports Adobe's
Photoshop and offers a solid alternative
| | 03:39 | choice to Dreamweaver.
| | 03:40 | There are some bad points however.
| | 03:43 | Expression doesn't offer support for
server-side languages other than .NET.
| | 03:47 | As a Microsoft product,
there is also no Mac version.
| | 03:51 | Coda is a very popular and powerful web
design program that's released on the Mac only.
| | 03:56 | Coda offers powerful file management,
cool code editing tools like live
| | 03:59 | collaboration, which allows you to
edit code with co-workers, and a built-in
| | 04:03 | terminal for interacting with your Web server.
| | 04:06 | While many of its tools are focused
more towards web developers, Coda has a
| | 04:10 | little something for everyone.
| | 04:11 | Coda also has a low price
point and robust support.
| | 04:15 | Keep in mind, it is Mac only.
| | 04:16 | Adobe's Dreamweaver is the recognized
standard in web design applications.
| | 04:21 | That statement might rankle some, but there
is a reason that Dreamweaver is so popular.
| | 04:26 | As part of the Creative Suite,
Dreamweaver integrates very well with tools such
| | 04:29 | as Illustrator and Photoshop and Fireworks.
| | 04:31 | That's something that makes it little
bit easier for many designers to migrate
| | 04:34 | to over competing programs.
| | 04:36 | Dreamweaver is expensive, but it offers a
feature list that is very hard to match.
| | 04:40 | Advanced file support, powerful code
editing software, a robust WYSIWYG editor,
| | 04:45 | and support for web standards,
integrated CSS workflow, and multi-language
| | 04:49 | support makes Dreamweaver a compelling choice.
| | 04:51 | For a novice, Dreamweaver can be a
little intimidating and its FTP capabilities
| | 04:56 | are weak compared to some of its
competitors, but overall it is the number one
| | 05:00 | Web authoring tool for a reason.
| | 05:02 | I think it's important to note
here that this movie is a bit more
| | 05:04 | subjective than most.
| | 05:06 | The personal style and preferences of
designers greatly influences which tools
| | 05:10 | they feel the most comfortable with.
| | 05:12 | Each of the programs I have listed here
are either free or offer a trial download.
| | 05:16 | Make sure you spend some time in each
of the programs that you consider before
| | 05:19 | choosing a workflow.
| | 05:21 | It's important that the content you
create be standards-compliant valid code.
| | 05:25 | After that, your own personal comfort
level and efficiency should drive the
| | 05:29 | application of your choice.
| | Collapse this transcript |
| Additional tools for building sites| 00:00 | In addition to needing a powerful
HTML editor, Web designers need a good
| | 00:04 | graphics program to create web graphics
and I would also recommend a few tools
| | 00:08 | to make testing and
managing your sites a bit easier.
| | 00:11 | To create web graphics, you'll
probably use one or a mixture of five popular tools,
| | 00:16 | Photoshop, Illustrator,
Fireworks, CorelDraw, or GIMP.
| | 00:21 | Adobe's Illustrator, Photoshop and
Fireworks all offer powerful tools for the
| | 00:26 | creation of web graphics.
| | 00:28 | As part of the integrated Creative Suite
they offer a complete workflow solution.
| | 00:32 | Illustrator and Photoshop will likely be
familiar to most graphic designers and
| | 00:36 | are the industry standard for creating
vector and raster graphics. Both feature
| | 00:40 | powerful web graphic exporting capabilities.
| | 00:42 | Fireworks is a bit of a different
animal, with a more focused approach to
| | 00:46 | creating web graphics. Fireworks was
created by Macromedia to compliment
| | 00:50 | Dreamweaver and create web graphics and content.
| | 00:53 | Since then Adobe has refocused the
application as a web prototyping tool and
| | 00:58 | it features powerful prototyping
capabilities in addition to its graphic creation tools.
| | 01:03 | If you want to show a client not
only how your site will look, but also
| | 01:06 | simulate its functionality as well, Fireworks
is a tool that you should take a closer look at.
| | 01:11 | All three of Adobe's tools also allow
you to create a larger page mockup and
| | 01:16 | then slice the page into individual
graphics, even allowing for multiple
| | 01:20 | file types to be exported from a
single page. This can speed up the design
| | 01:24 | process considerably.
| | 01:25 | CorelDraw, the graphic suite from Corel
software, features both vector and raster
| | 01:30 | editing tools that allow you
to create quality web graphics.
| | 01:33 | Unlike the Adobe Suite however,
CorelDraw is not web focused, lacking a program
| | 01:37 | with Firework's capabilities or
Illustrator and Photoshop's integration with a
| | 01:41 | web design tool like Dreamweaver and Expression.
| | 01:44 | GIMP is an open source raster
editing tool that is gaining in popularity.
| | 01:49 | GIMP is free and features capabilities
that rival Photoshop in editing graphics.
| | 01:54 | However, being an open source tool
support can be a little shaky and there
| | 01:57 | aren't as many tutorials or books to
help you learn how to use the program.
| | 02:01 | The good news is that it is a free
tool so downloading it and checking it out
| | 02:05 | won't cost you a dime.
| | 02:06 | Now, in addition to a good graphics
editor, there are a few tools that most
| | 02:10 | professional web designers should have.
| | 02:12 | Testing your sites and finding out how they
perform is an essential part of web design.
| | 02:17 | As such, I'll recommend the following tools.
| | 02:20 | Firebug is a plugin for Mozilla Firefox.
| | 02:22 | It allows you inspect your
page directly in the browser.
| | 02:25 | You can debug your page, explore the
CSS in detail, and find out which elements
| | 02:31 | on your page are slowing load times.
| | 02:33 | Firebug is invaluable.
| | 02:35 | I also recommend WebKit's Web Inspector.
Similar to Firebug, WebKit allows you
| | 02:40 | to view the page source, examine the
document object model hierarchy, debug
| | 02:44 | scripts and examine page load times.
| | 02:47 | It also works with several browsers and is free.
| | 02:49 | Now while not specifically an
application, I also recommend using Google
| | 02:54 | Analytics to monitor your sites.
| | 02:56 | Google Analytics allow you to see how
people are using your site and if used
| | 03:00 | properly, can refine your design process
for greater overall usability and user experience.
| | Collapse this transcript |
| Designing for multiple browsers | 00:00 | One of the most frustrating aspects of
Web design is constantly dealing with the
| | 00:04 | subtle and sometimes not so subtle
differences in browser rendering.
| | 00:08 | While the move to a standards-based CSS
control presentation model has made life
| | 00:13 | infinitely easier for web designers,
dealing with bad browser behavior is one of
| | 00:17 | the unfortunate side effects.
| | 00:19 | So why don't all browsers
render your page the same?
| | 00:23 | Well, as I explained in more detail
in the "How Do Browsers Work" movie,
| | 00:27 | each browser reads and renders your HTML and
CSS based on its internal rendering engine.
| | 00:34 | There are four major rendering
engines being used by the majority of
| | 00:37 | browsers today and each of them have
subtle differences in how they render
| | 00:41 | layout and typography.
| | 00:43 | In addition, each updated version of
the rendering engine will contain new
| | 00:47 | rendering rules than the last one.
Meaning that even within a browser,
| | 00:51 | older versions will render
pages differently than new ones.
| | 00:54 | If you think about it, this
type of behavior is inevitable.
| | 00:57 | New standards are being issued as the
web evolves, and how a browser decides to
| | 01:02 | support those standards
is up to the manufacturer.
| | 01:05 | As new properties and capabilities have been
added to CSS, browsers must change to keep up.
| | 01:10 | So how do you design for such
a wildly inconsistent landscape?
| | 01:15 | Well, the first off,
it's not as bad as it sounds.
| | 01:18 | Most modern standards-compliant
browsers will handle almost any valid HTML and
| | 01:23 | CSS you throw at them without blinking.
| | 01:25 | So, step one is to learn how to
write valid HTML code and make sure you
| | 01:29 | understand how to code CSS properly.
| | 01:32 | Focus on not just learning CSS syntax
and properties, but also on learning
| | 01:36 | how to write standards-compliant CSS
and mastering layout concepts, such as
| | 01:41 | floats and the box model.
| | 01:44 | Often rendering problems aren't the
browsers' fault, but the result of the
| | 01:47 | incorrect layout values that ask the
impossible. Trying to put 1000 pixels worth
| | 01:52 | of content and padding into a
900 pixel wide layout for example.
| | 01:57 | Next, learn as much as you can
about the different browsers and their
| | 02:00 | support level of CSS.
| | 02:02 | There are tons of articles, charts and
tutorials that discuss browser version
| | 02:06 | support for CSS properties.
| | 02:08 | One of my favorite is
he chart found on QuirksMode.
| | 02:11 | It lists browsers by making version
and shows their level of support for
| | 02:15 | specific CSS properties.
| | 02:17 | Once you know the level of CSS support
that a browser has, it is much easier to
| | 02:22 | avoid problems with your styles and
to know when you might need to do a
| | 02:25 | workaround for specific browsers.
| | 02:28 | Once you have a solid grasp on CSS and
its browser level support, you can begin
| | 02:32 | to build a strategy around
dealing with multiple browsers.
| | 02:35 | Every designer is unique and each
site might require a slightly different
| | 02:39 | strategy. However, there are some
basic steps that you can take to help you
| | 02:43 | avoid getting bitten by browser bugs.
| | 02:46 | First, know your audience. Not just
their likes and dislikes and level of visual
| | 02:50 | sophistication. Understand who they are
and what browsers and what versions of
| | 02:55 | those browsers they are likely to have.
| | 02:57 | Older browsers lack significant
CSS support and coding around their
| | 03:01 | idiosyncrasies was a major pain point.
| | 03:04 | As new browsers are adopted, it is not
uncommon for designers to stop supporting
| | 03:09 | certain older versions. The trick is
to know your audience and what level of
| | 03:13 | browser support they require.
| | 03:14 | For example, at the time of this
recording, Internet Explorer 8 is the most
| | 03:19 | current version of the browser. A large
portion of Internet Explorer users still
| | 03:23 | use IE 7 and to some degree use IE 6.
| | 03:27 | Therefore when I'm creating a page,
I pay close attention to making sure that my
| | 03:31 | CSS works in IE's versions 8, 7 and 6.
But for the most part I've stopped
| | 03:36 | worrying about IE 5 and lower,
that is unless my audience still uses it.
| | 03:41 | If I'm working on a project that will
be used on a company's intranet or one
| | 03:45 | that will be visited frequently by
individuals using older equipment,
| | 03:48 | IE 5 could still pop back up.
| | 03:50 | Understanding your audience gives you
the ability to understand what level of
| | 03:54 | CSS support and
workarounds you'll need to focus on.
| | 03:57 | Second, use coding
practices that avoid browser hacks.
| | 04:01 | Browser hacks are ways of writing CSS
properties that gives specific values to
| | 04:05 | one browser and another set of values to others.
| | 04:08 | Now this is usually done by writing CSS
using odd escape characters or by using
| | 04:13 | selectors that older browsers don't recognize.
| | 04:15 | Now while these are effective, they cause
your CSS to be cluttered and hard to maintain.
| | 04:20 | Making a simple edit will
sometimes require that you make changes in
| | 04:24 | several different parts of your code.
| | 04:26 | By avoiding hacks altogether you'll
eliminate the need to constantly refine them,
| | 04:30 | edit them and make sure they
don't cause newer browsers to break.
| | 04:33 | Avoiding hacks isn't that hard.
| | 04:35 | It just involves understanding very
clearly how specific browsers work and then
| | 04:40 | avoiding triggering those behaviors.
| | 04:42 | Let me give you an example.
| | 04:42 | In older versions of IE, putting a
margin on the same side of an element that
| | 04:47 | you've floated it on caused Internet
Explorer to double the floated margin.
| | 04:51 | In most browsers, people would see one
margin, but they would see twice that
| | 04:55 | margin in the Internet Explorer.
| | 04:56 | Now as you can imagine the last would
often break quite badly in IE. A hack was
| | 05:01 | found to fix this problem by simply
changing the display CSS property to inline
| | 05:06 | for that floated element.
| | 05:07 | No one knew why it worked but it worked.
| | 05:10 | Well, this was great, except for the
fact that the inline property of a floated
| | 05:14 | element is not valid CSS.
| | 05:17 | As such, your CSS would not validate
and there was no guarantee that future
| | 05:21 | browsers wouldn't break
because of this property.
| | 05:23 | A simpler way to deal with this issue was to
simply not place margins on floated elements.
| | 05:28 | There are a plenty of other ways to
ensure proper spacing within layouts and
| | 05:31 | following this rule prevented me from
ever having to worry about the dreaded
| | 05:35 | double float margin bug.
| | 05:37 | By making avoiding bugs part of your
CSS workflow in coding practices,
| | 05:41 | you eliminate 80% of the headaches
caused by bad browser behavior.
| | 05:45 | There are instances where using a hack
or code workaround just can't be avoided.
| | 05:49 | So here's some advice when
you have to employ a CSS hack.
| | 05:52 | First, realize that all browsers
aren't created equal. While Opera, Firefox,
| | 05:57 | and Safari all have their quirks by far, the
worst offender in CSS support is Internet Explorer.
| | 06:04 | You'll find that well over half of your
time is spent dealing with one issue or
| | 06:07 | another in the Internet Explorer and
as such when you do have to write a few
| | 06:12 | workarounds you can keep your main
CSS hack-free by creating an Internet
| | 06:16 | Explorer bug specific style sheet.
| | 06:18 | CSS styles are usually kept in an
external CSS file and then linked to your pages.
| | 06:23 | By creating a separate style sheet for
just Internet Explorer bugs, you can use
| | 06:27 | what is known as a conditional comment
that pass the IE specific style sheet to
| | 06:31 | just Internet Explorer.
| | 06:33 | These conditional comments are special
HTML comments that are read by IE but
| | 06:37 | ignored by other browsers.
| | 06:39 | You can even specify a specific
version or range of versions for Internet
| | 06:42 | Explorer, so that you can pass fixes for
older and new browsers in separate files.
| | 06:48 | For other non-IE related hacks,
I recommend grouping them in consistent
| | 06:52 | locations in your styles. This makes them
easier to find, update and remove when needed.
| | 06:57 | Finally, there is no substitute for testing
thoroughly in as many browsers as you can.
| | 07:02 | You should install as many browsers as
you can on your system and preview your
| | 07:06 | pages throughout the development process.
| | 07:08 | An hour before launch is no time to learn
that your layout doesn't work in Safari.
| | 07:13 | Try to have multiple testing platforms
as well. Having a Mac OS, Window OS and
| | 07:18 | multiple versions of browsers can be a
demanding requirement, but it can make
| | 07:23 | all the difference in
ensuring consistent design.
| | 07:25 | There are multiple online emulation
services that will show you how your page
| | 07:30 | layout appears in multiple browsers.
| | 07:32 | browsershots.org is a free one
that offers a wide range of platforms.
| | 07:36 | Using these emulators will give you a
good idea about how your page is going to
| | 07:40 | translate over multiple browsers but
they're usually not as revealing as
| | 07:44 | actually testing the page yourself.
| | 07:46 | By planning and maintaining a
specific approach for designing for multiple
| | 07:50 | browsers, you'll come closer to the
ever elusive goal of ensuring a consistent
| | 07:54 | user experience across multiple browsers.
| | 07:57 | You'll also find that as a byproduct of
this you begin to focus very clearly on
| | 08:01 | creating valid, standards
compliant HTML and CSS code.
| | 08:05 | Now regardless of which browser you
target, this practice will help your sites
| | 08:09 | become more portable and accessible as well.
| | Collapse this transcript |
| Designing for accessibility| 00:00 | Do you know your target audience, their
demographics, how comfortable they are
| | 00:04 | with specific interface types, or how they
prefer to find information within your site?
| | 00:09 | Many designers finding answers to
all these questions without answering a
| | 00:12 | very simple question.
| | 00:13 | What percentage of my users will have
some form of disability and how can I make
| | 00:17 | my content more accessible to them?
| | 00:20 | If the answer to the above question is
any at all, you need to have a strategy
| | 00:24 | for designing your site
with accessibility in mind.
| | 00:26 | Honestly, regardless of your target
audience, having a strategy for accessible
| | 00:30 | content is extremely important, whether it is
a mobile device, screen reader or toaster oven.
| | 00:36 | More and more devices are
accessing your web content everyday.
| | 00:40 | As such removing barriers to that
content regardless of device should be an
| | 00:44 | important goal of your design process.
| | 00:47 | It's also important to be vigilant about
your potential clients' responsibilities
| | 00:51 | regarding the Americans with Disabilities Act.
| | 00:53 | In 1998, Congress passed Section 508
of the ADA and that requires that all
| | 00:58 | federal agencies make their information
technology accessible to people with disabilities.
| | 01:03 | Since then, the law has been broadly
applied to any site receiving government
| | 01:07 | funding and even applied to
commercial sites in specific instances.
| | 01:11 | Depending upon your client,
accessibility might not be just a good idea but
| | 01:16 | it might also be the law.
| | 01:17 | You can learn more about your
responsibilities by visiting the government's
| | 01:21 | website on Section 508.
| | 01:23 | The good news is that designing with a
focus on accessibility requires no more
| | 01:27 | effort than any other means.
| | 01:28 | It just requires that you stay
focused on it throughout the process.
| | 01:32 | Here are a few of the things that you
can do to ensure that your sites meet
| | 01:35 | Section 508 requirements.
| | 01:37 | First, make sure that your focus is on the
content and not on the design of the site.
| | 01:41 | Now as a designer, that can be tough.
| | 01:43 | We want to design, but in truth,
the goal of all design is to clearly
| | 01:48 | communicate ideas or
information. Content in other words.
| | 01:52 | Making sure that you communicate the
content of the page through clear structured
| | 01:55 | HTML is very important and essential to
making that content the focus of your design.
| | 02:00 | Although screen readers and other
devices might not be able to see your
| | 02:03 | advanced JavaScript interfaces or use the
latest Flash widget that you've created,
| | 02:08 | they can all read well structured HTML.
| | 02:11 | Make that the foundation of
your site and you're halfway there.
| | 02:14 | Navigation is just as important to
those with disabilities as those without and
| | 02:19 | it's a good idea to make sure your
site navigation addresses both, since CSS
| | 02:23 | allows us to control our layout
and position elements as we wish.
| | 02:27 | Consider where navigation is found
within the flow of the page as a way of
| | 02:31 | presenting it to your non-visual users.
| | 02:33 | Should the navigation appear
early to give those users choices?
| | 02:36 | Do you want to give them the
ability to skip the navigation and proceed
| | 02:40 | directly to the content?
| | 02:41 | Remember that screen readers read the
page in the order that the content appears.
| | 02:45 | Repetitive content can make such an
experience frustrating and boring.
| | 02:49 | Not something you want for your users.
| | 02:51 | Next, learn how to make HTML content accessible.
| | 02:55 | That in itself could be a title, so
I don't have time here to list every
| | 02:58 | technique to accessible design.
| | 03:00 | But I do want to mention some
of the most important steps.
| | 03:02 | First, make sure all images have
alternate text so that screen readers and other
| | 03:07 | devices understand the
subject matter of the images.
| | 03:10 | Provide longer descriptions for
images that have detailed content like
| | 03:13 | pie charts or graphs.
| | 03:14 | Next, learn how to make
form elements accessible.
| | 03:17 | Trying to fill out and submit a form
that lacks structure and has inaccessible
| | 03:21 | elements is difficult and likely
to frustrate more than a few users.
| | 03:25 | There aren't many things that you
need to do to form elements to ensure
| | 03:28 | accessibility and they will easily fit
within your normal document workflow.
| | 03:32 | In addition to forms, make sure that
you know how to make tables accessible.
| | 03:36 | Making sure tables have captions and
summaries, using structures such as thead
| | 03:41 | and tbody, and associating table content
with table headers through column or row
| | 03:44 | associations are important
table accessibility techniques.
| | 03:48 | Also, if your site makes heavy use of
Ajax-driven interfaces, Flash content,
| | 03:52 | or video, make sure you provide alternate
content for screen readers or other devices.
| | 03:58 | In the case of video, be sure to
provide closed captioning for your viewers.
| | 04:02 | Flash comes with a captioning
component that can make adding simple captions
| | 04:05 | to your videos a snap.
| | 04:07 | Following these basic steps can
help ensure that your sites meet
| | 04:09 | accessibility requirements.
| | 04:11 | Adopting an accessibility
focused workflow it isn't hard to do.
| | 04:14 | It's just something you should
get in the practice of doing.
| | 04:17 | If you're new to web design, by adopting
this workflow early, you will just make
| | 04:20 | it part of how you design sites.
| | 04:22 | Now, I should mention that tools
such as Dreamweaver have accessibility
| | 04:25 | options built into them.
| | 04:27 | So make sure you explore the
accessibility features of the tools that you
| | 04:30 | used to build websites.
| | 04:31 | Often, they will do the
majority of this work for you.
| | 04:35 | I also recommend strongly that you
download one of the many popular screen
| | 04:38 | readers such as Jaws,
Thunder or a Microsoft's Narrator.
| | 04:42 | Test your page in one of those screen
readers and I think you'll find it changes
| | 04:45 | your perspective on designing for accessibility.
| | 04:48 | As you learn Web design, focusing on
accessibility early in the process will
| | 04:52 | ensure that your pages are available
to the widest possible audience and that
| | 04:56 | should be the goal of all designers.
| | Collapse this transcript |
| Progressive enhancement| 00:00 | Throughout this title I've emphasized
the importance of focusing on content,
| | 00:04 | writing clean, well-structured code
and making sure that enhancement focused
| | 00:08 | technology, such as Flash and Ajax,
provide alternative content to devices
| | 00:13 | that don't support them.
| | 00:14 | Now that strategies actually refer to
as progressive enhancement and in this movie,
| | 00:19 | I want to define the strategy a
little bit more clearly and encourage you
| | 00:22 | to adopt it as a primary focus of
your design and development process.
| | 00:26 | As the Web has evolved over the
years, browsers have come and gone.
| | 00:30 | New technologies have emerged to
enhance the user experience and a multitude of
| | 00:34 | devices have gained the ability
to connect to your online content.
| | 00:38 | As you can imagine, that amount of
change over a relatively short period of time
| | 00:41 | has made the web a
volatile place for web designers.
| | 00:45 | Sites designed for specific browsers
would often fail or degrade poorly in older
| | 00:49 | browsers or even not work at
all depending upon the device.
| | 00:52 | Now, this frustrating design experience
and the continually changing nature of
| | 00:56 | the Web led designers and browser
developers to push for stricter web standards
| | 01:01 | and to create strategy for making
content as accessible as possible.
| | 01:05 | At first, designers went with a
strategy called graceful degradation.
| | 01:09 | Graceful degradation is the
practice of designing for the most current
| | 01:12 | browsers' capabilities but ensuring that
the site will have the best experience
| | 01:16 | possible for older browsers by using
filters or hacks to deal with their
| | 01:20 | inconsistencies in support.
| | 01:21 | While this approach does embrace the
model of separating style from structure
| | 01:25 | and content, it doesn't adequately
deal with the ever-changing number of
| | 01:29 | additional user agents that are
consuming content and it is focused too heavily
| | 01:33 | on specific browser differences.
| | 01:35 | Progressive enhancement, on the
other hand, turns the focus away from the
| | 01:39 | browser and puts it squarely
back on the content itself.
| | 01:43 | But simply, progressive enhancement says
that at the heart of your design should
| | 01:47 | be solid, well-formed
content accessible to anyone.
| | 01:52 | Past that all enhancements, CSS for
presentation, JavaScript for functionality,
| | 01:57 | and other content such as Flash,
video or other interactive plug-ins, should
| | 02:01 | be introduced as external assets in a
series of enhancements that allow for
| | 02:06 | the fact that not all user agents will be
able to support or even see those features.
| | 02:10 | Now this approach makes it easier to
provide content for multiple devices and agents.
| | 02:14 | Ensuring that the content is
contained within a valid HTML markup,
| | 02:19 | means that any device able to access
web content will be able to read and
| | 02:23 | consume your online content.
| | 02:25 | Your site automatically becomes more
accessible to mobile devices, screen
| | 02:29 | readers and search engine bots.
| | 02:31 | Other devices that support technologies
such as JavaScript and Flash will offer
| | 02:35 | a richer user experience and one that
probably better reflects your design
| | 02:39 | perspective but they don't get in the
way or obstruct your content at all.
| | 02:44 | To better illustrate this concept,
let's look at a simulated example.
| | 02:48 | In this page, we have an engaging
user interface that allows us to examine
| | 02:52 | product details without having to
navigate through multiple pages or scroll
| | 02:56 | through a long list of products.
| | 02:58 | This is presented using an Ajax-driven
interface that uses external JavaScript
| | 03:03 | libraries for functionality, a Flash-
based widget to display related products,
| | 03:08 | and external CSS for styling and presentation.
| | 03:11 | If we remove the JavaScript and CSS,
we can see the HTML page consists of a
| | 03:16 | series of tables featuring the
products and their information.
| | 03:19 | While this isn't particularly
attractive or easy to use, it does allow the
| | 03:23 | content to be accessed and viewed by everyone.
| | 03:26 | The CSS is added through an external
link with a media attribute that limits its
| | 03:30 | use to devices that
support the screen media type.
| | 03:33 | The CSS itself was written to give
consistent styling across multiple browsers
| | 03:37 | and alternate style sheets may be passed
through conditional statements to older browsers.
| | 03:41 | The Ajax interface constructs HTML
structure and controls functionality through
| | 03:46 | external JavaScript libraries.
| | 03:48 | The JavaScript is added in an
unobtrusive way, which is just another way of
| | 03:52 | saying that the scripting is all done
in the external document and not added
| | 03:56 | to the HTML directly.
| | 03:58 | The Flash is also controlled through
JavaScript, which checks the browser for
| | 04:01 | the necessary Flash plug-in and then
displays the content when appropriate.
| | 04:05 | Obviously there are a lot of moving
parts to this, but the basic structure is
| | 04:09 | pretty straightforward.
| | 04:10 | Start with basic well-
structured HTML and content.
| | 04:13 | Add styling through external CSS and
then add any additional functionality or
| | 04:18 | interactivity through unobtrusive JavaScript.
| | 04:21 | As a new designer, you have the
benefit of learning how to integrate these
| | 04:24 | technologies using this strategy so that
progressive enhancement simply becomes the way you work.
| | 04:29 | I highly recommend this approach to you.
| | 04:31 | Although every website is a unique
project and reality often calls us to take a
| | 04:35 | less than perfect approach to our sites,
| | 04:37 | working this way naturally create sites
that are widely accessible, have a high
| | 04:41 | degree of search engine optimization,
and offer the best distribution of content
| | 04:45 | across multiple devices.
| | Collapse this transcript |
| Choosing a web host| 00:00 | One of the most important decisions
you will make as a web designer is which
| | 00:03 | hosting company to use when creating
sites for yourself and your clients.
| | 00:08 | A quick search will reveal dozens of
sites dedicated to comparing hosting
| | 00:11 | companies and the plans that they offer.
| | 00:14 | The sheer number of hosting
companies, available plans and features and
| | 00:18 | pricing options can be confusing and
even overwhelming to a person choosing
| | 00:22 | their first hosting company.
| | 00:23 | In this movie, I'm going to cover
some of the basics of choosing a hosting
| | 00:26 | company and offer some
advice on what to look for.
| | 00:29 | First, you should take some time to think
about what your needs are for a particular site.
| | 00:34 | Is it a commercial site, blog,
portfolio, or is it simply a web presence?
| | 00:39 | Will the site require e-commerce,
databases, or server-side scripting?
| | 00:43 | Knowing what a site's needs are and
how those needs might grow in the future
| | 00:47 | will help you understand which hosting
plan is right for that particular site.
| | 00:51 | If you know, for example, that you
will be creating a site that involves
| | 00:54 | e-commerce, a WordPress powered blog,
and a PHP driven back-end, you can use
| | 00:59 | those requirements to help you filter
through hosting companies and their plans.
| | 01:02 | When looking at hosting companies,
here are a few things to consider.
| | 01:06 | First, almost everyone makes the mistake of
looking at price first. I understand this.
| | 01:12 | Hosting your personal site can be
expensive, and many clients balk at the
| | 01:15 | cost of some plans.
| | 01:17 | I've had clients before that are
bit leery of the hosting plan that I
| | 01:20 | recommend, stating that they did a quick search
and found some incredibly cheap hosting prices.
| | 01:24 | There is nothing wrong with cheap hosting.
| | 01:26 | Some of the lower priced hosting
companies do a fine job and are
| | 01:29 | extremely reputable.
| | 01:30 | I would recommend however remembering
that you often get what you pay for.
| | 01:34 | And trust me, your client expects you to
create a site that performs flawlessly,
| | 01:39 | suffers from little to no down time,
and one that has problems fixed quickly.
| | 01:44 | If you choose a hosting company based
solely on price, you could be asking for trouble.
| | 01:48 | Next, don't be fooled by plans
that offer unlimited hosting space or
| | 01:52 | unlimited data transfer.
| | 01:54 | A hosting space is the amount of
storage space that the hosting company
| | 01:57 | provides for your site.
| | 01:59 | Most sites don't need a lot of space,
and unless you're creating a massive site
| | 02:03 | or one that makes heavy use of assets
such as video or larger images,
| | 02:07 | you probably won't need
a massive amount of storage.
| | 02:10 | Data transfer refers to the amount of
files requested and served by the server
| | 02:14 | over the course of the
period of time, usually a month.
| | 02:17 | This is something that you
want to watch very closely.
| | 02:20 | Most personal or commercial sites
won't exceed what your hosting provider
| | 02:24 | considers to be a nominal
amount of data transfer.
| | 02:27 | However, if you are creating a blog
that you feel will someday be featured on
| | 02:31 | Digg or an e-commerce site that will
do heavy business, you can ignore that
| | 02:35 | unlimited data transfer claim.
| | 02:38 | Read the fine print of any hosting
company and you'll see that the unlimited
| | 02:42 | amounts that they claim are
subject to their discretion.
| | 02:45 | If you're going to host a site that
will get heavy traffic, talk to the hosting
| | 02:48 | company and find out how much bandwidth
they'll allow before the extra charges
| | 02:53 | kick in, and without a doubt,
find out how much those charges are.
| | 02:56 | That is often a surprise that
neither you nor your client wants.
| | 03:01 | You also want a research hosting uptime.
| | 03:03 | No system is flawless, and any hosting
company that claims 100% uptime is probably lying.
| | 03:09 | Again, read the fine print.
| | 03:10 | But it is reasonable to expect a 99.9% uptime.
| | 03:15 | If your hosting company can't
guarantee that, look elsewhere.
| | 03:18 | There are some great tools on the
Web to check uptime. pingdom.com is the
| | 03:23 | one that I use, but a quick search will
give you a full list of sites to choose from.
| | 03:27 | Next, decide whether you need
a dedicated or a shared server.
| | 03:31 | A dedicated server means that your
site is the only site hosted on it.
| | 03:34 | As you can imagine, these are a bit more
expensive than shared servers, but they
| | 03:39 | are worth it for higher
traffic or larger commercial sites.
| | 03:42 | In fact, if you're doing a job for a
larger client and expect heavy traffic,
| | 03:46 | you should expect to use a dedicated server.
| | 03:48 | For most sites, shared servers are
fine but you do want to do some research
| | 03:52 | about who you're sharing it with.
| | 03:54 | In web hosting terms, you don't want to
end up in what is called a bad neighborhood.
| | 03:59 | The term bad neighborhood means that
you are sharing a server with sites that
| | 04:03 | are known for spam, phishing,
or other dubious activities.
| | 04:07 | Search engines are quick to blacklist
such sites, and often your site will
| | 04:11 | suffer from association.
| | 04:13 | Before choosing a hosting company,
you should call them and discuss their
| | 04:16 | policies on hosting such sites.
| | 04:19 | After your site goes live, check out
your neighbors by using some of the online
| | 04:22 | tools that allow you to see
who is hosting alongside you.
| | 04:26 | I use Axandra's free Reverse IP Lookup,
but it won't take you long to find a few
| | 04:30 | sites that will do the trick for you.
| | 04:32 | Take a close look at available
features and supporting software.
| | 04:36 | Some hosting companies will allow you
to install your own software while others
| | 04:39 | only offer preinstalled solutions.
| | 04:41 | Understanding what configurations
you'll be using for your site is
| | 04:44 | important when choosing
which features to look for.
| | 04:47 | At a minimum, you want to make sure that
any server-side software like PHP, .NET
| | 04:51 | or ColdFusion that you
will be using is supported.
| | 04:54 | Check out the support for database
administrators like MySQL and PHPMyAdmin.
| | 04:59 | Also, look to the level of e-mail support
and what type of spam filtering they offer.
| | 05:03 | If you're going to be blogging, make
sure that the blog engine that you want to
| | 05:06 | use is either supported or that you are
allowed to install it on their server.
| | 05:10 | I would also recommend looking to have
more control of your installations than less.
| | 05:15 | Although you might not be comfortable at
first going in and making changes to installs,
| | 05:18 | you might want to make sure that you
or your developer has those options.
| | 05:23 | Not being able to configure your
hypertext access files or PHP config files can
| | 05:27 | cause portions of your sites to
either not work or not be secure.
| | 05:31 | That leaves to me
to my last point. Support.
| | 05:33 | A good hosting company
will have 24 hour support.
| | 05:36 | Don't be fooled by 24 hour e-mail support.
| | 05:38 | Yeah, you can send an e-mail at 2 a.m.,
but there is no guarantee this is going
| | 05:41 | to read before 9 a.m.
| | 05:43 | Test out a hosting company's support
before you sign on with them and look for
| | 05:47 | companies that have 24-hour
phone or live online support.
| | 05:51 | You may never need it, but if you do
need it, you'll be very glad they have it.
| | 05:55 | Finding a hosting company
is an important decision.
| | 05:57 | Don't be afraid to look up the hosting
company through the Better Business Bureau, or
| | 06:00 | to read client reviews and online forums.
| | 06:03 | Ask other web designers and
developers who they use and trust.
| | 06:06 | It doesn't matter how great the site
is that you've designed, if the hosting
| | 06:10 | company offers poor service and low uptime.
| | 06:12 | As a professional designer, you want
to find a hosting company that you can
| | 06:15 | build a relationship with for
both yourself and your clients.
| | Collapse this transcript |
| Registering a domain name| 00:00 | Although it seems like choosing and
registering a domain name would be one of
| | 00:04 | the more simple tasks in web design,
it can actually be quite frustrating.
| | 00:07 | There are so many registered domains that
finding the one you want can be almost impossible.
| | 00:12 | In this movie, I'm going to offer some
suggestions to picking your domain name,
| | 00:15 | and then discuss some of the
different ways that you can register them.
| | 00:18 | The first thing to consider is which domain
or domains you want to register your site to.
| | 00:23 | Common top-level domains
are .com, .org, .net or .info.
| | 00:29 | Many people try to register their site
with multiple domains, so that visitors
| | 00:33 | don't have to remember
whether it is a .com or .org site.
| | 00:37 | Often the availability of the domain
name may prevent that, but I highly
| | 00:41 | encourage this practice when available.
| | 00:43 | It keeps competitors from registering
the same name in a different domain and
| | 00:47 | then redirecting client to their
sites and oh yes, that does happen.
| | 00:51 | It also makes it easier for clients to
find your site. If none of the top-level
| | 00:55 | domains are available, you could try
one of the country code level domains
| | 00:59 | available, such as UK, DE and FRM.
| | 01:02 | While these are generally more
available, they could cause some confusion as
| | 01:06 | to where your company or client is located,
so make sure you take that into consideration.
| | 01:10 | When choosing a domain name
it's important to be a bit flexible.
| | 01:14 | Make sure your client understands
that their company name might not be
| | 01:17 | available, and have a list of alternate
names or variations that they find acceptable.
| | 01:22 | If I'm designing a site for
Maurice Flowers, for example, I'm not only going to
| | 01:26 | look at mauriceflowers.com, but
flowersbyMaurice, Mauricepetals, Mauriceflorist,
| | 01:31 | and other variations as well.
| | 01:33 | I'll also examine .net and .org to
see if those versions are available.
| | 01:37 | Discussing this with the client before
you register the domain name is important
| | 01:41 | to make sure the client knows that
their top choice might not be available.
| | 01:45 | When possible, try to make sure that
your domain is memorable for visitors.
| | 01:49 | While that is getting harder these days,
| | 01:51 | it shouldn't be too hard to make sure
that your domain is one that people can
| | 01:54 | type in from memory.
| | 01:55 | If visitors can only get to your
site by clicking or by looking your site
| | 01:59 | address up, your site isn't going
to be as successful as it should.
| | 02:02 | Don't let length scare you off.
| | 02:04 | James Williamson Design is a long string
of characters, but at least it's memorable.
| | 02:09 | Shorter URLs are better, but
memorable is the most important aspect of all.
| | 02:15 | When you're ready to register your
domain name, you have two choices.
| | 02:18 | You can use a dedicated domain
registry company, or register the domain
| | 02:22 | through a hosting company.
| | 02:23 | Cost is rarely an issue, as most
registry companies charge a minimal fee, and
| | 02:27 | many hosting companies will
make it part to their hosting plan.
| | 02:30 | If you have a hosting company, you may want
to take advantage of their registry services.
| | 02:34 | Several hosting companies will have
plans that'll allow you to register multiple
| | 02:38 | or even unlimited number of sites.
| | 02:39 | This can be a great time saver if you
plan on using them for hosting as well.
| | 02:43 | Make sure that you own the site that
you're registering, not the hosting company
| | 02:48 | or the registry company.
| | 02:49 | It is very, very rare these days for
hosting company to register the site in
| | 02:53 | their name instead of yours,
but it does occasionally happen.
| | 02:57 | It's very important for you or your
client to actually own the domain.
| | 03:02 | If you don't, you won't be able to transfer
the domain to know the server without
| | 03:05 | the owner's consent, so be sure to double
check that before registering with some one.
| | 03:10 | Once you're ready to register a site, go
ahead and do it right away. Don't check
| | 03:13 | the availability of the site and
then think about it for a while.
| | 03:16 | The Web is unfortunately full of
unscrupulous people, and it's not uncommon
| | 03:20 | to find that the domain you researched
yesterday is now gone, but available for a higher price.
| | 03:25 | Now once your site is registered, make
sure you know the primary and secondary
| | 03:29 | name servers that it gets assigned to.
| | 03:31 | If you are using a registry service,
this will usually be listed under the DNS
| | 03:35 | information. For hosting companies
it should be a part of your normal site
| | 03:38 | information and found within your control panel.
| | 03:41 | You will need this information once
your site goes online, so that your domain
| | 03:44 | gets directed to the proper site.
| | 03:46 | Hosting companies will usually
handle this for you, but if you're using a
| | 03:50 | registry service, you'll need to
either point your site to the proper name
| | 03:53 | servers or transfer the DNS
once you choose a hosting company.
| | 03:57 | So, the overall process of choosing and
registering a domain name is not a complicated one.
| | 04:02 | You just want to make sure that you use
a qualified domain registry company or
| | 04:07 | a hosting service that you trust.
| | Collapse this transcript |
| Basic site structure| 00:00 | Previously we discussed organizing your
site through information architecture.
| | 00:04 | In this movie I want to focus on
the physical organization of your site
| | 00:08 | and discuss several techniques for keeping
your site clutter free and easy to navigate.
| | 00:12 | No matter how large a site you're
working with, at the end of the day
| | 00:15 | it's really nothing more than a
collection of files and folders.
| | 00:18 | Just like any project you work on, if
the files aren't organized properly
| | 00:22 | your site will quickly become a mess that
makes your life harder and can confuse
| | 00:26 | most visitors to your site, to say nothing
of your site's lack of search engines support.
| | 00:31 | Before we get to a few ideas on how
to best organize your site let's take a
| | 00:34 | minute to review hosting servers
and how sites are organized on them.
| | 00:38 | Depending upon what type of server
you're working on, your website will be
| | 00:42 | located in either a folder
called public_HTML or named www.
| | 00:47 | And often these are the same
directories and uploading files to either one will
| | 00:51 | usually do the trick.
| | 00:53 | On some servers, you might be part of
a shared server and have a dedicated
| | 00:57 | directory that has your
name or the name of your site.
| | 01:00 | Either way this folder is often
referred to as the root directory, and it will
| | 01:05 | contain your entire site.
| | 01:07 | When developing locally, you need to
create a root directory on your network
| | 01:11 | or personal computer.
| | 01:13 | For the most part your local directory
structure should mirror the remote directory.
| | 01:17 | Changes made locally or remotely are
typically synchronized so that both
| | 01:21 | locations have the most
current version of the site.
| | 01:25 | This directory is where your
default page will be located.
| | 01:27 | The default page, named either index or
the default depending on which type of
| | 01:31 | server you're using, is the page will be
served to any visitor to your site that
| | 01:36 | doesn't request a specific page.
| | 01:38 | Often this page is referred to as the
home page, and it's almost always found
| | 01:42 | within the root directory.
| | 01:44 | From there, site structures
are often broken into tiers.
| | 01:47 | Any page located directly in the
root folder is said to be a Tier 1 page.
| | 01:53 | These are often the most important or
top-level pages and are frequently given
| | 01:57 | more weight by search engines.
| | 01:59 | Subdirectories can add additional
structure to your site, and are usually used
| | 02:03 | when a specific subject or
areas of focus have multiple pages.
| | 02:06 | If your site offers multiple products,
you might not only have a product
| | 02:11 | subdirectory, but also a
subdirectory for each product type.
| | 02:15 | Keep in mind that this adds to a site's
complexity and should be decided upon as
| | 02:19 | part of the organizational process.
| | 02:21 | In fact most directory structures are
planned very early in the site's design process.
| | 02:27 | It's a good practice to review the
site structure throughout the site's
| | 02:30 | development to make sure it still
enhances the overall organization and
| | 02:34 | clarity of the site.
| | 02:36 | Regardless of the number of directories
and files in your site, they should all
| | 02:39 | follow standard naming conventions.
| | 02:42 | Keep all filenames lowercase, as
some servers are case sensitive.
| | 02:46 | Don't use any spaces in filenames,
although underscores will work if you feel
| | 02:50 | the need to denote multiple words.
| | 02:52 | Also don't begin a file or folder
name with a number and avoid any
| | 02:56 | punctuation in filenames.
| | 02:58 | Following these standards will ensure
that your files will be served properly by
| | 03:02 | the server and make linking
to your files much easier.
| | 03:06 | You'll probably have multiple assets
that although they are part of your site
| | 03:10 | aren't web pages themselves.
| | 03:12 | These are the images, external CSS files,
external JavaScript files, video, multimedia.
| | 03:18 | Really anything that's used
as a resource by your website.
| | 03:22 | Organizing those files is
crucial to the success of your site.
| | 03:25 | In most cases these assets organized in
their own directories based on file type.
| | 03:30 | Take a look at this directory,
for example. This is a mess.
| | 03:34 | Images and CSS files are right on the root
directory, making it hard to find anything.
| | 03:39 | Let's add some asset
directories and tidy the place up.
| | 03:42 | There, that's better.
| | 03:43 | Now I typically add an underscore
to the names of these directories.
| | 03:47 | This causes them to be listed at the
top of the directory list and makes them
| | 03:50 | easier to find and update.
| | 03:52 | Now another site organization technique
that I recommend is to create an assets
| | 03:56 | directory in your local site.
| | 03:58 | Here you can store all of your
larger original file files, such as Word
| | 04:02 | documents, Photoshop files,
Flash files or other source documents
| | 04:06 | used to create assets for your site.
| | 04:09 | I'll usually place subdirectories
in this file to make sure that my
| | 04:12 | source Photoshop, Flash, Illustrator, Word
and other files are easier to find and update.
| | 04:17 | This folder is also easy to cloak and
remove from the FTP uploading process.
| | 04:22 | Unless you're working in a
collaborative environment there is little to gain
| | 04:26 | from uploading these very
large files to your remote server.
| | 04:29 | For those of you out there that are thinking
well, what about uploading them so have a backup.
| | 04:33 | Well, you really should be backing up
your site to multiple locations and having
| | 04:37 | a local backup is a must.
| | 04:39 | Finally, be very very careful when
moving or deleting files and directories.
| | 04:46 | This can cause broken links or
orphan files within your site.
| | 04:50 | Working with tools like
Dreamweaver can prevent such problems.
| | 04:53 | Dreamweaver offers site management
capabilities that will warn you when such a
| | 04:57 | move will have detrimental effects
and even offer to update links or pages
| | 05:01 | throughout your site when making such changes.
| | 05:04 | An organized, well-planned side will
be easy to update and maintain, make
| | 05:08 | linking to pages within your site easier, and
assist with your page rankings in search engines.
| | 05:14 | It's also another aspect of your site
that you should keep a close eye on.
| | 05:17 | As sites grow, the organization often suffers.
| | 05:20 | Make sure that as your site changes
you're taking time to review the site
| | 05:24 | structure and changing the
organization of the site when necessary.
| | Collapse this transcript |
| Where do I go from here?| 00:00 | It occurs to me that now that we have
discussed the ins and outs of Web design,
| | 00:04 | defined terms, and discussed various
areas that one can specialize in, you might
| | 00:08 | be left with one question: now what?
| | 00:10 | That actually is a very good question,
and before we finish, I want to leave
| | 00:14 | you with some of my favorite resources and
some advice for what you might want to do next.
| | 00:19 | One of the biggest resources that you
have available to you is the one you
| | 00:22 | are watching right now.
| | 00:23 | The lynda.com Online Training
Library has dozens of quality titles on Web design,
| | 00:28 | focusing on everything from
learning HTML, CSS, JavaScript, and XML, to
| | 00:33 | mastering tools such as
Dreamweaver, Fireworks, and Photoshop.
| | 00:36 | When you have got the basics covered,
you can explore titles on Joomla!, Drupal,
| | 00:40 | Web development, and other fantastic titles.
| | 00:43 | lynda.com has titles from some of the
most respected authors in the world.
| | 00:47 | It is a fantastic source
for mastering your craft.
| | 00:49 | Now, I don't normally plug individual
books, but I think there are two books
| | 00:53 | that need to be on every
web designer's bookshelves:
| | 00:56 | 'Designing With Web Standards' by Jeffrey
Zeldman, and 'Don't Make Me Think!' by Steve Krug.
| | 01:01 | Both of these books changed the way
that I thought about Web design and
| | 01:05 | convinced me that you can be a fantastic
designer by paying as much attention to
| | 01:09 | the user as the visual design itself.
| | 01:11 | I like to finish by mentioning some of
the great resource sites where you can
| | 01:15 | deepen your understanding of Web
design principles and practices.
| | 01:19 | First, start with the source.
w3c.org is the homepage of the World Wide Web
| | 01:24 | Consortium, the standards
organization for the World Wide Web.
| | 01:27 | If you want to read the
specifications on HTML, CSS, or XML, or browse
| | 01:33 | through the working drafts for the next
versions of those technologies, you can do it there.
| | 01:37 | Another great resource is
positioniseverything.net.
| | 01:41 | Position Is Everything focuses on CSS,
specifically on how to ensure that your
| | 01:45 | CSS will work in multiple browsers.
| | 01:48 | It provides a list of commonly known
browser bugs and the workarounds to combat them.
| | 01:52 | alistapart.com is a frequently updated
online magazine for web designers and developers.
| | 01:58 | Article subjects range from best
practices, to business practices, to
| | 02:01 | groundbreaking design techniques.
| | 02:03 | I consider a must-read for most web designers.
| | 02:06 | Now, by no means is that all of the sites,
articles, or books that I frequent or recommend.
| | 02:11 | You should adopt the habit of
constantly searching and finding blogs, online
| | 02:15 | magazines, and communities
that focus on Web design.
| | 02:18 | Once you find a great community,
be sure to join the conversation.
| | 02:21 | Your opinion and viewpoint are unique.
| | 02:23 | By contributing your own voice, you in turn
become a resource for other web designers.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | I want to thank you for
watching Web Design Fundamentals.
| | 00:03 | I hope that you have gained some
valuable insight into the process of becoming
| | 00:06 | a web designer and a better overall
understanding of how the technology behind the web works.
| | 00:11 | As you move forward, be sure to take the
time to learn how to do things correctly.
| | 00:16 | Focus on web standards and usability,
and most importantly, experiment.
| | 00:20 | Remember that Web Design should be fun.
| | 00:22 | Feel free to drop me a line through
lynda.com and let me know how you are doing.
| | 00:26 | Web design is an ever evolving process,
and if I have learned one thing, it's this.
| | 00:31 | You are never done learning Web design,
and for me that's what makes it so much fun.
| | 00:36 | Thanks again for watching
everyone, and I will see you in my next
| | 00:38 | lynda.com title.
| | Collapse this transcript |
|
|
