It’s 2019 already and new website trends are coming out but the foundation of building a high performance is still a must to follow. So in this article, I will be spilling out website tips to help you build a better website. And shout out to Good Web Design (on Twitter), I got this idea of giving website tips from them. Follow them on twitter @goodwebdesign, I learned a lot from them.

So much for that intro, let’s now start spilling website tips.

#websitetip No. 1 – Keep your domain name short

Long domain names are hard to remember, hard to spell over the phone, and tricky to fit onto business cards! Make your domain short but not too short, preferably with no greater than 18 characters.
And also, most importantly, include the main keyword on your domain name. If you’re running a construction company, you may include the keyword “construction” in your domain name, it helps a lot in Search Engine Optimization.

#websitetip No. 2 – You get what you pay for

Sure, you could get a free WordPress theme or use some cookie-cutter website-building service, but the trade-off is that you have to accept certain limitations that free website builders put in place. Website builders tended to be rather basic with enough functionality to just get the job done, it might work, but you wouldn’t get the efficiency and beauty that a professional would provide.

#websitetip No. 3 – Make it Responsive

More and more people tend to look through the internet with mobile devices and making your website “responsive” is a great marketing strategy you should start with. Make sure your website displays correctly on any screen, test it on a desktop, tablet and mobile to see differences and if necessary change it so that it works differently for different devices.

#websitetip No. 4 – Keep your website consistent

Consistency is a golden-rule in design. It means making everything matches from the Heading sizes, font choices, coloring, button styles, spacing, design elements, photo choices, etc. Everything should be themed to make your design consistent in all of the pages of your site. Consistency is the key, it is the biggest factor that separates a negative experience from a positive one.

#websitetip No. 5 – Website logos should link to the homepage

This recommendation is a long-standing web convention. Over time through trial and error, many people have learned that clicking on a site’s logo leads them back to the homepage. Following this standard on your site reduces confusion.

#websitetip No. 6 – Reduce the number of form fields

The shorter the form is, the higher the conversion rate will be. You don’t have to ask everything during their registration ( ex. Gender, address, or birthday), ask only the important ones ( like email address, number, full name, etc. ), you can just remind them to complete their details later after the registration.

Remember to keep the form short by limiting the data you collect to ones that are absolutely essential.

#websitetip No. 7 – Generate plain English URLs

It should come as no surprise that the easier a URL is to read for humans, the better it is for search engines.

Make sure to make your URL readable like this:
yoursite.com/use-plain-english-URLs-in-WordPress

Not like this:
yoursite.com/wpsamp/?p=123

#websitetip No. 8 – Use white space

Designers adore it. White space is an important element of design, it makes your content more legible while also enabling your user to focus on the elements surrounding the text.

#websitetip No. 9 – Always add an alt text to your images

Google can’t see what your images look like, but they look at alt tags to see what the image is about, and so ALT TEXT is a must on every image used. Adding alt tags to your images can also positively impact your website’s search engine rankings. If you have an e-commerce website, make sure to add an alt tag to your product photos.

#websitetip No. 10 – Use proper grammar

Proper grammar and spelling are very crucial for online marketing. Though Google already said that spelling and grammar is not a search engine ranking factor, a handful of spelling and grammar mistakes can still somehow affect your website performance, they will kill your credibility. If necessary, get yourself a copywriter or ask someone else proofread your content before publishing.

#websitetip No. 11 – Make your footer a mini sitemap

If you have a large site, you should make your footer a mini sitemap of its own. Putting too many links in your header can make it look messy. Reserve the header only for the most important content links and some of the links in the footer section. When users can’t find what they’re looking for in the header, they’re going to look in the footer.

#websitetip No. 13 – Make sure your website loads as fast as possible

Page load time can greatly affect your user experience and your site’s ability to convert visitors into buyers or into leads.

A one-second delay in page load time yields:
11% fewer page views
16% decrease in customer satisfaction
7% loss in conversions

Read this article “ SEO: 9 EFFECTIVE WAYS TO IMPROVE YOUR WEBSITE’S PERFORMANCE ” to help you be guided on how to make your website loads as fast as possible.

Now that you’ve learned some of the fundamentals of building a high-performing website, it’s now time to apply it to your website. If you need professional help in building a high-performing website, you may contact us via phone call 0905-525-0851 | (032) 410-6528 or email us admin@go2designlab.com.

