Latest trends and technology of 2013 in web designing, google analytics, latest web design with pics, what you should know while designing a web page.

1. New TRENDS and TECHNOLOGY in WEB DESIGNING
By
UDAY KUMAR
K.SHASHIKUMAR
RAJESH KUMAR GUPTA
VIJAY PANDE
PROUDHADEVARAYA INSTITUTE OF TECHNOLOGY

2. 1. Website Sales Funnel
Today, a website plays a significant role in the overall marketing plan; in fact, for many
companies, it is also a transaction platform. It is no surprise that we have a Website Funnel that
shows 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 they
measure 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 to
different calls to action on the site and their interaction with the company – via form fill or request
form before the sale is made, are all qualifiers which decide if a Lead is worthy of entering the Sales
Funnel.
In all of this, I would like to highlight, one factor that stands out, it is the absence of
marketing influence. But, that is changing with advent of marketing automation; increasingly
marketers are looking at the funnel and either thinking of ‘How I can actively participate in it, or
how I can have my own funnel’.
Here is where Marketing Automation players are coming in and positioning their product as
either a funnel builder or as a means of becoming a part of business revenue as opposed to the
business cost.

3. 2. Why stay behind in the race?
With more businesses preferring a social media presence, it seems obvious that every sector
might be heading for the rat race. Statistics do not lie. Reports by Forrester suggest that most B2B
companies (around 80%) prefer making use of social media to strengthen their position in the
industry. 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 seems
to be lagging behind to quite an extent in terms of b2b market research. Unlike social mediaoriented b2b marketing strategy, statistics show that just 30% of the manufacturers, the world wide
over look forward to investing in social media plans. So if you are from the missing lot, it is high
time that you think otherwise. Many b2b resources have benefited from social media’s boost and
exposure. Why stay behind and watch miracles happen, when you can be a part of the digging gold
as 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, but
imitation is not good. Look what is working for others, modify it to suit your ideas and execute to
prosper. Sounds simple, isn’t it ? Well, if done the right way, it is that simple.
The first in line is
to create your own blog space. By blog, it does not mean just being informative, being creative
gives the upper hand. To be honest no one is really interested in knowing just about company
products. Add to it b2b marketing news or industry news and updates and you have a whole new
mixture. 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 a
serious note, people prefer watching videos than reading content, any day, any time.

4. Make an official YouTube channel. Let customers know how you work, how you process
their order, in short give them a chance of getting to know you from close corners. This gives them
a 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 invested
time and money in its development. You had high hopes for how it would attract new prospects and
help you grow your business.
Instead, your Website just sits there. Lonely. Bored. It doesn’t get much traffic, and it
certainly isn’t generating any leads.
“Our Website isn’t generating any leads!” is the number one complaint I hear from small
business 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, image
heavy, cluttered websites. In their place, minimalist, super-clean sites with absolute clarity have
taken 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 no
different. With so many web design companies offering highly competitive services, who should
you choose?
When thinking about the design, remember that the most important thing is that the site is
clear and easy to use, visitors to any website have a very short attention span so their experience
needs to be easy and calm. That’s why at the Web Kitchen, we favour clean, simple, minimalist
website designs. This often means our designs stand the test of time – good clean design isn’t a
trend, it makes sense.

5. 5. Google SEO – What is SEO? Search Engine Optimization
Search engine optimization is the ubiquitous and all-powerful web marketing technique that
can drive loads of target to your website. Online platform is all about ‘Survival of the Fittest’ and
those 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. And
when we search for a few things on the World Wide Web, we key in few specific terms into the
search 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 search
engine ranks on the results page.
Online business exists and becomes successful if and only if there is an incessant flow of
traffic which would later on get converted into sales. So, when the websites are thoroughly search
engine optimized, the chances of the website getting lifted and indexed in the top search results
become high.
Top rank on a major search engine, for instance Google, means tons and tons of traffic to
your website. And when the website is SEOed in various significant aspects, the search engines
rank it higher in comparison to million other sites.
Here is an effort to elucidate on the various aspects of Search Engine Optimization—an
overview, how it works and the various ranking criteria that the major search engines take into
purview 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 to
bear 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 engines
view the websites and web pages.

