Hottest Trends To Watch Out For in 2013

1.
Responsive Layouts

This topic was my 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!

Recommended Reading: Responsive Web Design series of articles.

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
http://media02.hongkiat.com/web-design-trend-2013/
. 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.One of my favorite 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.

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.

One excellent example is on the Squarespace Blog
where the central wrapper is given a background:
transparent property.

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.

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.

Recommended Reading: Beautiful Landing Pages: Tips And Examples

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 website’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.

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.

 

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.

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.

Recommended Reading: 50 Beautiful Hand-Drawn Web Design

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.

 

4 Common Website Design Mistakes to Avoid

Creating the perfect website for your small business is about much more than simply picking the right domain name and pictures. Companies must instead be able to include practical information about their business while also avoiding common mistakes that often plague websites.

“Small businesses need to be represented in those consumer online searches even if they don’t actually sell products or services online,” said One2OneStrategies.com, a web and logo design company. “However, just having a website isn’t enough. If a website isn’t appealing or functions poorly it could hurt a business more than help it.”

Businesses looking to avoid those problems and make the most of their website can do so by avoiding these four common mistakes.

1. Avoid Complicated Web Design

“Don’t use every technical trick and all the bells and whistles you can fit into your website,” One2OneStrategies.comsaid. “If your website doesn’t load quickly and accurately in a visitor’s web browser or mobile device, they’ll leave and might never return. Choose design elements that enhance your site rather than damage the user experience. Less is more when it comes to Web design.”

2. Avoid Overflowing Content

“Research shows that you have just three seconds to communicate your message on a web page to visitors before they’ll click away,” One2OneStrategies.comsaid. “Oftentimes the first thing you will want to do is fill up the page with text, photos and as much information as possible. By doing this you commit the deadly mistake of overkill and end up sacrificing quality for quantity. Instead, make it clear through your website messages that you specialize in one type of business, product or service. Determine your niche and become the go-to business for that niche. Complement this message with clean and relevant images. You want the website to be a simplistic guide, easy to follow and useful.”

3. Don’t Look Like Your Competitors

“Copying your competitors is dangerous,” One2OneStrategies.com said. “You have got to find a way to stand out from the competition! Create your own messages, reputation and strategies, and allow those unique aspects of your business to shine in your website design, promotions and communications. You need to stand out from the crowd, not blend in.”

4. Don’t Just Build and Wait

“Getting traffic to your business website is not as simple as the famous line, ‘If you build it, they will come,’” One2OneStrategies.com said. “In order to drive traffic to your website you have several options, you can advertise on sites like Google or Facebook, or you can join online conversations happening on blogs, Twitter, Facebook and LinkedIn.”

“By publishing comments and sharing your own expertise, you can post links to your relevant content. It takes time to build credibility in search engine keyword results. It certainly doesn’t happen overnight and will take some proactive measures on your part. You can also join affiliate programs, send emails, newsletters and partner with other sites and businesses to find traffic-sharing opportunities.”

How important are meta tags now?

Though meta keywords tag and meta description tags are not the main factor search engines consider when ranking sites, they should not be left off the page.

A meta description tag is supposed to be a brief and concise summary of your page’s content. A meta keyword tag is supposed to be a summary list of the most important words on your page. They were both proposed in order to make using the web easier. Unfortunately, webmasters over the years have abused meta tags so much that search engine creators have had to de-emphasize their importance in their algorithms.

How much does a website cost?

 

A common question from most business owners is “how much does a website cost?”…

Well, that’s actually a pretty difficult question to answer because it depends on so many factors.  Websites can range from practically free to tens or even hundreds of thousands, depending on the company you work with and the technology you require.

The cheapest option is to find an online program that allows you to build your own website for free.  We aren’t going to recommend any of these tools here because they are really not suitable for business websites.

The next option is to find a friend of a friend’s cousin that builds websites in their backyard shed.  This is a route that many small businesses take because they might be able to get a website done for a few hundred dollars.  But sadly most backyard developers can’t keep up with design and coding standards and have no understanding of the business applications of the internet.  So while you might save some money on the development, you will miss out on most of the business benefits.

By far the best option for any business wanting to get results from the internet is to choose an established website development company with a team that understands what works online for businesses and has sophisticated business software.  A website from a business like this would typically cost between $5,000 and $15,000 – that’s definitely a big investment but your website is such an important part of your business that you can’t afford not to take the internet seriously.

Online solutions usually fall into this price bracket, with around $5,000 getting you a very professional and functional website with a few add-on tools that would be perfect for a small business.  Businesses with more complex needs will need a solution in the higher end of the range.

Hosting is another cost you must factor in to your website development.  Hosting options vary greatly, from cheap overseas hosting on shared servers (for as little as $10 a month) to secure hosting in a dedicated server environment (usually from $50+ per month).

From a business perspective, you are better off choosing a company that can offer secure and reliable hosting on their own private servers.  It will be more expensive but you can have peace of mind knowing your website and data is in safe hands.

