What Web Design Trends Are You Most Excited About in 2016?

Recently, I’ve seen a surge in popularity of responsive web design, what impressed me most is that web design is a quickly moving and changing industry where trends come and go quite often. Probably we’re still working with some of those trends now: responsive web design, flat design, performance and speed, and perfecting the user experience. However, what are some of the new and emerging trends of web design we expect to see in 2016?

More Card-Style Interfaces

Website card layouts were first popularized by Pinterest a few years back and have since become a trend for content-heavy webpages. Free plugins like jQuery Masonry can be used to mimic this layout style with animated cards for various heights & widths.

 

A card layout is best used on pages with lots of data that should be scannable. The landing page for Google Now uses a card layout to advertise optional cards for the Google Now App.

You can think of card layouts as more dynamic grids with a focus on minimizing content to the bare essentials to list more items together. Online magazines like UGSMAG and The Next Web are both perfect examples of card layouts used to showcase recent post content.

More Imagery, Less Text

Consumers tend to look more at pictures and video and less at the text. This creates a balancing act between SEO and UX. Search engines prefer text they can index. This will move text-rich content to sub-pages and the image-rich content to the homepage. If text is required for the homepage, try to place it under the imagery. Target the users first and the search engines second.

Browsers are becoming faster at rendering images. This means images can be larger with higher resolutions than before. Expect a greater emphasis on higher quality images and artwork.

To scroll or not to scroll

Have we reached the point where scrolling increases readership, but we want less scrolling? Possibly. For 2016, I anticipate some sites going with minimal scrolling while others embracing the long scroll.

There’s benefits and drawbacks to both: long scrolling feels natural and is easier than clicking but it spaces out content and makes it harder to scan to find info while shorter scroll gets to the point quickly but it may be so quick that causes bounce rates to increase.

Above, Uppercase has opted to go with a no-scroll site. What you see in the screenshot is what their site currently loads. All of what you need is right there without needing to scroll further. It will be interesting to see the scrolling battle play out in 2016 and which one comes out on top. Currently, there are more long scrolling sites than shorter scrolling sites, but only time will tell which is truly the best way to consume content.

Vibrant Custom Illustrations and Iconography

High pixel density monitors have revealed how standard image formats don't always work as expected on the modern web. Using .jpg and .png files can result in a pixelated look on retina displays, which spoils the aesthetics of a website.

Today, wider browser support for Scalable Vector Graphics (SVG) and easily implemented icon fonts are a fantastic answer to this problem. As a consequence, we’ll see more web designs showcasing colorful custom illustrations, as well as stylish hand-drawn icon fonts and SVG icons that remain crisp and beautiful at any screen resolution.

Interactive Immersive Experiences

As humans, we’re storytellers and lovers of good stories by nature. Thanks to the magic of HTML5 canvas, CSS3 transitions and animations, state of the art JavaScript APIs like WebGL and Greensock, as well as the power of hardware acceleration, storytelling on the web will be even more immersive and interactive.

Browsing the web on mobile devices has made users more accustomed tolong scrolls. Website designs that are capable of telling a great story keep users engaged with the content and entice them to keep scrolling to the bottom of the page.

HD Visual Assets

Increased bandwidth, wide browser support of HTML5 video, and ways to serve high resolution graphical assets selectively to devices with retina screens, all add to the popularity of gorgeous HD background images andvideos on websites growing even stronger in 2016.

Wider browser support for CSS3 background blending can very well lead to the application of dramatic artistic effects on images, which are created directly in the browser with a few lines of CSS code.

Collaboration Tools for Design

Instant messaging and group chat has been around for well over a decade. However these resources have traditionally relied on plaintext with some capability to attach files.

A new emerging trend is the ability to share live design documents within chat applications. Notable is one example where annotations and comments can be layered right on top of a document. This gives designers a clean way to share work directly with everyone on a team.

Slack is the most popular chat application at the moment which supports many similar features. The growing Slack userbase has been adamant about creating extensions that greatly improve Slack’s capabilities & tie into other products like Hangouts, MailChimp, and even WordPress.

Vertical Patterns and Scrolling

A bigger leaning toward mobile – with some thinking mobile traffic could equal desktop traffic this year – means more sites are being designed with vertical user flows.