6. Search engines are purely driven by text and crawlers look for the text that has been keyed
in the search tool bar and picks up a website that closely matches those terms or what we call the
keywords.
Search engines, before delivering us the results in milliseconds, perform a series of
activities. They crawl, index, process, calculate relevancy and retrieve the information from the
relevant 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 this
is performed by the Googlebot in case of Google. It is the spiders that follow various links and
move on from one web page to another and enroute index those web pages they find relevant. As
there are billions of web pages on the World Wide Web, it becomes highly impossible for the spider
to check if something new has been included in a web page. At times, the crawlers may not even
visit your website for a long time.
Once the search engine spider crawls the web page it indexes the content and stores the
same in a huge database which it will retrieve later. Indexing involves identifying the keywords. It
is 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 keywords
with the indexed pages that are stored in the database. And as there are millions of pages that
contain 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 weights
assigned 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 different
search engines. And the major search engines like Google, Yahoo, MSN and Bing keep changing
their algorithms periodically. So, if you want your website to feature on the top page ranks, you
need 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 is
nothing but displaying the results in the SERPs. And these results are a whole list of web pages that
have 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 content
may be accompanied with valuable ideas that carry flash based contents, JavaScript, images etc. In
fact your efforts may stand to be more than those of other bloggers.

7. 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 Spider
Simulator 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 not
give 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 how
imaginative 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 that
would 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 Engine
Spider Simulator Tool and don’t be astonished if it is nothing but a blank page to the engine! This
will 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 you
make the right description of the image with ALT attribute of the <IMG> tag. ALT text is also good
for Flash movie. And <noscript> tag for javascript based ideas. However, do not over stuff the
keywords 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 rank
high on search results. Google, the mother of all search engines is constantly obliging site
administrators by providing them with indispensable tools for Search Engine Optimization. After
the famous Google Keyword Tool, there comes yet another revolutionary product from Google
Labs, the Google Website Optimizer.

8. The Google Website Optimizer allows the user to set up ‘experiments’ so that you can try
out different versions of their page or indeed try out different versions of specific elements of a
page. 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, you
can then select the type of testing and how you would like to view the results. The experiments are
divided into 2 categories, which are:
 A/B experiment
 Multivariate Experiment

9. A/B Experiment:
This kind of experiment enables you to test the performance of two or more completely
different 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 user
friendly. It is the simplest kind of test and is more suited for moderate to low traffic generating
WebPages.
Multivariate Experiment:
As the name suggest, this kind of testing allows one to run test on multiple sections of a
page simultaneously. For instance you can identify headlines, promo text, media files etc. which
you want to improve. It gives you the liberty to compare three different versions of each page
element. The brilliant part comes when the Website Optimizer tool compares different
combinations of all elements and gives results showing what combination give maximum user
response. It is a little more complicated than simple testing of entire webpages and requires high
traffic to give conclusive results.
Planning your experiment
As you start the experiment you will need to take a few decisions beforehand. Although
these 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 prerequisite for the page is that it needs a ‘call to action’ from the users. In other words, it has to offer
actions like purchase, download, register etc. Most often the ‘action’ is in form of a link to another
page on your website.
Step 2:
The next step is to select the ‘conversion page’. This is the page where the user will actually
make the purchase, register for your services or download content. Basically it is the second page
the user will land on when he clicks the link on the first page. Often your primary page may have
multiple 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 select
will 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 the
Multivariate 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 give
results in lesser time. If you want to really put your webpage through robust testing then

10. Multivariate tests would be a better option. They are also more flexible since they allow testing of
individual components and their combinations.
Step 4:
In this step, let us assume that we are running a Multivariate test. Thus you select several
elements which you would like to improve and test for effectiveness. On the other hand, in an A/B
experiment 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 variations
of 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 Webpage
Optimizer tool will create different combinations automatically so that different users will see
different variations (including the original content). The tool will thus determine which combination
of variations leads to maximum number of people taking the desired action and reaching your
conversions page.
Be careful that the variations are significantly different from one another and from the
original 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 headline
and the new one. While the original is quite monotonous, the new one is provocative. Thus it is very
likely that visitors will have very different responses to each. Our aim is to identify which response
is the most beneficial for business.

11. A/B
Alternatively consider a scenario where you are conducting an A/B experiment. You will
need to create different versions of entire pages. This gives you the flexibility to choose
combinations of elements which according to you will give good results when used together. As
before, during the experiment, users will see either the original page or its alternatives. The Website
Optimizer 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 variations
which you want to try out, there are a few final parameters which need to be set. The most
important among them is duration of the experiment. Once the experiment is live, users will start
viewing different versions of your webpages. Google Webpage Optimizer gives you the option to
select the percentage of viewers who will be able to see the new versions. The remainder of users
will 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 your
site gets moderate or low traffic. Limiting the percentage of visitors who can view the new versions
of your webpage will lengthen the duration needed by the test to give meaningful results.

