New TRENDS and TECHNOLOGY in WEB DESIGNING

By

UDAY KUMARK.SHASHIKUMAR

RAJESH KUMAR GUPTAVIJAY PANDE

PROUDHADEVARAYA INSTITUTE OF TECHNOLOGY

1. Website Sales Funnel

Today, a website plays a significant role in the overall marketing plan; in fact, for manycompanies, it is also a transaction platform. It is no surprise that we have a Website Funnel thatshows how online visits transform to customers and the different stages of this process.

The Website Sales Funnels are different from the other funnels in this list, because theymeasure the activities performed by the visitor on the site before they are even considered a Lead.Source of the visitors, their level of engagement with the content on the site, their reaction todifferent calls to action on the site and their interaction with the company – via form fill or requestform before the sale is made, are all qualifiers which decide if a Lead is worthy of entering the SalesFunnel.

In all of this, I would like to highlight, one factor that stands out, it is the absence ofmarketing influence. But, that is changing with advent of marketing automation; increasinglymarketers are looking at the funnel and either thinking of ‘How I can actively participate in it, orhow I can have my own funnel’.

Here is where Marketing Automation players are coming in and positioning their product aseither a funnel builder or as a means of becoming a part of business revenue as opposed to thebusiness cost.

2. Why stay behind in the race?

With more businesses preferring a social media presence, it seems obvious that every sectormight be heading for the rat race. Statistics do not lie. Reports by Forrester suggest that most B2Bcompanies (around 80%) prefer making use of social media to strengthen their position in theindustry. Social media has truly transformed b2b marketing and results are there to see.

But not everyone is following up with the word on the street as manufacturing sector seemsto be lagging behind to quite an extent in terms of b2b market research. Unlike social media-oriented b2b marketing strategy, statistics show that just 30% of the manufacturers, the world wideover look forward to investing in social media plans. So if you are from the missing lot, it is hightime that you think otherwise. Many b2b resources have benefited from social media’s boost andexposure. Why stay behind and watch miracles happen, when you can be a part of the digging goldas well with innovative b2b marketing ideas?

So what’s the secret mantra of b2b marketing trends?

Nothing. Just do what others are doing, but with a little twist. It is OK to be inspired, butimitation is not good. Look what is working for others, modify it to suit your ideas and execute toprosper. Sounds simple, isn’t it ? Well, if done the right way, it is that simple. The first in line isto create your own blog space. By blog, it does not mean just being informative, being creativegives the upper hand. To be honest no one is really interested in knowing just about companyproducts. Add to it b2b marketing news or industry news and updates and you have a whole newmixture. Strike a fine balance between the two and be ready to be surprised with the results.

YouTube, will it work?

If you are still skeptical, you are real slow in this technology enabled fast paced world.Haven’t you heard- a video is worth thousand words?( a bit change in the phrase. Surprise!) On aserious note, people prefer watching videos than reading content, any day, any time.

Make an official YouTube channel. Let customers know how you work, how you processtheir order, in short give them a chance of getting to know you from close corners. This gives thema sense of attachment, something that’s truly missing from the industry.These are some small, yet effective measures. USE them and enhance your business prospects.

3. Our Company Website

Your company has a Website. You launched it a few months ago or years ago. You investedtime and money in its development. You had high hopes for how it would attract new prospects andhelp you grow your business.

Instead, your Website just sits there. Lonely. Bored. It doesn’t get much traffic, and itcertainly isn’t generating any leads.

“Our Website isn’t generating any leads!” is the number one complaint I hear from smallbusiness owners No Website should be lonely. And no business can survive without new leads

The Top Three Mistakes?

No marketing strategy Website not optimized Wasting lead opportunities

4. New Trends in Web Designing

Have you noticed that the web is constantly changing? Long gone are pixelated, imageheavy, cluttered websites. In their place, minimalist, super-clean sites with absolute clarity havetaken precedence. For a less corporate feel, full screen image backgrounds create a distinctive style.Every website design built by The Web Kitchen is completely bespoke.

London is the central hub of Europe in terms of innovation and design. Web design is nodifferent. With so many web design companies offering highly competitive services, who shouldyou choose?

When thinking about the design, remember that the most important thing is that the site isclear and easy to use, visitors to any website have a very short attention span so their experienceneeds to be easy and calm. That’s why at the Web Kitchen, we favour clean, simple, minimalistwebsite designs. This often means our designs stand the test of time – good clean design isn’t atrend, it makes sense.

