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>:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
(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 class=”row”>
<div class=”col-md-4 col-lg-4 col-sm-3 col-xs-2”>
<img src=”coolpicture.jpg” alt=”cool picture here”/>
</div>
<div class=”col-md-8 col-lg-8 col-sm-9 col-xs-10”>
<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>
</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.”
{{cta('81a00bba-43c7-41e1-8534-2fbe1b22d681')}}
![Ministry Goals: Defining Your Purpose [Webinar Recording]](https://content.cdntwrk.com/mediaproxy?url=https%3A%2F%2Fcontent.cdntwrk.com%2Ffiles%2FaHViPTY0NDU4JmNtZD1pdGVtZWRpdG9yaW1hZ2UmZmlsZW5hbWU9aXRlbWVkaXRvcmltYWdlXzVlYTk3MTQ5ZTBiMDAuanBnJnZlcnNpb249MDAwMCZzaWc9ODUwYjdlZTUyMzdkYmE3ZDA5MTE0YWE0MzU2OTk1MGE%25253D&size=1&version=1665679078&sig=200241dff68fb06c3395bbd97e5c7d0e&default=hubs%2Ftilebg-videos.jpg)