12. 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 of
meta tags. The meta document data is useful for search engines, crawlers and other user agents. In
other 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 meta
tags, 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 engine
spiders. Of course, simply incorporating keywords in the form of meta tags does not guarantee top
ranking in search results, but it can go a long way to put you on the map. Their primary advantage is
to 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 power
to stop search engines from indexing your website at all! (Though we wonder why anyone would
want to do that).
Meta tags control information in the ‘head’ area of a webpage. Only the met title tag is visible to
users. They guide the browser to use the ideal character set, give out a warning for adult rated
content, 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>

13. 9. Link Building – Importance of Information & Relevance
SEO or search engine optimisation techniques have greatly developed along with the
internet. 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. To
overcome 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 SEO
techniques. Before understanding the concept of link building, it is important to know how the
World Wide Web works. In basic terms, it is a collection of different websites that are
interconnected. Almost every website has a hyperlink or link (text, images, etc) which, when
clicked, 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 other
words, having backlinks on your website can increase its priority in search engines. The whole idea
behind link building is to have more number of backlinks on your website, thus enhancing your
search engine optimization.
Benefits of link building
One of the major advantages of link building is the fact that it brings more traffic to your
website. 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, having
more 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 your
presence over the interent.
Reciprocal links, PPC or pay-per-click link building, corporate blogging, social networking
sites and press releases are other profitable strategies in link building. One-way linking by placing

14. your link in general opinion postings, blog postings and forum postings on other websites is also a
good 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 a
longer period of time who then stop to read your content. For websites with long pages of nongeneric 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, it
is quite probable that the visitor to you site will opt to close the browser window thinking that the
web page is perhaps not for his or her viewing.
So designing stretch layouts, which will fit any screen resolution, is necessary to ensure that
all 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. The
separation of content and form is at the heart of every quality website, allowing for quick and easy
cross-site changes. Over the last year we’ve noticed more and more websites using the capabilities
of CSS3. Elements such as rounded corners, improved text effects, gradients and shadowing are just
a 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 to
link to any other document present in your website. Thus it helps you in retaining control over
various other elements in different pages of your website.
With CSS, it is possible to control the colour, style information, font, and positioning of the
entire website. Moreover, there are several other advantages in using CSS.

15. Web pages load very easily and in a very short time. It also uses very little bandwidth. Web
developers prefer CSS as they are much lighter than table layouts. The style sheet needs to be
downloaded only once and then can get stored in the cache memory. Thus the subsequent pages get
loaded faster.
A cascading style sheet compliments well with HTML. Using HTML with CSS helps in
getting improved results and web pages get technically stronger. CCS is liked by the web
developers as it allows them to position the required element anywhere in the web page. During the
development of any website, if any developer feels that some particular columns or links are not
placed 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 made
in CSS can be printed very easily. Further, CSS provides consistency to all the web pages in the
website. You can separate the style sheets for different types of media as well, therefore acquiring
greater flexibility in presenting the content.
HTML5 is the latest set of specifications which now recognize the fact that web pages have
structure. 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. Another
addition 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 in
this section. It’s no wonder then that web designers looking to create an interactive website often
choose 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 of
you may remember my earlier post on web design trends going into 2012. Now we can see many of
these ideas have come to fruition, and even adopted further increasing levels of novelty. In this
article 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 user
interfaces. Ideally these trends represent favorable ideas in the web design community. However
designers will always have their own opinions when it comes to design terms, so take these ideas
with a grain of salt.

16. 1. Responsive Layouts
This topic was first point in the 2012 trend article, however I feel that responsive web design has
been changing to ultimately come to a threshold where layouts are designed to match all forms of
digital media. The idea is to support all devices from laptops, desktops, smartphones, tablets, and
anything released in the future.
You could think of this trend more like a uniform web design where the goal is to have a
single set of codes which run perfectly on all environments. Responsive websites are often thought
to cater towards mobile browsers, but that isn’t the sole purpose.
You can have a responsive website which also adds brilliant illustrations and graphics into
the layout when the browser window is larger.
The big idea here is to think about website design as a single canvas which is dynamic
and fluid by nature. CSS3 media queries allow developers to customize layouts based on limited
or expanded screen real estate. Use this to your advantage and see how other designers are using it
as well!
2. Retina Support
Along with responsive support for website layouts I have also seen a dramatic rise in people
building for retina devices. Apple first engineered this idea with the iPhone 4 and has since applied
this 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 same
number of physical pixels, but digitally twice as many pixels can be fitted into the same physical
space.
This means pixel-perfect web designers supporting retina devices will need to create two
sets 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 will
look very crisp on retina screens.

