Web Design by Rachael L Moore

Links for 2012-01-06 [del.icio.us]

2012-01-07T00:00:00-08:00

CSS3 Lightbox | Codrops
Examples of Fresh Effects in Web Design | Codrops
Edits Quarterly is a great example of a whole new navigation experience. You can scroll down or simply use the arrow keys to view the beauty of it.

Links for 2012-01-04 [del.icio.us]

2012-01-05T00:00:00-08:00

Links for 2012-01-03 [del.icio.us]

2012-01-04T00:00:00-08:00

Links for 2011-12-29 [del.icio.us]

2011-12-30T00:00:00-08:00

Links for 2011-12-16 [del.icio.us]

2011-12-17T00:00:00-08:00

Links for 2011-12-14 [del.icio.us]

2011-12-15T00:00:00-08:00

Links for 2011-12-09 [del.icio.us]

2011-12-10T00:00:00-08:00

Minding the gap: the (imaginary) design/development divide II

2011-09-15T05:33:12Z

One of the classic debates of the web industry: does a web designer have to know how to code? I say "yes". However, there are a lot of compelling points made by those who say "no". In this post I explore how personal values in respect to specialization and generalization inform the topic.

How to interpolate strings in dotLess (.NET Less CSS)

2011-09-12T19:40:49Z

I've been trying to figure out how to interpolate or concatenate strings in dotLess (the .NET port of Less CSS), since it doesn't use the same syntax as Less.js. I finally found that formatString("string {0} and {1}", @r0, @r1) will do it. I've written a couple of mixins as examples.

Essential jQuery plugins for web developers

2011-09-12T19:45:54Z

A list of jQuery plugins I have found incredibly useful while developing using jQuery. No slideshows here, only useful utilities and abstractions, from timers to templates. Suggestions are welcome!

Get the original HTML5 input @type (jQuery plugin)

2011-09-12T19:57:05Z

A browser that doesn't support a new HTML5 input type will change the type of any unrecognized input to text. This is good because it means it's reasonably safe to use new HTML5 input types right now, even in old browsers. But this affects the DOM, and we might want to know what we originally wanted it to be in order to provide a fallback for validation or UI. This post covers a jQuery plugin that will return the HTML5 input type even if the browser doesn't support HTML5.

Image gallery captions with HTML5 & CSS3

2011-09-12T20:03:51Z

One common CSS layout question is how to style captions beneath thumbnails displayed in grid rows. The only reliable way to do this with CSS has been to use float, which hasn't worked well for variable-length captions. The only real solution has been inline-block (which at some points has been buggy). CSS3 now offers a few alternative ways of creating image galleries with captions via CSS 3 columns or CSS nth-child selectors.

Zebra striping table rows & columns with CSS3 rgba

2011-09-12T21:05:36Z

Once I started working with highly structured data tables I learned that using CSS to style tables is a big pain. But CSS3 (coupled with a lot of reading about the HTML and CSS table specifications) has helped. You can use CSS3's rgba for very complex and flexible table zebra striping. The border conflict resolution model can work in your favor occasionally. There's also a link with some really great information about how to optimize table rending!

Name that font! Finding the right name for a CSS font stack

2011-09-12T22:25:14Z

Specifying a font with CSS font-family by its font name is more complicated than I'd realized. If you're trying to achieve maximum compatibility of a slightly off-web-safe font without using @font-face, it may actually be impossible to account for all visitors -- even if they actually have the font installed. But it's possible to get pretty far. The good news is that if you just want Mac users to see Helvetica Neue, it's pretty simple! Windows is less simple.

Marking up contacts using semantic HTML5 & microformats

2011-09-12T22:10:23Z

HTML does a great job at generic semantics for documents. But there are many things on websites that don't have semantic tags in HTML. Important information can end up meaningless or misinterpreted just because there are no tags to say, for example, "this bit of text is the name of a person." There are many solutions, including XHTML, microformats, and RDF. Now there's HTML5 microdata. Here's how to mark up a profile using HTML5 microdata, microformats, & Google's Data Vocabulary.

Is there a web-safe Helvetica Neue CSS font-family stack?

2011-09-12T22:20:26Z

Since when was CSS so picky about how to format the name of a font in a font-family stack? I attempted to use Helvetica Neue in a font stack on a design, only to find it doesn't show up even though the font is installed.

Breadcrumbs & the CSS3 general sibling selector

2011-09-12T22:27:55Z

After reading an interesting blog entry about the breadcrumbs on Apple's website, I undertook to experiment with breadcrumb design -- as I haven't had real need for them in any recent projects. This post explores drop-down breadcrumbs and some effects using CSS3's general sibling selector (~). And webkit has a buuuug.