5. Google SEO – What is SEO? Search Engine Optimization

Search engine optimization is the ubiquitous and all-powerful web marketing technique thatcan drive loads of target to your website. Online platform is all about ‘Survival of the Fittest’ andthose fittest are the ones who figure in the top search engine results page.

Internet provides an answer to numerous things for us the moment our day begins. Andwhen we search for a few things on the World Wide Web, we key in few specific terms into thesearch tool bar which will throw open a serpentine list of websites that are relevant to our search.So, it is these various online businesses in the form of websites that are vying for the top searchengine ranks on the results page.

Online business exists and becomes successful if and only if there is an incessant flow oftraffic which would later on get converted into sales. So, when the websites are thoroughly searchengine optimized, the chances of the website getting lifted and indexed in the top search resultsbecome high.

Top rank on a major search engine, for instance Google, means tons and tons of traffic toyour website. And when the website is SEOed in various significant aspects, the search enginesrank it higher in comparison to million other sites.

Here is an effort to elucidate on the various aspects of Search Engine Optimization—anoverview, how it works and the various ranking criteria that the major search engines take intopurview while giving a website a particular ranking.

How do Search Engines actually work?

None of the search engines are humans…this is a fact and a basic truth that one needs tobear in mind when they are talking about search engines giving a rank to the websites in question.While people can discern they cannot understand the way humans and the major search enginesview the websites and web pages.

Search engines are purely driven by text and crawlers look for the text that has been keyedin the search tool bar and picks up a website that closely matches those terms or what we call thekeywords.

Search engines, before delivering us the results in milliseconds, perform a series ofactivities. They crawl, index, process, calculate relevancy and retrieve the information from therelevant web pages…all of this accomplished in a matter of few seconds.

The search engine spiders crawl the websites to find out if anything relevant is there and thisis performed by the Googlebot in case of Google. It is the spiders that follow various links andmove on from one web page to another and enroute index those web pages they find relevant. Asthere are billions of web pages on the World Wide Web, it becomes highly impossible for the spiderto check if something new has been included in a web page. At times, the crawlers may not evenvisit your website for a long time.

Once the search engine spider crawls the web page it indexes the content and stores thesame in a huge database which it will retrieve later. Indexing involves identifying the keywords. Itis humanly impossible but the search engines do it with great aplomb.

And when there is a search request, the request is processed…it compares these keywordswith the indexed pages that are stored in the database. And as there are millions of pages thatcontain the keywords, the search engines begin to calculate the relevancy of these web pages.

Relevancy of the web pages is calculated by various algorithms that have relative weightsassigned for some common factors like title tags, metatags, alt tags, links, and keyword density.That is the basic reason why we get different search results for the same search strings on differentsearch engines. And the major search engines like Google, Yahoo, MSN and Bing keep changingtheir algorithms periodically. So, if you want your website to feature on the top page ranks, youneed to modify your web pages in accordance with the changed algorithms of the search engines.

The final step of the search engine’s results is the retrieval of the information which isnothing but displaying the results in the SERPs. And these results are a whole list of web pages thathave been sorted from highly relevance to low relevance.

6. Evaluate Your Site with the Eyes of a Spider

As a blogger, you may have made a lot of effort in order to optimize your site. Your contentmay be accompanied with valuable ideas that carry flash based contents, JavaScript, images etc. Infact your efforts may stand to be more than those of other bloggers.

But what guarantees you that your efforts would ‘show’ and score well among the search engines?Well there is one thing that makes sure that your site gets enough traffic- Search Engine SpiderSimulator tool that checks how your SEO efforts would be seen among the search engines.

Insights to the spider world

“The crawl the web and index the page rule” is followed by all the search spider engines.Their function is to keep their uniformity intact as opposed to the other search engines that do notgive away the calculative ranking and relevancy.

Blindfolded to JavaScript, flash, Image Text or Frames:

Search engines turn a blind eye to Flash, JavaScript and image texts. No matter howimaginative and descriptive it is, they are surely NOT visible to search engines, except for the texts.People often make the disastrous mistake of including Flash intro pages, frames and images thatwould hardly be seen in any search engines, thinking that this will improve their ranking.

If you want to learn how your webpage would appear then check it with the Search EngineSpider Simulator Tool and don’t be astonished if it is nothing but a blank page to the engine! Thiswill let you know if your site is considered an SEO favorite in this simulator.

Solving this problem:

