Web Design Primer

Web Design Primer 1.2 - BootstrapCreative : 1

CONTENTS

1. What is a URL?

2. Naming Conventions

3. Project Folder Structure

4. Code Guide

5. Images Guide

6. Things I Wish I Knew Earlier

© 2017 Jacob Lett. All Rights Reserved.

Please do not distribute or share without permission. You have permission to print pages but please do not try and sell it.
If you have questions email me at [email protected].

Web Design Primer 1.2 - BootstrapCreative : 2

What is a URL?

Web Design Primer What is a URL? 1.2 - BootstrapCreative : 3

 Protocol Domain Directory Parameter Hash

Value

https://www.bootstrapcreative.com/design/?filter=a&meta=b#top

Subdomain Query String Value

TLD: Top Level Domain Parameter

The Parts of a URL Remote Server Files

The URL, or uniform resource locator, above  public_html
corresponds to the folder structure shown to  bootstrapcreative.com
the right. You have the option to not use the
 dist
www subdomain by redirecting any traffic you
receive to just your domain. The query string  index.php
starts with a ? and all additional parameters  design
start with a &.  index.php

Web Design Primer What is a URL? 1.2 - BootstrapCreative : 4

Naming Conventions

Web Design Primer Naming Conventions 1.2 - BootstrapCreative : 5

HTML, CSS, JavaScript Naming
A general rule for all naming is to write all characters lowercase and use hyphens instead of spaces
between words. If you use spaces your URL will have %20 in it which is hard to read in print.

HTML CSS JavaScript

• Lowercase • Lowercase with hyphens • camelCase
• Avoid inline styles between words • Short as possible without
• For quick scanning, write • Short as possible without obscuring readability.
classes first obscuring readability. Avoid variables like
Avoid names like .s etc. var a etc.
• Always include closing
HTML tags • Prefix classes based on • jQuery objects should start
the closest parent or with $ as prefix. This will
• Only use an ID if
base class. help you remember what
absolutely necessary
variables are objects.
Examples

<div class="btn btn- .btn {} var $ctaBtn = $("#btn-

default" id="bt- .btn-primary {} action");
action"></div> #btn-action {} $ctaBtn.fadeIn("slow");

Web Design Primer Naming Conventions 1.2 - BootstrapCreative : 6

Project Folder Structure

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 7

Figure 1: Project Folder - PHP Common Project
 contact 1
Folder Structures
 index.php 2
You have a lot of freedom when it comes
 css 4
to naming files and folders for your project.
 main.css 32
However there are some common naming
 partials 8
conventions that can help keep your projects
 aside.php 9
organized and minimize any confusion when
 js 15
working in a team.
 vendor 16
Figure 1 shows a static HTML site.
 plugin.js 17
 main.js 18
Figure 2 shows a site using PHP and node.js
 static 19
to compile Sass. The project is hosted on
 fonts 20
GitHub pages.
 img 21
 pdf 22
 .gitignore 23
 .htaccess 24
 README.md 26
 humans.txt 28
 index.php 29
 robots.txt 31

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 8

Figure 2: Project Folder - PHP, Node.js, Grunt, Bower, Sass

 contact-us 1  static 19
 index.php 2  fonts 20
 dist 3  img 21
 css 4  pdf 22
 main.min.css 5  .gitignore 23
 js 6  .htaccess 24
 main.min.js 7  Gruntfile.js 25
 partials 8  README.md 26
 aside.php 9  bower.json 27
 src 10  humans.txt 28
 scss 11  index.php 29
 main.scss 12  package.json 30
 _component1.scss 13  robots.txt 31
 _component2.scss 14
 js 15
 vendor 16
 plugin.js 17
 main.js 18

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 9

