Bootstrap Grid System – Gain Control

The bootstrap grid system is a brilliant method to gain control over the responsiveness of your website. Consider the built-in bootstrap classes in the following code:

<div class=”row”> <!– start row –>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_1.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_2.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_3.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_4.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_5.jpg”>
++</div>

++<div class=”col-xs-6 col-md-3 col-lg-2″>
++++<img src=”.images/img_6.jpg”>
++</div>

</div> <!– end row –>

The main thing you need to know about this example derives from the <div class=”col-xs-6 col-md-3 col-lg-2″> tag.

Remember that bootstrap is built on 12 evenly spaced grids.

The class “col-xs-6” indicates that on an extra small screen, the image will consume six of those grid spaces. Thus, you will see two columns of pictures.

The class “col-md-3” indicates that on a medium screen, the image will consume three of those grid spaces. Thus, you will see four columns of pictures.

The class “col-lg-2” indicates that on a medium screen, the image will consume two of those grid spaces. Thus, you will see six columns of pictures.

You can see how the bootstrap grid system (along with these built-in classes) allows you to easily gain control over how your content is displayed.

Plan first! So, as you build your site you will know how many of the grid spaces to consume on an extra small, medium, or large screen size.

Read the documentation on the bootstrap grid system, for more information.

How to Leave a Breadcrumb Trail

A good site should communicate to the users where they are on your site, at all times. A typical way to telling users where they are is to leave a breadcrumb trail on all your pages.

To build a bootstrap navigation bar, you use an unordered list, <ul>. For a bootstrap breadcrumb trail, you will us an ordered list, <ol>. This makes sense. Order is not so important for the navbar, but it is important for the breadcrumb trail. You want users to know where they are, and how to get back to where they came from.

For example, directly under the main heading, <h1>, on a page called “Albums”, you would create a breadcrumb trail as follows:

<!– start breadcrumb –>
<ol class=”breadcrumb”>
++<li><a href=”index.html”>Home</a></li>
++<li><a href=”albums.html”>Albums</a></li>
</ol>
<!– end breadcrumb –>

Using the bootstrap class “breadcrumb”, the trail on your albums page should display as pictured.

bootstrap breadcrumb trail

You would then add <li> elements to your breadcrumb trail depending on how many levels deep you go into your website. For example if someone clicks on one of your albums, then it would take that user to the photos page. Therefore, you would add a third <li> element to the breadcrumb on the photos page.

It is suggested to read the bootstrap documentation on breadcrumb trails, for more information.

Build Out Your Site

This lesson will take a look at how to build out a website. The site will be an image gallery, where you navigate to various photo albums, and then view individual photos in the albums.

Use the code from the lesson where you build the un-collapsed navigation bar, and modify it as follows:

<!– start un-collapsed navbar –>
<div class=”collapse navbar-collapse” id=”main_navbar”>
++<ul class=”nav navbar-nav”>
++++<li class=”active”><a href=”index.html”>Home</a></li>
++++<li><a href=”albums.html”>Albums</a></li>
++++<li><a href=”photos.html”>Photos</a></li>
++ </div>
<!– stop un-collapsed navbar –>

 

Files for WebsiteNow your navbar has links for the home, albums, and photos. Also, the href attribute specifies the correct file name for these pages, but you have not made those pages yet. That is the next thing to do. Simply make copies of our index.html file, and change the name of each copy respectively. Your website folder should contain the files as shown.

The photo1.html page was also added, because this is where you will show individual photos. However, it will not be in the navbar.

Now you can add photos to your albums page. Place the photos under the closing </nav> tag.

<div class=”container”>
++<h1>Photo Albums</h1>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_2.jpg” alt=”english breakfast”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_3.jpg” alt=”lots of cheese”></a>
</div>

Notice each image links to the photos.html page.

The class “album_cover” will resize the picture, but you will need to add a styles.css sheet and use the following code:

.album_cover {
++++width: 25%;
++++border: 5px solid black;
}

Make sure you add <link href=”css/styles.css” rel=”stylesheet”> to your all your new html pages!

This resizes the photo with CSS3. The other option would have been to use a photo editor to make thumbnail size photos, and use thumbnails for your album covers. On a small mobile device, your albums page should now look like the photo shown below.

Wk2Albums

Add Pictures to the Photo Page

Now you can add pictures to your photos.html page. Use the code shown below.

<div class=”container”>
++<h1>Photos</h1>
++++<a href=”photo1.html”><img class=”photo_list” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<img class=”photo_list” src=”./images/img_2.jpg” alt=”english breakfast”>
++++<img class=”photo_list” src=”./images/img_3.jpg” alt=”lots of cheese”>
</div>

Notice the href for the <a> tag links to the photo1 page. This allows the user to view a larger size of the image.

The CSS3 for the class “photo_list” can be:

.photo_list {
++++width: 25%;
}

It does not make sense that our photos page is just a list of the same photos of the album cover page, but this example is just for demonstrative purposes. you can add your own distinct photos, and your photo pages for each album. However, you can use the code in this example to guide you.