If you want your image to be shown like those of your texts, it is recommended that youmake the right description of the image with ALT attribute of the <IMG> tag. ALT text is also goodfor Flash movie. And <noscript> tag for javascript based ideas. However, do not over stuff thekeywords since there is a very thin line between optimization and over optimization.

7. Google Website Optimizer

Webmasters are constantly searching for ways to optimize their websites so that they rankhigh on search results. Google, the mother of all search engines is constantly obliging siteadministrators by providing them with indispensable tools for Search Engine Optimization. Afterthe famous Google Keyword Tool, there comes yet another revolutionary product from GoogleLabs, the Google Website Optimizer.

The Google Website Optimizer allows the user to set up ‘experiments’ so that you can tryout different versions of their page or indeed try out different versions of specific elements of apage. Let’s see how we can set up these ‘experiments’ and what we can achieve through them.

You will need a Google Analytics account to use this tool. Once you have set that up, youcan then select the type of testing and how you would like to view the results. The experiments aredivided into 2 categories, which are:

A/B experiment Multivariate Experiment

A/B Experiment:

This kind of experiment enables you to test the performance of two or more completelydifferent versions of your webpage. You can play around with all elements by changing the content,layout, appearance, navigation etc. The design freedom given by A/B testing is quite vast, yet userfriendly. It is the simplest kind of test and is more suited for moderate to low traffic generatingWebPages.

Multivariate Experiment:

As the name suggest, this kind of testing allows one to run test on multiple sections of apage simultaneously. For instance you can identify headlines, promo text, media files etc. whichyou want to improve. It gives you the liberty to compare three different versions of each pageelement. The brilliant part comes when the Website Optimizer tool compares differentcombinations of all elements and gives results showing what combination give maximum userresponse. It is a little more complicated than simple testing of entire webpages and requires hightraffic to give conclusive results.

Planning your experiment

As you start the experiment you will need to take a few decisions beforehand. Althoughthese are simple decisions, they can have definitive implications on the success of your experiment.

Step 1:

The first step of course, is to choose the webpage which you wish to optimize. A pre-requisite for the page is that it needs a ‘call to action’ from the users. In other words, it has to offeractions like purchase, download, register etc. Most often the ‘action’ is in form of a link to anotherpage on your website.

Step 2:

The next step is to select the ‘conversion page’. This is the page where the user will actuallymake the purchase, register for your services or download content. Basically it is the second pagethe user will land on when he clicks the link on the first page. Often your primary page may havemultiple links. In this case select the conversion page which gets the most traffic.

You will be asked to enter the URL for both pages. The conversion page which you selectwill define the measure of your success in future experiments.

Step 3:

The next phase is to decide which kind of test is best suited for your needs. Although theMultivariate test is usually a safe bet, it requires high traffic to give conclusive results. Additionally,since Multivariate tests require more careful planning, whereas A/B tests are simpler and giveresults in lesser time. If you want to really put your webpage through robust testing then

Multivariate tests would be a better option. They are also more flexible since they allow testing ofindividual components and their combinations.

Step 4:

In this step, let us assume that we are running a Multivariate test. Thus you select severalelements which you would like to improve and test for effectiveness. On the other hand, in an A/Bexperiment you will only need to select the page which you want to test.

Multivariate

Proceeding with the Multivariate test, the webmaster now needs to come up with variationsof the element which the need to test. For example let’s say you choose the headline and image.You will need to give at least one and maximum three alternatives for either of them. The WebpageOptimizer tool will create different combinations automatically so that different users will seedifferent variations (including the original content). The tool will thus determine which combinationof variations leads to maximum number of people taking the desired action and reaching yourconversions page.

Be careful that the variations are significantly different from one another and from theoriginal version so that the tool can come up with definite results.

Eg: Original headline: Welcome!

Variation headline: You Are about to enter …. Heaven!

As you can see the above example, there is a great contrast between the original headlineand the new one. While the original is quite monotonous, the new one is provocative. Thus it is verylikely that visitors will have very different responses to each. Our aim is to identify which responseis the most beneficial for business.

A/B

Alternatively consider a scenario where you are conducting an A/B experiment. You willneed to create different versions of entire pages. This gives you the flexibility to choosecombinations of elements which according to you will give good results when used together. Asbefore, during the experiment, users will see either the original page or its alternatives. The WebsiteOptimizer will measure response on each version of the page and give you comprehensive results.

Step 5:

