Simple Parallax Header

Jun 19, 2015 8 Comments parallax, jQuery, CSS3, Tutorial So these are everywhere. I've seen hundreds of different ways to pull them off, and each claims to be the definitive one. This is not that parallax effect. I set a goal for myself to accomplish an efficient, effective parallax header in 15 minutes or less. What follows is the fruit of that labor.

20 Years for

Jun 02, 2015 1 Comment A milestone for one of the titans of web design. Thanks for two decades, sir. Here's to two more.

UX Exercise: Building a Responsive Survey

May 19, 2015 5 Comments UX, UI, Cats This is something I've done multiple times during client work, and thought it would be a fun read for those of you who enjoy UX/UI design. We're going to piece together a survey that walks folks through picking a pet. For the sake of simplicity, we're limiting the parameters to dog/cat, size, and fur length. Ready?

May 05, 2015 link, MODX This is a great resource that I've been desiring for quite a while. MODX news & articles on a somewhat regular basis, but outside of the corporate blog. Woohoo!

The Power of :checked

May 04, 2015 3 Comments CSS, No Javascript The humble :checked state is often overlooked unless you're building a form, which is a downright shame. There's so much we can do with it! Anything that has two or more states (think boolean values in jQuery, if statements etc) has the potential to be done with :checked.

A Fresh Coat of Paint

Apr 21, 2015 redesign I got the itch again. Feel free to browse around my shiny new website—there's a brand new look, a bunch of new content, and the same focus on simplicity & usability.

Google-style Pure CSS Loader

Sep 10, 2014 Google's loading animation is quite nice, flipping a circle over on itself while it cycles between some bright, Google-esque colors. My main issue has always been that they continue to use a low resolution animated GIF for it. BOO. Let's do it in CSS.

Pure CSS Long Shadows

Aug 21, 2014 6 Comments While a design fad they are, long shadows are still a cool visual treatment—and they're surprisingly easy to pull off with pure CSS.

Creating 3D Text with Text-Shadow

Jul 18, 2014 5 Comments CSS3, Typography Playing with Codepen is fun. Every now and then, I do something silly there that might actually have an immediate practical use—and that's the case with this little tut. We're going to create a 3D effect for editable text, using only the text-shadow property. And then we're going to add something really fun on :hover. Read on, fearless coders...

Improving the Drawer Menu

Jul 02, 2014 2 Comments Wow. I seem to be fixated on navigation lately. Anywho - on to the topic at hand. One of the problems with the popular "drawer" style menu is that its width is limited, creating no extra room for drop-downs or fly-outs. This makes complex, multi-level menus difficult. Let's see if we can't fix that.

Playing with Hamburger Icon Animations