Stay tuned to for more essential website tips.

With continuously evolving trends and tech, there has never been a more exciting time to be a designer. 2019 will be all about delivering on user experience: web design trends will prioritize speed and mobile design, eye-catching simple designs with asymmetrical layouts, immersive video backgrounds, and more.

Here are some of the dominating web trend predictions for 2019, but this is by no means the last word on creative innovation.

Bright and vibrant colors
Color is one of the most exciting tools for a designer to communicate a brand’s message. It not only has the power to draw attention but also has a direct influence on emotions and actions. Making such a strong impact, it makes sense that color choices should also be carefully considered for a great website design.

Bright and vibrant colors are excellent for attracting attention and highlighting call-to-actions. Too many bright colors can be distracting to the eye and actually decrease a viewer’s ability to remember information which is why it’s vital to find the right balance. It enhances all the right details and harnesses the audience’s reactions without feeling overwhelming when used correctly.

Even more video content
There is no surprise when I say that video headers are becoming popular. You might think with speed being such a huge factor this year that videos would bog down a site too much, but, interestingly, video backgrounds have been shown to increase conversions.

You don’t need an explainer video to tell you that video content for the web is nothing new. Video not only diversifies the page but caters to an on-the-go audience who don’t have the time to scan through a lot of text.

Videos encourage people to stick around and spend more time on your website. And, that’s why the video has become a strategic web design element

Responsive Design
Any website design having flexibility among all the screen resolutions and the devices are the most important approach among all the website trends. With mobile sites taking priority away from desktop sites, it’s no wonder that mobile first design has become a trend.

Responsive web design adapts to the size and shape of the device screen used to view your site. Well-executed responsive design provides a great user experience for everyone who visits your website. It creates a great user experience and is cost-effective which is also recommended by Google. It is very easy to manage as the website has one URL and HTML, regardless of the device. As it makes it easier for users to share and interact with the link provided.

Chatbots evolve
Chatbots have been up-and-coming for a while now but will finally move into the spotlight in 2019. This is mostly due to the advancements in AI and machine learning, making them more intelligent and efficient.

Over the last several years, interacting and communicating with bots has become more and more normal. Bots, or chatbots, are becoming increasingly common on websites and micro-interactions across digital media. It’s likely that you spoke with one the last time you called your mobile service provider.

Chatbots and machine learning will continue to enhance user interactions with websites, especially as autoresponder functionality inherent in most chatbots can seamlessly interact with users for you and provide excellent customer service upfront. This starts your relationship with potential customers off on the right foot while simultaneously gathering info for your sales team before they begin actually interacting with the prospect.

Minimalism
Perhaps one of the most classic and timeless web design trends, minimalism is often the go-to aesthetic of choice. The fewer elements and content on a website, the less your audience will have to think. If a website is designed in the right way, it will show the user exactly what she is looking for.

Because of outside influence, we are often asked to add more than we’d like to a design, and our instincts tend to guide our layout into symmetrical grids. In design though, less is often more and asymmetry can be powerful and eye-catching. This is precisely why minimalistic asymmetrical layouts are among the most difficult design styles to execute.

Whether through white space, contrast or clear typography, minimalistic designs allow users to naturally focus on the right message without getting distracted by other things. The key is to understand what those important elements are first and then hone in on the details.

Final Thoughts
Keeping up with trends can be a great way to keep your finger on the pulse of where businesses are heading. Your website is a critical component of your brand, and as your brand and marketing strategy evolves, your site should as well.

There are still many surprises in store and plenty of time to contribute your own ingenuity to this list of trends. As much as we’d like to imagine that we know what 2019 will bring, it is ultimately up to you. Whatever you choose, remember that there are many millions of websites online. The only way to stand out is to create a website that’s unique and different.

CSS plays a major role in web development. It gives a website its look and layout. What most people don’t know about CSS is that it’s one web development assets that the browser will look for. The browser is blocked from rendering the page until CSS is downloaded and parsed, it must be as lean as possible. Here are five tips to help you get there.

While working with CSS, there are certain do’s and don’ts that should be kept in mind. This helps in getting the efficient results from CSS.

NAMING CONVENTION

Don’t describe style in selector names

