Responsive Web Design: Custom Grid Layouts

This entry is part 4 of 4 in the series Understanding Responsive Web Design

In the last few parts of the responsive web design series, I have introduced the characteristics of fluid layouts and I have described how to use fonts responsively. In this article, I want to introduce grid layouts, a widespread and popular design practice. While grid systems have seen significant use in printed media, interest from web and mobile developers has been a very recent development.

A grid is a two-dimensional structure made up of intersecting vertical and horizontal divisions used to structure content. Grids serve as the framework on which a designer can organize text and images into a rational, easy-to-absorb interface. A well-built and properly-implemented grid system increases scalability and improves the readability of the content on a website or within a mobile application.

The advantages of grid layouts are numerous; a grid structure…

  • gives order, originality, and harmony to the presentation of content;
  • allows users to predict where to find the information they need;
  • makes it easier to add new content without having it looking disjointed or marginalized.

To develop a well-built grid layout, the first step is to create the canvas structure itself. It’s the canvas’ size that determines the grid’s frame: it is divided into the number of columns the designer wants (3,5,9,12) and this is the starting point to work on your interface or layout.

The size of a grid does not have to be defined with fixed parameters. A common and proper practice of design for this type of layout is to let the content define the space occupied by the grid, and notvice versa. In this case, “content” does not refer solely to the text; it also refers to everything that has value within an interface, including images, video, text, ads, links, and more. Rather than trying to hammer a variety of content sizes and types into a predetermined grid, you should design your grid around the size and nature of your content. Within your customized grid structure, the layout is divided with vertical and/or horizontal guidelines that provide a consistent organization of space. Once you define the margins and the spacing for columns, your grid will become a clear, logical, and useful organizational schema for your multifaceted mobile content.

Online Tools

Web design frameworks built upon HTML and CSS had become quite popular before newer, more robust frameworks popularized the use of grid-based layouts. The Internet is full of useful models and frameworks with CSS rules that help designers to create a simple, fast, and efficient grid layout for almost any purpose. Some layouts are flexible, others are quite rigid (after all, they are designed to constrain content). Some of them have between three and five columns maximum, while others have between 12 and 16 columns. I bring up the variety of grid frameworks to emphasize that they’re not all the same, and further, there are grids that are inherently better than others. However, to fully understand the benefits of a grid-based approach, you should consider a unique pattern and purpose for each project you have to develop. You should not be afraid to try a variety; remember, simplicity is often the winning design.

On the web, there are many useful grid resources to help you build a properly-proportioned layout or interface for your projects.

  • Grid System 960: A tool that lets you create websites using a grid of 960 pixels. This number was chosen because it allows easy division into a variety of columns and rows.
  • Gridr Buildrrr: A tool that offers precise control over borders, margins, and box contents for custom projects.
  • Design by Grid: A magazine that publishes articles and tutorials on the creation of grid-based designs.

Continue reading article here.

The new rules of the responsive web

Responsive web design has become a near ubiquitous buzzword on the web. Try searching for #rwd on Twitter to find equal parts content and Twitter spam. This is a common phase in the maturing of a new idea. I remember when AJAX was all the rage; the term got driven into the ground. Now, few people talk about AJAX but libraries like jQuery are fully embraced in a developer’s workflow.

This seems to mirror what’s happening to responsive web design. The term is everywhere. A friend of mine is in magazine publishing, she went to a conference recently, and an editor for a well-known new magazine was talking about upcoming trends and mentioned responsive web design. Editors may not be web professionals, but they know the buzzwords.

As responsive web design gained steam, the way we build websites changed. As the term moves from buzzword into a common part of every web design project, the way we work as web professionals needs to change. With this in mind, we need to lay some new ground rules for how we work.

Rule 1: Don’t stop at “squishy”
When somebody tells you to “check out this responsive site”, what’s the first thing you do? You probably scale the window to see how the layout changes. I’m probably not going to open it in my phone and tablet and start changing orientations or start running page speed tests. I scale the browser and move on with my day. This is our experience as designers and developers, but not as users. When I visit a site as a user, I have no patience. I don’t care if the site squishes nicely; I just want the thing I want.

“Squishy” is a linear scaling of a website. Does the site go from skinny to fat? Instead of linear scaling, responsive web design should focus on establishing a site core and progressively loading from there, based on capabilities. Imagine a site that had to be built for a tiny cellphone running IE7 on an EDGE network. That should be your core site and then scale up based on screen size and capabilities.

Rule 2: Don’t look for an easy way out
Responsive web design is complicated. That’s just how it is. I wish there were something I could tell you to make it easy, but there isn’t. Most people have responded to responsive web design by adding something to their workflows, whether it’s a new deliverable or just going to a developer and asking whether their design will work responsively.

I have a friend who’s working on a responsive site for a client. She’s building the site in Photoshop in desktop size. After a few mockups on some pages, she wanted to show what the site would look like in a tablet and a smartphone, so she did those mockups too. After presenting to the client, she was given some creative tweaks. There are about 50 PSD files for this site at this point. It takes her a few days to revise the layouts.

Trying to add new designs alone will result in a time consuming and inconsistent process. One of the best ways to solve this is by prototyping your wireframes and presenting those to your client. This gives you a deliverable to speak directly to the site’s layout without simultaneously talking about the design. Foundation by ZURB is a great tool for building prototypes quickly.

Simply adding prototypes into your workflow won’t be enough though. In order to succeed in building responsive sites, you need to adjust, which brings us to the next rule.

Rule 3: Embrace change
When I first started building websites, I used two tools, Photoshop and GoLive. Now I have at least six programs that I absolutely require in order to build a site. I still use Photoshop for creating graphic elements, but I mostly design in the browser with Sublime Text 2 and I use Safari’s developer tools to inspect elements on my iOS 6. I also use Codekit to compile my pre-processed CSS and Terminal for version control in Git.

Continue article here: The new rules of the responsive web | Webdesigner Depot.

Design Responsively With Malleable Mobile Menus

One of the biggest challenges in responsive web design is getting your menus to function. If you’ve ever had to mess with it, you know what I’m talking about. You can use media queries to define CSS that applies when the screen size is various sizes, but sometimes you need extra functionality to pull off an ideal design.

What Is Mobile Menu Design?

Mobile menu design is simply getting the menus for a responsive design to fit mobile screen sizes. One of the core concepts around responsive web design is making all content available all of the time on all screen sizes. Just as importantly, we want to only publish content once — not create a “mobile version” of our content as well.

So, creating responsive menus that allow for lots of menu items that work in all screen size scenarios is important.

Why Use Mobile Menu Design?

Large and even not-​​so-​​large navigation menus take up a lot of space on a small screen. Ideally, you can compact the menu items while also making the menus usable. Too small and the user can’t see them or may struggle to touch the buttons. Too large and we’re making our users scroll, and scroll, and scroll some more.

So, mobile menu design becomes an important usability task.

Continue reading article here: Design Responsively With Malleable Mobile Menus – DesignFestival.