Below are descriptions for each file and folder in 8. The partials folder contains any code
these different types of projects. snippets you include into your page
1. A subdirectory of your main site. The templates. This way you can update one
URL for this would be www.yourdomain. file and every instance gets auto updated
contact/ because the server includes this file when
2. By default Apache, the http server, looks it loads a page.
for an index file inside of folders 9. A common partial is a sidebar used on a
3. Dist stands for distribution. The files inside site blog
this folder are created after compiling Sass 10. src is short for source folder. This contains
or JavaScript through a pre-processor. In code that needs to be pre-processed,
this example I used Grunt to run the Sass combined, and minified. So our Sass and
code through lib-sass which converts it to JavaScript files go in here.
regular CSS. 11. scss is short for Sassy CSS. This folder
4. This folder holds your final stylesheets. contains all of your Sass files which use
5. Your minified stylesheet that was compiled the .scss file extension.
from your Sass files 12. This is the main stylesheet that will be
6. This folder holds your final JavaScript files combined into the dist/css folder
7. Your minified script file that is a merged 13. A Sass file containing styles for a given
and minified collection of all of your scripts. component. It is imported into the
This helps to minimize server requests and main.scss file. Imported sass files
speed up page load. have an underscore prefix like
_component1.scss

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 10

 14. js is short for JavaScript. This folder holds 18. The static folder contains any files not
all of the JavaScript files you will want to being compiled or modified by a task
merge and minify into one file. This will runner like Grunt/Gulp.
help your page load faster. 19. Folder that holds any web fonts referenced
15. The vendor folder contains any third-party in your CSS
libraries or scripts you did not write and 20. img is short for image and contains your
used in your project. Another name for .jpg, .gif, .png, and .svg files. For guidance
these files are dependencies, because you on when and where to use each format use
depend on them for your project to work this reference.
properly.
21. pdf is short for postscript data file. All of
16. Depending on how many plugins your your PDF files go in this folder
project has, you may want to have each
22. When hosting your project on GitHub you
as separate files. In this example, I created
will see a .gitignore file which lets you add
one plugins.js file and copied and
file and folder names to be excluded from
pasted the plugin code into this file with
your repository
comment headings above each plugin.
23. The .htaccess file is read by Apache
17. main.js is your core JavaScript that is
web server, server software that receives
ultimately referenced and loaded into your
your request to view webpages over HTTP.
HTML page. Other common names you
You can use this file to configure server
might use are app.js or the brand name.
settings, add page redirects, and create
URL rewrite urls.

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 11

 24. Grunt is used in node.js projects to perform
a series of tasks you define through
packages. With Bootstrap projects like this,
you can use Grunt to compile Sass into
CSS, merge multiple files into one file, then Don’t undervalue your work.
minify the code. Seek criticism, not praise.
25. Readme.md files are automatically loaded
to the homepage of repositories on
Always keep learning & don’t
GitHub. They are used to provide basic be a static learner: do this by
documentation of the project. The .md file reading books, magazines,
extension stands for markdown, which is
a simplified version of HTML that needs to
blogs and by practicing.
be converted to HTML with a preprocessor. Collect & share things.
26. Bower is a node.js program that Teach others. Never give up.
downloads the latest versions of libraries
and frameworks into your projects. This file
Keep practicing. Again,
tells Bower exactly what version of each keep practicing.
package you need. Bower is run through - Jacob Cass, web designer
the command line.

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 12

 29. All node.js projects require a file package.
Design is a plan for arranging json. This file contains the project settings
and commands when starting a project.
elements in such a way as The nice thing about this file is if someone
best to accomplish a downloaded your project from GitHub they
particular purpose. could run the command npm install and
have an exact replica of your environment.
- Charles Eames
Which is what makes node.js projects easy
to collaborate with other developers.
30. The robots.txt file is read by Google
27. humans.txt is optional but helps other and other search index crawlers. This file
developers who may pick up the project is used to tell the bots what you allow them
in the future. This file contains contact to index and what you want to
information for the creators in case there keep private.
are questions. 31. For static websites you will often see an
28. When a page is requested from an Apache unminified css file. If you want a minified
web server it looks for a index file. Since version you will need to create this
we are running PHP our project will load manually using https://cssminifier.com/
index.php and be our homepage.

Web Design Primer Project Folder Structure 1.2 - BootstrapCreative : 13

Code Guide

Web Design Primer Code Guide 1.2 - BootstrapCreative : 14

 Opening Tag Attribute Value

<a class="btn" id="start" data-toggle="modal" href="#">

Open Modal Window
</a>

Closing Tag Content Element

HTML Element Parts

