Latest updates from Cleonix Technologies
6 Hottest Web Design Trends Of 2018

As a digital sector, web design is far more subject to move towards technology than its conventional print forbearers. But we have entered into the new era of 2018, so that’s no surprise, is it? What is surprising is the way web designers have continued to match with the technical challenges and still manage to make sites that are user-friendly, clean and interactive, consistent with the corporate look, adaptable to every credible device and just plain beautiful all at once.

1) Mobile is a major platform
The way that can’t be overlooked is the significance of mobile-friendly website compositions that has been expanding immensely in a previous couple of years and the pattern doesn’t appear to back off at any point in the near future. This implies website specialists must spotlight on each website to have a mobile form these days.

2) Clean UI
Clean User Interface is about moderation and ease of use. It’s tied in with disposing of the additional things that are not required in your website and concentrating on the vital parts. Designs that are easy to navigate, minimalist and load fast are in trend in 2018 and attractive for a few reasons – both for mobile users and desktop users who need sufficient speed and reliable connection to surf websites to get perfect SEO value.

3) Replacing Gif’s by Cinemagraphs
Cinemagraps is a new technology that is going to conquer the internet in 2018. They are totally different from GIF images. By using this in website’s background you can make your website more interactive that help you to grow conversion rate.

4) New voice Search Options
A voice user interface refers to human communication with a computer or any machine in the form of speech. Devices are now capable of understanding and acting on different voice commands. When joined with machine learning, this can possibly assume your needs before you even complete the command.

5) Animation Improvement
With the improvement of browser technology, web designers have supplanted static pictures with animations to connect with viewers in their correspondence approach. It is an incredible tool to include clients in the narrative of a website and make an improved client experience. They help in connecting with customers all through their experience on the website.

6) AI and Machine Learning
Artificial Intelligence has progressively worked its way into web designs through innovations like conversational interfaces. In future, we will see machine learning and AI being acquainted with a large number of the frameworks that we associate with. This will soon make web communications consistent.

Keep in mind while using images in a website

1.The design layout of a web page should be such that the eye flows smoothly from the image to the accompanying text and neither overshadows the other, especially when the text is equally important. So, use image in proper position.

2.SEO search for keywords in image files. Use plain descriptive text to name images in alt text field.Google sets a quite high value on alt texts to check what is on the image but also to determine the topic of surrounding text.
If proper alt tags are not used in images, images will not get google ranking. Therefore, website traffic will affected.

3.High definition images work best so that if the viewer has to zoom, the image quality remains intact. But it is often necessary to reduce the file size to make it lighter so that they load faster. For this, use images with proper dimensions ,resolutions & optimized images. In case of computer, image resolution must be 72 dpi.

4.Insignificant pictures which don’t add to the substance or message of the site are negligible and simply take up unnecessary bytes. If it only means for decorative purposes then do not use those images.


Importance of white space in website designing

First of all we’ve to know what is white space.Often whitespace is described as negative space, the portion of a page left unmarked, the portion that is left blank, or the empty space in a page. In web design terms, it’s the space between graphics, columns, images, text, margins and other elements.
whitespace is one of the most unnoticed and underutilized elements that make up a great web layout.It is the fundamental building block of good design.
The Advantages of using whitespace are following:
1. Increased Content Legibility: Whitespace between paragraphs and around blocks of text and images actually helps people understand what they are reading and adds up to a better user experience.
2. More Interaction:According to research conducted by Human Factors International, whitespace increases comprehension by almost 20%.
3. Acts as a Separator:Whitespace separates unrelated elements in a design. It can be used to separate images/graphics from each other and improves your overall visual layout.
Whitespace not only creates harmony,equilibrium, and helps to brand a design, it can also be used to lead a reader from one element to another. Our main goals are to make the website look simple and uncluttered and to deliver information that our readers will enjoy and appreciate. Whitespace does it.Whitespace should not be considered merely “blank” space — it is the element of design that enables the objects on the page to exist.,

How to make your website search engine friendly

Creating a professional looking, well designed website will not ensure that your site receives a high amount of traffic, or increase your customer base. If you want to increase the traffic for your website, you will need to use search engine optimization.This article discuss about how you can create a website or blog that is search engine friendly.