Jun 23, 2014 12 Comments I find myself using hamburger icons a lot (see my previous tutorial, if you don't believe me) lately. Let's ignore the debate on using them for a second, and realize that they present a fun opportunity to play with CSS animations - and I've done just that. Let's play!

Pure CSS Drawer Menu

Apr 23, 2014 27 Comments Unless you've been living under a rock for the last 4 years, you know about the "drawer menu" navigation style. It was popularized by the Facebook app a few years back, and has since made it into the standard toolbox of almost every web designer out there. Let's make one without Javascript, just for the heck of it!

Time for a Free Logo

Nov 25, 2013 In the area of self promotion, I usually let my work and contributions to the web design community speak for themselves. That being said, I'm putting a toe in the waters by trying to collect some likes for my Facebook page. Would you like a free logo?

What CMS Will My Client Like?

Nov 20, 2013 When left to my devices as a developer, I tend to choose a CMS simply because I am familiar with the process of using it to bring a website to life. I don't really consider (from my end) how intuitive or pretty the interface is, or how simple it is to do basic things like create or edit a page. However, as my clients' developer, I have to consider this, as they will be the ones maintaining their site once my job is complete. With that in mind, here's a basic look at some of the major offerings out there, from the client's perspective.

Responsive CSS3 Lightbox with No Javascript

Nov 01, 2013 131 Comments When pushing the boundaries of what is possible with CSS, it's always fun to try and eliminate extra elements from our code. In this case, I'm going to get rid of the javascript that is so often used when a lightbox is needed. We're also going to add some fancy animation, and while we're at it, let's make this sucker responsive too. Oh - and we're not going to use any media queries. Curious now?

iOS7 Style Pure CSS Toggle

Sep 19, 2013 32 Comments I see these switch-style toggles everywhere lately - maybe it's the influence that iOS has on the design world. The source of the trend aside, I see a lot of folks using javascript to create them. This seems a little silly to me, since the HTML and CSS to accomplish them already exists (and is well supported to boot!). Have I piqued your curiosity? Read on, intrepid coder.

My Take on iOS7

Sep 10, 2013 Disclaimer: I have in the past been called an Apple fanboy. I resent that term on the basis that I like Apple for a very good reason: they take design seriously. I've been using the iOS7 beta for the past few months, and I've got some definite opinions.

Accepting Design Critique

Jun 25, 2013 2 Comments Here's the deal with being creative: it's completely subjective. I don't care if you're an artist, a design student, a composer or the next freaking Hemingway. Because of the subjectivity of your work, it is completely open to critique—whether you like it or not. Scary? Stop biting your lip—let's talk through this.

Dead Simple Pure CSS Loading Spinner

May 23, 2013 44 Comments Pretty much every piece of software out there has to process something - and if it's not instantaneous, the user probably needs to know that it's at least working on it, right? Right. That's where loading spinners come in—and today, I've got one for you that uses only one div and one CSS class (along with a pseudo-element). It's the most code-minimal I've seen, and uses not a single image in the whole thing. Ready?

Styling Form Radio Buttons

May 13, 2013 18 Comments Last week's post about styling form checkboxes received a lot of interest—and a common request: Can you do the same type of thing with radio buttons? I'm happy to say that this is indeed the case. Curiosity piqued? Let's explore this further, good reader.

Styling Form Checkboxes

May 06, 2013 4 Comments One of the many challenges of web design is creating easy to use, pretty to look at forms. Yeah, I know—forms are boring and difficult to style consistently. But they don't have to be. Let's take on one of the more difficult to style elements: a checkbox. Oh—and we're going to do this without javascript. Scared? Don't be.

Moving from Print to the Web

Apr 18, 2013 printdesign, webdesign If you looked at the design industry a decade ago, print design was going strong, and online was considered an (albeit large) niche. Fast forward to present day, and the opposite is starting to become true—and many print designers are finding out that in order to stay relevant and valuable to their market, they need to learn to create for the web. Are you there? Read on, good citizen, for I have gone through this, and would love to share the experience with you.

CSS3 Bubble with no Images

Apr 09, 2013 4 Comments CSS3, Bubble, Tutorial Just like the ribbon banner from last month, this little tutorial doesn't serve much of a practical purpose—at least not on its own. I simply wanted to see if I could accomplish the task of illustrating a bubble (think soap bubble, not speech bubble) using only CSS3 and extremely minimal markup. Success was only a few box-shadows and pseudo-elements away.

Why not Wordpress?

Mar 27, 2013 24 Comments modx, wordpress At some point, every developer has to declare their [primary] allegiance to one CMS or another. They are an essential part of the modern web, and help our non-savvy clients maintain the sites we design long after we have moved on to the next project. I've used a couple in my day (good and bad) and I find myself entrenched firmly in the MODX camp. Bring it on, Wordpress nuts.

Pure CSS Ribbon Banner

Mar 21, 2013 24 Comments css, tutorial Every now and then, I set a coding challenge for myself that may be a bit unrealistic, just to see if I can accomplish it. It helps me grow as a developer, both because I have to be creative and because it usually necessitates some research. Today, the challenge is to create a ribbon banner with pure css and html. No images allowed.

Where is Apple's Mobile Site?

Mar 17, 2013 12 Comments apple, mobile, opinion There’s not a person out there who can deny that we are rapidly progressing into a mobile-dominated internet. In response, sites are being redesigned to include responsive layouts, the respective app stores are exploding with new and innovative products from all corners and our daily analytics are showing more and more visits from mobile devices. It’s a new world out there. Who do we have to thank for this? I would argue that there is one primary catalyst for this: the original iPhone.

My Toolbox

Mar 14, 2013 2 Comments webdesign, tools Every 5 seconds, I see a web design blog publish a list of "17 web design tools that will completely change the way you work in every way imaginable." Screw that. I'm not interested in a huge list that I have to hunt through to find something that fits into my workflow.

Creating an iCal feed in MODX with mxCalendar

Mar 11, 2013 4 Comments modx, calendar This one isn't for the faint of heart, but I just spent a while getting one up and running and wanted to share the experience. If you're a MODX fiend and want a great feature for your site, read on.

Dead Simple Dropdown Menu

Mar 08, 2013 9 Comments css, dropdowns, navigation If you're just starting out in web work, chances are you'll be asked to design a site with a drop-down menu. I spent a while perfecting my preferred method, and now young Skywalker, share it with you I will.

Getting Tough with Clients

Mar 07, 2013 clients, design, link Couldn't agree more.

Welcome to the New Designcouch

Mar 07, 2013 2 Comments It's been almost 4 years in coming—and let's face it, probably half a dozen designs that never completely satisfied me—but it's finally here. Welcome to the new designcouch site.

Red Light, Green Light

Feb 27, 2013 In every career field, be it surgeon or waste management technician (hehe), there are pitfalls aplenty, as well as secrets to success. Web design is no different - as a matter of fact, there may be more potential problems for web designers than most. I've had enough time to amass quite a few experiences, so now it's time to pass a on few things to those of you who are just starting out.

Responsive Design is Not a Fad

Feb 21, 2013 All across the web design universe, the new hotness appears to be "responsive design". As soon as Ethan Marcotte uttered those magic words, they swept over web designers as if it was some great epiphany that we all had together: "Let's make websites work well on all devices!" My inner teenager wants to give you all a sarcastic smirk and exclaim "DUH!"

More Articles