Once you have decided on the kind of test you want to run and defined all the variationswhich you want to try out, there are a few final parameters which need to be set. The mostimportant among them is duration of the experiment. Once the experiment is live, users will startviewing different versions of your webpages. Google Webpage Optimizer gives you the option toselect the percentage of viewers who will be able to see the new versions. The remainder of userswill still see the original content of your webpage.

It wouldn’t be a good idea to limit users who participate in the experiment, especially if yoursite gets moderate or low traffic. Limiting the percentage of visitors who can view the new versionsof your webpage will lengthen the duration needed by the test to give meaningful results.

8. Meta Tags – Define yourself!

In the world of search engine optimization or SEO as it is popularly known, there are certain‘tactics’ which are invisible to the common user’s eyes. The foremost such method is the use ofmeta tags. The meta document data is useful for search engines, crawlers and other user agents. Inother words, they are machine parsable.

The most commonly used meta tags are:

Meta description tag Meta title tag Meta keywords tag

What most users and even some SEO agencies do not know is that there are also some other metatags, such as:

meta http-equiv tag meta refresh tag meta robots tag meta copyright tag meta author tag Etc.

These meta tags are vital to give maximum information to web browsers and search enginespiders. Of course, simply incorporating keywords in the form of meta tags does not guarantee topranking in search results, but it can go a long way to put you on the map. Their primary advantage isto give the website owner control over how their pages are recognised by search engines.

You can control what your site is relevant to. In fact, if used correctly meta tags have the powerto stop search engines from indexing your website at all! (Though we wonder why anyone wouldwant to do that).

Meta tags control information in the ‘head’ area of a webpage. Only the met title tag is visible tousers. They guide the browser to use the ideal character set, give out a warning for adult ratedcontent, specify the author of the content, last modified etc.

Example:

<HEAD><TITLE> Rightcopywriter Blog</TITLE><META name=”description” content=”Tips, tricks and tactics about social media and SEO.”><META name=”keywords” content=”SEO, search engine optimization, social media, meta tags”></Head>

9. Link Building – Importance of Information & Relevance

SEO or search engine optimisation techniques have greatly developed along with theinternet. In the past few years, the overall number of web-pages has also increased dramatically.Due to this, optimising websites for better search engine results becomes quite difficult. Toovercome this difficulty, link building is an important aspect to consider.

Knowing the basics of link building

Link building, also known as backlinking, is one of the best and most effective SEOtechniques. Before understanding the concept of link building, it is important to know how theWorld Wide Web works. In basic terms, it is a collection of different websites that areinterconnected. Almost every website has a hyperlink or link (text, images, etc) which, whenclicked, leads users to another website.

When it comes to search engine optimisation, hyperlinks and backlinks play a crucial role.This is mainly because search engines calculate these backlinks while displaying results. In otherwords, having backlinks on your website can increase its priority in search engines. The whole ideabehind link building is to have more number of backlinks on your website, thus enhancing yoursearch engine optimization.

Benefits of link building

One of the major advantages of link building is the fact that it brings more traffic to yourwebsite. This can easily increase your market reach, sales and exposure. If we look it the other way,backlinks prove to be a type free advertising for websites. For the readers of your website, havingmore backlinks is a sign of popularity and reliability compared to other websites available out there.Moreover, as time passes, you are more likely to have more backlinks, thus improving yourpresence over the interent.

Reciprocal links, PPC or pay-per-click link building, corporate blogging, social networkingsites and press releases are other profitable strategies in link building. One-way linking by placing

your link in general opinion postings, blog postings and forum postings on other websites is also agood option to generate more traffic to your website.

Tips for Quality Web Pages

An easy-to-use website along with good copy encourages frequent visitors to stick to for alonger period of time who then stop to read your content. For websites with long pages of non-generic or domain-specific content this is a very crucial aspect.

Arrange the content pages in such a way that the amount of scrolling needed is reduced.Suppose your website doesn’t look appropriate or appears out of sync for a particular resolution, itis quite probable that the visitor to you site will opt to close the browser window thinking that theweb page is perhaps not for his or her viewing.

So designing stretch layouts, which will fit any screen resolution, is necessary to ensure thatall your site visitors get to see a visually appealing and professional website.

Here are some do’s and don’ts of Quality Web Pages

Do not load your web pages with irrelevant keywords. Do not create multiple pages, sub-domains, or sites with what is basically termed duplicate

content. Do not make use of hidden text or hidden links. Do not make use of cloaking or sneaky redirects. Do not create ‘doorway’ pages just for attracting search engines, or make use of other cookie