Short for HyperText Markup Language, the
authoring language used to create documents
on the World Wide Web. HTML defines the
structure and layout of a web document by
using a variety of tags and attributes.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 15

 Selector

Curly Braces

Property .btn { Value

display: inline-block;
padding: .5rem 1rem; Declaration Block

border-radius: .25rem;
border: 1px solid;
}

CSS Rule Set

A rule set is a single section of CSS including
the selector, the curly braces, and the different
lines with properties and values. The code in
the example below comprises one rule set.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 16

 Javascript comments
Document $(function() {
Ready // enable toggles everywhere
Function
$('[data-toggle="tooltip"]').tooltip();
Calls the Bootstrap 4
Tooltip Function and
jQuery DOM var variableName = "global variable";
Runs It
Selector
var $bodyID = $("body").attr("id");
console.log("Body ID #" + $bodyID);
camelCase // Body ID #home Console Log Function
Variable Names Writes a Message in
and Prefix jQuery Chrome Dev Tools.
Variables with $ }); // document ready - end
Use for Testing.

jQuery and the DOM

jQuery is a DOM (Document Object Model)
manipulation library. The DOM is a tree-
structure representation of all the elements
of a Web page. jQuery simplifies the syntax
for finding, selecting, and manipulating these
DOM elements.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 17

Figure 3: Webpage Clean Code Example

<!DOCTYPE html>
<html lang="en"> 1
<head>
<meta charset="utf-8"> 2
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 3
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no"> 4
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Bootstrap Tutorial</title>
<!--
####################################################
C S S - bootstrap, custom styles
####################################################
-->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
alpha.6/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>

5 <div class="container">
<h1>Page Header</h1>
<div class="row"> 6
<div class="col-md-8" id="main-content" data-background="image.jpg"> 7
<p>Page description paragraph</p>
</div>

Web Design Primer Code Guide 1.2 - BootstrapCreative : 18

 <!-- /.col -->
<div class="col" id="sidebar">
<p>Sidebar text description</p>
</div>
<!-- /.col -->
</div>
<!-- /.row --> 8
</div>
<!-- /.container -->
<!--
####################################################
J A V A S C R I P T - jQuery, Bootstrap, plugins Placed at the end of the
document so the pages load faster 9
####################################################
-->
<!-- jQuery - Grab from a CDN and if not available grab a local copy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.
js"></script>
<!-- Save a local copy of jquery to your project in case the CDN is down -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.
js"><\/script>')</script> 10
<!-- Bootstrap dependency script - tether, used for tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.
js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/
bootstrap.min.js"></script>

<!-- Custom Javascript -->

<script src="js/main.js"></script>
</body>
</html>

Web Design Primer Code Guide 1.2 - BootstrapCreative : 19

Below are descriptions for each label on the clean 3. This tag allows you to choose what version
code example, Figure 3. of Internet Explorer the page should be
1. This tag tells the browser and search rendered as. This should be as high as
engines what language the document is possible in the head of the document.
written in. Edge Mode like we have in this example,
2. The charset is very important for proper tells users viewing the page in IE to use the
page rendering of special characters. highest display mode possible.
When this is included you should not need 4. This is one of the essential elements to
to use HTML entities like &copy; but just have a responsive site. The other being
paste the character in your document. For media queries. This meta tags tells
more information read this article on how the browser how to control the pages
utf-8 works. dimensions and scaling. The viewport is
the visible area of the users browser. So in
this example, we are setting the width to
match the screen width of the device. The
initial scale is set to 1 to prevent a zoomed
Remember, code is your house out version on mobile causing the user to
and you have to live in it. pinch and zoom. The shrink to fit value
- Michael Feathers, web developer prevents iPhone Safari from zooming out to
fit elements outside the viewport.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 20

 5. In your code text editor make sure your