A few years ago, we were all debating the end of the scroll in web design only to find it roaring back as an important interaction tool. Smaller screens lead users to scroll more and designers to create user interfaces that are much more vertical in nature.

More Beautiful Typography

Streamlined interfaces have paved the way for the emergence of beautiful typography. (As has the addition of more usable web type tools such as Google Fonts and Adobe Typekit as mainstream options for creating expansive type libraries online.)

Big, bold typefaces will continue to rule because they work well with other trendy elements. This simple concept of lettering gives more room to other elements, while communicating the message with a highly readable display. The must-try trick is a simple pairing of a readable typeface and fun novelty option.

Illustrations and Sketches

Illustrations and sketches bring a fun element of whimsy to a site design. They can work for sites of all types and aren’t just for children anymore. The illustration style has also started to grow in popularity when it comes to some of the smaller pieces of website design as well, such as icons and other user interface elements. What’s nice about this trend is that illustrations make a site feel a little more personal. Because an illustration or sketch style icon appears to be hand-drawn, it looks and feels personal for users. That can go a long way into creating a connection with them.

Reality-Imagination Blur

Is that site real or animated? Is the path predetermined or can I make choices along the way? The next step of gamification and design is emerging with a blurred line between what’s real and what’s created (or imaginary) in web design projects. And the results are pretty stunning.

From virtual reality to websites that let you make choices to find new content, this type of customization is personal and users seem to really like it. This trend also includes creating imagery that looks real, but you know that it is not.

Final Thoughts

Looking through the examples above, these are just a few of the web design trends that will become more prominent throughout 2016. You may see it’s a combination (and culmination) of multiple trends from the past few years, and many of these sites use multiple trending elements from this list to create interactive and engaging websites. So, what trends are you most excited about in 2016? Do you have any thoughts about responsive web design? Leave your comments below.

10 Tips to Boost Your SEO in 2016

According to hubspot.com, in the U.S. alone, an average of 12 billion web searches are conducted each month. SEO will gain importance more than anything else as it helps you drive quality traffic, get visibility, boost your brand and lend your business the credibility it needs to succeed. After all, what is the point of creating so much content and graphics if it is not visible to the audience when they run search query.

This year, search engine optimization will be as powerful as ever, but search engines are getting smarter — and it’s harder than ever to use dodgy tricks to fool them, so make sure that you have built your site in the right way and regularly posting quality content to drive a steady stream of traffic to your pages. Now let’s take a look at the best SEO trends and developments that are set to rock the world in the year ahead.

Providing High-quality Content

As we all know, content is the most important part of the site, and content marketing is any marketing that involves the creation and sharing of media and publishing content in order to acquire and retain customers. Accordingly, the goal of content marketing is to provide value to visitors.

If you want to create a great content marketing campaign you should focus on providing answers. Every word you write should have value and give answers to the questions your readers might have. Take a moment to search Google for something you find interesting. You will see that many of the articles on the first page are how-tos and list posts. There's a reason these posts get on the first page of Google: they provide value.

Social Content Will Gain Prominence

In the coming times, content from social media such as Facebook, Twitter and LinkedIn will gain more importance on the SERPs. Already, 76% marketers use Social Media to support and boost SEO, cites an article published at Impactbnd.com. In 2016, marketers will do everything possible to make their Facebook posts or tweets rank higher on the SERPs.

Isn’t that amazing?! We predict that more social media content will be indexed on Google and other popular search engines such as Bing and Yahoo. This will in turn blur the lines between ‘web’ and ‘social media’ in terms of SEO strategies. So, be prepared to find, collect and use your valuable social content for optimizing your page for maximum visibility.  For brand names, social media profiles are amongst the top results in search listings. For instance, if you search “Designhill” on Google, the company’s Facebook page, Twitter profile and the LinkedIn page appear as the top listings. See for yourself!

Blog.kissmetrics.com states that links to content on Facebook, Twitter, LinkedIn, Google+, YouTube and other social networks help the search engine crawlers understand what websites are credible and should be ranked for what keyword phrases.

Videos Will Still Rule

