Web Design News
| Poll: What inspires your web design work? Being a web designer is like any other creative pursuit. Every so often
you'll need to recharge
the creative batteries . I enjoy brainstorming to help me get unblocked, but I also will get inspiration from nature,
my friends, and even books I'm reading. Of course, looking at other
websites can be inspiring as well. Some About.com readers have shared
their inspirations and you can too. What inspires your web design work?
webdesign.about.com |
7/29/10 6:45 AM
Wordless Wednesday: What's In Your Editor - Programming Hostelmg  Get the site you're working on featured on About.com: What's in Your Editor? More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook webdesign.about.com | 7/28/10 6:45 AM XSLT can transform your XML documents One of the things I like best about XML is how you can use it for so many different things. But when I first
started using it, I would create one XML document and then when I needed
another with similar content (but different XML elements ) I would just write a new XML document. When I finally figured out
about XSLT I was ecstatic. XSLT lets you take a set of data in an XML document and
convert it into another XML document. I have used it for converting
articles from a CMS into HTML (XHTML , actually) and for converting an RSS feed into a website. And Darla has a multi-page XSLT Tutorial where you'll learn the basics of XSLT, how to set
up an XSLT output stream , how to use
the value-of element , and much more. You'll be impressed with how useful XSLT is!
webdesign.about.com |
7/27/10 8:09 AM
Oldy But Goody: What is the Meta Refresh Tag? I thought it would be interesting this summer to take a look at some of
my older articles that you may have missed. All of these articles have
been re-worked and refreshed for your edification and enjoyment. And I
thought I'd start with an article about the
meta refresh tag . This is a tag that was originally created to refresh the current page,
to add interactivity and allow the designer to make changes and updates
without the reader needing to do anything. But browsers quickly added on
the ability to load a new page rather than just the current one. And
that's what most
people use the meta refresh tag for. But keep in mind that search engines don't like you to use the
meta refresh tag to redirect pages permanently. Some black-hat designers used them to scam people and search engines to get higher
rankings. So, it's best for SEO to use a 301
server redirect instead if you need to redirect a page permanently.
webdesign.about.com |
7/26/10 8:03 AM
Web Design Software Pick of the Week: Yahoo! YUI Library
Web Design Software Pick of the Week: Yahoo! YUI Library originally appeared on About.com Web Design / HTML on Sunday, July 25th, 2010 at 14:50:59. Permalink | Comment | Email this webdesign.about.com | 7/25/10 3:50 PM Poll: What is your job title? Working as a Web Designer/Web Developer/Web Programmer/etc. hasn't
changed astronomically in the years I've been writing this site, but
have the job titles? If you are a freelancer, choose the title you're
most likely to introduce yourself as. My job title has changed several
times in the past 10 years. I originally was a Webmaster, then it
changed to Web Developer and Web Manager. Now, I am a Web Designer. I
have also worked as an Information Architect and Web Producer. What's
interesting to me is that the work I do as a Web Designer isn't
radically different from what I did as a Webmaster back when I first
started. Yes, the languages I use have changed, but the work is
remarkably similar. What is your job title? And how has it changed since
you started doing web design work?
webdesign.about.com |
7/22/10 6:45 AM
Wordless Wednesday: What's In Your Editor - PHBA  Get the site you're working on featured on About.com: What's in Your Editor? More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook webdesign.about.com | 7/21/10 6:48 AM JavaScript Minification Part II Variable naming can be a source of coding angst for humans trying to
understand code. Once you’re sure that a human doesn’t need
to interpret your JavaScript code, variables simply become generic
placeholders for values. Nicholas C. Zakas shows us how to further
minify JavaScript by replacing local variable names with the YUI Compressor.
www.alistapart.com |
7/20/10 11:00 AM
SVG with a little help from Raphaël Want to make fancy, interactive, scalable vector graphics (SVGs) that
look beautiful at any resolution and degrade with grace? Brian Suda
urges you to consider Raphaël for your SVG heavy lifting.
www.alistapart.com |
7/20/10 11:00 AM
Floating images within your layout can be automated with CSS 3 The CSS pseudo-class nth-of-type allows you to add images to your content and then float them on
alternating sides. With this simple technique you can dress up your
content with images and they aren't all in one long line. Help with Pseudo-Classes
Does anyone still use two spaces after a period? Younger web designers may be surprised to learn that the convention for
typing used to require that you use two spaces after a period to help
readers see the end of sentences in the monospaced fonts that typewriters used. In fact, if you learned to type on a
typewriter, chances are it was very hard to break yourself of the habit
(or perhaps you never did). In fact, most typesetting and desktop
publishing manuals will tell you that you should only
use one space after periods . And of course, web browsers collapse
multiple spaces , so it's hard to get two spaces to show up. But it is possible and some
people still insist on it. What do you think? Using Whitespace
Web Design Software Pick of the Week: deploy*
Web Design Software Pick of the Week: deploy* originally appeared on About.com Web Design / HTML on Sunday, July 18th, 2010 at 01:01:05. Permalink | Comment | Email this webdesign.about.com | 7/18/10 2:01 AM Poll: How interested are you in CSS 3? CSS 3 is the latest version of Cascading Style Sheets and it adds a lot of
exciting features like opacity , stretching
background images , new pseudo-classes , and a lot more. There are a lot of CSS
3 selectors that work right now even in Internet Explorer. Now that I've told you all that, are you
going to change your vote? :-) How interested in CSS 3 are you?
webdesign.about.com |
7/15/10 6:45 AM
Wordless Wednesday: What's In Your Editor - An Auto Service Company  Get the site you're working on featured on About.com: What's in Your Editor? More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook webdesign.about.com | 7/14/10 6:46 AM It's easy to add a map to your site with Google maps More on Google Maps...webdesign.about.com | 7/13/10 8:38 AM Alternating Row Styles in Tables is Easy with CSS 3 One of the most common ways to style a table is to change the background
colors of every other row. But with CSS 2 and below, the only way to do
this is to set classes on every other row and then write styles for
those classes. CSS 3 offers an exciting way to handle this problem
without adding any additional HTML attributes or tags. Additional CSS 3 Techniques
Web Design Software Pick of the Week: PixelKnete's Background Dotter
The future of XML A while ago I received a comment
on my blog asking: Regarding XML, wasn't that what xhtml was all about, but was never really utilized. Thus we are headed back for html 5? So what does the future hold for xml or am I totally off the mark? Darla answered his initial question, but I think she was intrigued by his second question "What does the future hold for XML?" In her latest article, What is the Future of XML?, Darla discusses the direction of XML and some of the many ways that it is expanding and growing and getting even more interesting. One of the ways that XML is getting more and more use is through RSS. If you run a weblog, you are probably serving XML in the form of RSS whether you knew it or not. Darla's article, How to Create XML for an RSS Feed, explains how those feeds work and the XML behind them. webdesign.about.com | 7/10/10 2:13 PM Learn how to use the CSS nth-child expressions Once you understand how to use the CSS 3 nth-child expressions, you will wonder how you ever got on without them. They
make creating patterns with your styles simple. But first you have to
understand how the expressions work. This article: How
to Use nth-child Expressions will teach you the basics of the nth-child pseudo-classes. Related CSS 3 Pseudo-Classeswebdesign.about.com | 7/9/10 11:49 PM Do you know of a web design award or contest? I got the SitePoint Tribune today and one of the things it mentioned was submitting sites you've
designed to awards and contests. This is a great idea and can help you
raise morale on your web team as well as impress clients. Couple that
with a contest I learned about from a reader, and I realized that I
haven't updated my Awards category in a while. But I need your help. Have you heard of a great
web design contest or award or does your company run an annual award?
I'd love
to hear about it and I'm sure other About.com readers would too. If you know of an award
or contest of interest to web designers, please submit
the award to my site. I'll be highlighting the awards periodically in this blog.
webdesign.about.com |
7/8/10 8:56 PM
Poll: How important are images to your designs? Images or graphics are often an integral part of web designs. But not all sites rely on
graphics for their designs. In fact, in some situations, images can be
distracting from the purpose of the site. Do you use graphics, photos or
images on your websites? How important are they to the design, in
general. And, yes, all sites are different, but most designers have a
preference for how many images they will include on the site beyond what
the site owner requires. What is your preference?
webdesign.about.com |
7/8/10 6:45 AM
Wordless Wednesday: What's In Your Editor - Johansen Studios  Get the site you're working on featured on About.com: What's in Your Editor? More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook webdesign.about.com | 7/7/10 6:45 AM Supersize that Background, Please! Background images that fill the screen thrill marketers but waste
bandwidth in devices with small viewports, and suffer from cropping and
alignment problems in high-res and widescreen monitors. Instead of using
a single fixed background size, a better solution would be to scale the
image to make it fit different window sizes. And with CSS3 backgrounds
and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.
www.alistapart.com |
7/6/10 10:00 AM
Prefix or Posthack Vendor prefixes: Threat or menace? As browser support (including in IE9)
encourages more of us to dive into CSS3, vendor prefixes such as
-moz-border-radius and -webkit-animation may challenge our consciences,
along with our patience. But while nobody particularly enjoys writing
the same thing four or five times in a row, prefixes may actually
accelerate the advancement and refinement of CSS. King of CSS Eric Meyer
explains why.
www.alistapart.com |
7/6/10 10:00 AM
Rounded Corners with CSS 3 I was asked on Saturday for more tutorials on CSS 3, and specifically
rounded corners. And one thing you'll learn about CSS 3 is that a lot of
the tricks we had to use extra HTML or other workarounds for have been
fixed in CSS 3. Rounded corners are a great example. If you create a box
with rounded corners in CSS 2 , you have to use a bunch of extra HTML to make the corners appear. But
CSS 3 does it with just one style property: border-radius . Now there are a few gotchas to get it to work in most modern browsers,
but ultimately it's a lot easier than before. Now we just need Internet
Explorer 9 to come out of beta! Other Tricks with CSS and CSS 3
Em Origins We've been discussing the origins
of the em for a few days on this site. This article pulls them all together, along with references. And if you have a
different memory or reference, you will have the opportunity to share
your stories of typesetting or print design as well. The term 'em' is as
old as moveable type and according to the best sources I can find
(including the Oxford English Dictionary and the typography book
Words Into Type among others), it originated from width of the capital letter M. But don't just believe me, review
my references . And if you have a different memory, share
your story . More Help with Sizing Web Elements
Poll: How many Web development books do you buy a year? I am an avid reader. I get lots of books on Web design and other topics
- whatever interests me, in fact. One of the biggest boons for me with
the advent of eReaders like on the iPad is that I can get more books
without filling up my house (which is already quite full) with more
books. But I suspect I am an outlier on a poll like this. Some of the
books I have on my desk (waiting to be reviewed) include Advanced
Web Metrics by Brian Clifton, Adobe Dreamweaver CS4 How-Tos by David Karlins (just in time for CS5!), Sams Teach Yourself
Drupal in 24 Hours by Jesse Feiler, and Head First Web Design by Ethan Watrall & Jeff Siarto. What Web development books do you
have on your desk? And how many do you buy a year? Poll: How many Web development books do you buy a year? originally appeared on About.com Web Design / HTML on Thursday, July 1st, 2010 at 06:06:29. Permalink | Comment | Email this webdesign.about.com | 7/1/10 7:06 AM Plagiarism can be funny I saw this post today about an epic
battle against plagiarism . it's not only hilarious, but also captures many of the emotions I feel
when I find copyright violations of my content. Do you stay calm? Or do you don battle gear?
webdesign.about.com |
6/30/10 7:56 PM
Tabbed Navigation Can Be Dressed Up with CSS 3 Many people find using CSS, and especially CSS 3 somewhat daunting. But
this step-by-step tutorial will take you through creating a CSS tabbed
menu in short, easy stages. More CSS Tabbed Navigation
Wordless Wednesday - Web Design Blogs - WebDevelopmentBits  Get your Web development blog featured on About.com: Share Your Blog. More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook Wordless Wednesday - Web Design Blogs - WebDevelopmentBits originally appeared on About.com Web Design / HTML on Wednesday, June 30th, 2010 at 07:55:40. Permalink | Comment | Email this webdesign.about.com | 6/30/10 8:55 AM External Links are a Good Idea If your site is paid through advertising or page views, it can be
agonizing to use external links because it feels like if you link off your site your readers will never
come back. In this article , I'll explain why linking to other sites than just your own can have
extended benefits to your site, your readers, and your bottom line.
Creating Better Links
Web Design Software Pick of the Week: Em Calculator
Web Design Software Pick of the Week: Em Calculator originally appeared on About.com Web Design / HTML on Sunday, June 27th, 2010 at 14:08:50. Permalink | Comment | Email this webdesign.about.com | 6/27/10 3:08 PM Questions about the EM size unit I have gotten a few comments and emails about the EM size unit. There is
some disagreement about where the term came from and what it means.
Below I'll list some of the sources I found indicating that the EM was
named after the letter M and was used to measure horizontal type sizes.
Of course, over the years, the meaning has changed. After all not all
fonts have a letter M, and as web designers we are more concerned with
the height of a font than the width of one of the glyphs. With CSS an em is the default size of the font in the browser rendering the font. This is confusing because every browser can have a different default size. Both because browsers are different and because users can change the font sizes to make text more pleasant for their viewing. But, 1 em = the default height of the font of the parent element. Sources of My InformationAccording to the W3C: Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. According to Guistuff (in the "Unit: Ems" section): One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size. What's interesting about this site, is that they also provide examples where you can see em sizing in action. There is one site, BigBaer.com that I found that gives a slightly different explanation of the em unit: The em unit traces its origin to the em box as used in print typography. The actual spatial rendering of an em is dependent on the glyphs of the font used. However, I can't find any information about how an em-box is sized (beyond that it's up to the type designer) nor can I find any other references to the em-box as the basis for the em sizing unit. The information I've found about em-boxes is that that is the box around a given font as determined by the font designer. And the em-box includes in its height the distance between lines of that particular font face, as well as the height of the font itself. (According to the University of Minnesota, Duluth.) The Important Thing About EmsUltimately, as web designers, how the em was originally developed as a sizing method is less important than how it's used now. What you need to know is that 1em is equal to the default size of the font in the current browser. 2em is twice as large and 0.5em is half as large as the default font size. Sites like the W3C recommend that you use ems as font size units because then the fonts will scale with the device. if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Thanks For Your HelpIf you know of references explaining what the em was originally defined as, I'd love to see them. Please post a comment with the URL or other bibliographical information. I strive to have the information on this site correct, but I also strive to base that information on verifiable and reputable sources. webdesign.about.com | 6/26/10 8:37 PM Poll: Do you use icons on your websites? There are lots of sites out there that offer free icon sets. You can
get icon sets for social networks, for themes, for badges, there's even
an icon finder you can use to find the perfect icon you need. But I've often been
perplexed by this. I suppose it's because I tend to build my own
graphics, but I have never seen why someone would want to use an icon
for anything but tiny things (like a Facebook link or something). And
I'm not really sure what the difference is between an icon that's not in
ICO format and a graphic. Is there one? Poll: Do you use icons on your websites? originally appeared on About.com Web Design / HTML on Thursday, June 24th, 2010 at 01:21:07. Permalink | Comment | Email this webdesign.about.com | 6/24/10 2:21 AM CSS Sizes When people think about sizes with CSS the most common thought is font
sizes. But you can set or change the size of nearly anything on your web
page with CSS. You can use the font-size property to define the size of your text elements. You can use width and height to define the width and height of almost any other element, including
the width
of the entire page . But along with the size elements, you need to know how to use the
different measurement options like px, em, and %. What this means is that figuring out CSS sizes can be very challenging. Measuring Things with CSS
Wordless Wednesday - Web Design Blogs - Vancouver Web Design Blog  Get your Web development blog featured on About.com: Share Your Blog. More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook Wordless Wednesday - Web Design Blogs - Vancouver Web Design Blog originally appeared on About.com Web Design / HTML on Wednesday, June 23rd, 2010 at 07:53:40. Permalink | Comment | Email this webdesign.about.com | 6/23/10 8:53 AM Taking Advantage of HTML5 and CSS3 with Modernizr Years ago, CSS browser support was patchy and buggy, and only daring web
designers used CSS for layouts. Today, CSS layouts are commonplace and
every browser supports them. But the same can't be said for CSS3 and
HTML5. That's where Faruk Ateş’s Modernizr comes in. This
open-source JavaScript library makes it easy to support different levels
of experiences, based on the capabilities of each visitor’s
browser. Learn how to take advantage of everything in HTML5 and CSS3
that is implemented in some browsers, without sacrificing control over
the user experience in other browsers.
www.alistapart.com |
6/22/10 10:00 AM
Stop Forking with CSS3 You may remember when JavaScript was a dark art. It earned that
reputation because, in order to do anything with even the teensiest bit
of cross-browser consistency, you had to fork your code for various
versions of Netscape and IE. Today, thanks to web standards advocacy and
diligent JavaScript library authors, our code is relatively fork-free.
Alas, in our rush to use some of the features available in CSS3,
we’ve fallen off the wagon. Enter Aaron Gustafson’s
eCSStender, a JavaScript library that lets you use CSS3 properties and
selectors while keeping your code fork- and hack-free.
www.alistapart.com |
6/22/10 10:00 AM
Web Design Software Pick of the Week: Font Tester
Web Design Software Pick of the Week: Font Tester originally appeared on About.com Web Design / HTML on Sunday, June 20th, 2010 at 05:41:37. Permalink | Comment | Email this webdesign.about.com | 6/20/10 6:41 AM Printing web pages soon to monetizeable One of the issues people have with printing web pages is that they don't
get the advertising credit that screen pages do. But HP
and Yahoo! are looking to change that. They are planning a way to offer targeted
ads on web pages that are printed. So, if your website gets printed a
lot, soon you might have a way to make money on those printouts.
webdesign.about.com |
6/18/10 5:29 PM
XML Schema will help you build better XML XML schema are a very useful tool for XML developers because they help you define
your XML documents, using XML . When XML first came out, in order to write valid XML you had to write
a Document
Type Definition to go along with it. And then validating parsers would validate your
XML against that DTD. But DTDs are hard to write. XML schema uses XML to
write the definition of your XML document, and once you understand XML
you will be able to read and write an XML schema. Of course, it also
helps if you have an article like Darla's latest How
to Write Your First XML Schema to get you started. And of course, if you're just getting started with
XML, you should check out Darla's XML Tutorials .
webdesign.about.com |
6/18/10 10:44 AM
CSS Pseudo-Properties Let You Style More than Just the HTML You See When I first learned about pseudo-properties in CSS I was confused as I
had a hard time grasping how you could style something that wasn't in
the HTML. But then I started styling my visited and active links using
:visited and :active and I realized that those states are not part of the HTML, but they are
part of the Web page construct. Then I decided to learn how to do a drop cap on my paragraphs using CSS and I realized that the first-letter is also
a construct on the Web page, even though it's not defined by HTML. And
after that I understood pseudo-classes and pseudo-elements.
Beginning CSS
Poll: How do you handle nasty comments about your sites? Some days it seems like most people on the Internet have nothing better
to do than to post negative comments, send nasty emails, or just be
generally unpleasant. Web designers need to develop thick skins about
their work and designs because you are rarely told when you're doing
well, but most people have no hesitation in flaming when they've found
an error. When I receive mean-spirited comments or emails I usually write back to the person, asking them for clarification (if needed) or just thanking them for their feedback (if not). For example, I recently received a letter complaining about one of my classes. The letter writer told me "...What I received from you was fractured and essentially, worthless [sic] ... Thanks for nothin'" There was more, but that was the gist. I wrote back asking her for more information (such as which class she was having trouble with), but unfortunately, like most trolls, she'd rather just spew venom than actually help solve a possible problem. I'm thinking that next time I just won't respond. How do you respond to messages like that? Poll: How do you handle nasty comments about your sites? originally appeared on About.com Web Design / HTML on Thursday, June 17th, 2010 at 01:20:11. Permalink | Comment | Email this webdesign.about.com | 6/17/10 2:20 AM Wordless Wednesday - Web Design Blogs - Web Design Blog  Get your Web development blog featured on About.com: Share Your Blog. More Web design resources and help: Follow me on Twitter or Become a Fan on Facebook Wordless Wednesday - Web Design Blogs - Web Design Blog originally appeared on About.com Web Design / HTML on Wednesday, June 16th, 2010 at 07:51:14. Permalink | Comment | Email this webdesign.about.com | 6/16/10 8:51 AM KompoZer Will Upload Your Pages as Well as Edit Them One feature of the free WYSIWYG editor KompoZer that is often overlooked is its ability to upload your pages to a
hosting server by FTP. Once you've told KompoZer where a file is
supposed to be, when you click Publish, it pushes the file and all
related images up to your hosting server. More KompoZer Help and Tutorials
Web Design Software Pick of the Week: Adam Kalsey's Button Maker
Web Design Software Pick of the Week: Adam Kalsey's Button Maker originally appeared on About.com Web Design / HTML on Sunday, June 13th, 2010 at 06:41:55. Permalink | Comment | Email this webdesign.about.com | 6/13/10 7:41 AM |
If your website has an address to a physical location
on it, adding a 