tab indents are made with two spaces and
not actually tabs. This will make sure code Writing clean code is what you
formatting is consistent if you copy and
must do in order to call yourself
paste between editors.
6. Similar to an excel spreadsheet, a row is a
a professional. There is no
horizontal container of cells or columns. reasonable excuse for doing
7. In this two column layout we will have anything less than your best.
a wide area for the main content and - Robert Martin, author of Clean Code
a narrow column for a sidebar. I have
also decided to use data attributes to
specify a background image I will set in 9. I like to use large comment blocks to make
my JavaScript. I listed the attributes in it easier to find main code blocks when
a particular order (class, ID, data) so my scrolling through a document.
document is easy to scan. 10. Since jQuery is a widely used library,
8. It is a good practice to add HTML chances are good most people have
comments to the closing tags so that you it already downloaded in their browser
can quickly know the page structure of cache. But we also want to provide some
your document. It can be a jumbled mess fallbacks in case they do not. First we will
without them. request it from the Google CDN (content
delivery network) and if that is down the
user can download it form our server.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 21

CSS Component Structure /*
* Component section heading
One important thing to understand is Bootstrap *
is focused around components and utility * Component description and use
*/
classes. When writing your custom styles it is
recommended to keep your styles organized by /* base - shared styles */
component instead of pages. .component { width: 220px; }

/* Sub-component */
If you are creating a new component that is .component-heading {
display: block;
not part of Bootstrap, you can write it in the width: 100px;
format shown in the example to the right. Start font-size: 1rem;
}
with your base styles that all variations have in
common so you are not redundant with styles. /* variant - alert color */
.component-alert {
color: #ff0000;
Next, write your sub component styles and }
variation styles. Any media queries styles
/* variant - success color */
should be added underneath each component .component-success {
and not in a separate stylesheet. This will color: #00ff00;
}
greatly improve future maintenance because
you will know what styles are impacted when a
@media (min-width: 480px) {
component changes. .component-heading { width:auto; }
}

Web Design Primer Code Guide 1.2 - BootstrapCreative : 22

CSS Code Best Practices
1. Try and list properties in this order: 1. 7. Place closing braces of declaration blocks
Positioning, 2. Box model (display, float, on a new line.
width, etc), 3. Typography (font, line-height), 8. End all declarations with a semi-colon to
4. Visuals (background, border, opacity), 5. prevent errors.
Misc (CSS3 properties)
9. Lowercase all hex values. For example,
2. Any rule set with multiple declarations #fff instead of #FFF.
should be split to separate lines because
10. Avoid specifying units for zero values. For
syntax errors on Line numbers would be
example, margin: 0; instead of margin: 0px;.
hard to find.
3. Use soft-tabs set to two spaces, set
Sources
encoding to UTF-8
Code Guide by Mark Otto, creator of Bootstrap
4. When using multiple CSS files, break them Google Style Guide
down by component instead of page.
5. Keep media queries as close to their relevant
rule sets whenever possible. Don't bundle
them all in a separate stylesheet or at the
end of the document.
6. Do not use @import because it slows down
page load.

Web Design Primer Code Guide 1.2 - BootstrapCreative : 23

Images Guide

Web Design Primer Images Guide 1.2 - BootstrapCreative : 24

Image Format Comparison
JPG GIF PNG8 PNG32 SVG

Characteristics Characteristics Characteristics Characteristics Characteristics

• Raster • Raster • Raster • Raster • Vector
• Lossy 1 • Some • Some • Full • Transparency
Transparency 2   Transparency 2 Transparency
When to Use When to Use
When to Use • Lossless • Lossless
• Photographs • Icons, logos,
with a lot of • Animations When to Use When to Use text that you
colors, shapes, • Solid colors, • Solid colors, • When you want want to be
and forms. symbols, and symbols, and a jpeg with high quality on
• Good with line artwork line artwork transparency retina displays
gradients to • Web banners
lessen banding

1. Lossless and lossy compression are terms that describe whether or not, in the compression
of a file, all original data can be recovered when the file is uncompressed.
2. 1-bit transparency. Pixels are either solid or completely transparent, but never partially
see-through.

Web Design Primer Images Guide 1.2 - BootstrapCreative : 25

Responsive Images
<picture>
<source srcset="https://dummyimage.com/2000x400/000/fff" media="(min-width: 1400px)">
<source srcset="https://dummyimage.com/1400x400/000/fff" media="(min-width: 768px)">
<source srcset="https://dummyimage.com/800x400/000/fff" media="(min-width: 576px)">
<img srcset="https://dummyimage.com/600x400/000/fff" alt="" class="d-block img-fluid">
</picture>
<!-- If a picture looks blurry on a retina device you can add a high res img like this
-->
<source srcset="img/blog-post-1000x600-2.jpg, [email protected] 2x"
media="(min-width: 768px)">