We all know that videos are a great way of keeping audience engaged and entertained. But do you know that by using enough videos, you can improve the ranking of your page on the SERPs. A report by Marketing Land states that videos make for 62% of all Google searches universally. Moreover, Google has started giving attention to blended results/searches. So, why not grab this opportunity to appear on the first page of search results by including an engaging video in your content? According to Quicksprout.com, videos get 50 times better organic page ranks in Google as against plain, static text results. Also, video searches garner 41% higher click-through rate as compared to plain, static text content, according to Relesoo.com.

Many marketers chose to drive their modern marketing engine with the fuel of Video SEO in 2015. And we predict that more marketers and businesses will embrace the trend of videos in the coming year too.

Now, the only way to appear in the search engine pages like this is by uploading your videos on You Tube or through video SEO. It is important that Google is able to find your video content, successfully index it and display your video content when specific keywords are entered as search terms.

Optimize the images on your site

Optimizing your images by compressing and resizing them may reduce the sizes of the images by a great extent, decreasing the page sizes and thus improving page loading performance on your blog. You may use online image resizing and compressing tools as well as their offline counterparts.

Make sure the images that you upload in WordPress are already optimized, but even if you don’t have already optimized images to upload, you can use a plugin like Smush.it to optimize and reduce the sizes of uploaded images automatically.

You can also add proper image tags to images in your posts to help them rank better in image searches. You can also include additional keywords through alt tags in your posts.

Voice Search Function a Must

These days, people who are on the go use voice search simply because it is more convenient and safer, especially when someone is driving or multi-tasking. It is becoming a huge part of mobile usage as it has taken away the pain of typing keywords to run a search query. Almost all mobile devices have a voice search functions. The popularity of voice searches has been spurred by Microsoft, Google, and Apple launching their own versions of advanced voice-responsive assistants – Cortana, Google Now and Siri.

Even ‘Domino’s Pizza’ has a ‘voice-ordering feature. However, make sure that your content is easily searchable through voice searches by using long-tail keywords, which are more likely to be spoken than conventional keywords.  Google Study finds voice search mostly used to ask for directions. For teens, doing a voice search while watching TV (59%) and while with friends (57%) are the highest use cases, according to marketingland.com. Whereas for adults, voice searching is done the most while watching TV (36%), followed by when with friends (24%) and while cooking (23%).

Content Aggregation will get Bigger & Better

According to Digitalcurrent.com, Knowledge Graph, wiki, local, maps, social media, news, images and videos make for 85% of Google search results. These stats indicates that now people look for sources that provide all relevant information for a particular subject or topic that at one place.

A blog published at imediaconnection.com explains that content aggregation is a practical way of finding, collating, amassing, consolidating, presenting, sharing, and displaying content around pre-specified set of criteria to appeal target audience. If you too are planning to do so, make sure that you collect and curate content from different, high-authority sources and display it at one place for your users to see to build your authority.

A great example of content curation is using the humble newsletter, Next Draft by Dave Pell, who has amassed over 160,000 subscribers to his daily email which shares the most interesting stories in business, culture, and tech, an article in Jeff Bullas explained. Another example is Inbound.org which was built by Moz and Hubspot to increase their reach even further.

Mobile-Friendly Is a Must

Since May 2015, mobile search has surpassed desktop search in ten countries, including the US and Japan, and it's a fact that this trend will continue. At this point, it’s a must for every webmaster to keep their website mobile-friendly.

Three tools that you can use to check whether your site is mobile-friendly are Bing's Mobile Friendliness Test Tool, Google's Mobile-Friendly Test, and mobiReady. The first and second are good, but they don't tell you why your site is mobile-friendly or not. mobiReady is a more sophisticated tool. I recommend using it because it gives you an enhanced view of your website analysis and uses a rating system. When your site scores higher, the more capable it will be of providing a quality user experience on mobile devices. Furthermore, it gives you a detailed list of website performance failures, and why some of these factors lower your page result.

In order for your website to perform well in mobile-friendly test tools, follow these tips:

l  Avoid software that is not common on mobile devices, especially Flash.

l  Remember to make your site responsive if you are coding it from scratch, or use a responsive framework/theme.

l  Be sure the content fits within the screen viewport so users don’t have to scroll horizontally or zoom.

l  Format text in a way that should be readable without zooming.