Do not use descriptive class names like ‘ green’, ‘orangeDot’ etc. Instead go with class names that describe the purpose of the element or content and not its appearance.

Don’t

.blue-text { … }

Do

.highlighted-text { … }

Selectors should describe purpose, not style.

Keep specificity as low as possible without using tag selectors

Specificity can be a pain in the ass when it starts skyrocketing. Try to keep it as low as possible.

Don’t

.content #intro .icon { … }

Do

.intro-icon { … }

Talking about specificity, NEVER use id selectors and !important.

Do not use ID SELECTORS

ID selectors are fine, valid and perfect for styling unique parts of pages. But you can only use one ID per page. Here’s some of the reason why you should not use ID selectors.

1. Class specificity is lower than ID specificity

IDs have a much higher specificity than classes. A class on its own can’t overwrite styles belonging to an ID. To “beat” the ID, you would need either more IDs or to use !important. (Never use !important unless it is your last resort).

2. Classes can be reused.

IDs should be unique on a page ( but then some browsers didn’t follow this strictly). This means that if you use ID instead of class, you won’t be able to reuse the style attached to it within the same page. Classes, however, can appear on several HTML elements on the same page.

3. An element can have several classes, but only one ID

You can add many classes to a HTML element, for example 

, but not ID.

Make all selectors referring to a page/component start with the same word.

Name your class related to which page they are used. This way, given a class name, you will automatically know which file to look for.

For example;

Don’t

 .front-page-title { … }
.intro-home { … }
.home-text { … }

Do

.home-title { … }
.home-intro { … }
.home-text { … }

Don’t reset styles you just wrote

Don’t

.menu-item {
  margin-top: 5px;
}
.menu-item:first-child {
  margin-top: 0;
}

Do

.menu-item:not(:first-child) {
  margin-top: 5px;
}

The :not() pseudo-class has existed for years now and it’s well supported by all browsers, so there is no reason to write two rulesets, one creating the styles and the next one resetting them for a specific subset of elements when you could achieve the same with only one ruleset.

Use shorthand properties

You can shorten your code by using shorthand. For elements like padding, margin, font and some others, you can combine styles in one line. For example,

Don’t

font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;

That’s a lot of CSS! Let’s tidy that up:

Do:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

The font shorthand property condenses several declarations into a handy one-liner that takes up much less space.

This also applies in margin;

 margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.

The padding property works the same way. 

Cross Browser Compatibility

USE RGB format instead of Hex format

When you’re building a website, you simply must realize that it will be rendered by different browsers ( from niche ones like Konqueror to giants, such as Firefox, Chrome or IE), on different operating platforms and on different devices. As a web developer, it is your responsibility to create a unique experience that works equally great on all possible devices and systems.

For example:

A background-color with decreased opacity in hex format. This will work well in Chrome but not in Microsoft Edge and Internet Explorer. To solve this, convert it to RGB (RGBA if the opacity has been reduced).

Learn how to hasten page rendering by cutting the excess from your site’s CSS.

Render blocking css makes your website slow. Every one of your css files delays your page from rendering. The bigger your css, the longer the page takes to load. The more css files you have, the longer the page takes to load.

Do not use @import to call css

The CSS @import function allows a web developer to include external CSS files in a document. You can usually find it in the top lines of the css file looking like this:

@import url("cssfile.css");

The use of this method is not recommended because it adds to the time that it takes to load your css before your page can load.

Instead of calling that css file using the @import, include those css files from the html file by using the following code…

Make sure to replace “style.css” with the location and name of your file.

Remove Inline CSS files

Each css file your page uses adds additional time to your webpage loading by requiring an additional file to be called.
Because inline styles have the highest specificity in the cascade, they can overwrite things you didn’t intend them to. They also invalidate one of the most powerful aspects of CSS – the ability to style lots of web pages from one main CSS file to make future updates and style changes much easier to manage.

Use shallow selectors

Used consistently, shallow selectors can trim kilobytes off big style sheets. Take this selector:

Dont

nav ul li.nav-item

Instead, write it like this

Do

.nav-item

By doing so, the browser will render the elements targeted by shallow selectors faster. The browsers read selectors from right to left. The deeper the selectors are, the longer it takes for the browser to render and re-render the elements those selectors are applied to.