Working as a senior designer and web developer in a digital marketing agency means moving between quite different websites. One project needs a straightforward WordPress site; another needs the detail of a Magento 1 shop. There are deadlines, existing content and people who need to maintain the result after launch. A dependable starting point is useful.
CSS3 and Bootstrap help with that, provided I use them with some judgement. They give me ways to build a responsive interface and a shared vocabulary for the layout. The work still needs a design that fits the business and makes sense to its customers.
What CSS3 changes in everyday work
CSS3 is a convenient name for a collection of developing CSS modules. The practical benefit is being able to handle more presentation in stylesheets: responsive adjustments, rounded corners where they suit the design, shadows and transitions. We can do a lot without preparing separate graphics for every visual detail.
Media queries are particularly useful. I can start with a readable single column and adjust the layout when there is enough room for something wider. I try to choose those changes around the content. A navigation menu should change before it becomes cramped, rather than because a particular phone is supposed to have a particular screen size.
I also try to keep movement purposeful. A subtle change on a button can show that it is interactive. Animating every element on a page can make the whole thing harder to read and maintain. The ability to add an effect is not much of a reason to use it.
Bootstrap 3 gives the team a common starting point
For this approach I’m talking about Bootstrap 3, with 3.3.6 available. Bootstrap 4 is still in development. I would judge an unfinished release separately before making it a dependency of a client build.
The twelve-column grid is easy to discuss when moving from a design to a page. A main section can take eight columns and a supporting section four, with both becoming full width on a smaller screen. Containers, rows and columns give that arrangement a recognisable structure.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Our services</h1>
<p>The main information belongs here.</p>
</div>
<div class="col-xs-12 col-sm-4">
<h2>Talk to the team</h2>
<p>Supporting information belongs here.</p>
</div>
</div>
</div>In this example the sections stack below Bootstrap’s small-screen breakpoint and sit alongside one another from 768 pixels. The source order still puts the main information first. I want that order to make sense when the columns stack and when someone reads the page without its visual layout.
Keeping control of the design
Bootstrap’s defaults are a starting point for typography, forms and buttons. I still need to make choices about the site’s type, spacing, colour and emphasis. Otherwise it is easy to produce something recognisable as a framework before it is recognisable as the client’s website.
I prefer a small set of clear overrides and reusable site components to a growing pile of exceptions. If every card needs different spacing, I revisit the card pattern. If a page needs a completely different arrangement, I do not force it into a component just because that component is already there.
The same restraint applies to downloads. A page using the grid does not automatically need Bootstrap’s JavaScript plugins. Its interactive plugins depend on jQuery, so I include them when the relevant behaviour is needed. The CSS grid itself does not require JavaScript.
Fitting the CMS and the shop
In WordPress, I want the layout to support the content the client can actually enter. A neat design with fixed-length headings is of limited use if the editor can replace them with much longer text. I test with real paragraphs, awkward titles and missing images before calling the layout finished.
On Magento 1, I take particular care with existing product, basket and checkout behaviour. Adding a styling framework across the whole theme can affect forms and components that were already working. I keep the scope deliberate and check those journeys after changing shared styles.
Responsive work also needs more than a quick resize of a desktop browser. I check navigation, forms, product options and reading on the devices available to me, and agree the browser requirements for the project. A layout that looks fine in one screenshot can still be uncomfortable to use.
A foundation that leaves room to think
I like the speed that a shared foundation gives an agency team. It leaves more time for the details that belong to the project: the message, the content hierarchy and the way someone moves towards an enquiry or purchase.
For me, the useful combination is a consistent layout underneath a considered design. CSS gives me control over the presentation, and Bootstrap removes some repeated layout work. I still need to decide what the website should do and whether the finished result makes that easier.