l  Place links far enough apart from each other so visitors can easily touch the correct one.

In case you are using a CMS for your website, check these guides provided by Google.

Don't forget: a mobile-friendly approach gives your site a great boost in Google's rankings. A non-mobile-friendly competitor doesn't stand a chance against a mobile-friendly site.

Keep Faster Loading Time on Your Site

Sites with a slow loading time don’t only annoy visitors — they also decrease SEO rankings. Top-ranking pages get loaded for about 1.1 sec, but on the other hand, 40% of people abandon a website that takes more than 3 seconds to load. Your site is probably between these two limits. Check these tools for analyzing your site's page speed and see what you can improve.

PageSpeed Insights is a tool offered by Google which helps to localize speed problems on your site. It has a ranking system from 0 to 100 where 100 is the highest score. The best feature of Google's PageSpeed is that it shows what needs to be critically fixed. It also shows other improvements you can make and how to fix them.

YSlow is an add-on for browsers that suggests ways to improve performance based on grades. Each component analysis has its grade. YSlow is great when you want to see the size of components according to their types. If you are serious about your website's performance, I recommend adding YSlow to your arsenal because it is based on rules created by Yahoo!'s Exceptional Performance team.

GTmetrix is another free tool that suggests ways to improve website speed. It's an efficient tool because it shows performance issues which are measured by both PageSpeed Insights and YSlow. It also displays a waterfall chart and three other charts measuring the performance of the website. For a more detailed waterfall analysis, Web Page Performance Test is another helpful tool.

To make your site load faster, there are many factors you should consider. Here are a few:

l  Use YUI Compressor compression to reduce the size of your CSS, HTML, and JavaScript files.

l  Be sure to reduce HTTP requests on your site. Also, reduce external files that need to be loaded such as style sheets, scripts and images.

l  Improve your server response time. This delay is usually caused by slow routing, lack of adequate memory or slow database queries.

l  Use browser caching so that when a user visits your site again, the browser doesn't have to reload the entire page, just some components.

l  When you optimize your images be sure to keep their size not too large or too small, and use the right format according to the purpose of your image. It is advised to use JPEG for photographs and PNG for graphics.

Don't Leave Behind Local SEO

This trend is only going stronger over the years. According to Entrepreneur.com, local SEO is likely to gain solid grounds in the coming days.

As a marketer, you have to let Google know where you are located and what you are offering so that your chances of showing up on pages, especially in front of the relevant audience, increase. It is must to have your local pages which will include the name of your business, address etc. with Google, Yahoo and Bing.

Since Google came out with its “Pigeon” update, local SEO has gained significant prominence forcing businesses and marketers to focus on a local tangent.  So, ensure of having location specific keywords and personalize content basis your target audiences’ location to stay ahead in the game in 2016. Check out some stats to know the benefits of ranking in local search results.

Local searches lead 50% of mobile visitors to visit stores within a day.

(Source: Searchengineland.com)

More than 60% consumers have used local information in ads.

(Source: Business2community.com)

50% mobile searches are conducted in hopes of finding local results.

(Source: Business2community.com)

Your listing in the local pages can increase consumer engagement with your business and your ranking. For instance, check out this example of three hospitals. The one that has the highest number of reviews ranks the highest. (Image source: Search Engine Journal)

Keywords Are Important, but Don't Try to Fool Google

 It's a long gone era when webmasters would try to "fool" Google with keywords. Now they must understand use keywords in the right context as much as possible.

Since the Google Hummingbird update, instead of chasing rankings for specific keywords in a question, it's better to figure out the context of a question. Answering questions is vital to any SEO strategy. Rather than focusing on a few phrases or keywords, brainstorm for conversation phrases people can use to look for your site.

A keyword strategy is still necessary. Here are some keyword research tools you will find useful: Google’s Keyword Planner, SEMrush and Ubersuggest. They will help you find popular keywords and phrases where you can create strategies around them. When you start planning a keyword strategy, keep an eye on Long-tail and LSI keywords.

10 Web Design Concepts That Will Make You Say "Amazing"