Graphic design interview

2010-03-08T14:46:08Z

A student contacted me as part of a school project. I told her I could go on for pages and pages about why web design is the most exciting kind of design -- and about all the things that make the web a fascinating medium for me, but I spared her.

Minding the gap: the (imaginary) design/development divide I

2011-09-12T07:40:51Z

Should a web designer know how to code HTML and CSS? I think so. Why? It's a signal of quality. HTML and CSS are to web design as paint is to painting. Should a painter know how to paint? A meandering exploration of the symbiotic relationship between design and development on the web.

Customer service the right way

2009-10-05T22:49:21Z

Bealls of Florida went beyond my expectations and provided great customer service. Sounds like an ad, but I'm serious. I really appreciated it.

Citing in HTML5 with the cite attribute & cite tag

2011-09-12T19:10:39Z

cite in HTML5 should not be restricted to titles. My wish list for the cite tag: "The authoritative source" of information, whether that source is a title, an author, or a website. It would also be neat if cite could be associated with related content.

CSS image replacement II

2011-09-12T19:31:44Z

Experiments with a CSS image replacement technique inspired by Levin Alexander's empty span image replacement, but using the :after pseudo-element rather than adding extra HTML markup.

Discovering Drupal

2009-07-15T20:56:39Z

Drupal, the content management system, is pretty neat. I usually don't use content management systems because they impose limits on what I can do and how I can do it. But I've come to find that I can love a CMS. As a friend.

I hate multimedia, am I strange?

2011-09-12T19:32:52Z

I don't like watching videos or dealing with multimedia presentations when I'm looking for information online. It got me thinking that accessible alternatives should be provided for reasons beyond traditional accessibility. They give users in a hurry, without hardware, or with video-aversion a way to get the information they're looking for.

JavaScript enhanced navigation with ajax menus

2009-06-16T09:55:32Z

There's a common difficulty encountered by ajax web applications that use JavaScript to change the state of the page. Since web browser history does not log JavaScript events, the back, forward, and bookmarks don't work by default. There are plugins to solve this, but I want to understand generally what they're doing.

Do freelance web designers give good customer service?

2009-06-09T17:55:06Z

I've been having a run of really bad luck with customer service recently. It got me wondering about how well I serve my customers as a freelance web designer. So, freelancers: how much attention do you give your customer service skills?

Navigation in JavaScript enhanced sites

2009-05-06T15:12:21Z

Documenting my findings about what's required to emulate traditional navigation on JavaScript enhanced sites. It should include graceful degradation, bookmarking, linking, and back/forward (plus any other details that are slipping my mind). Since I usually use plugins for this sort of thing, I want to learn what those plugins are actually doing.

Using the (X)HTML title attribute in forms

2009-05-05T16:21:22Z

Sometimes it's very clear how to use the title attribute. One of the places it's not as clear is one of the places the title attribute has incredible potential. Within HTML/XHTML forms. Title attributes can be used on most form elements and act as a great assistive tooltip. This use has bearing on questions of how best to mark up (and style) a form.

Styling semantic forms with CSS

2009-04-09T18:09:53Z

Lately I've been taking a close look at forms: best practices, accessibility, semantic markup, CSS styling, etc. I want to learn which practices provide a solid foundation for a semantic form while still being easy to write and style extemporaneously.

“Compiling” cURL with PHP 5 on Windows

2009-02-20T20:03:52Z

If you have trouble getting cURL to work when running Windows XP, Apache, and PHP 5, make sure that libeay32.dll and ssleay32.dll are in C:WindowsSystem32. You can get them from the full zip file download.

Coding XHTML forms with @name and @id

2009-01-26T18:35:22Z

We all make mistakes. This time, mine was thinking that the HTML name attribute was deprecated for all elements, including form elements. They're not. XHTML deprecates the name attribute on anchor tags and the form itself, but not on inputs. I wrote up a big ol' document about it, since it can cause an icky problem in Firefox.

CSS image replacement I

2011-09-12T04:09:10Z

I've been brainstorming and reviewing old techniques for image replacement. Image replacement techniques replace plain text with images, allowing web designers to create better looking sites. The challenge with image replacement techniques is to maintain the text for accessibility while successfully showing the image for visitors who wish to see it.

hCard microformat for website contact info

2008-03-18T19:08:35Z

A copy & paste reference of the hCard I'm working on. hCard is amicroformat that's pretty popular--Yahoo supposedly makes use of it, for example, while spidering sites. They can also be processed into vCards for download (& importation into address books), though it would require a browser plugin or web app to do so.