Finally, add the appropriate image to your photo1.html page.

<div class=”container”>
++<h1>Graffiti Photo</h1>
++++<img class=”single_photo” src=”./images/img_1.jpg” alt=”graffiti image”></a>
</div>

The CSS3 for the “single_photo” class can be:

.single_photo {
++++width: 75%
}

This code in the stylesheet will display a larger version of the image.

 

Web Design Inspiration – The Good, Bad, and Ugly

Web design inspiration does not have to come from sites that users spend lots of time on. Google is the most popular website in the world. However, that does not mean people spend lots of time on the site. Often, they search for what they want, and then leave the site once they find it.

It is nice if users spend lots of time on your site, but it is not bad if they do not. As long as they find what they want, they will come back when they need to find something else that you offer.

Twitter is another very popular site. Look at the screenshot of their front page.

web design inspiration from twitter
Twitter quickly informs users what they can do.

You can see it is very simple. There are only about 20 words that tell the users, ‘this is what we offer, now go and get it’. Pinterest and Tumblr are other web design examples that fit into this mold of simplicity. The image background conveys something about the site, and the text is very direct.

For service oriented sites, it’s a good idea to layout exactly what you have to offer. Trip Advisor is an award-winning site, because it puts the user experience first. It is laid out very simply. The front page assumes the user wants to travel, and shows a search bar asking the user where they want to go.

The Beauty of Bootstrap Themes

Skype and PayPal are web design examples that run on bootstrap templates. They show a big image, and directly convey to user how to use the site. In the case of Skype, a video demonstrates how to use the site, and it does so without disrupting the user experience, but rather enhancing it.

Bootstrap is a composition of CSS3 styling that helps you get everything right for your site. Bootstrap themes help the users get the information they want in a clean and simple format, and they respond to different screen sizes for a responsive website user experience.

Check out this site for free Bootstrap themes and templates for a jolt of web design inspiration 

Web Design Inspiration from Bad Examples

It is possible to get inspiration from bad web design examples. Sometimes a web page puts forth a good concept, but the end product is a horribly designed website. This could present an opportunity to reuse the concept, but improve the design.

Consider this news website shown below. There are many elements that work against having a good user experience.

Bolen Report
Poor web design translates to a poor user experience.
  • The headlines are all different colors.
  • The text is too small for the reader to scan.
  • The links in the sidebar are various colors.
  • Overall, the color scheme is inconsistent.
  • The column headings are inconsistent.
  • There is too much content for one page.

Below is another example of bad site design. Just looking at the page could give you a headache, and cause your eyes to cross.

Bad Web Design Example
This site looks like the back page advert section of a low-budget magazine.

You should also be aware of site designs that employ a deceptive, dark pattern approach. These are sites that draw the user in, but make it very difficult for the user to know exactly what the site has to offer. These sites use web design practices intended to trick, or confuse the user. There is a website dedicated to exposing dark pattern websites

In summary, when it comes to web design, the following are some best practice guidelines:

  • User experience comes first.
  • Keep it simple. Give users what they want, quickly.
  • Be consistent with how your site works.
  • Do not pad your website with filler content and images.

Web Content Accessibility Guidelines – WCAG

web content accessibility guidelines
The W3C hosts the WCAG to help users with impairments.

Web content accessibility guidelines (referred to as WCAG) are an important part of website user experience. The Web Accessibility Initiative is a good resource to keep track of the latest content guidelines. Visit their guidelines

For example, a screen reader can assist a user with visual impairments. There are plugins that strip down a web page to only its content, thus setting up the page for use of a screen reader.

A Simple List of Web Content Accessibility Guidelines

There some simple things that you, as a web developer, can do to enhance web accessibility of your site.

  • Give your page a title.
  • Give images alternate text.
  • Make sure headings are actual HTML5 headings, and not just big fonts.
  • Use a good color contrast.
  • Allow your text to be resized.
  • Give video and audio content subtitles and captions.

Deliver Content the User Wants

Start with a set of web content accessibility guidelines for reference purposes when working with a client.

Look at both good design and bad design practices. Apply constructive criticism as to how practices can be improved.

For basic guidelines, there are two basic approaches to web design.

The first is the cognitive / evidence based approach. This approach focuses on making the information clear that you want to get across to the user. Edward Tufte is known for being an innovator in the cognitive / evidence based design approach.

The user-centric approach focuses on who the users are, what they want, and how you will get the users the information they want.

These two approaches agree that user experience comes primary. In other words, the user always comes first. The user experience must be consistent. Therefore, it may be good practice to stick with one CSS3 styling template. You want to avoid having different parts of your site looking like they are different sites. Further, you want how the user interacts with your site to be consistent throughout the entire site. Finally, you should know how the site will be used, before you design it.

WTF: What’s This For?

You can judge good web design by how long it takes to understand what the site is about. Most users visit a site looking for content, so you should clearly signpost the content of your site.

Obfuscation vs. Simplicity