17. One of tools for responsive web design is retina.js. This is a JavaScript library for
automatically displaying @2x retina copies of image whenever your user is browsing on a
retina device.
Although this won’t detect CSS background image, it is still the most handy resource as
opposed 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 your
website. As visitors scroll down your page this will offer constant support for navigation and a trip
back to the home page. This trend has been around for a while but now we are seeing this in full
force.
Fixed headers are so interesting because they can work on practically any website. This
includes social networks, blogs, and even design studios or private companies. The design is very
trendy and looks great paired with most layouts. But aside from the aesthetics, this bar also
provides 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 have
seen countless showcases discussing the ideas of big oversized photography in the background. It’s
an excellent way to capture your visitor’s attention and it can look great when done properly.

18. I am often fond of big photographs since they can be pleasing on the eyes. When blended into
your layout, this design technique can give your website a major edge in marketing. On this topic I
always consider the ever popular design portfolio of Kerem Suer. This unique background photo
behaves 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. This
means you have control to generate transparency in any modern web browser – no Photoshop
required! This trend of web design transparency was recently discussed on Codrops with some very
enlivening talking points.

19. One excellent example is on the Squarespace Blog where the central wrapper is given a
background: transparent property. Typically this can be used to generate some other background
from repeating http://media02.hongkiat.com/web-design-trend-2013/, or to setup the
background 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 generate
the color white at only 60% opacity. This is certainly a design trend we can expect continuing into
2013 and beyond.
6. Minimalist Landing Pages
Anybody who has spent some time researching markets will understand that selling on the
Internet is just plain smart. You have access to a large consumer base from anywhere in the
world. Additionally you can sell products which are not even physical, such as videos or creative
resources.

20. 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 core
product.
This is exemplified on the PictoPro webpage which offers a beautiful resource for cheap
icons. The page is fairly crafty using vector icons as a background effect. But all the text is easy to
read 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 for
Quick Response Code and has developed from the older UPC barcodes. You will find these tagged
everywhere 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 the
design. This isn’t something you would normally consider since they are often found in print. But
QR codes could become trendy as data transmission becomes quicker over time. You can see a
brilliant 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. Social
media and viral marketing are exploding in many different websites. Digg used to reign popular in
this domain but has since conceded to rivals like Reddit. But these are not the only two popular
resources for sharing stories online.

21. You can check practically any social community for sharing badges and will likely find a
great solution. You can position these badges pinned to blog posts and articles anywhere in your
layout. These are still used actively by readers and fans who want to share content quickly on places
like Facebook, Twitter, or even LinkedIn.
Below I have put together a small list of social media badges you can try in your own website
layouts.








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 that
illustrations perform this task brilliantly. The problem is finding a designer who can make such
impeccable works of art, or even teaching yourself.

22. Illustrations can be used in many various ways to bring about different moods in your
website. Look around the Internet, and you will find many different website galleries and showcases
focusing on digital illustrations. You can see these artistic works eventually blend into its website
branding almost perfectly. MailChimp is probably the most definitive example with its trademark
chimp mail carrier.
10. Infinite Scrolling
Infinite scroll loading has been around for at least a few years. But this technique hadn’t
really 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. You
can search anything and the results page will continually load as you scroll down. Pagination is
basically a non-issue and doesn’t even work as a detriment into the user experience. Talk about
designing for simplicity!
But another great example and possibly my favorite example is on Tumblr. You can blog
and reblog photos from other people you follow which all appear on your Dashboard. So after
logging 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 right
websites this can look and behave phenomenally.
11. Homepage Feature Tours
Sliding image presentations and demo videos are both very common with new products on
the web. Landing pages and startups often try to entice potential users with these informational
goodies. And they can often work very well, if you know how to construct something that looks
good on a webpage.

23. Looking back over 2012 I would say my favorite example of this trend is on MediaFire’s
homepage. The entire top portion of the page rotates between a series of slides. They each explain
what 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 is
another trend which will not work on all websites, only for certain products you can draw in loads
of 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 affected
the way designers build websites. Sliding panels is just one technique I happen to really enjoy and
would expect to see more in 2013.
Right off the bat you may not think CaptainDash is any special website. But as you click
through the navigation you will learn that each page is loaded in succession pushing from left-toright. 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 site
then this is a really cool effect worth trying out.

