Web Design For SEO – So far, your web design may always be 100% oriented towards visitor convenience, beauty and usability. Yes, that’s not wrong at all, because basically designing a website is to create ease, interest and effectiveness in accessing the website later.

However, if the site you are designing is the type of site that will really need search engines to source visitors, it is highly recommended to add a fourth orientation to your web design, namely search engine orientation. Web design can be used to improve SEO through certain tricks at the time of coding so as to make it SEO Friendly. This is commonly known as onpage SEO (SEO on your web pages).

Also Read: 7 Web Design Tips For Visitor Convenience (UX)

Well, here are 10 tips to make your web design search engine friendly so that it can optimize the SERP of your website.

Web Design for SEO
Image by Tutaka Tsutano

1. Reduce the number of objects loaded
   The more objects that are loaded, the heavier and longer the page will be when accessed. And the longer a website takes to load, the worse its reputation in search engines will be. Know that currently site speed is an important factor for SEO optimization. In fact, Google itself has even created its own sub-web to discuss and analyze site speed: Google Pagespeed Insight.

So, the first step is to minimize the objects that are loaded. However, that does not mean you will lose important elements for your web design. The essence of point number 1 is “Reduce code without compromising important elements of your design”.

2. Make sure the code is “Clean” and Structured
   Code that is “Clean” aka “Clean” means that the code on the web page consists only of HTML code. Javascript and CSS code is completely called from the outside, aka external. This will be very good and make it easier for crawler bots from search engines to crawl your site because crawlers only “care” with HTML code, not with javascript and CSS code.

While the structured code means that the existing HTML tags are used according to their functions and w3c standards. Examples of practice for example in the use of Heading Tags (h1, h2, h3, h4, h5, h6) in accordance with the priority of the title. H1 for site name, H2 for post title, H3 for widget title, and so on. Everything is prioritized according to its function.

3. Optimize the use of CSS
   CSS optimization aims to effectively use it on web pages so as to produce smaller CSS files. The practices are as follows:

Get rid of unnecessary code and avoid looping CSS. Use the same class on elements with the same style. In this case the use of the framework can be very helpful, if after completion of the code that is not used in the framework is removed.
Unites CSS in only 1 file and avoids using imports.
Compress or minify CSS code.
Calls CSS code on the head and /head tags.
Avoid using CSS inline with attributes in html tags or with style tags.

4. Optimize the use of javascript
   The principle is the same as point 3: Effective use. However, in a different way. The practices are as follows:

Get rid of unnecessary scripts and avoid loops. In this case you should avoid using jquery plugins for certain functions. It would be better if you create the function using only jquery lib, and even better if it’s pure javascript.
Avoid using javascript directly on HTML files in script tags
Place all javascript calls at the very bottom of the code structure, at the end of the body tag before /body. Or it can stay in the head tag, but by using the async attribute. This tag serves to delay the rendering or loading of the script when the page is accessed. Unfortunately, the use of this async tag sometimes causes certain scripts to malfunction.
Megkompress or minify javascript.

5. Optimize image usage
   Still the same as points 3 and 4, only the practice is different:

If the image displayed on the web is 200×200, then the actual size of the image must be 200×200 as well. Manipulation of image size using CSS code, for example displaying a 200×200 image on the web, when the actual size is 400×400 should be avoided.
Use the “alt” attribute to describe the image in text.
Compress images before use on the web, to make them lighter.
Also read: How to Optimize Website Design With Large Portrait Photos

6. Compress code
   Compressing code here specifically means compressing HTML code or other client-side code that directly builds a web page. This compression is the same as in points number 3 and 4. This is done to save source or shrink web page files so that they can load faster. Compressed code should be code that is final, meaning it will not be edited again. Before compressing, my advice is to backup first so that when there is an edit it will be easy.

To compress HTML, CSS and Javascript code, you can visit this website: https://htmlcompressor.com/compressor/.