10 reasons why your organization needs a Facebook presence

  1. Google and Bing crawl and index Facebook Pages because they are publicly available. As a result, Facebook Pages do indeed come up in the search engine results pages (SERPs).
  2. Google announced in early November 2011 that they now crawl and index Facebook Comments.
  3. People are starting their searches at the Facebook search box. Test to see if your brand comes up when you search for it in Facebook.
  4. SEO is now about web presence optimization and Facebook is a must for any web presence.
  5. Your target audience (unless you think they are not included in the 800 million Facebook users) is hanging out there.
  6. The “Like” button is the new “backlink”.
  7. The “Liker” (the Facebook User who did the “Liking”) is the new “lead” or “contact”.
  8. Your Facebook presence adds quality backlinks to your website.
  9. Facebook is easily accessible on mobile devices giving your prospects and clients easy access to your content and brand.
  10. Your competitors most likely have a Facebook presence.

SEO Glossary

  • 301 Redirect – A method of telling web browsers and search engines that a web page has been permanently moved to a new location. Warning:  Links pointing to redirected pages can lose up to 25% of their SEO impact.
  • Anchor Text – The actual words which make up the hyperlink is the anchor text. Ideally, the word or phrase you wish to rank for should be the anchor text.
  • Alternative Text – This attribute is assigned to images so the visually impaired can use their text readers to determine what is in the picture. It also serves as anchor text for images which link to other websites or pages.
  • Black Hat – These are techniques used by some SEO practitioners to trick the search engines into ranking their websites higher. These tactics go against the recommended guidelines of the search engines. If a search engine catches a black hat website it can be pulled from the index and not show up at all.
  • Follow Links – Links with the follow attribute are considered the best inbound links because search engines actively track them to the receiving website.
  • Internal Links – An internal link is a hyperlink that is a reference or navigation element on a web page to another section of the same website and domain.
  • Link Bait – Is any content or feature on a website designed specifically to gain attention while encouraging others to link to the website.
  • No-follow Links – Links marked as no-follow signal to Google and the other search engines not to index the link. In theory, these links should not count as votes of confidence from one website to another. However, Google reserves the right to follow a no-follow link.
  • Page Rank – Is a link analysis algorithm, named after Larry Page and used by Google to assign a numerical weight to a web page or website with the purpose of “measuring” its relative importance (authority) on the Internet. The algorithm assigns a number from zero to 10, with 10 being the highest authority.
  • White Hat – SEO tactics that abide by the recommended guidelines of search engines.

 

Integrating SEO & PPC: 3 Areas to Explore

Many articles have been written about the convergence of SEO and PPC, most of them fairly elementary. I think everyone understands that, at least from a keyword level, each channel can (and should) inform and reinforce the other. That idea of “reinforcement” is a bit tricky, however.

Some studies have shown largely a reinforcing effect between organic and paid listings, except on brand queries where cannibalization is more likely to occur. These searches are often navigational in nature, so users are more liberal about clicking on paid results since they already know which brand they’re interested in.

The basic SEO and PPC integration points written about usually encompass the following:

  1. Use PPC keyword data to inform the organic content and optimization strategy. Use organic referral data to inform the creation and optimization of new PPC ad groups.
  2. Leverage PPC ad copies in organic snippet text to optimize click-through rates. Much easier to test what’s working in paid campaigns, which always put relevant messaging and a call-to-action forward, than to iterate and refine in organic placements.
  3. More visibility is better. A bigger footprint in search wins. Etc.

These are all useful points to think about.

Shocker: Consumers Hate Waiting For Slow Web Sites

Well, wouldn’t you know it? Consumers hate, hate, hate waiting for web pages to load, and they have no sympathy whatsoever if the site is being hammered during a “peak time.” That’s the conclusion drawn by a soon-to-be-published survey by Gomez, which found that while consumers were more than willing to wait in long checkout lines in retail stores during the holidays, they had little to no patience for waiting in digital checkout lines as sites get slammed during the end-of-year rush. A curious world we live, yes?

The survey, which was conducted in December of 2009, found that the vast majority of consumers expected web pages to load quickly regardless of what time of year the site was visited, and that goes for travel, retail and most any other type of “serious” site. If it’s a business, and it’s online, consumers expect near-instant page loads. Anything less, and all sorts of bad things begin to happen.

We Write Great Software

Nearly all modern websites use some element of custom programming, whether it is as simple as a contact form or as complex as business process automation.

Unless you are a software expert it might seem like a good idea to hire the least expensive resource you can find to develop your software. The reality is if you need great software, the least expensive resource will very seldom get you there.

Over the years we’ve seen our share of software that doesn’t make the grade. Because we’ve seen it so often we’ve even created a free guide to help you identify and work through potential issues.

A Beginner SEO Guide: Googling Your Name

Google yourself. Do you like what you see? Whether you want to brand your name for career purposes, clean up your search results when looking for a new job, or just take control of those top 10 dirty details that pop up when a blind date looks you up, we’ve come up with five basic steps that, if you implement them, will set your search results in the right direction.