cutter approaches like affiliate programs with not much for user or no original, readable content. Do provide relevant content. It should give users a reason and encouragement to come to your

website again and again.

10. HTML5, CSS3 and jQuery

For years now, the use of CSS has been synonymous with effective web design. Theseparation of content and form is at the heart of every quality website, allowing for quick and easycross-site changes. Over the last year we’ve noticed more and more websites using the capabilitiesof CSS3. Elements such as rounded corners, improved text effects, gradients and shadowing are justa taste of what’s possible with CSS3.

Importance of CSS

Cascading Style Sheets or CSS, as it is commonly known, is a style sheet that enables you tolink to any other document present in your website. Thus it helps you in retaining control overvarious other elements in different pages of your website.

With CSS, it is possible to control the colour, style information, font, and positioning of theentire website. Moreover, there are several other advantages in using CSS.

Web pages load very easily and in a very short time. It also uses very little bandwidth. Webdevelopers prefer CSS as they are much lighter than table layouts. The style sheet needs to bedownloaded only once and then can get stored in the cache memory. Thus the subsequent pages getloaded faster.

A cascading style sheet compliments well with HTML. Using HTML with CSS helps ingetting improved results and web pages get technically stronger. CCS is liked by the webdevelopers as it allows them to position the required element anywhere in the web page. During thedevelopment of any website, if any developer feels that some particular columns or links are notplaced the right way, then CSS can help change the position of that element easily.

Developers also use CSS to create print friendly pages. This means that the web pages madein CSS can be printed very easily. Further, CSS provides consistency to all the web pages in thewebsite. You can separate the style sheets for different types of media as well, therefore acquiringgreater flexibility in presenting the content.

HTML5 is the latest set of specifications which now recognize the fact that web pages havestructure. New structure in HTML5 includes elements like Section, Header, Footer, Nav, Article,Aside and Figure as defined parts of the web page structure. New form inputs like datetime,datetime-local, date, month, etc. have been added to the standard set of input types. Anotheraddition offered with HTML5 is the use of new elements such as Canvas, Video and Audio.

jQuery is an open-source Javascript library designed to streamline client-side scripting of HTML.Some of the reasons why jQuery is so popular these days are that it’s:

Compact Powerful Reusable Lightweight Footprint Supports Animation

jQuery is CSS3 compliant, supporting the latest features and functionality discussed earlier inthis section. It’s no wonder then that web designers looking to create an interactive website oftenchoose jQuery as their Javascript library.

11. Web Design: 23 Hottest Trends To Watch Out For in 2013

All throughout 2012 there has been an enormous surge in new web design trends. Some ofyou may remember my earlier post on web design trends going into 2012. Now we can see many ofthese ideas have come to fruition, and even adopted further increasing levels of novelty. In thisarticle I would like to delve into 20 more design trends for the new 2013 year.

The design influence is merely a reflection of our culture and expectations for userinterfaces. Ideally these trends represent favorable ideas in the web design community. Howeverdesigners will always have their own opinions when it comes to design terms, so take these ideaswith a grain of salt.

1. Responsive Layouts

This topic was first point in the 2012 trend article, however I feel that responsive web design hasbeen changing to ultimately come to a threshold where layouts are designed to match all forms ofdigital media. The idea is to support all devices from laptops, desktops, smartphones, tablets, andanything released in the future.

You could think of this trend more like a uniform web design where the goal is to have asingle set of codes which run perfectly on all environments. Responsive websites are often thoughtto cater towards mobile browsers, but that isn’t the sole purpose.

You can have a responsive website which also adds brilliant illustrations and graphics intothe layout when the browser window is larger.

The big idea here is to think about website design as a single canvas which is dynamicand fluid by nature. CSS3 media queries allow developers to customize layouts based on limitedor expanded screen real estate. Use this to your advantage and see how other designers are using itas well!

2. Retina Support

Along with responsive support for website layouts I have also seen a dramatic rise in peoplebuilding for retina devices. Apple first engineered this idea with the iPhone 4 and has since appliedthis screen display onto their other devices, including the iPad and some MacBooks.

Retina screens are basically twice as dense as any average LCD. So they are the samenumber of physical pixels, but digitally twice as many pixels can be fitted into the same physicalspace.

This means pixel-perfect web designers supporting retina devices will need to create twosets of images. First you need to sample your image at double the resolution, then save a “standard”version at half the size. The larger image will be scaled down to the standard resolution and willlook very crisp on retina screens.

