100+ Best Website Optimization Hacks (2019)

 

 Website Optimization Hacks

100+ Best Website Optimization Hacks in 2019

This blog explains 100+ Best Website Optimization Hacks and tips that used in 2019. And also explores how to improve Google Ranking with blog or website optimization.

 

Dynamic web pages are known as pages that are created as soon as a call is sent to the server. So data can be built interactively into the sites. They are particularly helpful when you need to react to user inputs. Forms can be evaluated immediately and the content of the next page can be shown.

Best Website Optimization

 

Website Optimization

During the optimization, there are many aspects to consider:

  • Development environment: Without the correct tools it won’t work!
  • Server-page optimization: Requests, range, and payload
  • Client-page optimization: DOOM and JavaScript

 

Website Optimization Tools

tools

Try to understand how the Web functionsSince the behavior of HTML and JavaScript usually differentiate when rendering the CSS effects in the browser. Various tools help make the procedures visible and this helps substantially to understand them.

 

You should have the following tools:

From Telerik, for Windows and Fiddler on Mono (http://fiddler.wikidot.com/mono) for Linux

F12—Tools in IE, Chrome, Firefox, Edge, etc.  Profiler, Network Analytics, CSS-Debugger, HTML-Tree, JavaScript Debugger

 

Fiddler is a web debugger and a protocol proxy. Thus you can see and evaluate the traffic between the client and the server. In terms of temporal operational sequence, the requests really happen only partly in parallel.

 

Some inquiries are only released when the browser starts processing the site. These effects can be considered within the structure of the site. The less dependence there is, the better the range that’s available.

 

Server Page Optimization

Server Page Optimization

The server-page optimization stage involves the following topics:

  • Pipeline optimization
  • Process configuration
  • CDN
  • Bundling
  • Sprites

 

Pipeline Optimization

At the core, it concerns unloading (to deactivate) unnecessary modules. Web servers come with a whole set of modules, which fulfill all possible tasks. This begins with authentication and ends with simple logging.

 

It’s in the nature of these modules that they treat each request. Small delays can have drastic effects. If you work with Apache on Linux, use the command a2dismod:

$ sudo a2dismod auto index

 

Process Configuration

The goal here is the optimal use of resources. In addition, you adapt the process configuration to the concrete hardware conditions. For a Windows server, IIS covers the following steps:

maxWorkerThreads

20 per core (4 cores == 80 threads). More is possible if there is CPU-intensive work (e.g., much async, service calls), then values to 100 are possible.

 

max threads

20 per core. For file operations, database access, web service calls, internal requests etc. with fast hardware, SSD etc., values up to 100 are possible for a 10Gbit net.

minWorkerThreads, minIOThreads

Standard 1. Steers the beginning of the request queue. At least the value must be free so that it will not be queued.

 

memoryLimit

A portion (%) of the system memory that the worker process may occupy. If the application is alone, the value may be high, e.g., 80. With many lags or other applications, COM will reduce the value.

 

CDN (Content Delivery Network)

CDN_network

A Content Delivery Network (sometimes called a Content Distribution Network) is regionally distributed and makes it possible to deliver content, such as scripts, pictures, and videos, over the Internet.

 

The goal of a CDN is quicker answers to requests and less latency. For general files, like jQuery, Knockout, etc. Microsoft, Google etc. will be there for you. For your own resources, you are liable to pay the costs for services such as CacheFly (simple, upload/distribute) and EdgeCast (complex, DNS catching).

 

Minify and Bundling

Bundling and minifying are two techniques that can improve load time. This essentially happens by summarizing resources (bundling) and avoiding requests. Due to the overhead of HTTP protocols, it requires the distribution of many small files, while it has more bandwidth than a large file. The creation of sprites is not really manually controllable.

 

Therefore, a variety of tools for all platforms and operating systems is provided. Ideally, you furnish these tools as part of the production procedure. How it looks depends on the development system.

 

Sprites

An individual diagram file, which contains several symbols and picture components, is called a sprite or a CSS sprite. These summarized diagrams function as picture suppliers and serve to minimize the load time of the web pages. The individual elements of this total diagram faded out of place with the background-image and background-position CSS characteristics. 

 

Due to the overhead of HTTP protocols, the distribution of many small pictures requires more range, as the distribution of a larger picture.

 

Here is an example of CSS that works with sprites

flags-canada, .flags-mexico, .flags-usa {
background-image: url('../images/flags.png');
background-repeat: no-repeat;
}
.flags-canada {
height: 128px;
background-position: -5px -5px;
}
.flags-usa {
height: 135px;
background-position: -5px -143px;
}
.flags-mexico {
height: 147px;
background-position: -5px -288px;
}

 

The creation of sprites is not really controllable. Therefore, a variety of tools for all platforms and operating systems is provided. You can do this under a node or on a system, that has installed a node. Take Spring as an example. This is how you install it:

$ npm install sprity -g

Then you combine all the pictures of a folder into sprites:

$ sprity ./outputfolder/ ./inputfolder/*.png

General and Banal

code

Generally, you should be sure not to use these certain techniques:

  • Try to avoid redirects
  • Try to avoid frames/iframes
  • Try to avoid DNS lookups (absolute paths)

 

Spreading assets on various hosts are called off-loading and look like this:

  • www.greatsite.com
  • images.greatsite.com
  • scripts.greatsite.com

 

Essentially, browsers only send a certain number of requests per host (between 6 and 13) and if you have three hosts, this triples the available range. With static assets, you should avoid cookies and headers, if possible.

 

Absolutely use Gzip/Deflate for compression. It should be available on practically all systems. Then configure the server in such a way that it uses Gzip. ETag (entity brand) is not needed—you can remove this header field if you want to.

 

Client-Site Optimization

Client-Site Optimization

Here is only a short overview of the possibilities. These are simply suggestions, and you can find many more examples on the Internet.

 

Handling Pictures

If modern browsers are available, use inline pictures. Particularly for dynamic pictures, for rare or frequently changing ones, this method is favorable. 

<img class='lazy' data-src="data:image/gif;base64, R0lGODlh.......and so on ....">

The coding of Base64 is suitable, such as http://webcodertools.com/imagetobase64converter.

 

You should never scale pictures, but always compute them before (on the server) and compress them before delivering. Use font libraries, so-called symbol fonts, if possible.

 

Font-based symbols are more streamlined, whereas individual pictures and symbols have more stringent requirements. All symbols are loaded as fonts, thus they exist in a file. However, symbols are more like letters.

 

Their size can change, but they can only accept one color. Fonts are mostly fine if you don’t mind the 3D effect ones. For fast, modern web pages, Glyphs is far more established.

images

Some examples

  • Font Awesome: 479 symbols
  • Octicons, the GitHub Icons: 160 symbols
  • Elegant Icon Font: 350 symbols
  • Typicons: 336 symbols
  • Meteocons: 40 Weather symbols
  • Open Iconic: 223 symbols that can’t be reduced to eight pixels

 

This is certainly only a small selection. Be sure to search around to find options that meet your exact needs. If you use JPG files, try to remove any junk data. This is the meta-information that adds cameras, partly in programs such as Photoshop.

 

Kilobytes of information is wasted that way, such as for the date, camera data, etc. Generally, pay attention to the suitable image format.

Handling the DOM

Handling the DOM

The JavaScript language is extremely fast. What’s problematic is accessing elements in the object tree of the site (document object model, DOM). To illustrate this, look at this jQuery example:

 

$('#dialog-window')
.width(600)

.height(400)

.css('position': 'absolute')

.css('top', '200px')

.css('left', '200px');

An element gets addressed as #dialog-window and is accessed six times in a row. This is very unfortunate. It’s better to do it the following way, which changes all values with one access:

$('#dialog-window').css({

width: '600px',

height: '400px',

position: 'absolute',

top: '200px',

left: '200px' });

 

Here a batch is provided when rendering. Provide dynamic DOM blocks separately and insert the entire tree in one step. This leads to the screen refreshing on many indication procedures. You should know that the browser draws the surface each time the DOM is changed.

 

Sequences with many small changes require a substantial amount of computing power. Even if this is available, it means nevertheless a lot of battery service life will be used if you’re using a mobile device.

 

Shapeliness

well

The rules permit the examination of the shapeliness of documents by the processing program without knowledge of the grammar of the language. The term shapeliness, which means “well-formed,” is a basic characteristic of markup languages. A document is considered shapely if the following features apply:

 

  • All tags are syntactically correct. All beginning tags have an end tag, whereby upper- and lowercase are to be considered (<tag></Tag> is inadmissible). Each opening tag must have a closing tag (<tag></tag>). Alternatively, one tag can be closed directly (<tag/>).

 

  • All attributes are syntactically correct. Parameters of the attributes must always be placed in quotation marks (<tag attr= "param">). In addition, shortened attributes, those without parameters, are not permitted. The HTML tag <hr noshade> would look in XHTML (the corresponding HTML in XML) as follows: <hr noshade= "noshade"/>.

 

  • Correct nesting is necessary. Tags must be correctly interlocked. The following code is wrong: <b><i></b></i>. Instead, it has to be written as follows: <b><i></i></b>.

 

Validation

validation

In a second processing step, the grammar must be naturally checked. It concerns their relation permitted tags, and the possibly applicable attributes. This step is called validation.

 

A document must be recognizable as valid before processing. A regulation must naturally exist for validation, from which the parser can derive the validity, and there are several procedures. A so-called null end tag (NET) was permitted in SGML. It was an abbreviation, in order to avoid the closing tag. With NET, you can write the following:

<quote/Quoted text/ Without NET, it would look as follows:
<quote>Quoted text</quote>

 

The short version for elements without contents is called <quote// which corresponds to <quote></quote>. HTML attempted to take over this feature and close elements like XML correctly. That is because the <br/ would be wrong in this case, and a <br/> as <br>> would be just as wrong. The “correct” slash is here the error.

 

With the implementation, the browser developers considered this and did not adopt the SGML typical spelling. In this case, HTML leans more strongly against XML. In HTML5 it was still theoretically permitted and the SGML spelling was explicitly forbidden.

 

XML (and thus XHTML) serves to avoid the problems of this syntax completely. In order to make empty elements possible, a special spelling is used: <b/>.

 

The slash in the end returned, and it is now correctly placed between the < and > delimiters. (XML head fields, attributes. etc.). It is thus perfectly senseless and makes viewing the document more difficult. If you regard a cutout, the impression is formed that it concerns XHTML.

 

However, that is not the case and begins an unfortunate chain of errors. Developers who do not know HTML might nevertheless be irritated by specific tags on other sites that do not appear to be closed.

 

In addition, here it must be said that people, having access to the source code of HTML, should learn it themselves rather than rely on protected bases of crude measures.

In earlier times, XML was used because editors could deal with it better. Current development environments such as Visual Studio are rather good in their HTML knowledge and need no private tutoring anymore.

 

Special Cases

special case

Actually, there is only one correct special case: <script></script>. All the other ones are, at best, annoying. The script tag can be empty if it only refers to one script file. However, then it may not be shortened. Thus, the following is correct:

<script class='lazy' data-src="my-script.js"></script>

 

The short spelling is consistently ignored by all other browsers on the market:

<script class='lazy' data-src="my-script.js" />

<script>

function ShowMe(v){

alert(v);

}

</script>

The reason for this is the XHTML specification. Here the pattern will be specified that an element cannot be empty. That is logical, because you can write script code directly into a tag.

 

Site Structure

Site Structure

The listing shows the basic structure of a complete HTML site.

Structure of an HTML Site
<!DOCTYPE html>
<html lang=en xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta charset=utf-8 />
<title>Name</title>
</head>
<body>
Inhalt
</body>
</html>

 

The <body> tag indicates the contents range, the <head> tag is the control block. The HTML site can be regarded as a Document Object Model (DOM). 

 

The Document Object Model (DOM) is a specification of an interface for access to HTML or XML documents. In the browser, DOM is at your disposal via a JavaScript API.

The contents range, so basically the <body> tag works as a document object.

 

The Doctype

doctype

Each document must begin with information about the type of document. The browser recognizes by the Doctype declaration which type the HTML document is. <!doctype  html>

 

The <head> element is a mandatory element and contains information about the document following the HTML body. 

Head Area of an HTML Site

<!doctype html>

<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta name=keywords content="Diese Angaben können weggelassen werden">
<link rel=stylesheet href=style.css>
<style>- Platz für CSS</style>
<title>Meine erste HTML5-Seite</title>
</head>

 

Codings

coding

You should always specify the encoding you need explicitly. UTF-8 is the most important standard since it contains all the special characters and Asian characters. 

 

As an example, in old HTML documents, you had to write down umlauts as ü, ä, etc. in order for them to be represented. These so-called entities are no longer necessary unless you cannot use UTF-8 (for whatever reason). 

 

In order to prevent web pages from being viewed in a very small format on your mobile phone, you can indicate scaling with <meta name=”viewport”…>, which adapts the site the viewport. The other meta-information such as author, keywords, and description are automatically ignored by search engines such as Google and can be omitted.

The title shows the names of the file in the browser or the tabs and should, therefore, be meaningful. Consider a single page application, which can be provided with AngularJS and can be used across multiple pages.

HTML5 Site Structure

HTML5 Site Structure

 

Typical HTML5 Page

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5-Seite mit Grundstruktur</title>
</head>
<body>
<header>
<img class='lazy' data-src=logo.png alt=logo>
<h1>My Company</h1>
</header>
<footer>
<a href=contact.html>Kontakt</a>
<p>&copy; 2016 by Joerg Krause</p>
</footer>
</body>
</html>

 

The <body> is the visible range of the web page. Most web pages have a so-called page header that appears before the body and usually contains a logo, title, and navigation elements. 

 

Further, there is the element called <footer> that should contain the contact, imprint, copyright, and possibly the sitemap. Although the name suggests it’s a position below the contents, this is not necessary. This concerns a semantic element; it’s not an organization regulation.

 

[Note: You can free download the complete Office 365 and Office 2019 com setup Guide for here]

 

Structure of Navigation

Structure of Navigation

<body>
<header>
<img class='lazy' data-src="logo.gif" alt="logo">
<h1>Heading</h1>
<nav>
<ul>
<li><a href="#link_1.html">Wiki</a></li>
<li><a href="#link_2.html">Blog</a></li>
<li><a href="#link_3.html">Forum</a></li>
</ul>
</nav>
</header>

 

The navigation is enclosed by a new <nav> element, which can also be used for the under navigation. Think about placing the navigation at the end of the document. You can then absolutely position it in the header and get a pleasing representation on mobile devices.

During a placement before the document’s contents, you can mark the contents with the <main role="Main"> tag in order to let screen readers jump directly to the page contents.

Structure of Sections

 Structure of Sections

 

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 Page with Base Structure</title>
</head>
<body>
<header>
<img class='lazy' data-src=logo.gif alt=logo>
<h1>Title</h1>
</header>
<main role=main>
<h1>Heading</h1>
<p>This is my first HTML5 page</p>
... more content
</main>
<aside>
<h2>More links</h2>
<ul>
<li><a href=link_1.html>Wiki</a></li>
<li><a href=link_2.html>Blog</a></li>
<li><a href=link_3.html>Forum</a></li>
</ul>
</aside>
<footer>
</footer>
</body>
</html>

 

Sidebars or marginal notes are represented in HTML5 by the <aside> element. It doesn’t matter where the sidebar will be placed (right or left or down the side), because you’ll determine that later with specific CSS features.

 

The <aside> block contains information about the contents about the web page; however, they aren’t automatically part of the content of the web page. Also, this is a semantic element.

Contents Range of a Simple HTML Site
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 Page</title>
</head>
<body>
<header>
<img class='lazy' data-src=logo.gif alt=logo>
<h1>Title</h1>
</header>
<article>
<h1>Heading</h1>
<p>This is my first HTML5 page</p>
... more content
</article>
<aside>
<section>
<h2>Contact</h2>
<ul>
<li><a href=link_1.html>Wiki</a></li>
<li><a href=link_2.html>Blog</a></li>
<li><a href=link_3.html>Forum</a></li>
</ul>
</section>
<section>
<h2>More links</h2>
<ul>
<li><a href=link_1.html>Wiki</a></li>
<li><a href=link_2.html>Blog</a></li>
<li><a href=link_3.html>Forum</a></li>
</ul>
</section>
</aside>
<footer>
</footer>
</body>
</html>

 

For the distinction of the contents range, there are three elements:

<main>: The main content of the site.
<article>: An article that contains a heading (and possibly some sections, closed in on itself, and a header and footer)
<section>: A section like a blog, a…

 

Use <article> if contents in the one paragraph are final. Use <section> if there are several similar blocks. The actual content in the examples in this blog does not really matter. It’s the structure that matters here.

 

Elements of the Page Contents of an HTML site are text, text elements, and external resources such as pictures and videos. This section is only a compact overview of the possibilities for beginners, in order to set the stage. You are encouraged to check out the complete documentation if you have questions and need more guidance.

 

Text Elements 

content

Under text structuring, all the elements are summarized, which reflects the structure of the text of a web page. For example, headings or text sales.

<h1> … <h6>: Headings in six hierarchical levels
<p>: Text paragraphs
<pre>: Preformatted text
<blockquote>: Quotation blocks
<figure>: Graphic additions, about charts, code examples, and photos
<figcaption>: Description of the contents of one <figure> element
<hr>: Thematic break, a horizontal line
<ol>: Regulatory lists (with numbers/letters)
<ul>: Unordered lists (enumerating characters)
<li>: Elements that have created lists with <ol> and/or <ul>
<dl>: Definition lists
<dt>: Term that’s described in a description list
<dd>: Closer representations of <dt>; definition data
<div>: Grouping element without a semantic meaning

 

All these elements are block elements, so they stand without further measures alone on a line. The following elements fall on the free-range under block elements.

 

Designing Your Own Flat Website

blog

This blog section will be a practical step-by-step guide on how to design a simple website

 

Planning your work

Planning is definitely one of the most important stages in designing a website. Most of the work boils down to knowing exactly what and how you will design and develop your website; planning is where all these decisions will be made.

 

You need to first define your target and your website objective, what you want to achieve, and for whom. Imagine that you're creating an online e-commerce website for a gadget company. The objective will be to sell those gadgets online (the "what"), and the target would be men of the age group of 25 to 50 (the "who").

 

These are usually pretty simple to understand. However, in case you ever find yourself with an unclear briefing from a client, make sure that you understand their objectives and targets beforehand because there's nothing worse than an uninformed designer working on a project.

plan

However, in this case, we're creating our own portfolio page. So, essentially, we're creating a page intended to showcase our work (the "what") to designers and possible future clients (the "who"). Of course, the target, in this case, is not as easily defined as a toy company or a women's clothing store, but the target always exists.

 

You can be a designer who is more interested in mobiles or fashion, so try to have this in mind when designing your website. Your online and offline images should make the viewer associate you to a certain market, and this is done by creating and implementing a specific approach and style to your homepage design.

 

Unfortunately, I won't get to know you personally, so we'll have to create a simple and flexible designer portfolio. This should be something that can be used for a general portfolio, regardless of your work specialty. So, let's get down to planning!

 

Defining your sections

section

Since we're designing a portfolio, the focus is on showing the work of the designer. We will have just a couple of sections here; they are as follows:

  • Work/Portfolio: This is a place to showcase your design projects
  • About: This is a small text description of you as a designer and person and your experience
  • Contact: This is a place to store your contacts so that the viewer can contact you, and your location

 

These are the essential sections we will have to design for your portfolio. Since this is such a small and simple site, we'll create a one-page website. This kind of page is being used more and more lately. 

 

This is mainly because it presents the user with all the information really quickly and in a very simple way. Also, it provides a more dynamic experience by presenting different content on just a single page.

 

Start designing your page

design

So now that we know what we're going to design, we are ready to start sketching and designing your website. I usually start by creating a really simple sketch on paper just to mock really quickly what we're going to design. 

 

You can also use software such as Balsamiq to create your wireframes, but I prefer to start sketching on paper. So, grab a piece of paper and start sketching.

 

The page we're going to create will feature five visual blocks. These blocks are as follows:

  • Header: This is where we will put an avatar or logo to represent the designer as a brand and the menu
  • About: This is the about section with a text about you and a link to your resume
  • Projects: This is the section to feature your design work with thumbnails
  • Contacts: This is a short text block with your contacts
  • Footer: This is a really small block by the end of the page with copyright and links for social networks

 

Designing in Photoshop

photoshop

Now that we have our sections defined and our global layout is drawn out, we're ready to start creating our final pixels. So, open your Photoshop, and let's get down to business and execute the following steps:

 

1. Create a new document that is 1200 px wide and 2000 px high and has a white background. This will be the canvas with our full-length website design.

 

2. Let's start by creating our header.

We'll need to use an avatar for our face, so while you can use your own avatar, I'll grab one from http://uifaces. com/, where you can find several avatars of real users to use in your design mockups.

 

3. Let's create a shape that will serve as our header background with the rectangle tool. You can set the color of the shape to gray, as we will decide on the colors later on.

 

4. Now that we have the foundation for our header, let's put or avatar/logo in it. This will be our branding area of the website. It shows what the website is about and who it belongs to.

 

5. Create a 125 x 125 px circle and use it as a mask for your avatar. Give the mask a white stroke blending option with 5 px. This will create a border around our circle to make the avatar pop a bit more.

 

6. To create our menu, we'll use text fields.

Create three different text fields and write ABOUT, WORK, and CONTACTS in them. These will be our menu links. Set the text with the font type as Lato, font style as Bold, and text size as 20 px.

 

This is where you can experiment with the text style; try using lowercase text instead of uppercase and try a lighter weight and underline for these. You can adapt the links to the style of your choice, but I'll stick to the ones indicated, as I believe it works and looks good.

 

7. So, our header is created. 

Usually, I prefer building my color palette throughout the design of the site, as I'm able to try them out instantly. Choose one of your likings; I'll use Peter River, #3498db.

 

8. If you want to create an even more interesting and impactful header, you can also use a background image for the header. If you have an image of your work desk or your computer with the working files visible on your screen, these are great to represent your work. Put it below the colored background layer and change the color layer opacity to around 85 percent.

 

9. Since this is a one-page website, you might be wondering why we're using a menu at all. However, a menu is essential for a website, as it serves as the main navigation tool, and it also tells the viewer which content he or she will be able to find on the website.

 

Since we're creating all our sections on just one page, this menu won't link to different pages, but we are able to scroll down to a specific section using JavaScript. This is how we will lead the viewers to the section that they are looking for. 

 

10. Now we're going to create our About section.

Start by creating the title with the font type Lato, font style Bold, and a text size of 40 px. All the words should be in uppercase to maintain consistency.

 

Let's use About Me to make the tone a bit more personal. Change the color of the text to #222222, to avoid using pure black. This will make it easier on the eyes.

 

11. Next, create our content.

We'll create two text areas and populate them with our text. If you don't have text, you can generate and grab a couple of "lorem ipsum" paragraphs from Lorem Ipsum - All the facts - Lipsum generator to populate the text areas. These two blocks will be 500 px wide each and have a spacing of 35 px between them.

 

Set the text type to Lato, font style to Regular, and text size to 14 px. Also, to make the text more readable and make the columns more visually geometrical, let's select the Justify last left option in paragraph options. We'll also set the leading to 20 px.

 

12. To finish off our About section, let's open the ThesisScientist.com flat-ui-free. PSD file. There you will find premade buttons that we can use, so duplicate the Button (static) folder to our document and position it below the text areas, centered with the page.

 

Make sure you change the background color of the button to match the color that we selected earlier. Change the copy to Download Resume, and this section is completed. The following screenshot is a great example of how you can create visual blocks by just using content:

 

13. Next is the work section.

For this one, let's start by creating eight 225 x 140 px rectangles and align them with 47 px of spacing between them. Create a 2 x 4 grid with these, which will serve as containers for our project's thumbnails. Using thumbnails is an easy and quick way to show your projects.

 

You can opt to use a lightbox plugin such as lightbox 2, which is available at http://lokeshdhakar.com/projects/lightbox2/, to show a larger image, or just link it directly to the entry in dribble.

 

14. To create a visual separation of this block and to contrast with the other sections, let's set a background color for this block. However, instead of using the header color, which is too vivid and bright, let's use a lighter shade of the main color (#99cbed).

 

This will create a smoother background that will allow the thumbnails to contrast more with the background. The following screenshot shows the final result:

 

15. Now, use these rectangles as clipping masks and populate the thumbnails with your work projects. I grabbed a couple of entries from Shots - Dribbble - Dribbble to populate this example.

 

Again, we want the content to create the visual blocks, so we won't create any kind of borders, lines, or divisions. The way in which we organize content in the grid will be enough to set the visual blocks and define this section's layout.

 

16. Our work section is now done.

You can use titles above or below the thumbnails, but this is a simpler way of doing a work section, and it also shows that your work speaks for itself.

 

By reducing the number of elements on the page, we're also focusing on creating a minimalistic page, and it's impressive how simple a website can become while reducing the number of superfluous elements in it. The following screenshot is a good example of a minimalistic page:

 

17. Our Contacts section is also going to be really simple and minimal. There are several ways of creating Contact sections. Usually, you can build a contact form and show a map off of your location and use icons to represent different types of contacts. However, we will go down to the bare basics: a call to action the title, an e-mail address, and a phone number.

 

So, let's duplicate the About section's title and change it to Let's Chat. Using this kind of text creates a more personal approach to your viewers, as well as represents you as being more approachable, reminding the viewer that this is, in fact, a person who can be easily contacted.

 

18. After the title, create two text fields in two different lines to add your e-mail address and your phone number. The content of this section will be simple contact information.

 

For these fields, use lowercase text and set the font type to Lato, font style to regular, and font size to 23 px. Using a simple type like this on top of flat color.

 

We're focusing on the content and impact of the content in itself, as there's nothing else, such as boxes, lines, icons, or maps, to retract it. Flat design is very much composed by this simplicity, focusing on what's essential and the bare minimum.

 

19. With our Contact section done, we're only missing our footer to finish up the website. We'll create a small rectangle (50 px high) for the background and make it the same blue (our main color, #3498db) as the header.

 

In here, we will simply ADD our copyright text and the social network icons linked to your accounts. So, create a text field and set the font type to Lato, font style to Bold, and font size to 12 px, with the © 2018 Designer Name text. Align this to the left.

 

20. On the right-hand side of the footer, let's add links to your Twitter and Facebook accounts so that people can connect with you. You can find social logo packs with these links, or you can get the official logos from the brand assets section at Facebook Brand Resources for Facebook and https://about.twitter.com/press/brand-assets for Twitter.

 

Since we're using our main color as the footer background, let's use the white versions of these logos to make them visible on top of the blue background. Align both of them to the right of the page.

 

The footer is the last element of the website. It serves as a place to add relevant links such as social network links and copyright messaging that are general to the page. It also serves as a visual closure of the site, and it creates the contact section block by visually contrasting between blue and white.

 

Now that our website is completed, we can review the colors and the element's position. It's always easier to make this kind of adjustments and decisions after the layout is constructed, as you're able to visualize all the elements joined together and how they look. In the end, the final choices and touches are mainly to enhance the website's look and feel.

 

Spacing, color, and text make sure that by looking at a website as a whole, you'll feel that it works well, instead of focusing on individual sections. Our first flat design page is now done, and the whole website.

 

Creating our folder tree

Tree

Properly organizing your files, as well as creating a comprehensive file structure, is very important when working on big projects. In smaller projects, you might not realize the importance of this, but it's a habit you should build from the beginning so that when you work on bigger projects, you implement good practices from the beginning.

 

This is extremely easy to do, and it's also something you can adapt to your personal taste. I like to keep my files organized in categories.

 

When I begin a development project, one of the first things I like to do is create three folders: CSS, where I obviously keep my CSS style files; img, where I save the images used to build the website, and js, where I keep all my JavaScript files.

 

In the root of your main folder, you should have your HTML files in a way that you can easily load the rest of your files by using relative paths. 

 

This is a very simple task, but it helps you organize all your files in a way that lets you use relative paths, work locally, and export everything to your server more easily by the end of the project. But before we start the development of our project, we need to get our images ready.

 

Prepping our images

images
 
The first step of our development project is based on Photoshop. We need to go back to our website design file and export the images we need for our page. 
 
Since we designed such a minimal page, most of the elements in our page are made by HTML elements, not by images. We still have a couple of images though, such as our avatar and work thumbnails, so let's export them to use them in our page.

 

Regarding the avatar, there are two ways that we can go about doing this; the easy way and the proper way. The easy way is to just export our circle avatar and its border as a .png file with a transparent background. 

 

By exporting a transparent .png file, we can easily use the image in the web page with any background color, which will work and is probably good enough. But this is not the best way to go about doing this.

 

What if you want to change your avatar after the website is done? Or what if you want to update the website colors and change your stroke color? You will then need to go back to Photoshop and export this image all over again, and that is just a pain.

 

But luckily enough, we can make most of the effects in HTML, so that you can use just a regular-squared image for the avatar, and let the rest be done by code. This way, you will be able to update your avatar by just changing the regular avatar image or a couple of lines of CSS.

 

Also, if you are doing this project for a client or a company, you are simplifying the updates in the future by making the updates independent of designer work. We will visit the code for this a bit further on in the book; for now, just make sure you export your avatar as a 128 x 128 px square image. 

 

There are several ways of doing this. I like to create a new document with the image dimension (225 x 141 px), copy and paste all my layers there, and save them individually. Then, I save that document as a template for any future usage. This way, I know that every time I need to create a thumbnail, I'll just use that same document.

 

However, you can use other methods for this. You can use slices and create slices (keyboard shortcut C) for each one of your images in the document, and export the sliced images directly (on the Save for Web & Devices menu, you can select the type of slices you'd like to export).

 

You can also use the new feature in Photoshop called Generate image assets, available since 2013 in Photoshop CC, which allows you to easily rename a layer or folder to a filename (such as background.png), and then just choose to automatically generate an image file from that layer.

 

This is a good way of creating several assets for a big project, and it's very easy to update because the assets are generated automatically with any file saving option.

 

Anyway, you can go on doing this if you want, but make sure that you maintain consistency on your image size and that you export them with 100 percent opacity because if you're thinking of possibly using any kind of rollover effect, we can and will do it with CSS later on.

 

The only other two images we're missing are the Twitter and Facebook icons. For these, we'll save them as 32 x 32 px square transparent .png, so that we can still use them if we ever wish to change the background of the footer. We are now done with our image prepping!

 

Developing our page

website page
 
 
Now that we have our images ready, let's start creating our page. Just like with the design, we'll create from top to bottom, starting in the header and developing the layout down to the footer.
 
 

So, just as we covered earlier, let's start by creating our folder tree. Create the following folders: CSS, js, and img. We will also need extra resources, so create two extra folders: fonts, where we will save the custom fonts used and bootstrap, where we will save the bootstrap files we're going to be using.

 

ThesisScientist.com Flat UI Free pack is built on top of Twitter Bootstrap, so we will effectively be using Twitter Bootstrap to build this page. Twitter Bootstrap is a front-end framework that comes with a variety of predeveloped elements and styles, which makes it easier and quicker for a developer to create simple pages.

 

I am a firm believer of optimizing work, and there's no need to be continuously reinventing the wheel. Most of the things we're going to use have been done hundreds or millions of times, so let's make use of the common effort to make our own lives easier.

 

Here's when Twitter Bootstrap comes really handy. If you want to learn more about Twitter Bootstrap and see all the examples and guides, you can do so online at http://getbootstrap.com/. 

 

Now that we have our file structure created, let's populate it with the needed files. First up, let's upload the images we previously exported from Photoshop into the img folder.

 

In our CSS folder, we'll paste the flat-ui.css file from the ThesisScientist.com pack. We won't be using any JavaScript, for now, so we don't need to copy the JavaScript files provided in the pack. 

 

Copy the content of the ThesisScientist.com pack's fonts folder into your own fonts folder, and copy the bootstrap folder as well and paste it in your root folder. This includes all the styles and resources used by Bootstrap. 



html

This includes all the required files to start creating our page, and with these in place, we can finally start the HTML.

 

Open your HTML editor and create a new file called index.html. This will be our website. The ThesisScientist.com pack has a file called template.html, which is a clean starter page with the basic HTML structure already initialized, which is a good foundation to work on. So open the file, copy its content, and paste it into your index.html file.

 

We can delete some content from here. The favicon part, <link rel="shortcut icon" href="images/favicon.ico">, can be deleted as we didn't design a favicon for this page, as well as for all the scripts being loaded after <!-- Load JS here for greater good =-->. We will be using JavaScript, but we will be loading the files as we need them to avoid having unnecessary files occupying space.

 

We won't be creating any CSS file for now; we will only focus on creating the HTML file and getting the document with the content ready to style it afterward.

 

As we are using Twitter Bootstrap, we'll try to replicate our design as best as possible just by using existing features and styles from Bootstrap, and only after that can we create our own styles to customize the page to our needs.

 

So, to create our header, we will need an <div> element that will fill the whole browser in width to create that visual effect we designed. To do this, we will be using a class called jumbotron that Bootstrap already provides.

 

You can see the example Bootstrap file online at http://getbootstrap.com/examples/jumbotron/. 

Essentially, this is a div class, the width of which is defined as 100 percent and stretches to fill the browser with a different background color.

 

The structure for this div is as follows:

<div class="jumbotron">

<div class="container">

</div>

</div>

Insert this code right after the <body> tag. If you save and refresh your file in the browser, you'll be able to see the effect of the layer filling the browser in the Jumbotron div. Now, we just need to insert our content inside the div container, as shown in the following code:

 style="margin:0;width:962px;height:88px"><p class="text-center"><img class='lazy' data-src="img/avatar.jpg"/></p> <p class="text-center">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contacts</a>
</p>
 
 
As you can see, we're using class="text-center" in some of our elements. This is a Bootstrap class responsible to set the text alignment to be centered, and it will center our elements, making this look a bit like our design header. Granted, there are some things changes to be made, but we will make these changes afterward in CSS. 
 
 
website code

Pretty close to what we're looking to do, right?

Now, for our About section, we will need to create a title, two blocks of text, and a button. Luckily enough, this is also mostly done by using Bootstrap styles.

 

For the title, we will use an <h2> tag; for the blocks, we will use a paragraph with a specific block class, which will look like this: <div class="col-md-6">.

 

Twitter Bootstrap comes with a responsive grid system implemented, which is composed of 12 columns. So in this case, we want to create two blocks that will occupy each half of the screen.

 

So, every block will have six columns, hence the class col-md-6 is used. As I said, this is a responsive grid, which means that the website will adapt to tablets and smartphones by dynamically resizing the columns' sizes to fit the devices used.

 

 Our button is also easily implemented by using Bootstrap tags; in this case, it is the flat style, due to the ThesisScientist.com Flat UI pack. Our button will look like this:

 <p class="text-center"><button class="btn btn-hg btn-primary">Download Resume</button></p>.

 

The button element has the btn class, which is the main class responsible for giving the button its look; the others are to set color and behavior. We will change this afterwards to use our color and font options. So, the HTML code for this section is as follows:

<div class="container">
<div class="row">
<h2 class="text-center">About Me</h2>
<div class="col-md-6">
<p>Text</p>
</div>
<div class="col-md-6">
<p>Text</p>
</div>
<p class="text-center">
<button class="btn btn-hg btn-primary">
Download Resume</button></p>
</div>
</div>

Just replace the text of our bigger block of text to adapt it to the column; Next, we will create our Work section.

 

Since this will also have a blue wide background, we will be using the jumbotron div element again for our main container. We have a grid of 2 x 4 thumbnails in our design, and since rows and columns compose the Bootstrap grid, we will need to create two rows, one for each line of four thumbnails.

 

Thinking about the way that the 12-column grid works in Bootstrap, we will need to use 12/4 = 3 columns for each thumbnail, of which we have four. The following is our final code for the work section:

<div class="jumbotron">
<div class="container">
<div class="row">
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/1.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/2.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/3.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/4.png"/></div>
</div>
<div class="row">
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/5.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/6.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/7.png"/></div>
<div class="text-center col-sm-6 col-md-3">
<img class='lazy' data-src="img/8.png"/></div>
</div>
</div>
</div>

So, here you can see that we created a jumbotron div element for the background, two-row div elements for our lines, and each row has four divisions with an image inside, which is our thumbnail.

 

It is important to check the classes we used for this div element because they are used for grids. The div used, <div class="text-center col-sm-6 col-md-3">, has three different classes.

 

The text-center class is used to center our image in the block; it's responsive, it will change size depending on the screen size, and we don't want the image to be larger than the original file size, as that will create population and ruin the image quality.

 

The class col-md-3 is responsible to align the positioning of the images in the grid in desktop devices, meaning that each will occupy three columns. The class col-sm-6 refers to tablet devices, and it means that in tablet widths, it will show two thumbnails per line. 

 

This creates a better adaptive experience as it will show four thumbnails per line on desktops, two on tablets, and only one on smartphones, the smallest of them all, as shown in the following screenshot:

 

With only the Bootstrap code, we were able to create a responsive grid of thumbnails that we can use for our Work section, quickly and easily. The Contact section is probably the easiest of them all, as we just need to create three lines of content. We will use an <h2> element for the title again, and then two <p> elements for each line of content, as shown in the following code:

 
<div class="container">
<h2 class="text-center">Let's Chat</h2>
<p class="text-center"><a href="mailto:designer@portfolio.

com">designer@portfolio.com</a></p>
<p class="text-center">+44 1234 567 890</p> </div>

The code is fairly simple as well. We're just using the text-center tag to center the text in the page, and then we're creating a link in the e-mail so that the visitor can click directly to send any mail.

 

By using href=mailto:designer@portfolio.com, we're allowing the browser to open a mail program to create a new e-mail with the e-mail field already filled with this information, making it easier to send a message.

 

This behavior might not be good in every case, because sometimes the default e-mail program might not be configured, or the user might use a webmail client that won't be able to open this kind of link, so use this only if you believe it makes sense to. 

 

The last element to create is the footer, and we'll again use the jumbotron div element for this. We will need to make some more adjustments to make sure that the footer sticks to the bottom of the page, but we'll do that in a minute when we work in our page styles.

 

So, for the footer, we'll create the jumbotron div element, a paragraph with our copyright text, and two hyperlinks with the social network icons. This won't look at all like what we're trying to achieve, but our content is there as we need it, and now it's only down to the styles to change the look of it. The following is the final piece of code for our footer:

 
<div class="jumbotron">
<div class="container">
<p>
<span class="text-left">© 2018 Designer Name</span> <a href="#"><img class='lazy' data-src="img/twitter-icon.png"></a> <a href="#"><img class='lazy' data-src="img/fb-icon.png"></a>
</p>
</div>
</div>
With this last piece of code, our basic HTML page is done, ready for some styling work with CSS.

 

Styling our page with CSS

css
 

Let's start by creating a new file called main.css in the CSS folder. This will be where we will place our own styles to customize the look of the page to our design. With our file in place, we now need to link our CSS file in our HTML page. 

 

Go to your index.html file and add <link href="css/main.css" rel="stylesheet"> to the <head> tag, and make sure you add it after bootsrap.css and flat-ui.css; otherwise, our styles might be overridden and won't work.

 

The first change we'll be making is the text color. As we want it to be the color we set in our design, let's set the text color to #222222 for every element in the <body> tag. We do this by using the following code:

body{

color: #222222;

}

 

Now, let's start with the header, let's make its background blue. The color code we will choose for this is #3498db, and since we want to change this for every jumbotron div element, we'll target the jumbotron class, as shown in the following code:

.jumbotron{

background-color: #3498db;

}

 

Save the file and refresh it in the browser, and you'll notice that it will immediately look a lot more like your design with the blue background sections. For the avatar, I told you before that we could do the circle avatar in CSS. We're able to do this because of CSS3, which allows us to easily create rounded corners in borders and border-radius.

 

By setting that border at 50 percent, it will create such a radius in every corner that leads to a perfect circle. So, keep in mind that this won't work in every browser, as not all browsers support CSS3, but you should always use the latest technologies and techniques available to make good use of them, while always keeping in mind a graceful degradation of older versions.

 

In this case, the only problem is that the avatar will be a square rather than a circle in older browsers. This is not a major problem because it's just a visual difference and it doesn't influence the business or usability at all.

 

But going back to our avatar, we want it as a circle and with a white border, so we need to target our avatar in our CSS selectors.

 

Since our avatar is just an <img> tag, we need to go back to the HTML file and change our tag to include a class, such as <img class="avatar" class='lazy' data-src="img/ avatar.jpg"/>. Now, we can target .avatar in our CSS, and the following is the code we will use for the effects:

avatar{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: solid 5px #FFF;
display: inline-block;
}

This will do the trick and our avatar will now look exactly like in our original design. However, you might run into some problems with Safari and other browsers, as each browser has slightly different ways of rendering these elements.

 

So, you can make a small change and it will still work. Instead of having the image in your HTML file, you can define it as background image from the CSS, and this will solve the problem.

In your HTML file, change the line to <p class="text-center"><span class="avatar"></span></p>; in the CSS file, add the following parameters:
background: url('../img/avatar.jpg');

height: 128px;

width: 128px;

 

Now, it should work in Safari as well, but every time you try some new technology, make sure to check where it works and breaks because there's always some way to adapt your code to make it work. The following screenshot shows how your avatar works in live HTML pages:

 

For the menu, the following is the code we're going to use:

#header a{
text-transform: uppercase;
color: #ffffff;
margin: 0 15px 0 15px;
font-weight: bolder;
}
#menu{
margin-top:50px;
}
 
Remember, always indent your code, be it HTML, CSS, JavaScript, or any other language. It makes it easier for you and others to read and to quickly visualize and analyze a bigger chunk of code.

 

As you can see, we're using new IDs in this CSS. The #header class is the ID that we've set in the HTML for the whole header <div>, and #menu is the ID set for the <p> element where we have our menu links.

 

As we start to do more and more styling, we will need to set classes and IDs to be able to select specific elements in the HTML file. Here, we're making sure that our links are uppercase by using text-transform and changing the color to white. Also, we're changing the font weight to a heavier weight in order to adapt to our design.

 

For the About section, we need to change some things, such as the title size, the font size of the text, as well as line height. Finally, we'll use margin and padding to make the spacing between elements exactly as we had designed. 

 

A really important part of this CSS is the text-align: justify property that makes the block of text have the same text alignment as that of our design, shaping the text to fit the block and helping to visually define the layout.

 

We also want to change the color of the button to match our color palette, so we do that by defining the background color of the .btn element. This way we override the color previously used. We will also change the color on mouse rollover, so we will use the selector .btn: hover to change the style of the element when the mouse is over it.

 

You will notice that there's a small fade when you roll over the button, and this comes from css-transitions being used in the ThesisScientist.com.

Flat UI pack's CSS files, which set this as an effect applied to every link and button. Let's use the following code:

 
#about h2{
font-size: 35px;
text-transform: uppercase;
margin: 70px 0 70px 0;
color: #222222;
}
#about p.text{
font-size: 14px;
line-height: 1.70;
text-align: justify;
color: #222222;
}
#about .btn{
margin-top: 90px;
margin-bottom: 135px;
background-color: #3498DB;
font-size: 17px;
padding: 12px 40px;
}
#about .btn:hover{
background-color: #99CBED;
}

Our Work section doesn't require a lot of changes on the CSS file, as it's already pretty similar to what we're looking to do. So, we'll just change the background color of the jumbotron div element, and leave some margin between the elements to make them equally spaced, as shown in the following code:

#work{
background: #99cbed;
padding-top: 95px;
}
#work img{
margin-bottom: 50px;
}
 
 
For our Contacts section, our content is composed by an <h2> tag, a link, and text for the phone number. This is fairly easy to stylize as well, and it's mostly just color and text size changes, along with a margin setting to adapt to this part. Use the following code for the Contacts section:
 
#contacts{
margin-bottom: 80px;
}
#contacts p{
font-size: 23px;
}
#contacts h2{
font-size: 35px;
text-transform: uppercase;
margin: 70px 0 35px 0;
color: #222222;
}
#contacts a{
color: #222222;
}
#contacts a:hover{
color: #3498db;
}
 

At last, let's work on our footer. This currently doesn't resemble much of our design, so we need to make it smaller by defining its height, making the text smaller, and aligning our icons to the right. To align our icons, we'll be using float: right; we'll use margin to create some spacing between the icons. The following is the CSS part of the code created for this bit:

#footer{
height: 50px;
margin-bottom: 0px;
padding-top: 25px;
padding-bottom: 60px;
}
#footer span{
color: #fff;
font-size: 11px;
}
#footer .icon{
float: right;
margin-left: 10px;
}
 
We had to set the class icon for the element <a href="#" class="icon"><img class='lazy' data-src="img/fb-icon.png"></a>, 
so that we could effectively target just these icons and align them to the right in the same line. This concludes the CSS work for our layout page.

 

By just using some simple CSS lines to align elements and change some colors, this looks extremely similar to our design. Let's take a look at how our page appears now.

 

Using jQuery for navigation

 

As we said before, we can use a slide to the section code to create our single page website navigation, so that when the user clicks in the menu, the page scrolls to the beginning of that section. To accomplish that effect, we will be using a jQuery plugin called PageScroller, available at pagescroller.com.

 

There are two versions: Pro and Lite. For this exercise, the Lite version will be enough, as we only need the minimum functionality. The way we're going to implement this is extremely easy as well, but if you're looking for more options, you can check the plugin readme file and the website.

 

First of all, we'll need to load the JavaScript files needed for this. After unpacking the plugin, copy and paste the jquery.pagescroller.lite.js file into your js folder. We will also need jQuery for this.

 

But we will load it from the Content Delivery Network (CDN) from an external path. So, include these two lines in your <head> element, ideally before the </head> tag, as shown in the following code:

<script type="text/javascript" class='lazy' data-src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" class='lazy' data-src="js/jquery.pagescroller.lite.js"></script>

 

This will load the JavaScript files to your page, but you will now need to initialize the plugin.

 

You can do this by simply calling the function pageScroller() inside a document. ready JavaScript function, which means that it will only be started after our document is loaded. Take a look at the following code:

 
 style="margin:0;width:972px;height:21px"><script type="text/javascript">$(document).ready(function(){navigation:'#menu'});});</script>

With the script loaded and initialized, everything is ready to go. So, the way that the plugin works is listening to clicks on the element specific when initialized, that in this case, we defined as our #menu div element in navigation: '#menu'. Now, it will look for the class section to scroll to it, so we need to add this class to our titles.

 

Ideally, we want to add this to either the beginning of our container or our <h2> title for the section. The following code shows how we have defined the sections in our HTML document:

<div id="about" class="container section">
<div class="row">
(..)
<div id="work" class="jumbotron section">
(..)
<div id="contacts" class="container section">

 

This way, we're targeting the beginning of our sections each time by adding the class section to it, and when clicking in the menu, it will scroll the page to the corresponding section.

 

Try it out, and you'll see that it scrolls directly to the section clicked in the menu. This kind of navigation works even better with bigger sections, but it's a quick and easy way to add cool and easy navigation to our single-page website.

 

Designing your components

Designing your components

To create your own Flat UI pack, the first step is to define which elements you should create. Your objective is to create and gather a pack of elements to reuse in future projects, so you should look for basic interface elements that are common to most projects.

 

Elements such as buttons, form controls such as radio buttons and checkboxes, form content areas such as text fields and text areas, title style, and sizes such as <h1>, <h2>, and <h3>, once designed, thought of, and developed, can be reused in several projects. 

 

Often, a web designer finds himself or herself reusing old HTML and CSS code, so creating your own personal pack is great in order to make your workflow easier and quicker.

 

The first phase of creating your own Flat UI pack is to design your elements.

There are several designs online for UI packs, web elements, and even great icon packs that you can use as an inspiration for your own work. A simple search on Shots - Dribbble will help you find great elements that you can use as inspiration or even some freebies that you can use as a foundation to create your own designs.

 

To create your pack, define what elements you want to include and design. Make a list of the elements you need most and that you will be working on, and then start designing them.

 

As an example, let's do an exercise and create one of those elements for your personal pack. Let's create a button, as it's one of the most used and more visually impactful elements of them all, by executing the following steps:

 

1. Open Photoshop and create a new 320 by 95 px document.

2. Using the rounded rectangle tool, create a rectangle with 8 px of the radius and #2ecc71 as the background color. The output will be similar to what is shown in the following screenshot:

 

3. Let's create a more interesting flat button this time and give it some depth. Duplicate this layer, change its color to #27ae60, and move it 5 px down. Make sure that this second rectangle is under the first one that we've created in the layer order.

 

This makes the second rectangle appear as a side of the button along with its shadow. Only by making this slight change, you'll be able to see that we have a depth effect on the button.

 

4. To finish designing our button, let's create a text field with CLICK HERE written on it. Use typeface Lato, font style white, and set the size as 20 pt. Now, create a drop shadow layer style in the text layer with 1 px of distance and 1 px of size, color black with 33 percent opacity.

 

5. Now, our new flat button is complete. As you can see, we used a drop shadow in the text and a 3D depth effect in this flat button. You might be wondering about this, as I had previously spoken against the use of such effects.

 

The truth is that you can use a drop shadow and even a 3D object, such as the one used in the preceding image, as long as you're able to use them wisely and in a subtle way.

 

This button, even with a drop shadow and depth, still looks flat, and looks definitely more appealing with this kind of characteristics. However, it is, in essence, still a flat button, and not a direct representation of a physical button. Also, the drop shadow is very subtle in the text, just enough to pop the text a bit.

 

As with everything, don't be too harsh with the rules; try to experiment with the style and see what works best. However, to achieve minimalism, you need to be able to focus on the essentials and design clean elements.

 

Now that we have designed our button, we are ready to translate this into code. As this button can be entirely created in HTML and CSS, thanks to CSS3 border-radius and text-shadow features, we don't need to do any image exporting.

 

 However, in a different element, say a radio button or a checkbox, we would need to prepare those images. So, we move on to the next step, that is, exporting images and coding your elements.

 

Exporting and coding

 

coding

As I said before, this step is where you would export and prepare any images needed for your pack. There are a few different ways of dealing with images.

 

Be it an icon or a background, you should try to optimize your images as best as possible. A great way to reduce the size of images and speed up the loading of a page is by using CSS Sprites. 

 

Sprites were originally used for video games where a single image file would have several frames of an animation, which were then loaded, and changing the coordinates of the image shown would create the animation, just like in traditional animation.

 

This same technique is used for web and interface designs, by creating buttons, icons, and several states, and including them in just a single image, and then using CSS to show only the portion that we need for a certain element. 

 

There are programs and online applications that can be very helpful to create the CSS code for those Sprites, which is a lot quicker than calculating them and creating all the CSS code manually.

 

Online applications such as Sprite Cow (Generate CSS for sprite sheets) and software such as Sprite Right (http://spriterightapp.com/) are extremely helpful to create CSS Sprites, and you should definitely take a look at them and try using sprites in your next big project.

 

For now, let's go back to our button. 

code

Since our button is made up of only code, we can go directly into development without the need to export any image for this element. So let's jump straight to our code editor and perform the following steps:

 

1. Let's first create the HTML code for our button. We'll need to create a simple HTML page just to host the button. Create a new HTML file named button. HTML with the following code as a reference:

<!DOCTYPE html>
<html lang=en>
<head>
</head>
<body>
<button class=btn>Click Here</button>
</body>
</html>

Here, you can see that our button is effectively an <button> element, with the class class="nation". It is good to use small names for classes as they are small and easy to recognize and write.

 

While developing your pack, you want to think as much as you can about how you can reuse your CSS. So for instance, while creating a button, if you want to create several colors of the same button, you should create a class btn and then a class for each color, such as red, blue, and so on.

 

This way, the btn class would have only the CSS for the sizing and appearance, and you would define the color in a separate class. This means that you'd be reusing the class btn for every kind of color, making it easier to customize and change it for future usage.

 

A red button would then look like <button class=tbtn rendered class=then look l>. 

It's just a matter of thinking of how you can mix different classes for different objectives when creating your CSS.

 

2. Let's get back to our button. Now that we created our HTML file, if you open the file in a browser, you'll see our button completely unstyled, with the default browser look.

 

So, with the HTML file created, it's time for us to style this element with CSS. First of all, we want to use a custom font for this, so include this line in the <head> element of your HTML file:

 

<link href='http://fonts.googleapis.com/CSS?family=Lato:700' rel='stylesheet' type='text/CSS'>.

This will load the typeface Lato to be used in our button. For the sake of organization, we'll create our CSS code in our header, so create a <style></style> element inside the <head>.

 

3. To create the look of a button, the following is the CSS code that we're going to use:

 
btn{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border:none;
border-bottom: 5px solid #27ae60;
background: #2ecc71;
font-family: 'Lato', sans-serif;
text-shadow: 0 1px 2px #239a55;
font-size: 20px;
color: #ffffff;
height: auto;
margin: 0;
width: 210px;
display: block;
padding: 15px;
text-transform: uppercase;
width: 250px;
float: left;
outline: none;
}
 
So, going over the code, we're defining the border-radius as 8 px, and unfortunately, due to browser compatibilities, we have to include several browser prefixes to make sure that it will work in most browsers. We're not only setting the background color to our chosen green, but also set the color and typeface of the text as well as its shadow.

 

4. If you refresh your browser now, you'll see that the design we used previously is now completely developed, including the 3D depth. This was done by creating a bigger bottom border with border-bottom: 5px solid #27ae60. We've given the border a radius of 5 px and a darker shade of green, creating the illusion of depth to the button.

 

The last part, outline: none, is also very important as it's the one that deactivates the browser focus outline, which is usually a blue glow or a blue border (depending on the browser used). So this way, we make sure that our element doesn't have any other kind of effect applied, other than the ones created by us.

 

The following shows us how the button looks now with our CSS:

A great resource to create your CSS3 code is css3generator.com. It lets you fine-tune and visualize details such as border-radius and box shadows. It is great for helping you deal with several browser-specific prefixes.

 

Now, for the different states, our button has the following properties that are used in this code:

 
btn:hover{
outline: none;
border: 1px solid #27ae60;
margin-top:3px;
}
.btn:active{
outline: none;
padding-top: 16px;
padding-bottom: 14px;
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 1); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 1); }
 
The .btn: hover class is the rollover effect that occurs when the mouse is over the button. What we're aiming to do is to make it appear as if the button is being pressed.
 
So we're changing the border to a smaller one in order to give a sort of shadow to the button and losing the bigger border-bottom. However, since the button needs to go down, we give it a margin-top of 3 px to make it look like the button is really being pressed down.

 

For the active state, when the button is clicked, we want to make it look like it's been pressed down from its previous state. So, we're creating an inset shadow and changing the padding to make the text go down a couple of pixels, just enough to make the user feel like it's physically going down a bit.

 

While interacting with it, you understand the effect it creates and how well it works. The following screenshot shows the button in the active state:

 

This is it for the development of our button! It's ready to be used in your pack and in future projects. You can always customize it further and create different sizes for it based on the same kind of appearance.

 

Documentation is key

Documentation is key
 

When you're creating your elements and your scripts, you should document everything. Organization and documentation is extremely important so that you can properly reuse the elements that you create.

 

Also, if you're working with more people on a regular basis, you should make sure that all your classes have understandable names. Also, make sure to comment your CSS as well as your HTML in such a way that anyone else can just grab and use your code in the future.

 

Sometimes, it so happens that bad names for classes are used, and when you're looking for a specific class or trying to understand your code, it can be a really daunting task without any kind of support or documentation.

 

The best way to make sure that all your code is understandable is to use comments.

In HTML, you can do that by using the enclosing code or text comments as follows: <!-- This is an HTML comment.-->

In CSS, you can also comment code or add your own text as follows: /* This is a CSS Comment */

 

These can and should be used as much as possible. Be concise and describe exactly what your code does, as, in the future, you or anyone else will revisit it and will need to get an understanding of the function and objective. You can also use comments to timestamp changes and author in order to keep track of the last updates on a file.

 

In the case of bigger and more complex projects, you can create complete readme files, with textual guides that explain the elements and how to design them. However, comments are usually enough for this and are easier as they are placed directly in the working files.

 

Recommend