An evolution of the web design workflow


Error message

  • Deprecated function: Array and string offset access syntax with curly braces is deprecated in include_once() (line 20 of /homepages/15/d828134328/htdocs/pixelminds/includes/
  • Deprecated function: Array and string offset access syntax with curly braces is deprecated in include_once() (line 3493 of /homepages/15/d828134328/htdocs/pixelminds/includes/
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /homepages/15/d828134328/htdocs/pixelminds/includes/
Looking beyond Bootstrap towards bigger freedom and control
A web design workflow for higher expectations

One good day, we discovered Bootstrap as a panacea for a web design workflow. However, we soon had the feeling that we still needed to invest too much time to adjust the interface to our needs. Or maybe we succeeded in quickly getting a finished product, but it just looked like so many others. It's time to take it one step further and move to the next level.

The problem

In my learning process I've been rethinking everything and crashing against the same problems, all related to the use of a third party platform or template:

  • Dead-end feeling. The use of templates usually involves a healthy intention to save time. If you find a design that comes close to what you have in mind, it may fit in with few adjustments. But as soon as you need to walk away a bit or add some extra functionality, they start to break or some part stops working.
  • Lack of control. Work done by others has to be very well structured and commented so that one does not end up lost. And the worst thing is the feeling that there is an important part of the framework or template that you could ignore or discard, and that is unnecessarily hurting your productivity and page performance.
  • Frustration as a designer. Facing the fear of starting from scratch, we find the opposite feeling. The customer is unhappy, and he blames it to your low designing skills. The overall details are inaccurate, and you feel like only part of it is your job.

Exploring Alternatives

Moving one step ahead means basically cleaning the toolbox and sticking to the essential, namely:

  1. A base layer of graphical consistency and browser compatibility, which we can call a reset.
  2. A minimum palette of graphic elements on top of the basic elements offered by the operating system or browser. This includes typography control, line spacing, buttons, etc.

  3. An adaptive structure, or positional control that does not depend on HTML tables. It must be responsive, because of the predominance of the mobile clients and the servitude of the SEO (search engine positioning).

  4. A collection of modules or interactive elements in response to our needs or desires as designer or those of our client: navigation, animations, image display, video...

All these are included in frameworks such as Bootstrap, UIkit, Skeleton or Foundation, but besides the problems mentioned above, we have two major drawbacks:

  • Divitis. These systems normally force nesting div's on multiple levels. An excess of nesting makes the product heavy and more fragile, plus they do not reflect the actual structure of information. They just exist for the sake of specificity in CSS code.
  • Classitis. Added to the above problem, there is a proliferation of classes related to the graphic rendering or to the variable formats (breakpoints). This produces an uncomfortable mix of structure, content and design that makes maintenance difficult, and even worse to achieve task separation: designer, author and programmer work on the same element.

The tool set

In order to keep structure, design and content apart from each other, I believe we need to leave content with a minimum structure, and only with the essential classes to achieve our purpose. Therefore, we will seek a semantic grid (such as Neat or Susy) and a well organized stylesheet. We may achieve greater precision in less time, although there is a small learning curve. In my previous article, "A web development workflow for designers" I exposed some thoughts on the need to organize an efficient workflow, and suggested some tools. I have kept on testing tools, and I think I should explain why I have decided to replace some of them.

  1. The editor. Syntax coloring and code auto-completion are essential for efficient programming, and that should be default for major languages and preprocessors. Although I keep Brackets in my toolset, the main place is now occupied by Visual Studio Code, because it incorporates a terminal and Git version control. It is free and there are hundreds of modules to add languages or functionalities.
  2. Preprocessors. Prepros is still my choice. You can use a CLI (command line interface) environment, including Ruby or Node, with workflow management tools such as grunt, gulp, bower, and all components, but it is prone to error, and can be a bit frustrating. In fact, for some components there is no other option, but the GUI alternative of Prepros solves all problems with less work, and does not need configuration; just install and go. Basically, it works like the black box that is responsible for converting everything into simple HTML, CSS and JavaScript.
    A short point on static page generators: we've been testing multiple Node-based options (Metalsmith, DocPad, Assemble) and some alternative solutions on Windows (like Hugo). Alternatives based on Ruby (Jekyll, Middleman) are not very friendly to the Windows environment. Finally, I have come to the conclusion that the Jade language offers me everything I need, and the only thing I need is to have Prepros installed. The invariable parts of pages can be partial files, and Jade can easily compose them together. Content can be made of Markdown files, so we can work on content, design and structure separately.
  3. Last but not least, we come to the point of rethinking the framework and taking a step back from our beloved Bootstrap. We immediately realize the need to broaden horizons. Let's split the framework concept into four sections: mixins library, responsive grid system, collection of interface elements and special effects. The most popular frameworks include all four, but they do not put it easy for you to customize them to your own needs, basically by forcing the use of predefined classes. In other words, it is convenient to have a predefined template or theme that is close enough to our idea, or otherwise we will end up investing more hours than expected. If you have an idea of what you want, and you don't mind coding a little, I may suggest to keep reading.

Content resides in HTML, whether static or dynamic (generated by PHP, Python ...) within the corresponding CMS. But the responsive style and structure should reside in CSS and the media queries. Content authors, designers and coders should each have his own territory.

Our custom framework

As we said earlier, as soon as we decide to explore beyond Bootstrap, we soon find out that we will need to come up with a different piece for each purpose. Let's take a closer look at the four faces of our framework:

  • The mixins library is in charge of the overall robustness of the site, letting the maintainers take care of maths, while we simplify our code. That includes the prefix for browser compatibility (auto-prefixing), and basically the process of the most repetitive and unvarying routines. The detection of web resources (Modernizr) and the consistency between browsers (normalizer or reset) can work alone. But automatic prefixing does require a minimum code, and one of the best options for this are the SASS mixer libraries. Among the most popular, probably Compass and Bourbon. Bourbon is more concise and fits the most basic needs.
  • The responsive grid system has become the core of any modern web and any framework, as mobile navigation is now essential to our audience. In this job you can talk about two major approaches: systems based on predefined classes where you only have to decide how many columns are displayed after each breakpoint (used in both Bootstrap and Foundation), and semantic methods that are mostly defined within CSS (like in Susy or Neat). The main advantage of the latter is that you get cleaner HTML, and a clearer separation between structure and content. In addition, you get a more concise code, which translates to more efficient debugging and updating. I prefer to use Neat. Susy has a slightly dryer code and is somehow more powerful, but Neat integrates perfectly with Bourbon and both are required for some Refills elements I like.
  • Our collection of UI elements should include essential graphic components of the user interface: buttons, menus, boxes, text styles, image and media management ... Resources available are overwhelming. We can always use parts of the best-known frameworks: both Bootstrap and Foundation allow you to make personalized downloads including only what you need. But of course, you can always design from scratch. Sometimes it is preferable to learn a new list of classes. If we just need a button, we can save a lot of time by typing our own mixins and classes. After several similar projects, one can end up gathering a nice collection of familiar components, and thus gradually increase productivity. I'm staying with Bourbon + Refills.
  • Special effects. The shiny part of design is often thought as part of the basic element set. But we usually find it in a different layer and it might modify multiple blocks, or even the entire page. Basically we are talking about animations and user interface behaviors (sticky menus, parallax effects, gallery tools ...). As you can imagine, I will not suggest programming from scratch this time. These effects are complex enough to use an existing library, usually JavaScript, often just CSS, or at least reuse part of it. For animation, I may suggest a classic tandem: animate.css and wow.js. The former offers a wide range of transitions and claim effects. The latter is responsible for triggering the effect, for example, by scrolling down. For any other effect, jQuery and the endless list of plug-ins based on it, are the most recurring method. Think of any desired effect, and you'll find the corresponding jQuery module. Of course, there are alternatives (MooTools, Prototype), but none of them have reached an ecosystem like jQuery. jQuery is defined as a tool to control and manipulate DOM elements.

In short, if our framework is overwhelming for our needs, we should not fear the search of our own workflow with the components that best suit our purpose. Simply put, we only want to make our work more comfortable and efficient.

The result

As a sample of this increasing optimization of my workflow, you may want to explore my last template, available in two versions - Bourbonpug (based on Jade/Pug), and Bourbonslim (based on Slim). All my previous reflections are buried in it. At the moment it's just a single-column design, but with some interesting effects. I may keep adding more complex elements. It brought lots of fun and oxygen to me, after all the hurdles. You can download it and mess with it. I struggled to find something similar, and finally decided to build it from scratch. The dead end feeling, lack of control and frustration are over, and at last I feel like I'm almost there. At least, the remaining work is in my own territory.