Using Bootstrap Framework to Make Mobile Web Design Easier

April 25, 2016

using-bootstrap-framework-to-make-mobile-web-design-easier.png

One of the hardest things for a web designer to do, especially one who’s just getting started, is to design a website that looks and functions well on a variety of screen sizes.

Sites today not only have to deal with the old standard 1024x768, but they also need to adapt to resolutions as low as your smaller smartphones (320x480) and as high as your 4k monitors (3840x2160). Not only do you need to be resolution aware, but you also need to ensure your site functions across a variety of operating systems, browsers and versions.

While this might seem like an impossible task, it’s actually much easier today than it used to be, thanks to a couple of tools that you can use to get started.

A Word Before…

This is an intermediate web design topic, so from here I’m going to assume that you know your <head> from your <body> and that you understand basic HTML5 and CSS3. If you’re just getting started in web design for your church, consider spending some time at w3schools.com and then coming back here once you’ve got the basics.

Bootstrap

The first framework we’ll look at is a combination of Javascript and CSS known as Bootstrap.

Developed by Twitter for in house use, it was later released for public use and forms the backbone of a number of super creative websites. Because it’s an adaptive framework, it means that your website (or template, if you’re using a CMS like Church360° Unite or Wordpress), can quickly adapt to a number of different resolutions out of the box.

Getting Started

To get started with Bootstrap, place the following code in your <head>:

(taken from http://www.getbootstrap.com)

That will install the basic pieces needed for Bootstrap to work its magic. From there it’s a pretty simple matter to move into responsive design.

We’ll begin by creating a container <div> to hold all of our content. Bootstrap gives us two options for that <div>. We can create a <div class=”container”>, which will result in a fixed size container for the site.

There are actually 4 sizes, based on the size of screen we’re dealing with, but the containers themselves don’t change once you’re above or below the breakpoints. More on that in a few.

Alternately, we can create a <div class=”container-fluid”> which will result in a container that dynamically resizes with the viewport. This can make for a very strong design across all resolutions, but be particularly aware of your image sizes to ensure that nothing gets stretched or overflows.

Breakpoints

To adapt to various screen sizes, Bootstrap uses “breakpoints”. These are set using CSS @media queries to change the behavior of different elements based on extra small (xs), small (sm), medium (md) and large (lg) screen sizes.

For example, a <div class=”hidden-xs hidden-sm”> will be hidden from small and extra small screens, but visible on large and medium screens.

You can also do the same thing the opposite way, by using <div class=”hidden visible-md visible-lg”>. By using these breakpoints effectively, you can create content that displays well on any size display. This sometimes looks like creating separate content pieces for each display size, but there’s often a better way, using Bootstrap’s built in layout engine.

Bootstrap Layout

Bootstrap operates on a 12 column layout. Note that you’ll never realistically use the actual 12 columns, but it’s easy to divide into 3, 4 or 6 column layouts for purposes of design. These columns are also breakpoint aware, meaning we can actually change the width of an item based on the screen size we’re dealing with.

As an example, let’s take a relatively simple picture with its description, say for a church staff page. We want the picture to the left and the name and description to the right.

On a larger screen we have more real estate to work with, so we might allow the picture to have a third of the row. On a smaller screen, though, we might want to shrink that down to a fourth, just to make sure there’s room for the text without too much wrapping. On an extra small screen, we’d likely go six column, with the picture taking just one and the remaining five being the text, or we might even remove the picture entirely, depending on the amount of text we have.

In code this looks like:

</div>

<h2>Example McPerson</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum quam vitae ipsum iaculis, sed rhoncus ipsum mollis. Phasellus ut lacinia orci, vehicula hendrerit massa. Ut libero eros, commodo eu sapien sed, ullamcorper cursus libero.</p>

</div>

The .row alerts Bootstrap that we’re going to be including column based content. By changing the number of columns assigned based on the breakpoints, though, we create different layouts depending on the user’s screen.

There’s a ton you can do with Bootstrap columns, including offsetting columns and nesting rows (and columns) inside of other columns. Visit Bootstrap's website for a full overview of the CSS features included by default.

Components

Bootstrap also includes handlers for a number of commonly used components in your site design, including icons, buttons, menus, panels and more. All of them can be included using just a handful of CSS classes and a little creativity. They’re also all responsive, and will play well with the built in layout engine. For a full description of everything included in the framework, see http://getbootstrap.com/components.

Go Out and Play

There’s a lot here, and it’s hard to do more than scratch the surface. As usual with web development, though, the best way to handle it is to go play with it yourself. If you get stuck or have questions, there’s a thriving community of Bootstrap users online, and you can find most answers with a Google search.

If you get truly stuck, shoot me an email or a Facebook message with a link to your code and I’ll see what I can do to help you move forward. Happy coding!

Learn more about building an effective website in our free ebook,
“9 Strategies for Creating an Engaging Church Website.”

How to Speak to Your Audience

A manager is presenting the latest project to department workers. An email is prepared for clientele. A CE...

LinkedIn for Church Workers: How to Use It

Hopefully my previous blog post got you excited about the potential for networking and using LinkedIn as y...

Resource Center

Using Bootstrap Framework to Make Mobile Web Design Easier

A Word Before…

Bootstrap

Getting Started

Breakpoints

Bootstrap Layout

Components

Go Out and Play

Previous Article

Next Article

Using Bootstrap Framework to Make Mobile Web Design Easier

A Word Before…

Bootstrap

Getting Started

Breakpoints

Bootstrap Layout

Components

Go Out and Play

Previous Article

Next Article

Other content in this Stream

Have you ever wondered how Google knows what websites to suggest when you look something up? It’s called SEO—search engine optimization—and it helps users find a website by improving its...

Every day, most of us receive text messages—from our family members, coworkers, and friends. But have you ever received a text from your church? The concept might seem foreign to some,...

Church 360° Members recently launched its Communication Module, a suite of text, email, and voice messaging tools designed to help churches coordinate messages to visitors and congregants. The new too

I love heading into a new season (or month or week or even day) with a plan, knowing what needs to be tackled and when I'm going to do it. When that doesn’t happen (a fair amount of the...

At this point, I hope you have familiarized yourself with podcasting and are interested in starting your own podcast. If you have not read the previous blog post on creating a podcast for...

The pandemic caused church attendance to hit an unprecedented low for a couple of months last year. My father, who is an LCMS pastor, and I were sitting around one afternoon in March 2020...

Meet Kimberly Myers, Communications Director for the Nebraska District of The Lutheran Church—Missouri Synod and a communications volunteer in her congregation. With a focus on serving a...

In 1997, back in the dark ages of the internet, I wrote my first website. I wrote it, but I didn’t publish it because, honestly, I didn’t know how. It wasn’t a great website, but I was...

It’s so tempting, isn’t it? It’s new, it’s exciting, and it seems to be quite effective at doing the job. Plus, the price is right. Sure the old one was working just fine for you, but...

“What’s your favorite color?” As adults, we typically do not ask each other this, but for kids, it is an especially important question. My four-year-old daughter has a knack for both...

Admit it; you’ve done this before too. I’m sure I’m not the only one. I’m at a restaurant having a meal with my family. The server brings the food out, distributes the dishes to each...

This past Sunday, my church, along with many other congregations, observed Good Shepherd Sunday. While not an official holiday in the Church Year, it has been historically called that...

Or are you just pursuing communication tactics? In other words, do you feel like you are communicating without a singular purpose? Church communicators are given are hard task. They are asked to shar

One of my favorite board games to play when I was a kid was a two-person game called Stratego. The goal of Stratego is to capture the flag of the opposing player while protecting one’s...

Throw out the phrase “bullet journal” in conversation, and you’ll likely get a variety of responses: everything from “Oh, I’m not ‘arsty’ enough for that,” to “This is the single greatest...

The COVID-19 has quickly changed almost every aspect of our lives, including our worship lives. Many churches are choosing not to hold worship services in person, but are moving online...

As everyone is learning to cope with the new normal of social distancing, churches are being put in the uncomfortable position of learning how to livestream for the first time. Join Peter Frank from

I recently reread Kem Meyer’s book, Less Chaos. Less Noise. As I did, Meyer’s words hit me right between the eyes, as they often do. This time, however, it wasn’t about written...

In my last post, I laid out what landing pages are and why they are important in communicating to your target audience. I wrote about how the retail industry uses landing pages, and...

Landing pages. Maybe you have heard of them before, maybe you haven’t. Maybe you know all about them, maybe you don’t. Landing pages are not new, and we have all been sent to one, whether...