7. Place the code for the content first
   Point 7 may indeed have nothing to do with design. But you need to do this if you want to design your website SEO friendly. As much as possible place the code or html tag that contains the content first than other website elements. An example is placing it after the code for the header section. The reason is because search engine crawlers prioritize HTML tags at the top. Because content is the most important part of a website, it is appropriate for the code for content to be placed first than other elements.

However, please note that this does not mean that this limits the art of your web design. About the position of the content on the display, that’s the job of CSS. Even if your content is displayed at the bottom, it’s okay for crawlers. But, problematic for the user experience.

8. Complete the web with good navigation
   Yep, we can’t deny that good navigation is very important for a website. This point has a value of 2 times. This means that it is good for the user experience, good for SEO too.

Navigation
Image by Martin Fisch

The following are the parts of the navigation that need to be in your web design:

Main Menu: Contains links to important pages on your web
Search Column: To make it easier for users to find content on your site
Breadcrumbs: For information so that the user knows which part of the site he is currently on
Related articles: As a recommendation for users to read other related articles
Post list widget, be it popular posts or random posts
The five elements above are clearly very useful for the user experience. However, on the other hand it is also very useful for SEO: Internal Linking, One of the most important things in onpage SEO.

9. Optimize the page on the responsive version
   Almost all major sites today, have a responsive design. However, there are 2 ways web designers make responsive web designs. The first is to use @media queries -and the like- in CSS so that all devices used by the user will only access one page that looks different on each device. Second, by creating a different page for each device. That is, when a user accesses the website from an HP device, for example, it will be loaded or redirected to the HP version page. Likewise if the user uses a Tablet or Laptop, all of them have their own versions.

Responsive Web Design

Well, of the two ways above, the best is the second way. The reason is that all data that is loaded, works and is displayed. Not like in the first way. In the first method, there is often “hiding” or “disappearance” of the data on the client side, even though the data is loaded from the server. This “hide” mainly occurs when the page is accessed from a small device such as a mobile phone. Often the functions that exist in the desktop version are not activated when accessed via HP because they will not match, even though the function is loaded from the server. Now in the second way, this “concealment” can be removed.

10. User Experience = SEO
    User experience and SEO are different. But at this point I emphasize that designing a website that is oriented towards user experience without violating the rules of good SEO, can be an amplifier for SEO.
    Here’s the logic:

Visitors feel comfortable with your website because the content is good, the navigation is good, the design is also pleasing to the eye >>> Feel at home accessing your site, read other articles through “related articles” even though they didn’t intend to >>> Reduce Bounce Rate, Increase pageviews pervisit which is very good for SEO.

Also read: List of Websites for User Experience (UX) Learning

That’s it..

Bonus Tips +

11. Use third-party Plugins, or Templates
    Yep, these points are just a bonus. Intended for those of you who don’t want to bother fulfilling the 10 points above, but still want a good web design for SEO. There is nothing wrong with using free or paid plugins or templates on your website. Especially for self-hosted wordpress blogs, you can use plugins like WordPress SEO by Yoast or Autoptimize for code compression. As for the optimized template, you can find it here.

That’s it. May be useful.

Designing a website can sometimes be a tedious job, but if you already have a Photoshop mock up, it will be very helpful, because you just need to slice it. With Photoshop, creating designs is easy. Designs that have been created using Photoshop will then be converted to HTML and CSS, which can certainly save some work.

You can look for free mock up designs and then edit them as needed, or you can also buy Photoshop mock up designs that are widely sold in the marketplace, then you just need to convert them yourself into HTML and CSS.

Here are some tutorials for converting PSD to HTML and CSS that you can follow and learn.

1. Convert PSD to HTML/CSS Online Magazine Style Template
   In this tutorial you will be taught how to easily create a magazine themed layout.

convert psd html css