One of tools for responsive web design is retina.js. This is a JavaScript library forautomatically displaying @2x retina copies of image whenever your user is browsing on aretina device.

Although this won’t detect CSS background image, it is still the most handy resource asopposed to coding everything in media queries.

3. Fixed Header Bars

Using the CSS position: fixed; property is a great way to staple a header bar onto yourwebsite. As visitors scroll down your page this will offer constant support for navigation and a tripback to the home page. This trend has been around for a while but now we are seeing this in fullforce.

Fixed headers are so interesting because they can work on practically any website. Thisincludes social networks, blogs, and even design studios or private companies. The design is verytrendy and looks great paired with most layouts. But aside from the aesthetics, this bar alsoprovides an exceptional user experience without needing to look very far to navigate the website.

4. Large Photo Backgrounds

Photographers or even fans of photography will definitely enjoy this design trend. I haveseen countless showcases discussing the ideas of big oversized photography in the background. It’san excellent way to capture your visitor’s attention and it can look great when done properly.

I am often fond of big photographs since they can be pleasing on the eyes. When blended intoyour layout, this design technique can give your website a major edge in marketing. On this topic Ialways consider the ever popular design portfolio of Kerem Suer. This unique background photobehaves as custom branding for everybody who lands on his website.

5. CSS Transparency

The new CSS3 properties have allowed for opacity edits on any webpage element. Thismeans you have control to generate transparency in any modern web browser – no Photoshoprequired! This trend of web design transparency was recently discussed on Codrops with some veryenlivening talking points.

One excellent example is on the Squarespace Blog where the central wrapper is given abackground: transparent property. Typically this can be used to generate some other backgroundfrom repeating http://media02.hongkiat.com/web-design-trend-2013/, or to setup thebackground using internal elements.

Another interesting design technique for manipulating transparency is through rgba()color syntax. When designing in CSS you have the option of specifying colors using Red, Green,Blue, and Alpha-Transparency values. So using the syntax rgba(255,255,255,0.6) would generatethe color white at only 60% opacity. This is certainly a design trend we can expect continuing into2013 and beyond.

6. Minimalist Landing Pages

Anybody who has spent some time researching markets will understand that selling on theInternet is just plain smart. You have access to a large consumer base from anywhere in theworld. Additionally you can sell products which are not even physical, such as videos or creativeresources.

Creating a landing page online is all about capturing new leads for your product or service.New trends are following the idea of minimalism: keep everything simple and focus on your coreproduct.

This is exemplified on the PictoPro webpage which offers a beautiful resource for cheapicons. The page is fairly crafty using vector icons as a background effect. But all the text is easy toread and it’s basically a one-click checkout process. You cannot get much simpler than that.

7. Digital QR Codes

The abundance of mobile smartphones has led to a surge of QR Code apps. This stands forQuick Response Code and has developed from the older UPC barcodes. You will find these taggedeverywhere from restaurants to event venues and automobile sales lots.

But very recently I have found a couple of websites with these codes built right into thedesign. This isn’t something you would normally consider since they are often found in print. ButQR codes could become trendy as data transmission becomes quicker over time. You can see abrilliant example of this technique on Keith Cakes contact page.

8. Social Media Badges

Marketing is one of the ultimate determining factors in a websiye’s success or failure. Socialmedia and viral marketing are exploding in many different websites. Digg used to reign popular inthis domain but has since conceded to rivals like Reddit. But these are not the only two popularresources for sharing stories online.

You can check practically any social community for sharing badges and will likely find agreat solution. You can position these badges pinned to blog posts and articles anywhere in yourlayout. These are still used actively by readers and fans who want to share content quickly on placeslike Facebook, Twitter, or even LinkedIn.

Below I have put together a small list of social media badges you can try in your own websitelayouts.

StumbleUpon Badges Google +1 Button Pinterest Buttons LinkedIn Share Badge Hacker News Vote Badge Dzone Vote Buttond Free Social Media Icon Sets – Best of 100+ Remarkably Beautiful Twitter Icons And Buttons

9. Detailed Illustrations

Newer design trends are all about catching and holding one’s attention. I feel thatillustrations perform this task brilliantly. The problem is finding a designer who can make suchimpeccable works of art, or even teaching yourself.