After reading the web design concepts of Hongkiat blog, I got a lot of insparation and plan to build my new WordPress themes. It’s really a crucial part of success of any website design when creating an effective and exciting experience. With HTML5 it is now possible to add dynamic interactions to websites and make them come alive. Now I just want to share my favorite 10 web design concepts of this year.

In this list you’ll see website designs that are out of the ordinary, almost wildly experimental. Some sites will take you through cinematic video experiences, others have 360º views that allow interaction, and more come with amazing visual and sound effects triggered with clicks, drags and hovers, unusual navigation etc.

1. The HouseHunters Journey

The hunt for the perfect house starts in your mind. This cool interactive website (with cool navigation) is aimed to take you through all needed steps to find a dream home. Start the experience by scrolling on your mouse.

2. VOID

VOID is a website created by Hi-ReS! agency as a playground for various visual experiments. Follow the instructions and get lost in the abyss.

3. Le Dernier Gaulois

Discover a story of Apatar, a legendary Gallic through six beautifully illustrated episodes. The website has great usability and a well integrated scrolling experience.

4. SocialWars

A stats page for Star Wars: Episode VII, this site is set to track the social footprint of the franchise. Click Use the Data Force to get started.

5. Si le Soleil

How do you tell the tale of a vivid sea voyage? Like this. You tell it like this. This amazing website shows a sailing trip experience from France to the Canary Islands.

6. LACOSTE –F/W OUTERWEAR 2015

This is a 360 interactive lookbook made by Lacoste in China. Discover yourself in a snow globe where time has stood still and see floating models in Lacoste outerwear collection.

7. Holiday Memories

This website shows how the British holiday has changed through a hundred years. It features unique old photos and facts about travelling.

8. Share the Force

Here is one more website dedicated to Star Wars. It collects Star Wars memories and you can share your own memories there. Try not to break the pew-pew buttons.

9. 30u

30u is a shoes collection website where you can pick your own style. You can change color combinations and the whole look of the shoes to choose what style fits your taste best.

10. Panic

Panic, an animation studio in Latvia, shows their skills in motion graphics, 3d animation and graphic design which help them make amazing stories come alive. Check out their Works to get an idea of the possibilities.

How to Speed Up Your WordPress Site?

How do you feel when staying on a slow-loading website?

Almost most of people may say, “bad experience.” Today’s web surfers expect pages to load quickly. In fact, KISSMetrics says load time should stay under 2 seconds, and that 40% of web surfers will leave a site that takes longer than 3 seconds to load.Search engines expect fast load times, too. In fact, Google includes page load speed in itsranking algorithms,so if your page loads too slowly it will drop in the search engine results.

So how do you know if your site is rabbit fast or snail slow? There are online tools available to provide that information. The two I like arePingdom and GTMetrix. Just plug in the URL you want to test, and they’ll provide reams of information. Pingdom starts with results that look like this:

You’ll see:

l Page grade (out of 100)

l Number of external server requests to load the page

l Total load time

l Total page size

Scroll down for even more detailed information. Or click the Performance Grade tab to see where you can make improvements. Click the Settings button to choose the server location to test from, because a test on the server in Sweden will usually take longer than a test on the New York server if you’re in the US.

GTMetrix provides similar information, although they present it differently. They also don’t give you a choice of servers.

Now that you’re armed with objective results, you can measure improvements as you make changes to your site.

Here are the areas to work on.

#1. Hosting

Hosting is the first place to look when you want to improve your site speed. It doesn’t matter how many tweaks you make, if your site is hosted on a slow or misconfigured server, it will be slow.

#2. A Great Theme or Framework

Changing your theme can make a big difference in your page load speed. That’s because a well coded theme requires the server to do less work to serve the page. Make sure you choose a theme from a highly rated, reputable source.

#3. Size, Optimize and Compress Images

Images use a lot of bandwidth. Sure, you can put an enormous image into your WordPress Media Library, and when it shows up on the web page it looks fine. WordPress will size it appropriately. But, every time that image shows up on a web page, the server first loads the full size image, then scales it down.

Oversized images can cause your site to take a big hit in the speed department, so before you upload an image into the library, size it appropriately.

Once the image is in the library, optimize and compress it. For this you can use a plugin like WPSmush. Then, when inserting an image into a post or page, make sure image dimensions are specified.

#4. Plugins