2. Convert PSD to HTML and CSS Product Landing Pages
   This can be a good first step for those of you who want to learn to convert PSD to HTML/CSS. This tutorial gives you a detailed process of designing, creating files, adding logos, menus and converting to HTML and CSS code

convert psd html css

3. Convert Grunge Theme Web Design From PSD to HTML/CSS
   In this tutorial you are taught how to create a detailed grunge themed layout and convert it to HTML and CSS

convert psd html css

4. Code the Band Website Made in Photoshop
   Create a clean layout, and work meticulously to create HTML and CSS code from a photoshop file with a group band website theme.

convert psd html css

5. PSD to HTML Tutorial For Website Profile
   This tutorial is easy to follow for those of you who want to learn to make website designs that work well.

convert psd html css

6. Create a Professional Website Design from Scratch to Code
   Tutorials to create professional website designs in Photoshop easily with the guidance of this tutorial, to creating HTML and CSS codes.

convert psd html css

7. Writing HTML and CSS Code from PSD for Minimalist Web Design
   This tutorial is very good for beginners who want to learn to create a web design, because it starts with creating a minimalist web design.

Scroll can not only appear when the website page exceeds the height of the monitor, but scroll can also be used in a div tag even though the height does not exceed the width of the monitor.

This can be useful for saving space or free space on the website, usually this is widely used for chat applications, report tables, etc.

Here’s how to make a div to have scroll with html and css

Step One: Create a div tag with the class name scroll, first with HTML.

Lorem ipsum dolor sit amet.

….

….

Step Two: Then in the css you can add it like this

.scroll{
width: 300px;
background: orange;
padding: 10px;
overflow: scroll;
height: 300px;

/* additional script specifically for IE */
scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color: #11111;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;
}
the most influential script there is overflow: scroll, and height: 300px;

because this can make a div that was previously high scroll because it is only made 300px high, even though later the div will only have a small amount of space, the space for scrolling will still be visible.

Computers provide millions of colors that we can use just by writing a certain code that matches the desired color.

These colors can be used to make your website or blog look more attractive. Common colors that are easy to remember are red, yellow, green, blue and other primary colors. While the variations of these colors are difficult to memorize.

web css html color name
Color name (Photo via blog.luminoso.com)

To determine the color on a web page with CSS, we usually use a color code such as #ff0000 for red, or #fff000 for yellow.

The implementation is also easy with css, for example to give red color to the H1 tag tag

