55+ 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 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. 


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. Each opening tag must have a closing tag. Alternatively, one tag can be closed directly.

 

  • All attributes are syntactically correct. Parameters of the attributes must always be placed in quotation marks. In addition, shortened attributes, those without parameters, are not permitted.

 

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 an <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.

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.

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

 

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.

<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

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!

 

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:

 

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
 
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
 
 
 
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 in 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 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"><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. 
 
 

Styling our page with CSS

css
 

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 a 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.

 

Using jQuery for navigation

 

 


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. 

 

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.

 

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 control 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.

 

Recommend