According to Tufte, the worst websites are those that suffer from ‘corporate annual report’ syndrome. A corporate annual report contains important information, but it is padded with lots of generic information, or useless imagery. Do not pad the content of your site with generic information. In other words, design it to be actually read by someone.

Simplicity is better. Within a few moments of visiting your site, the users should know what it is you are offering, and exactly how to get it. Before you place something on your site, ask yourself, why am I doing this? If it does not help the users accomplish what they want, then you should reconsider. Strive for the minimum number of clicks between the users, and what they want. In other words, get content to the user fast. A delay delivering content to the user usually stems from a business reason, but most sites do not need that.

Why would you use color on your site? Because it looks nice? That is not a good reason. Use a simple color palate and build from there. There is nothing wrong with black and white. The BBC has one of the top 20 websites in the world. Their color scheme is black, white, and red – very simple.

Website User Experience

UX – User Experience

website user experienceA good website user experience communicates to the user where they are, and where they can go on a web page. Usability and user experience are two concepts that form the principles of modern web development.

A good user experience happens when a website is efficient, memorable, and learnable. User experience (often referred to as ‘UX‘) is very subjective. It focuses on how users feel about a website. UX is hard to predict, but getting to know who the likely users are will help ensure a happy website user experience. Design and develop a site for the user, and UX should be positive.

Tell the Users Where They Can Go

If the user does not know where they can go on a site, then they are likely to leave.

There are general types of navigation for interactive web design.

  • The site can be hierarchical, where there is a clear and simple path as to where the user should go. It starts at a very broad element, and ends at a very specific element.
  • The site can be global, where you have top-level sections on each page. This allows the users to easily go back if they need to.
  • Finally, a site can be local, which means navigation occurs within the text of the web page.

Start the Website User Experience with a Site Map

A hand drawn site map is useful to plan the UX you want users to have on a website. A site map is a way to visualize navigation of the site.

Below is an example of a simple site map for an image gallery. It is a good idea to draw a low-tech site map. Post-it notes on a whiteboard work well. They allow for easy change as the planning evolves.

A site map
A low-tech site map using post-it notes.

Website Breadcrumbs Navigation

A well planned UX also tells the user where they are. A common way to do this is to have breadcrumbs navigation.

Looking back to the site map for the image gallery, you might have a bread crumb navigation trail as follows:


++++Home >> albums >> album2 >> photos

This would usually appear at the top of your content. The last ‘breadcrumb’ tells the users where they are. The other ‘breadcrumbs’ allow the users to have easy website navigation back through their trail.

Absolute Path and Relative Path

There are behind the scenes, web design issues regarding absolute path and relative path links. These two paths are demonstrated by looking at the file names in the picture below.

absolute path and relative path links

The relative path assumes you have access to all the files within the same directory. The absolute path gives the full domain name for each link.

There is no consensus regarding the use of absolute and relative path . However, some developers may use the absolute path to help ensure the target page gets indexed by search engines. An absolute path is also error-proof if the website navigation is later changed.

Modern Web Design Trends

A grid layout, such as bootstrap, is all the rage in modern web design trends. When planning a website, try to picture content as a series of grids or boxes. A grid layout, if done right, can be mobile-friendly, fluid and responsive. It allows for cross browser compatibility and full functionality on different device sizes, such as mobile devices.

The grid structure is really useful for modern web development because it has built-in whitespace that helps users find what they are looking for. Further, it responds well to mobile devices. A mobile compatible website is vital since the majority of searches are done on mobile devices.

Web Development Basics You Should Know

Web Development Basics 101

A laptop is an example of the client side of computing. The laptop is what the end-user is looking at. A mobile phone or tablet are other examples of client side.

Data centers with stacks of computers, or one high performance desktop could function as a server.

The server host pages that it can send to the client.

These computers are part of an interconnected network of computers, commonly called the internet. The world-wide web, or the web, is the information that sits on the internet. There is a difference, albeit subtle, between the two terms.

A URL is what we type in our browser to find a web page. URL stands for Uniform Resource Locator.

Our browser renders web pages so we get the full effect of seeing the links, headings, colors, images, etc.

View The Source Code

You can also view a page’s source code. This is the plain text that programmers used to edit how the page is rendered in the browser. For example, go to any web page you frequent. If you are using Chrome as your browser, click on developer tools, and then click on view source code. This will open a window with the source code. Becoming comfortable with viewing source code is an important part of web development basics.

A modern web developer should know how to display content on a page, how to make it look good, and how to make it interactive. HTML is the language used to build the structure of its page. CSS is used to style its appearance. Finally, JavaScript is used to make the page interactive.

Why You Should Use HTML5 and CSS3

HTML5 and CSS3 are the most up to date versions of the markup and styling languages. It’s important to use these versions so the web page will function well on all browsers, and on different size mobile devices. A mobile responsive site can help reduce bounce rate as you increase organic traffic.

Web development basics also tell us that since a huge percentage of searches are done on mobile devices, web pages should be responsive to different screen sizes, thus providing a good user experience.

If you are ready to start learning how to code in HTML5 and CSS3, then try the free and interactive tutorials on Codecademy.