Hello! I’m Ben Gremillion, a writer with a design and development background. See where I’ve written or read samples of my work:

Laying Out A Flexible Future For Web Design With Flexbox

teaser image

CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s. But the future of web layout is bright, thanks to flexbox.

Get the angle in this article I wrote for Smashing Magazine

Don’t Fear the Command Line

teaser image

Complex products rely on more than HTML and CSS. They need strange technologies with exotic names like Git, Grunt, and Bower. And they operate in that mysterious land called The (Dreaded) Command Line.

So how does it work? How much trouble can we cause by typing “sudo mkdir ~/Sites/project1”? We’ve found that understanding is the first step in acceptance, so we want to share with you what’s going on. Here’s how you can unlock basic mysteries of the Terminal — and understand what commands like “foundation new dirname” actually do.

Take command in this article I wrote for ZURB

Creating a Fly-in Navigation

teaser image

Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context — they’re not just things that appear out of nowhere. They’re hidden just out of sight, ready to help users get around when the need arises. Here’s how to prototype a far more interesting nav menu.

Take flight in this article I wrote for UXPin

The Code Side of Color

teaser image

When computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. That is, 16,777,216 unique combinations of exactly six characters made from ten numerals and six letters — preceded by a hash mark. Like any computer language, there’s a logical system at play. Designers who understand how hex colors work can treat them as tools rather than mysteries.

Unravel the code in this article I wrote for Smashing Magazine

Grid Small, Grid Medium, Grid Large

teaser image

Foundation for Site’s grid is based on tried-and-true CSS — specifically, floats and clears. We developed the grid’s syntax to make layout easier. That is, instead of writing endless floats and clears for each different layout element as they cropped up, we only want a few quick instructions. These instructions spell out how the layout should change depending on the size of the screen on which it’s viewed. Here’s how it works …

Get the lowdown on layouts in this article I wrote for ZURB

The Weight of a Pixel

teaser image

Reading comics online should be as easy as turning pages in a real book. Tap, load, done.

Waiting for pages to load interrupts a comic’s narrative, and even if a reader’s just tapping the “random” button, they’re not doing so to watch paint dry on glaciers in January. That metaphor doesn’t make sense, so if you get nothing else out of this, remember that readers like fast sites.

When we started making Grawlix, we asked ourselves “how can we make it load faster?” Then we turned it around: “what makes it load slower?” Turns out that the biggest barrier is the comic itself. Giant, detail-rich graphics hog bandwidth like a pig down a firehose. That makes even less sense than the glacier/paint quip, so let’s just say that one of your goals as an artist in a digital medium is to balance file size with image quality.

Learn to slim down every pixel in this article I wrote for Grawlix Comix

An Expert Roundtable Discussion on Responsive Grids


While presenting information online is a design problem, the challenge of making it work is technical. Web designers use CSS frameworks to focus more on the former and worry less about the latter, just as grids — a staple of design — provide guidelines for layout. But responsive design needs to do more than create columns and rows. When a medium changes, what happens to its tools? We talked to three experts about the issues and challenges facing grids for web design.

Glean insiders’ opinions in this article I wrote for Team Treehouse

Get Real with a Semantic Grid

teaser image

CSS frameworks are great for setting up responsive grids, but often require extra markup, usually in the form of presentational class, that makes source code hard to decipher. Using nothing but div elements make code more confusing — which </div> belongs to an open <div>? And isn’t "product-list" easier to figure out than "large-block-grid-3" ?

Semantic HTML uses markup to describe content, making information cleaner and HTML more meaningful. Elements like <article> and <aside> indicate to browsers, screen readers and search engines what content about. Here’s how to create your own semantic grid based on Foundation.

Learn to turn mess into meaning in this article I wrote for ZURB

My Hard Drive Crashed … and What I Learned From It


During an emergency is a bad time to plan for one. It’s the feeling one might get jumping from a plane before checking one’s parachute. That’s one experience I’d rather avoid, but it happened. Not the skydiving part. My OS was dying, and I wasn’t prepared.

Read the horror story in this article I wrote for Smashing Magazine

Responsive Design of the Future with Flexbox

teaser image

In CSS, float and clear serve for layout much the same way as the tables they replaced: As stand-ins that work well enough. But they’re still limited. One proposed solution is called the CSS Flexible Box Layout Module, commonly called the Flexbox.

Get visions of the future in this article I wrote for Team Treehouse

A Look at Responsive CSS Frameworks


Pre-built frameworks get designers up to speed with a limited methodology rather than spending time building an intimate knowledge of CSS positioning. It’s easier to figure out what “.row.span-4” means than figure out codes that each version of every browser agree upon.

Today’s frameworks have an added feature: The ability to change when viewed on mobile devices. I reviewed 15 responsive CSS frameworks to see how each approached the problem of adapting to mobile.

Peruse the many options in this article I wrote for Team Treehouse

Progressive Enhancement

teaser image

Responsive web design typically takes a top-down approach: Design for desktop, then pare back for mobile devices. Unfortunately the result carries a whiff of “if you were on a real browser … ”

Start from the inside in this article I wrote for ZURB

Skeuminimalism


Thinking back, it’s hard to remember how much trouble computers once caused people.

People needed help learning to integrate computers into their work, and later at home. Interface designers used visual analogies — icons in particular — to help people relate to abstract computer functions. They took from the physical world and created their counterparts in the digital world.

Mix the best of two styles in this article I wrote for ZURB

Source Order


In a perfect world, designers could arrange the elements of any HTML document, however they want without changing what it means.

We’re not in that perfect world yet. It’s 2013, and we haven’t seen so much as one rocket pack, much less lunar cities, robot butlers, world peace and meals in pill form. But we can control, to an extent, the order in which elements appear in a Foundation row. Our responsive framework lets you rearrange elements visually without editing HTML.

Shuffle responsive layouts in this article I wrote for ZURB

When pages are not paper: The designer’s guide to layout code


Everything on a web page, from paragraphs to images to links to bold text, resides in invisible boxes. These boxes come in two varieties: block and inline. The difference between inline and block lies in their behavior. The difference between print and web design also depends on their behavior.

Having done both, I remember the frustration of having to program layout when I used to just move a box where I want it. Fortunately, how web layout works is not hard to grasp.

Decipher layout code in this article I wrote for Webdesigner Depot

Sources

UXPin: My day job involves writing and illustrating tutorials, creating instructive videos and copy editing articles as needed.

Smashing Magazine: I write on a variety of topics for this popular online publication.

Team Treehouse: I wrote freelance articles that focused on responsive web design — particularly layout.

Webdesigner Depot: For this online publication I wrote freelance articles.

ZURB: Full-time job at which I wrote weekly tutorials and other articles, moderated webinars twice a week, researched industry statistics and copy edited the company blog as needed.

Grawlix Comix: The official blog for my “second job” called for a more tongue-in-cheek voice than my usual work.