h1{ color: #ff0000 }
or you can directly write the name of the color like this

h1{ color: red }
or if you want it directly on the h1 tag

Welcome

Here is another color code you can use

Photo manipulation with CSS | To be able to manipulate photos, you don’t have to use expensive software like Adobe Photoshop, just with CSS, you can manipulate your photos to be more interesting by giving various effects.

Yep, CSS can manipulate photos, you heard right.

CSS now is not the same as CSS a few years ago, CSS is now more powerful, CSS has many features that if used properly it can manipulate photos.

photo manipulation with css

CSS3 has various features that make this possible (manipulating photos), including:

Filters, blends, modes, gradients, box-shadow, stoke, rotation, and so on.

These features make the image display in the browser more attractive, there is no need to use photo processing applications such as Photoshop if you want to just give overlay effects, multiply, screen, color-dodge, lighten, hue, saturation, gradients etc.

The effects that we usually find in Photoshop can now be done with only CSS, and instantly the browser will display the results.

Here’s a video from Una Kravets entitled Editing Images in CSS that she presented at the last dotCSS seminar.

Let’s watch the video

How to place a responsive youtube video right in the middle of the monitor screen with CSS – A few days ago a friend on a Facebook fan page asked how to make a macbook mockup but there was a video on the screen.

We were confused about what he meant so we just kept quiet, but again he asked about it, but this time with an explanation, that the video was placed on the monitor screen with css.

css responsive youtube videos

In the end we decided to help him make what he asked for. That is the placement of an iMac mockup in the middle of which there is a video that can be played, with the help of an iframe and a few css settings this can be made easily.

The first step: Create the HTML script file first.

Put a script to support viewport in the header so that the website can be responsive

Then create an outline of the page in the body, like this:

In the script above we create a skeleton div, then in it there is content, and inside that content is placed an iframe containing a youtube video.

Step two: Position the video with CSS

h1{
text-align: center;
}
.container{
padding: 20px;
width: 100%;
height: 100%;
max-width: 1034px;
max-height: 400px;
margins: 0 auto;
/* background: yellow;/ } .container .content { position: relative; padding-top: 20px; padding-bottom: 67.5%; /background: red;/ /height: 0;*/
}
.content iframe {
box-sizing: border-box;
background: center center no-repeat;
background-size: contain;
padding: 3.7% 8.5% 20.8%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The logic is, first determine the area of ​​the container.
Then set the position of the div for the content, making its position relative to the area of ​​the container so that the video can be placed in the right position, which is inside the container.

Then set the video iframe position, place the video in the top left position by giving a value of 0 to top & left in CSS, then make the width and height 100% so that the video fills the iframe that has been given an iMac computer image background whose padding has also been set so that fit and not stretched.

– Also read: Making Youtube Videos as Website Background

DEMO

You can see the demo results and download the script here, hopefully it’s useful

How to use Ionic Framework on Windows | Before starting to use Ionic, let me explain what the Ionic framework is for. Ionic is used to build mobile applications using website languages, such as HTML5, CSS, Javascript and others.

Make sure you have Git For Windows installed and the optional console :
Install NodeJs after the install is complete
Open Command Prompt
yusuphamdani-ionic1

NODE JS
Check whether NodeJs is installed or not
yusuphamdani-ionic2

If you get an error like:

C:\Users\LENOVO>node -v
‘node’ is not recognized as an internal or external command,
operable programs or batch files.

It means you haven’t set the path, how to set the path:

Select Start -> Computer -> System Properties -> Advanced system settings -> Environment Variables -> System variables -> PATH.

NPM
NPM (Node Package Manager). This is already installed along with the nodejs install. This tool will be very helpful when adding module nodejs will be installed by default in C:\Program Files\nodejs\node_modules\npm\bin

Check whether NPM has been installed or not

NOTE: Whenever you make changes to PATH, or any other environment variable, you must restart or open a new tab in the shell program for the PATH changes to take effect.

Type npm install –g cordova then enter, Wait until the cordova install process is complete and this requires an internet connection. When finished, open cmd and check cordova

Wait until the ionic process is complete, then check typing ionic then enter

Building ionic apps with command prompt

First we type cd Desktop, this means we open the windows desktop folder
Second, we create an ionic application that will automatically be downloaded and saved on the desktop with the folder name myapp
Myapp is the name of the application to be created
Blank is a template from ioni, there are three template options to choose from: blank, tabs, and sidemenu
Wait until the download is complete, here I will show you what, when finished, the myapp folder will be on the desktop
yusuphamdani-ionic11

Congratulations you have finished building the ionic app. To run the application on Android, I will explain it directly in the next tutorial ^_^

Free mobile version website template with jQuery | Creating a mobile version of the website is now quite necessary, because almost most internet users use cellphones or smartphones to access the internet.

So it is necessary to pay attention to website owners to immediately accommodate visitors who come using the smaller screen.

If you are someone who is looking for a mobile version of a website template made with HTML, CSS and coupled with the powerful capabilities of jQuery, then this Trixy template can be the solution to your problem.

Trixy is made with HTML and CSS, and spiced with jQuery to create various transition effects especially when switching pages.

It is suitable for personal or corporate websites. Accompanied by various sample pages such as Home, About, Contact, Gallery, Video, and others pages. If interested you can download at the link below.

Hopefully it will be useful to support your work as well as for those who want to learn to make a website with jQuery.