How to Plan Content Arrangement For Responsive Design

In a recent post, we discussed how visual content relates to layout design. However this theme is really detailed, and splinters off into many sub-topics, one of that is visual classification for manageable layouts.

Visual Content Direction: What You Need to Know

Visual Content Direction: What You Need to Know

The manifest instruction of calm is a reduction widely discussed, though essential aspect of high-converting web design. Every…Read more

In this post, I’d like to excavate deeper into manageable calm to demeanour during some best practices for rearranging calm for smaller screens. In UI UX design, there is no singular right answer for any plan though there are trends that work well, and from these trends we can build your possess ideas.

Rearrange Grids To Lists

Every website uses some form of grid either it’s manifest or not. Content in a plain grid mostly groups together horizontally on wider monitors, though this doesn’t make clarity on smaller devices. The best pill is to mangle down these grids on smaller screens, and convert a equipment into lists.

Example 1: Wellington City Council

Take a demeanour during a website of a Wellington City Council that uses a series of grid-styled sections on a home page.

Wellington City Council Home PsageWellington City Council Home Psage

There’s a little slideshow of block links that reduces as a browser window resizes. The footer territory also becomes smaller, and eventually converts into a straight list of links.

On really little phones with 320px extent we need to pattern for a device size. In a box of an iPhone a device is taller than wider so it creates clarity to arrange calm that way.

Example 2: Mooyah Burgers

Take a demeanour during a home page for Mooyah, and try resizing a layout. There’s a little slideshow area that contains 3 equipment on a desktop screen, though this shrinks down to uncover usually one object on mobile (adding some-more dark slides to a widget).

Mooyah Responsive Home PageMooyah Responsive Home Page

The dual promotional boxes promotion a Mooyah app menu stay bound corresponding until a shade gets little enough to file them vertically.

The “Connect with us!” territory also rearranges calm so that any amicable post gets as most room as possible. Generally speaking, widescreen monitors are a widest and smartphone screens are a tallest.

Example 3: Theme Market

When conceptualizing a blueprint with a grid, we should cruise both far-reaching high blueprint styles before essay a singular line of code. This approach you’ll be prepared to build breakpoints that make sense.

A page with a full grid blueprint should reduce a distance of boxes before violation them onto a new line. For example, Theme Market has a fixed max width of 1240, and a grid contains four blocks per row.

Theme Market Home PageTheme Market Home Page

As a shade gets smaller these blocks reduce in width, though eventually break down to leave 3 boxes per row. At a smallest size, we get one box per row, and it has copiousness of room for calm imagery to shine.

There’s always a change of keeping as most info in perspective as possible total with a need to make calm readable. The some-more we build grid layouts a easier it’ll be to find this balance of calm arrangement.

Hide or Remove Columns

Wider monitors and more browser support concede developers to build impossibly formidable layouts. we mostly see blogs with three or even 4 columns that take adult a good apportionment of a screen.

However smaller inclination need a calm upsurge that makes clarity vertically. I’ve found dual options for handling extreme sidebars:

  1. Drop them underneath a categorical content
  2. Hide them altogether
Example 1: Stop Press

Take a demeanour during a Stop Press website. It has four straight columns on my desktop monitor.

The left mainstay is a straight nav menu, a subsequent mainstay is a categorical calm mainstay with new articles. Then we have dual opposite sidebar columns superfluous with additional “aside” content.

Stop Press Home PageStop Press Home Page

As a browser window resizes, these columns slowly revoke in size. The initial to go is a left navigation that gets dark behind a hamburger menu icon.

The subsequent breakpoint hides a core mainstay along with a tip amicable pity buttons. Then finally on a smallest screens, a distant right sidebar totally disappears leaving only a primary core column of content.

None of a sidebar calm appears underneath a categorical content. It’s completely dark from view, and this is a ideally excusable choice to reduce page load and to keep a scrollbar tallness during a decent size.

On a other hand, many blogs do pierce a sidebar underneath a categorical content like on Concept Art Empire that facilities associated posts in a sidebar that eventually drop next a content.

Example 2: Wishpond Blog

