Six Random Moments Of “Aha!” In Web Design

Aha In Web Design

We thought we’d share a few silly little tricks or ideas that solve a lot of problems in a small amount of time, or just look knock-out cool for very little effort…

#1. Using a “position:relative;” div tag on the outside of a “position:absolute;” See, normally, the ‘absolute’ attribute in CSS makes the element stay stuck to a spot on the web page as if it were nailed there. And that happens no matter how many nested floating divs you stick it in. Until you make the div just outside of that one say “position:relative;”, then your absolute element finally says “Ooooh, so THAT’S what they want me to do!”

#2. Git cures cancer. We’re talking about the distributed version control system software. It isn’t just for kernel developers; it’s great for any code project anywhere by anyone. It isn’t even just for teams; learning and using Git will help just one developer stay organized and focused. That’s because it has the ‘branch’ and ‘checkout’ features, so it acts like a nice code maid and handles the mundane tasks of patching your source code for you.

#3. CSS animations, shadows, and gradients. Used sparingly, they’re a little dash of panache in the otherwise dull sea of whitespace and text. Don’t let the fact that too many design majors overuse it stop you from appreciating when it’s tastefully used.

#4. Inline-block element display. Useful for chunks of data like images or pullquotes in the middle of a paragraph. Half the time new designers are struggling to make floating divs behave when what they really want is an inline block.

#5. Using “overflow: auto;” for responsive div containers. Now if the screen is too small to see all of some block, the scrollbars just pop in automatically. They disappear when the screen is big enough (or the font size small enough, if we’re dealing with text) to see the whole thing at once. You’d think this would be first-year design-student knowledge, but a brief tour of blogs out there that have text and images slopping over into the sidebar will show the contrary.

#6. The fact that typography only matters about 5% as the web design community thinks it does. Seriously, there’s about four fonts you can use. Let the browser do its own kerning and spacing. What a relief! Free of arguing for weeks at a time about whether the handles on the capital ‘H’ in Helvetica jab too much into the previous sentence.

You may also like