Picture Element
The picture element gives you a lot of control on how your image looks on different breakpoints and
retina displays. As you resize your window the browser will load the necessary image. It takes more
work up-front to build the images but the control is worth it in prominent locations like carousels.
CodePen of various image proportions. If you need to support IE11 and below use this polyfill.

When to Use
• When you want to change how an image looks on different breakpoints (size, cropping, etc.)
• Carousels and Image cards
Web Design Primer Images Guide 1.2 - BootstrapCreative : 26
Responsive Images continued
<img src="https://dummyimage.com/400x200/000/fff" srcset="https://dummyimage.
com/800x400/000/fff 1000w, https://dummyimage.com/1600x600/000/fff 2000w, https://
dummyimage.com/1600x600/000/fff 2x" alt="">

Image srcset
Image srcset is an attribute added to an image tag and provides various images for the browser
to use depending on the viewport width. It is best used when you need little control on how it is
cropped and sized. But you want to speed up page load on mobile and get rid of image pixilation on
retina displays. If you need to support IE11 and below use this polyfill.

One challenge with this solution is that the image is loaded on page load and does not change
when the browser is resized due to image caching. To work around this, I found using the Chrome
extension Cache Killer helps when testing sites.

When to Use
• Blog post images
• Any image you want to look the same (same proportions and image) but just want to
increase resolution.

Web Design Primer Images Guide 1.2 - BootstrapCreative : 27

Things I wish I Knew Earlier

Web Design Primer Things I wish I Knew Earlier 1.2 - BootstrapCreative : 28

 use. If you have never used these tools, you
will be surprised to find your beautiful design
doesn't actually achieve the goals your first
set out to solve.

Your client or boss could love your design at

launch and three months later ask you why
1. Know and embrace common proportions they are not getting leads or not ranking #1
and measurements (21:9, 16:9, 4:3, 3:2). for a certain keyword phrase.
When creating layouts you will often place
videos and images at pre-determined 3. GitHub projects can have multiple
proportions. Your design will be more versions of files stored inside one folder
cohesive if you use those proportions for on your machine called branches.
other elements like carousel images and If you switch branches with GitHub desktop
product images. the files are changed automatically to the
new branch. This was a mental shift for me
2. A great design doesn't guarantee because I was so used to having different
great results. versions of projects in different folders on
Design and test for the majority of users and my computer. I was also afraid of losing or
focus on making it a great experience there overriding something.
first. Use tools like Google Analytics and
Hotjar to monitor how people use your site
and look for ways to make things easier to

Web Design Primer Things I wish I Knew Earlier 1.2 - BootstrapCreative : 29

 4. Designing and building responsive
websites require 3x the time & effort of a
static desktop site. Failure is an event.
Make sure you factor time in for quality
assurance testing after you complete the
Not a person.
initial build. Responsive design requires - Zig Ziglar
buy-in from designers, developers, writers,
and executives.

5. Feelings of failure are normal. What has helped me is allowing more time
No matter how much I learn I will always necessary to learn. Often I would force
have times when I experience feelings of myself to solve something by the end of
inferiority. Sometimes I get assigned a new the day or before lunch. Sometimes it just
project and I cannot figure it out. Everything I takes more time to solve the problem we are
try doesn't work and I have exhausted every facing. Taking a break and do something not
Google search I could think of. The longer computer related helps to clear our mind. So
the problem goes without being solved many times I have struggled with some code
the worse I feel. Then I start asking myself for an entire day and being so stubborn to
questions like, "How can you be a developer stop until it was fixed. Then when I finally did
if you can't solve this?" or "Your boss is take a break, I would come back and find the
going to think you are a fraud and will fire smallest thing causing the problem. Like a
you for not knowing how to solve this." period instead of a comma. : /
Sound familiar?

Web Design Primer Things I wish I Knew Earlier 1.2 - BootstrapCreative : 30