1. Validate Your HTML Code: While the search engines don’t care whether your HTML code is error-free, they rely on the basic correctness of the code to find out which portions of your web page to index. If your HTML code contains errors, it is possible that only portions of your web page are included in the search engine’s database. The errors, while undetectable in a web browser, may lead the search engine software to think that some of the text on your page is part of the HTML formatting information rather than your site’s content. As a result, the search engine may ignore that text, and your web page will not be shown in its results page.

2. SEO for Images: When selecting an image for your website, make sure that it is not too large. Ideally, images on your site should be 30 to 100kb and have a resolution of 72dpi. Images that are too big will make your site load slowly, and negatively affect your search engine ranking.

3. Make sure your URL is User-Friendly: Your site’s URL needs to be SEO friendly, otherwise it won’t rank as well as it should.

4. Integrate Social Media into your Website’s Design: Search engines value social media.When designing your website, make sure that you include your social media icons and, for all of your social media accounts, such as Twitter, Pinterest and Facebook etc.

5. Make your site easily accessible: If your website isn’t completely accessible, then it will affect your conversion rates and your ranking with search engines. Provide high-quality content on your pages, especially your homepage.Give visitors the information they’re looking for.,

Accelerated Mobile Page and It’s features

What is Accelerated Mobile Page:
The Accelerated Mobile Pages Project (AMP) is an open-source initiative to enhance the execution of web contents and ads through a publishing technology known as AMP. The AMP Project was officially declared on Oct. 7, 2015, with support from Google, Twitter,Pinterest, LinkedIn and WordPress and several publishers and other companies , for improving the performance of the mobile web. More than 30 news publishers and several technology companies were announced as initial collaborators in the AMP Project.

How AMP works:

So an Accelerated Mobile Page (or AMP, for short) is a project to make really fast mobile pages. At its essence, it’s fundamentally a stripped-down form of HTML.The purpose for AMP is to be able to load their sites quickly on mobile since mobile responsive could be clunky and slow because desktop resources are heavy and plenty.AMP enabled web pages’ optimization is powered by JavaScript and styling can be customized via CSS3. Most of the CSS can be used in the code but they have to be inline. Moreover the entire CSS sheet has to be of a maximum size of 50 Kilobytes. Most of the tags in AMP HTML are standard tags, but some of them are replaced to fit with the AMP components. The AMP JS library works to help render AMP HTML pages in a speedy manner, and Google’s AMP Cache works to aid the cache of AMP HTML pages.To avoid the delay of rendering pages because of JavaScript, AMP allows for only asynchronous JavaScript.Resources that are external, like iframes, ads, or images, have to state their size within the HTML of the page so that AMP is able to determine the size of each element as well as its position before all of the resources are downloaded. AMP will load the layout of the page before the resources have been downloaded.Basically,AMP is a bare-bones version of your site’s mobile pages. It displays content that matters but gets rid of all the elements that take a toll on your site’s speed and performance.

AMP Pros:

1.It speeds up website load time: AMPs are lean, slick, and fast. Users enjoy pages that don’t make them wait, so AMPs basically guarantee that your site brings in more visitors.
2.It step-up Higher rankings: Page speed has increased in importance as a ranking factor over 2016.Although AMP is not a ranking factor by itself, it has a positive influence on mobile ranking due to its faster load time.
3.Open to All Publishers: Accelerated Mobile Pages,can be used by anyone who is willing to optimize website. This has the potential to reach out to many readers around the world.
4.A free CDN: Part of Google AMP’s success in speeding up pages comes from Google’s caching of AMP content. Publishers can modify URLs to serve content directly from the Google AMP Cache (making it quicker).This is effectively a free CDN (content delivery network).
5.Traffic is growing: Those publishers that have implemented AMP are seeing increasing traffic.A DoubleClick study of 150 publishers in 2016 found more than 80% realized higher ad viewability rates on AMP pages compared to non-AMP.

AMP Cons:

1.Ad revenue is reduced: Accelerated Mobile Pages Project supports ads, the potential to bring in revenue is severely limited.
2.Analytics are a bit stripped: AMP supports Google Analytics but requires a different tag, which needs to be implemented on all AMP pages. Obviously, it takes a lot of time to place this tag and be able to collect and analyze data.
3.AMP offers limited functionality: AMP based websites lack external stylesheets, which automatically means it will not support UX features of website i.e: the same look and feel as a normal website will not get in AMP website.


Advantages & Disadvantages of Parallax Scrolling