Illustrations can be used in many various ways to bring about different moods in yourwebsite. Look around the Internet, and you will find many different website galleries and showcasesfocusing on digital illustrations. You can see these artistic works eventually blend into its websitebranding almost perfectly. MailChimp is probably the most definitive example with its trademarkchimp mail carrier.

10. Infinite Scrolling

Infinite scroll loading has been around for at least a few years. But this technique hadn’treally hit mainstream until this year and I’m sure it will continue into 2013.

Pinterest has adopted this loading technique for their layout and it works beautifully. Youcan search anything and the results page will continually load as you scroll down. Pagination isbasically a non-issue and doesn’t even work as a detriment into the user experience. Talk aboutdesigning for simplicity!

But another great example and possibly my favorite example is on Tumblr. You can blogand reblog photos from other people you follow which all appear on your Dashboard. So afterlogging into your account all the most recent posts will scroll infinitely down the page.

This is an excellent technique which does not work on every layout, but for the rightwebsites this can look and behave phenomenally.

11. Homepage Feature Tours

Sliding image presentations and demo videos are both very common with new products onthe web. Landing pages and startups often try to entice potential users with these informationalgoodies. And they can often work very well, if you know how to construct something that looksgood on a webpage.

Looking back over 2012 I would say my favorite example of this trend is on MediaFire’shomepage. The entire top portion of the page rotates between a series of slides. They each explainwhat you can do on MediaFire and how their features compare with other websites.

What helps this demonstration stand out is also their use of big graphics and icons. This isanother trend which will not work on all websites, only for certain products you can draw in loadsof attention.

12. Sliding Webpage Panels

Dynamic websites used to be very popular when Flash and ActionScript were all the rage.Now, dynamic effects have moved into the realm of JavaScript/jQuery, and this has in turn affectedthe way designers build websites. Sliding panels is just one technique I happen to really enjoy andwould expect to see more in 2013.

Right off the bat you may not think CaptainDash is any special website. But as you clickthrough the navigation you will learn that each page is loaded in succession pushing from left-to-right. Dynamic effects such as these do not always bode well for mobile users.

But if you can handle them with responsive design techniques or an alternate mobile sitethen this is a really cool effect worth trying out.

13. Mobile Navigation Toggle

When speaking of responsive design one of the most difficult questions is how to build asolid navigation. You want to give your readers direct access to all your important links, withoutflooding the page making it unreadable. It is also a good idea to keep your responsive navigationhidden away until it’s needed.

Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blogis merely one example of this technique which looks brilliant on your smartphone. And even inyour web browser! But there are dozens of websites and design studios who have adopted this trendfor their own responsive layouts.

What I like most about the toggled navigation is that you can design menus in so many variousforms. You can have links drop down from the top, or slide down, or push content over from theleft or right side. Designers have so many options to play with and there is plenty of time for UIexperiments.

14. Fullscreen Typography

Earlier I mentioned using big oversized photographs in the background of website layouts.This trend can be extended to focus on typography as well: designing your webpage text so it fillsthe entirety of the browser. Some users may find this annoying. But this is not often the case if thelayout is fitted perfectly for super-large text.

Alex Pierce has a great website layout which does focus deeply on typography. You can seethis includes rich text effects using CSS3 properties. Additionally the website is very easy tonavigate, and many of the other page elements appear oversized as well.

Big text with unique font styles can stand out just as much as oversized photography.And I am sure this will see more design critiques moving into the new year.

15. APIs and Open Source

Open source software has been around for decades and has been changing the web since itsinception. But over the course of 2012 I have noticed more open source software pertaining towebpage widgets, layouts, and dynamic effects. Typically we could also be talking about freewebsite templates, layouts, or CMS software such as WordPress.

Open APIs and resources like Github allow designers to not only prototype layouts, butalso animations and effects on the page. jQuery has a practically uncountable number of pluginsfor free download to be found all over the Web.

And honestly not expecting the amount of open source projects to slow down anytime soon.This truly is the greatest era to be getting started and advancing your knowledge in the field ofcreating websites.

16. Deep Box Shadows

I discussed CSS3 box shadows in our previous post written for 2012, and this trend hasproven to be very accurate. In fact, I now almost always expect to see box shadows infused withelements in modern web designs. The effects look amazing and they rarely detract from theaesthetics except when overused.

I believe the problems that designers had to face years ago stemmed from box shadowsbeing too difficult to implement. Back a few years, this effect would require some type ofJavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created inPhotoshop. Now box shadows can be generated with a few lines in CSS.