24. 13. Mobile Navigation Toggle
When speaking of responsive design one of the most difficult questions is how to build a
solid navigation. You want to give your readers direct access to all your important links, without
flooding the page making it unreadable. It is also a good idea to keep your responsive navigation
hidden away until it’s needed.
Enter this beautiful design trend of mobile navigation toggle menus. The Treehouse Blog
is merely one example of this technique which looks brilliant on your smartphone. And even in
your web browser! But there are dozens of websites and design studios who have adopted this trend
for their own responsive layouts.
What I like most about the toggled navigation is that you can design menus in so many various
forms. You can have links drop down from the top, or slide down, or push content over from the
left or right side. Designers have so many options to play with and there is plenty of time for UI
experiments.
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 fills
the entirety of the browser. Some users may find this annoying. But this is not often the case if the
layout is fitted perfectly for super-large text.

25. Alex Pierce has a great website layout which does focus deeply on typography. You can see
this includes rich text effects using CSS3 properties. Additionally the website is very easy to
navigate, 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 its
inception. But over the course of 2012 I have noticed more open source software pertaining to
webpage widgets, layouts, and dynamic effects. Typically we could also be talking about free
website templates, layouts, or CMS software such as WordPress.
Open APIs and resources like Github allow designers to not only prototype layouts, but
also animations and effects on the page. jQuery has a practically uncountable number of plugins
for 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 of
creating websites.
16. Deep Box Shadows
I discussed CSS3 box shadows in our previous post written for 2012, and this trend has
proven to be very accurate. In fact, I now almost always expect to see box shadows infused with
elements in modern web designs. The effects look amazing and they rarely detract from the
aesthetics except when overused.

26. I believe the problems that designers had to face years ago stemmed from box shadows
being too difficult to implement. Back a few years, this effect would require some type of
JavaScript or direct background http://media02.hongkiat.com/web-design-trend-2013/ created in
Photoshop. 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 is
already deeply ingrained into the design community, now it is more about who can be the most
creative!
17. CSS3 Animations
The CSS3 transition property and all the related browser prefixes offers CSS dynamic
effects just like JavaScript. Designers can now animate effects on the page based on different CSS
properties. I have seen a lot of nice hover effects and form input fields using these transitions the
right way.

27. 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 with
lots of room to advance. I am confident that newer web designers will give rise to booming
animations 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 websites
adopting this trend. However over this past year I have seen more designers creating elegant
solutions with the vertical rhythm still intact. And when done properly, vertical website layouts
can be affluent with content and design taste.
The portfolio on Riot Industries is a great example for newer web designers. Check out how
the navigation links work and how the portfolio entries are dynamic on hover effects. Also the
border 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 gallery
Design Bombs.
19. Single-Page Web Design
Single page design is a big topic and covered under many different categories. Obviously
there have been single-page websites since the creation of the World Wide Web. But over the recent
years we have seen this trend evolve to sport a more natural user experience.

28. I think the website design for Cage App is possibly one great example of many trends listed
in this article. They are utilizing a single-page layout brilliantly with content split up by horizontal
containers. But you will also notice the very top of the page features a blurred background photo
effect.
Plus as you scroll down the page, the navigation bar actually stays fixed at the top of your
window. Incorporating other popular design trends into a single-page layout is one solution for
drawing 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 of
attention recently. Designers like circles because they are clean, neat, and generally fit into any
layout block. You can build patterns and even fix your page elements into circular designs (eg.
user avatars, share buttons, post dates, etc).

29. The portfolio of Lucia Soto is basically one terrific example of circular web design. The
website 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 crave
these extra tidbits in page layouts because they ooze uniqueness.
You can find a similar example on the homepage for Site Optimizer which uses circular
page 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 is
an incredibly effective way to direct a user’s attention. With the advent of web font foundries and
services, designers now have thousands of web-safe fonts at their disposal. It’s important not to
overuse 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 of
the elements included in this expanding section. From blog updates, to a live Twitter stream, to
Facebook updates and more, website visitors are being trained that sometimes the best is saved for
last.
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 awareness
and inbound links. Certain studies have shown that high quality infographics are 30 times more
likes to be read than traditional text articles. Along with other important factors, this has led content
publishers using infographics to grow in traffic an average of 12% more than those who do not.

30. Final Thoughts
User interface design is one of the most complex topics when building digital products. This
rings especially true for website layouts, trying to match navigations and content styles for a
successful 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 day
websites. You can find examples of these emerging trends, in smaller businesses to global
companies 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 to
choose from. We would recommend using the following criteria to make sure you select the best
web 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 strong
relationship between client and web design agency. The success of the project, and the ongoing
success of the website will rely on this relationship.