The Wishpond Blog also completely removes a sidebar from a shade on smaller viewports. This sidebar area typically contains advertising, signup forms, and associated post links. None of this calm is critical though it can supplement value to visitors.

Wishpond BlogWishpond Blog

I like to follow a hybrid approach where we pierce a sidebar underneath a content, though also censor a few equipment in a sidebar past a certain breakpoint.

For example, if we have 3 ad blocks in a full blueprint we might censor dual of those ad spaces on mobile. This makes a sidebar calm accessible though doesn’t confusion adult a page with extreme content.

Example 3: Madame Gautier

I also like how Madame Gautier uses their “Latest news” sidebar on a home page. It eventually drops next a content, and takes adult a full perspective position on a page.

Madame Gautier Home PageMadame Gautier Home Page

Almost any website will have during slightest one sidebar in a design. Whether this is a site-wide sidebar or only something that appears on a page template, a side-by-side pattern style is renouned since it fits some-more content on a screen.

It’s your choice how to hoop a content. You can dump a sidebar lower, censor it altogether, or use a hybrid of these dual techniques. But we should make your choice based on a aptitude of a sidebar, and a necessity to a page.

Adjust Squeeze Margins

There will always be a indicate where content can't be squeezed any further, and one territory needs to drop next a other.

By adjusting margins before obscure calm on a page, we give readers a wider extent of calm to choose.

Example 1: One World

The footer on One World is a good example. It has sitewide footer links floated right with an email signup form on a left.

One World Footer DesignOne World Footer Design

As a blueprint resizes, a margins and paddings between these elements shrink. The couple columns get closer together, and a signup form gets a little smaller, too.

Past a certain point, it only creates clarity to drop a links underneath a signup form, and give a footer plenty of room to breathe.

Yes, it does make a page longer, and yes, it takes some-more bid to corkscrew down that far, though during these smaller breakpoints we can assume users are on plumb oriented devices.

Example 2: Golden Isles

Another instance we adore is a Golden Isles home page with a unique navigation style. When we resize a browser window a nav links squeeze together. Eventually they break from a singular line into dual rows, afterwards down into columns during a really smallest size.

Golden Isles Responsive LayoutGolden Isles Responsive Layout

Other equipment on a page follow a same pattern. This instance demonstrates a energy of resizing margins before totally rearranging a layout.

Vertical Flow On Smaller Screens

Page calm should flow naturally, and vertical alignment creates clarity on mobile. This means we need to cruise in-page calm blocks to update a calm character accordingly. This includes paragraphs, headers, blockquotes, unordered lists, and also tradition calm boxes.

Example 1: Single Post

Take for instance this BodyBuilding post that uses little boxes to uncover off opposite glute workouts.

These boxes embody thumbnails on a right side to denote a exercise. On smaller screens, these thumbnails break down onto a new line, and eventually stack on tip of any other.

BodyBuilding Single Post LayoutBodyBuilding Single Post Layout

Your manageable CSS should take this little trivia into care for any page of a website.

Example 2: Vanity Fair

For a bigger example, check out a Vanity Fair home page that completely rearranges a featured story slider. On a fullscreen desktop a stories list headlines with one featured picture display to a side. As a browser resizes smaller, this tip stories territory becomes a shifting carousel.

Vanity Fair Home PageVanity Fair Home Page

The interface itself completely changes by adding dot navigation, arrows, and featured images for any story in a list. Their fullscreen list of articles is some-more “vertical”, though this blueprint is trickier to work on a mobile screen, so changing it into a shifting carousel is a improved option.

Think more about a user’s flow rather than your calm flow. Content doesn’t always need to be forced into a straight layout on little screen. Just consider about how to classify calm in a approach that supports a straight browsing experience.

Closing Thoughts

Responsive pattern is essential these days, and any web engineer and developer should know how it works. Visitors pattern all websites to be mobile-friendly. Whenever we event onto a non-responsive website we tremble during a steer of that plane scrollbar.

Follow a tips in this post for planning pattern strategies to file content for a best probable user knowledge on all devices.

Add Comment