P2PU | Making a Responsive Portfolio with Bootstrap | Optimizing Images, Adding Elements, and Styling Elements

Optimizing Images, Adding Elements, and Styling Elements

Introduction

We are making great progress and as you learn your way around your code the better you'll get at spotting what is happing on your page in terms of code. This module is split up into three sections that are all extremely important next steps in coding. First, we will have a quick look at how to optimize images and knowing what format to use depending on what it's being used for. Then, we will get into more Bootstrap elements and start adding elements to our page. Bootstrap has a very comprehensive website to help guide you through using these elements. Finally, we will style your elements you added.

This is a VERY big section, especially the adding Bootstrap elements. So take your time with this and spend more time with this Module. The Bootstrap elements could very well have it's own course in itself.

Objectives

Learn how to optimize images and what formats to use
Become familiar with your text
Start using bootstrap to add elements
Create classes and style the elements using CSS

Optimizing Images

To best optimize images you need Photoshop. There are two kinds of image compression, lossy and lossless. Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.Just to give an overview of what formats are used for take a look at the following:

JPEG

JPEG is a format with the extension .jpg. This image type is lossy, and you can control the compression level in image editors. It is good for saving images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.

GIF

This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent. GIF may contain more than one frame, so it can be animated. Since image programs can control the exact number or colors stored in a particular image, it is a good format for saving images with less colors, like charts, small graphics (bullets, website buttons), images containing text, flat-color drawings etc.

PNG

This format was created to become the new and improved GIF, because GIF was patented. PNG is a lossless format. There are two types of PNGs, an 8-bit and 24-bit. 8-bit can store up to 256 colors, like GIF. 24-bit can store millions of colors, and it also has partial transparency. It's best to save images in this format when you need to preserve both transparency and a large amount of colors.

When you open your image in Photoshop it is easy to save for the web. Under File click on 'Save for Web'. This will take you to an optimization window. Depending on what the image is being used for click on the upper, right corner to set the format (I would suggest jpg for our portfolio photos). To control the quality, use the slider or enter number in the field Quality. Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings. At the same time, look at the image to decide on what quality looks good enough. If it's going to be used as a background, make sure file size is under 5KB, up to 2KB would be better. If the image is a layout header, up to 40KB is acceptable. If it's an image to be displayed on the page, up to 70KB is reasonable, depending on dimensions. Artworks and photographs for your portfolio may be saved in better quality, since people who will look at them already expect to see large images. In this case it's normal to have file sizes from 100 to 200KB, but not more than that.

Now save your image, I save to a folder so it is easier to import all into Cyberduck. Once you have optimized all your images, put them into your Cyberduck portfolio folder. It's best practice to have all your images in an img folder inside the portfolio project folder.

Watch the Video

Tipsheet

Adding Bootstrap Elements

Before we go to getbootstrap to take a look at all they offer, we should go over the difference between Javascript elements, CSS elements, and Components so you know where to go to find what you're looking for. Javascript will be any action elements you wish to add. This can range from interactive elements to animated elements. Examples of Javascript would be popups, dropdown menus, image carousels. CSS is all things styling so how to change the look. Examples of CSS are color, size, making columns/tables, etc. Components are adding icons and other elements to the Javascript. They are not necessarily functioning in an interactive way, but it's another extension on styling the Javascript. It is almost a synthesized Javascript and CSS section. So look here if you cannot find what you're looking for in the others.

Once you have found the element you want to add to your page, Bootstrap gives you the code to put into your page. Anything that starts with a $ is Javascript and needs to go into the head with script tags. This is the action of the element. Then you need to add the actual element to the page. This is usually the section of the code they give you with div tags. That goes into your body.

Watch the Video to Add Elements

Styling Elements

Styling can happen one of two ways. If you have multiple elements that need to be styled the same way, say a list of thumbnails, you will make a class for them in the style tag in the head. The class is simply a group of things that exist together, like a way of labeling. So think about sorting apples and oranges. A class is the labeled bin they go into. In the div tag that contains the element you will put "div class="classname". That will make all the contents of that div the same style. To stylize the class in the style tag you will put :

.classname { your styling elements; your styling elements; }

Like Javascript is labeled with a '$', classes are labeled with a '.' So, in your style tag, the class name needs to start with a '.' so it knows it's a class.

The other way to style is used more for individual objects. On the element itself you can add a style="the style elements".

Watch the Video to Style Elements