Share this
We don’t expect our clients to know the ins and outs of web development – that’s why you’ve hired us! – but we are firm believers that knowledge is power. If we’re given an opportunity to teach our clients a little something along the way, we’re all for it.
You’re sitting in the conference room, waiting for the art director to brief you on your next project. You’ve worked on websites before, no big deal. WordPress and Themeforest are your vices. You know enough HTML and CSS to make minor changes and are comfortable enough editing EDMs in ExactTarget and Mailchimp, but now you’ve been forced to take a leap and work with Bootstrap. You don’t want to learn to code, you’re the project lead, and you’ve never worked on anything like this before. Uh oh!
What is Bootstrap?
Since it’s creation in 2010 and it’s release in 2011, Bootstrap quickly became the most popular HTML, CSS and JavaScript framework. Developed by a small design and development duo at Twitter, it’s no surprise that the project sky-rocketed, quickly becoming the go-to framework for responsive, mobile-first web projects.
Why do we love it?
We love it because it’s incredibly flexible and easy to work with, for designers and developers alike. It’s responsive by design, highly compatible with most browsers, and makes it incredibly easy to create consistent and fluent design by recycling components.
It has everything – from transitions, carousels and buttons, to accordions, navbars and breadcrumbs. If it’s a standard element within UI design we can almost guarantee that Bootstrap will have a version of it built in. That’s not to say that we don’t have work to do, but it speeds up the development process exponentially, offering our clients a faster turn-around time, allowing us to do more of what we love – work!
Not only that, it’s one of the easiest and fastest frameworks to learn.
Why should you love it?
Although it’s not new to web design, the grid system used by Bootstrap is to die for.
If you’re a designer coming from a print background, the twelve column grid is an absolute lifesaver! Your site can be designed using any division of those twelve columns, meaning everything you learnt from Josef Müller-Brockmann can be reimagined and digitalised.
When we say that Bootstrap is a responsive, mobile-first framework, designers new to the digital space might be tempted to run and never look back – gone are the days of fixed page sizes and designing in millimetres! But don’t panic. You probably know more about responsive design than you realise.
It’s likely that you’ve touched on responsive vs adaptive design at some point throughout your career or studies, so we’re going to try and break it down for you as easily as we can, with a little visual aid from the team at Froont.
Flow
As screens decrease in size, your content will begin to take up more vertical space. In turn, the important information sitting ‘above the fold’ on your beautiful site, designed at 1080px, is a long six scrolls down, and your user has already lost interest.
How does designing mobile-first help improve flow?
You’re designing for smaller screens first, ensuring you’re fitting your client’s most important content into prime real estate. You don’t have room for all the bells and whistles at 320px wide; the larger the screen, the more content and features you can add. Consider it ‘progressive enhancement’.
Relative Units
One of our favourite things about Bootstrap is that it uses percentage-based columns, rather than a rigid, pixel-based grid.
But what does that mean?
Regardless of what your canvas may be – desktop, tablet, mobile, etc. – if an element is coded to be 50% wide, it will always take up 50% of the screen. While this kind of consistency may seem excessive across multiple platforms (who will be looking at the site on three different devices at once?), this is the kind of consistency and fluidity that clients (and us developers!) love.
The Grid
One of Bootstrap’s biggest draw-cards is the responsive grid. Rather than working with a rigid, pixel-based grid, Bootstrap uses percentage-based columns. To put it most simply, the width of a screen will determine the container size. But, once you hit 768px wide, the container will only increase twice more by default.
For reference, the Bootstrap grid system has four classes:
Over the combined years of experience in development, design and project management within the Legroom team, we’ve found that there is a large gap between designers and developers. While admittedly, developers may not be the best designers, in more cases than not, we’re able to see the purpose behind elements within a design; we can understand why you’ve put it there and what you want it to achieve. We understand user experience and user interaction.
Being tuned in to the current trends and knowing what is and is not possible when designing websites is a huge advantage when it comes to briefing your developer. We’re experienced in dealing with people with all levels of knowledge, but we can guarantee that your designs will improve tenfold if you have an understanding of what your developers will be doing, and what platform/framework they’ll be working on.
Familiarising yourself with the framework your site is going to be built on is a no-brainer, and while it may be daunting, there should be comfort in the fact that you don’t need to learn to code to use Bootstrap – you’ll simply be familiarising yourself with a highly praised framework, allowing you and the developer to speak the same language, while furthering your skillset. Win, win!
As the framework for Bootstrap is in constant development, the reasons to use Bootstrap (and for designers to familiarise themselves with it) keep mounting! Bootstrap 4 is nearing release and we’re incredibly excited.
Stay tuned!
