Tips, Tricks, & Zombie Hits Archives

Start Testing Usability Now

You don’t have to wait till a site is built to test for usability. You can test usability of a sketch or mock-up by just asking people what they’d click on (even if clicking isn’t possible). Usability test early and often. If you wait till the end you’ll only be able to band-aid any significant problems... Read More

Pseudo Elements

Pseudo elements are like elements but aren’t quite. The most common pseudo elements are ::before and ::after which allow you to insert content into an element. ::before is put into the element right after the opening tag and ::after is put in right before the closing tag. (Note: elements without closing tags e.g. img, input,... Read More

Object-fit

Allows you to treat an inline image as a background image, making it easy to contain or cover the image and allow you to change the aspect ratio without squashing or stretching the image. Learn more at https://developer.mozilla.org/en-US/ docs/Web/CSS/object-fit... Read More

Select Input by Type

Use attribute selectors to select and style inputs of various types differently.... Read More

Responsive Videos

Video is one of the hardest thing to make responsive. But this article gives you a number of ways to make sure videos look great at any screen width https://css-tricks.com/fluid-width-video/... Read More

Rounding Out Your Elements

You can create a fully round object (to throw at zombies) using border-radius: 50% however, if you want to make a pill shape set it to an arbitrarily high number like 100em or 1000px.... Read More

Relatively Positioning Absolute Elements

You can localize where an absolutely positioned element is placed by setting a position: relative on the parent element. Instead of letting a zombie wander all over, you lock him in a cell so he can only shuffle around within a defined area.... Read More

Complex Animations

To more easily animate complex transforms separate out two or more kinds of transforms e.g. a rotate and a scale by adding a wrapper element and performing one transform on the wrapper and one on the child. Generally the first transform on your list should on the parent and the second one on the child.... Read More

Targeting by Mouse Type

Coarse pointer media query lets you differentiate between a coarse pointer (touch screens and similar) and a fine pointer (mouse, pen/tablet etc). It’s a really simple way to provide fallbacks for hover animations and other things that don’t work on touch screens.... Read More

The ol and ul Type Attribute

On ol/ul elements the type attribute let’s you change what type of numbering/bullets used. With ol set the type to “i” for lowercase Roman numerals or “I” for uppercase ones. “A” sets capital letters while “a” uses lowercase ones. On ul change the type with disc (default), circle or square. You can also use the start attribute to start... Read More

Shorthand Properties Gotcha

Shorthand properties overwrite any value that isn’t set in the shorthand. For instance, if I set a background-image and then use background: no-repeat to prevent the image from tiling you’ve actually canceled the background image because the background short hand reset it to its default value. ... Read More

Promise Low. Deliver High.

It is far better for both your short term and long term career to promise low and deliver high rather than to promise high and deliver low. And even if you promise high and deliver high, you’ll be killing yourself just to meet the client’s minimal expectations. ... Read More

Performant Animated Moves

When animating, use CSS transforms to move items around and scale them rather than changing padding/margin or width/height. Transforms will dramatically increase performance and prevent browsers from doing costly repaints.... Read More

Link Pseudo-Classes

If you want to avoid zombie attacks, the link pseudo-classes should be in this order: :link, :visited, :focus, :hover, and then :active. If you order them differently, the specificity/placement of one will override the functionality of another.... Read More

filter: drop-shadow() vs box-shadow

While you’ve likely heard of box-shadow you may not have heard about the drop-shadow filter. box-shadow does a very nice shadow, but it’s always a box. On the other hand the filter: drop-shadow() will do an exact drop shadow of the element so if you’ve rounded corners or have an SVG with some transparency or... Read More

More Ways to Respond

Media queries don’t stop at device width or height. They can also handle things like screen density, animation preferences (like prefers reduced animation) and much, much more... Read More

The Current HTML Standard

HTML5 was a major release for the HTML language. It was initially released in October 2014. It brought a wide variety of new functionality and smoother syntax to HTML. HTML4, the previous major standard, was released in April of 1998 and had only minor revisions during those 16 years. The current release is the HTML Living... Read More

Should You Open it in a new Tab? Probably Not

Use target="_blank" very, very sparingly. You should really only use it to prevent users from losing their place in a site or when they need to reference material while looking at the current page. It can annoy users if every link opens in a new tab when they have thirty-seven tabs open just for your... Read More

Less HTML is Better

Use as little HTML code as possible to achieve your goals. The less code you write the easier it is to maintain and the faster it downloads to your visitor.... Read More

Lowercase Filenames Save You Headaches

Always use lowercase for filenames. While you don’t have to do this, Linux based servers treat uppercase letters and lower case letters as different. Meaning zombie.html and Zombie.html would be treated as completely different files. Windows servers ignore case. If you ever need to switch from windows to Linux (or you’re handing a site off... Read More

Same Company. Different Browser.

Browsers from the same company can look different on different platforms chrome for windows vs. chrome for OSX vs chrome for iOS vs chrome for android can all act differently (and this isn’t just because Chrome on iOS is a clone of Safari)... Read More

Easily Find Images Missing Alternative Text

Use an attribute selector to find images without alternative text.... Read More

When in doubt, Flexbox

Flexbox is by far the easiest and most flexible solution for quick layout issues. Floating, positioning and tables have a lot of draw backs in our responsive world and lack the complexity for any but the most rudimentary layouts. Grid is far more powerful than Flexbox and excels at placing items in specific places. But... Read More

The Direct Descendant Combinator

Direct descendant selector combinator > prevents grandchildren from being selected for instance with this HTML The following CSS will only select the “goodbye zombie” link... Read More

People Skills are as Important as Tech Skills

While working on and improving your technical and design skills is important, it’s also important to work on your people skills, particularly if you would say you’re not good with people. Avoiding it lets it stagnate and makes it harder than ever for you to get along with and benefit from the relationships that website-work... Read More