We released Analog Camera yesterday!

This is the first page of the new Realmac site to go live, so there’s a few bugs to iron out, but I’m pretty please with the responsiveness of the page.

As I build more and more responsive sites, my processes are refined and improved each time. One that I’m finding really works is to create as many “front-end modules” as possible.

A module is anything on the site you want/need to make reusable — navigation, heading, highlights, lists, anything. Each module independent, it’s not tied to any parent element and doesn’t negatively infringe on any other elements.

To achieve this, I split out the PSD and focus on building one element at a time. I build each element on a blank page, creating the HTML and applying only the CSS and JavaScript that’s needed for that element; a one element mini site site if you like. Once I’ve tested that mini site, I begin to integrate it in to the main site.

Modularising everything is giving me the flexibility to move an element around whenever needed — no longer is the navigation tied to the header, as a module I can move it to anywhere on the page without breaking the layout.

This is really powerful if you’re using flexbox in responsive design: I can confidently reorder elements without worrying about breaking the page layout.

I’d like to see designers move away from designing full page layouts and start designing individual modules — long gone are the days where a 1024 x 768 PSD is sufficient. We should be designing around the fluidity of the web.

I’d recommend reading Jonathan Snooks’ SMACCS, as it really got me thinking about how I could modularise all my front-end work, not just my CSS.

I wrote a post over on the Realmac Blog yesterday: Why Native Is Winning.

I keep reading blog posts and tweets that insist you can build web apps that look & feel as good as native apps, but I’m not convinced you can.

I share my thoughts on the current state of Native vs Web app development. Have a read and let me know your thoughts.

I’ve been reading up about grid systems recently, and trying out the numerous frameworks out there, and came to the conclusion to write my own system.

I wanted a focused, descriptive system that worked for the project. I didn’t want a bloated, non-descriptive .span-{number} based system that’s trying to do-all-the-things-in-all-the-situations.

The best article I found on this was Harry Robert’s “Responsive grid systems; a solution?”. In it he goes through the same technique I decided upon: create re-usable, descriptive classes, that aren’t restricted to within the grid system.

The easiest way to make one thing behave in multiple different ways is, simply, multiple style hooks (i.e. classes). To make one thing behave in a variety of different (and opposing; remember, a grid cannot be full-width and half-width at the same time) ways is to have a separate class for each of those states.

That sums up the technique I’m using. The idea is that you create breakpoint specific classes and stack those up on any element. So if I have a list that I want to be in single row on widescreen, but in a 2x2 grid on medium screens, my HTML might look like this:

<div class="grid">
    <div class="grid-item wide-one-quarter medium-one-half">[…]</div>
    <div class="grid-item wide-one-quarter medium-one-half">[…]</div>
    <div class="grid-item wide-one-quarter medium-one-half">[…]</div>
    <div class="grid-item wide-one-quarter medium-one-half">[…]</div>
</div>

My CSS would be something like this:

// Structural Grid classes
.grid {
    // Clear fix
}

.grid-item {
    float: left;
    […]
}

// Width Classes
@media screen and (min-width:[widescreen break point]){
    .wide-one-quarter{
        width: 25%;
    }
}

@media screen and (max-width:[medium break point]){
    .medium-one-half {
        width: 50%;
    }
}

You’d need more CSS than that to make your grid work, but you get the idea.

Some might be a little hesitant to stack that many classes on to elements, but I think it makes my CSS more manageable whilst making my HTML more descriptive.

My custom grid system for the new Realmac Software site is concise, readable and creates only what’s needed for the content. It was well worth investing the development time, and I’d recommend anyone to do the same.

Additional Reading / Resources

• Don’t Overthink It Grids
• Don’t just choose a grid. Design it!
• Gridset - Design your own grids

Just watched the Responsive Navigation talk by David Bushell. Responsive navigation is hard and I don’t think there is one solution that works everywhere, but I do like the slide-in pattern for phones and it seems to work in many cases.

The problem with menus is that often every page is just chucked in to a main navigation bar without thought of how the content could be used to navigate the site. I think simplifying your navigation and using your content to greater effect is the way forward. It’s certainly something I’m striving towards on my current project.