If you have any inactive plugins, delete them. Even if inactive, all installed plugins are parsed by WordPress, which slows your site. And, of course, hackers like to attack plugins. They aren’t immune just because they’re not active.

Then, check to see if any of your plugins are slowing the site down. If they are, find ways to improve their performance, or find a better option.

To do this, install the P3 plugin. “P3” stands for Plugin Performance Profiler. It will scan your plugins and show you which plugins are slowing things down.

If you have a plugin that’s hogging too much time on the server, find an alternative that’s less demanding.

#5. Optimize the Database

It’s a good idea to regularly optimize the WordPress database. WB-DB Manager is a good choice.

#6. Lazy Load

Especially if your site uses lots of images, the Lazy Load plugin will speed load time for the user. The portion of the web page that’s in the browser window will load first, while images lower down on the page will only load as the reader scrolls.

#7. Turn Off Pingbacks and Trackbacks

You might be surprised by how much faster your page will load when you turn off pingbacks and trackbacks. This is a simple checkbox setting at Settings/Discussion in the WordPress Dashboard.

Uncheck the box next to “Attempt to notify any blogs linked to from the article” and “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles.”

#8. Page Caching

This is not quite as simple as the other options discussed, but can make an enormous difference in load times. First, some background.

WordPress doesn’t show “pages” the way we think of, say, a printed page. Instead, it puts together elements each time the browser navigates to that specific URL. Elements can include a header, footer, sidebar with one or more widgets, text, images, and whatever else is supposed to go on that “page.”

This requires multiple interactions with the server. With caching, the reader sees a stored version of the page in its entirety. This requires one call to the server instead of many, so it’s faster. The cache is refreshed regularly, so you don’t have to worry about a reader seeing last week’s version of a page.

The best caching plugin is WP Rocket, which is a premium plugin. If paying for caching isn’t in your budget yet, WP Super Cache and W3 Total Cache are both good options. (Note that if you install WP Rocket, you will not need the Lazy Load plugin, above, as WP Rocket handles that for you.)

You do need to be careful when setting up your caching plugin, though. Misconfiguration can actually slow your site rather than speed it up.

#9. GZip Compression

With GZip Compression, all of your site’s files are zipped, then they’re unzipped in the reader’s browser, improving site speeds.

Both WP Rocket and W3 Total Cache include GZip compression, but WP Super Cache does not. If you’re using WP Super Cache, look for a GZip plugin like Check and Enable GZip Compression.

#10. Use a Content Delivery Network

A CDN (Content Delivery Network) deploys servers in many locations, and serves content from the server located closest to the browser, speeding up load times.  According to Wikipedia, “The goal of a CDN is to serve content to end-users with high availability and high performance.”

Max CDN and Amazon Cloudflare are paid CDNs. Cloudflare is a no- or low-cost alternative, and some hosts include Cloudflare with their shared hosting accounts.

#11. Disable Hotlinking

Hotlinking happens when another site links to an image on your site within their content. This places the bandwidth burden on your site instead of on theirs. You can disable hotlinking by adding some code to the root .htaccess file.

Note: This is a strategy for advanced users only. If you have to ask, “what’s an .htaccess file,"you shouldn’t do this. Use this tool to generate the code you’ll need.

#12. Add Expires Headers

Have you ever noticed that some sites load much more quickly when you’ve visited them before? Expires headers instruct the browser whether to get a file from the server or from the browser’s cache. Getting the file from cache is much faster.

Adding expires headers also requires modifying your .htaccess file. This page walks you through the process of creating the code for your site, or use WP Rocket.

#13. Control Post Revisions

By default, WordPress saves any change you make to a post or page. When a reader clicks to open that page, WordPress loads every version before displaying the most recent one. If you’ve made changes a few times, that can slow down the page load speed.

There are plugins that will limit the number of post revisions saved, but a simpler way to do it also involves adding code to wp-config.php. This one is relatively simple, and it’s only one line.

Place it near the end of the file, just above

This tells WordPress to save 3 revisions. If you want to save a different number, just change “3” above to the appropriate number.

You don’t need to implement all 13 strategies to see a big improvement in your site’s load time. But the more you can do, the faster your page will load and the happier your visitors (and the search engines) will be.