The word parallax comes from the Greek word παράλλαξις (parallaxis), meaning “alteration”.Parallax scrolling is a technique in web design,which allows the foreground and background content to scroll at different speeds. It creats an illusion of depth in a 2D scene and adding to the immersion. This effect has been gaining popularity on websites for a couple of years.But before using this we must go through it’s advantages & disadvantages.

Advantages & Disadvantages of Parallax Scrolling


  • It has the ability to create an interactive user experience that is vivid and catchy.Floating images will significantly freshen up and enrich the appearance of a page.
  • We can put all the contents on one page so that users do not have to navigate through several different pages or wait for them to load.That is making a single page website using parallax.
  • Not only for two-dimensional effect creation but also adding different effects to the page such as icon moving, icon enlargement and minimization based on scrolling.


  • As sites that utilize parallax scrolling tend to be made up of one page, there’s usually little in the way of content that can be crawled by the search engines.That means it is responsible for bad seo.
  • Due to the heavy use of graphics and JavaScript it takes time to load. And sometime it will not function smoothly across all browsers.
  • Parallax Scrolling is not as perfect in mobile versions.
fixing -vh
Fixing iOS vh-unit bug with CSS

This bug affects the at the time of rendering the viewport height units. As example: when you are trying to make a full viewport height container with height:100vh, it will display a very tall empty gap.We use necessary javascript
(as an example:vh-unit buggyfill)for fixing this. But if we want to fix it with css then we go through the following codes:

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.fullheight {
height: 768px;
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.fullheight {
height: 1024px;
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 320px;
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 568px;
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 320px;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 480px;

source: web designer wall

5 Website motion design trends

New trends of website designing is motion design trends.These features into a website can help gain a real advantage by improving users’ experience and perception by making the site more interesting and unique.Here we will discuss five features.
Slow Animations:By introducing slow reveal animations that react to mouse movement or click get users more involved on a page .This can really help engage users with your content. We may bring some static backgrounds to life, by adding slow motion in some page’s of the website.
Header Transitions:Simplicity is the main key to great design.Lots of websites are suffering from animation overload.So, just use simple, smart & appropriate header transitions.
Slide Navigation: Now a days push down navigation along with pull-out sliders are growing in popularity.This makes the design of the site much slicker & eye-catching.
Animated , Dynamic Graphs & Charts:Mainly graphs & charts are often used by websites to display important and useful data.The animated & dynamic features of graphs & charts make these more quicker to make & update.Dynamic properties such as animation and interaction making them more engaging & eye catching.
Animated Progress bars and Buttons:A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.Use animated progress bars & buttons to give an eye-catching & unique look.

Optimizing Website Design

A few tips are discussed here for optimizing website & make it more appealing to your audience.
1. Page load time : Loading time taking more than 3-5 seconds is unacceptable to the user,moreover when Google added page speed into their algorithm, sites that had slow load times saw a drop in traffic from Google. Page load speed is a ranking factor for Google.
2. Simple & easily accessible navigation : The navigation menu should be simple to identify and simple to use.
3. Mobile optimization : 80% of internet users own a smartphone,moreover Google also recommends a responsive design because it makes it easier for visitors to have a single URL.For this it is must to make your website mobile-friendly.
4. Using Proper images & videos: Only Use necessary images & videos which produce desired result to your audience.
5. Space : The amount of space on your website will decide its flow and readability.So,enough whitespace between and around paragraphs are necessary.
6. Social buttons : People love to share information with each other and if you aren’t making it easy for them, you are missing out on free publicity.So, it is very important and valuable reasons to add social media buttons.

Top 10 features of HTML5

HTML5 will enable web designers to use cleaner, neater code in an easiest way. The top 10 features of HTML5 are:

  • New Doctype
  • Cleaner markup
  • Improved Semantics
  • The Figure Element
  • Make your Content Editable
  • Elegant forms
  • Audio Support
  • Video Support
  • Offline Application cache
  • Client-side database

New Doctype:XHTML doctype were pesky,impossible-to-memorize.But in new HTML5 gives a new doctype
Cleaner markup:In HTML5 we can remove most div tags and replace them with semantic HTML 5 elements.
Improved Semantics:Now, with HTML5, we have access to the


The Figure Element:With the introduction of the

element &
element, we can now semantically associate captions with their image counterparts.
Make your Content EditableThe new browsers have a supports new attribute that can be applied to elements, called content editable. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
Elegant forms:HTML5 enables designer to use more fancier forms using various input types,autofocus attribute placeholders & required field.
Audio Support:HTML5 now offers the

About the author