I would look out for new box shadow techniques all throughout 2013. I think the trend isalready deeply ingrained into the design community, now it is more about who can be the mostcreative!

17. CSS3 Animations

The CSS3 transition property and all the related browser prefixes offers CSS dynamiceffects just like JavaScript. Designers can now animate effects on the page based on different CSSproperties. I have seen a lot of nice hover effects and form input fields using these transitions theright way.

Another excellent and very inspiring example comes from a CSS alerts tutorial on Codrops.Notice how you can setup various times and settings for the animations.

This is definitely a trend which offers some promise in the coming months and years withlots of room to advance. I am confident that newer web designers will give rise to boominganimations all created without the use of scripting.

18. Vertical Navigation

I was not a big fan of this layout style when I first started noticing different websitesadopting this trend. However over this past year I have seen more designers creating elegantsolutions with the vertical rhythm still intact. And when done properly, vertical website layoutscan be affluent with content and design taste.

The portfolio on Riot Industries is a great example for newer web designers. Check out howthe navigation links work and how the portfolio entries are dynamic on hover effects. Also theborder textures really show a dividing line between the left and right columns.

This textured effect is apparent in other vertical layouts as well, such as the CSS galleryDesign Bombs.

19. Single-Page Web Design

Single page design is a big topic and covered under many different categories. Obviouslythere have been single-page websites since the creation of the World Wide Web. But over the recentyears we have seen this trend evolve to sport a more natural user experience.

I think the website design for Cage App is possibly one great example of many trends listedin this article. They are utilizing a single-page layout brilliantly with content split up by horizontalcontainers. But you will also notice the very top of the page features a blurred background photoeffect.

Plus as you scroll down the page, the navigation bar actually stays fixed at the top of yourwindow. Incorporating other popular design trends into a single-page layout is one solution fordrawing attention from visitors and making one captivating website design.

20. Circular Design Elements

The trend of circles within website layouts is something newer and has been given a lot ofattention recently. Designers like circles because they are clean, neat, and generally fit into anylayout block. You can build patterns and even fix your page elements into circular designs (eg.user avatars, share buttons, post dates, etc).

The portfolio of Lucia Soto is basically one terrific example of circular web design. Thewebsite is built dynamically so you are panning horizontally to different segments in the page.

You will notice some cute vector artwork dotted along the sidelines as well. Web designers cravethese extra tidbits in page layouts because they ooze uniqueness.

You can find a similar example on the homepage for Site Optimizer which uses circularpage elements as informative selling points for their services.

21. Custom Web Fonts

The days of bare Arial and Times New Roman websites are long gone now. Typography isan incredibly effective way to direct a user’s attention. With the advent of web font foundries andservices, designers now have thousands of web-safe fonts at their disposal. It’s important not tooveruse this trend as the result can be a complete disaster. Together, with other typographic rules,we try to use a maximum of 3 font families with each design.

22. Big Website Footers

Big. Huge. Web designers are now making the most out of each section of the website.Often forgotten footers are a great place for communicating important information.

In a previous article, Website Footers: Don’t Forget to Finish the Job, we discussed some ofthe elements included in this expanding section. From blog updates, to a live Twitter stream, toFacebook updates and more, website visitors are being trained that sometimes the best is saved forlast.

23. Infographics

What’s an infographic? Seriously… where have you been? Infographics are creative,visual representations of data often used to simplify complex information.

The recent popularity of infographics has led to brands using them to increase awarenessand inbound links. Certain studies have shown that high quality infographics are 30 times morelikes to be read than traditional text articles. Along with other important factors, this has led contentpublishers using infographics to grow in traffic an average of 12% more than those who do not.

Final Thoughts

User interface design is one of the most complex topics when building digital products. Thisrings especially true for website layouts, trying to match navigations and content styles for asuccessful user experience. These design trends aim to point designers in the right direction.

I hope you may consider some of these ideas and think about how they do affect modern daywebsites. You can find examples of these emerging trends, in smaller businesses to globalcompanies and all other websites in-between.

12. Criteria to Select a Web Designer

Choosing a web design agency can be a daunting task – especially as there are so many tochoose from. We would recommend using the following criteria to make sure you select the bestweb design agency for your project:

Do their portfolio websites look good, and work well? Have they done work in your sector, or similar sectors? Have they been recommended?

Perhaps most importantly, do you find them easy to work with. Web projects require a strongrelationship between client and web design agency. The success of the project, and the ongoingsuccess of the website will rely on this relationship.