EPISODE:
8

  

FRAME TOOLS PRO GUIDE: PADDING & ALIGNMENT


Padding and alignment are perhaps one of the most critical aspects in the structure of any web page. Though, it is not always easy to perfect and it's certainly one of the first thing to get messed up after a site has gone live and the original design team has as become a distant memory.

You may have heard people talk about having a 'design eye', with some people more accustomed to the finer details of form and function. You may have also heard of designers saying that they are 'pixel perfect' and they love to be pedantic to ensure every last detail is spot on. Well, much of these finer considerations are attributed to the skill, patience, and perfection that comes with padding and alignment.

When managing a website there are clearly two constituents at hand, we have the original designer and then the ongoing content editor or business people. When building MOBLE, we knew we were building a tool for businesses. We thought long and hard about how we could handle these two constituents, we often referred to them as the 'before live' people and the 'after live' people, those designers who striving to be pixel perfect and those ongoing revenue generators without a design eye. We knew that both are critical to a successful website and neither could be undermined.

In this Episode, we look at how MOBLE has restricted the amounts of padding available in the Page Editor and why this is actually a great advantage for web designers, who ultimately, must have to hand the designs over to their clients. We look at how we have created a solution that offers great flexibility to design anything, but at the same time locks down the design so that business people and junior content editors have the confidence that they won't accidentally damage the beautiful work. 

A website designer often starts their design in Photoshop, a tool that lets you create page mock ups with rows, columns, and gutters to the absolute pixel. Being one pixel out on one column could compound quickly and through of the rest of the design. Though in code and a modern day Framework this does not need to happen. Columns can be set to certain pixel width and there are certain break points that stack the columns for mobile and tablet devices. With code, things got a whole lot easier, and as we discovered in Series 1, have really made the photoshop phase obsolete.

Similarly, I'm surprised to see how many website builders there are that have tried to replicate photoshop and give granular control by dragging elements to the pixel level. This might be good for the initial designer, but it is a minefield when handed over the content editors. Neither the designer nor the content editor has the time for this problem.

At the whiteboard when we creating MOBLE this dilemma was top of mind. To solve it we knew we would first need to create our own frame work (grid structure) and we looked at hundreds of websites to see commonalities in pixel widths of columns and gutters. When we broke it down, and with some simple math, we realised that we could restrict padding to 5 sizes and then offer these to the top, bottom, left and right of a Frame. The 5 sizes are:

  • Off: 0px
  • On: 16px
  • Wide: 32px
  • Wider: 48px
  • Widest: 64px

With this in mind designers still had enough granular control to create anything. Though they would have the peace of mind that with these basic divisions the content editor could not go too far wrong, and have the capacity to know if something did not quite look right, even if they didn't have a 'design eye'.

To test this assumption we had to build a quick User Interface. The first incarnation of MOBLE was two primitive drop down lists on the Frame. The first: Top, Bottom, Left, Right. The Second Off, On. Wide, Wider, Widest.

While primitive, this was enough for us to test the assumption as to finding the happy medium between design and management. The outcome was that designers appreciated our consideration in thinking about the Live phase, and content editors felt empowered with less fear of breaking things.

With the sufficient feedback we set amount building the padding and alignment tool that is available on every Frame of MOBLE CMS today. It allows you to visually control the padding, along side the actual Frame. While we still have several items on the roadmap for improvement, today the tool is extremely solid, and it looks like this:

64px

The red dot identifies the Frame that is open. This Frame is set to 64px to the Top, Bottom, Left and Right, you can click on the Padding tool to light up the cells, applying to padding via a neat visual interface.

16px

Here we see a Block with padding set to 16px around the Frame. Notice that the 16px cells are turned on, with the cells outside it turned off.

The MOBLE padding user interface is a simple tool that has been designed to solve a real world problem. We encourage both designers and ongoing content managers to use the tool and offer feedback. We feel that designers have an easy task of creating layouts with their preferred padding and alignment well defined, ensuring that content editors only have to drag and drop Layouts to start editing. Though it's inevitable that content editors will need to amend certain Layouts to suit new types of content in the future. When they do they will have an easy task of keeping the design in line with the original branding to ensure long term consistency.

Let us know your thoughts and please, also check out MOBLE's live workshops that are running throughout 2017 and 2018. We'd love to get your feedback and work with you to find better ways to solve the everyday challenges we face.