Call 480 233 9095

Archive for category: Web Design

How to Update Your Website During the 2014 Google Updates

/in /by

As Google makes the rules more complex, website owners, marketers, and SEO professionals need get to work cleaning up their tactics. Everything we have seen in the 2011, 2012, and especially the 2013 updates is still relevant in the Google 2014 Updates. Google is further refining their algorithm in an effort to remove useless results and spammy content from searches. As we see the updated versions of Hummingbird, Panda, Payday, Penguin, and Spam carried out we can expect further micro-adjustments that target both content and link quality.

Google 2014 Updates:

Lets look at how the Google 2014 Updates affect content marketing, content type and length, Google business tools, guest blogging, and social media marketing.

 

Content Marketing

Google is in the business of supplying searchers with relevant information. People who supply Google with high-quality knowledgeable information will stay ahead of this marketing game. Regular unique content provides Google with:

  • A Targeted Audience.
  • Shareable, readable, relevant online engagement.
  • Regularly updated information.
  • Authority of subject matter.

Online professionals who take their content seriously avoid factory farm or spun content with keyword counts. Online articles with an encyclopedia-like level of knowledge will be at an advantage with Google. Current acceptable content types include Google News, Website content, and Guest articles. However, press releases, article farms, and article databases are taking a major hit. All farmed and spun content should be eliminated from all marketing strategies and the internet. The 2014 updates are further refined to cut out keyword idolizers. Additionally, Google will be seeing those with mobile apps for their content as committed to supporting Google’s efforts in relevant and knowledgeable content.

 

Content Type and Length

Content length, and its likeability by Google’s search engines, depends greatly on what it is about, how it is being shared, and who is reading it. Length is wholly dependent on the breadth of the context of that content, what its purposes are for, and the patience of its readership. Website owners and content marketers need to strike a firm balance between expertise, value, conciseness, and uniqueness. As with the 2013 updates, content is valued by Google ONLY IF it provides value and service to Google’s readership.

Content is still regarded as desirable when word counts range from 500 to 1,000 words and content is still marketable up to 2,000 words. Though mobile searchers are likely to shy away from moderately engaging content of those lengths. Therefore, concise, in-depth, and highly engaging content is still king. For now, the differences between mobile searches and computer searches is still evolving and future updates may account for differences in mobile search availability.

 

Google Business Tools

Tying your website in with Google+ and Google Analytics gives you authorship with Google and helps the search algorithms tie all of your content together. Giving and receiving relevant and authentic +1’s on content and posts is a major factor in your websites accountability with Google.

Pay Per Click, and other forms of advertising, have vastly shifted roles among Google’s services. While AdSense is still in service, keyword data for advertisers is restricted and only available for people using Google’s advertising platforms. As Google shifts away from keyword relevancy in searches, so too does access to that data and its viability.

 

Guest Blogging is Effective

Thankfully, guest blogging remains one of the most effective marketing tools for online professionals. However, it is critical that those who do choose to utilize guest blogging do so with strict standards. Applying the same standards of ethics to guest blogging as your own website content is the only way to avoid any future penalization in search results. It is critical to create high-quality content and place it on websites with high-content standards and strict adherence to Google’s guidelines.

 

Social Media Marketing

Although Google+ was mentioned before, it is crucial that it remains a strategic part of the social marketing process. Social marketing is the new viral marketing as long as it adheres to Google’s guidelines. There are a minimum of seven main social markets for all online professionals to remain active in, these include Facebook, Twitter, Instagram, Pinterest, Youtube, Google+, and LinkedIn. However, there is a plethora of also highly relevant visual content networks which marketers would be wise to keep active in. Keep active in networks which are relevant to your chosen niche and then keep a personal active presence, not auto-posting and ignoring it.

Setting your company up for serious social media engagement includes setting up strong profiles, posting and sharing good content, engaging in reciprocity, and personally engaging your readership. Making our content shareable, likeable, engaging, and active enables growth within social networks. Keeping active daily in social networks that matter to our target audience, chosen industry, and search engines is what will keep search rank high. Google updates will increasingly rely on social networks for cues to how relevant good content is for search results.

 

Google’s Updates of 2014 and SEO

SEO isn’t dead if it is defined as website Search Engine Optimization instead of manipulating data to unnaturally rank on search engines. The old and painfully wrong definition of SEO is dying as Google’s 2014 Updates further poisoned the algorithm against manipulative black- and gray-hat tactics. Real SEO is better defined as the process of making websites more accessible, understandable, and useful to search engines and web searchers. Real SEO tactics should never be manipulative to search engines, and this is what the core 2014 Google Updates are all about. It is time for online professionals to embrace a cleaner perspective and expert vision of online marketing.

Design An Awesome And Powerful Business Website

/in /by

Do you want to know some best secrets of creating a responsive and effective business website that can instantly attract your visitors?

A good website must be easily accessible and needs to be user-friendly, provide excellent navigation capabilities and most importantly, make it easy for visitors to find the information that they want.

Creating a high quality website requires striking a fine balance between different elements including the visuals, layout, design, SEO with an attractive landing page and great content that provides valuable information.

Let’s look at some of these elements in more detail to see how you can use them effectively to get the best results:

 

# Have a clear and uncluttered layout

If you want to boost the credibility of your website and enhance its value, make sure to have a clean and clutter free design that makes website navigation simple and smooth for your visitors.

The navigation structure must make logical sense and include different products and services that can be grouped based on their categories. If you have similar pages, use drop down menus to make navigation easy for your customers. Remember that every business page must include-About Us page, Services that you offer, location pages, contact page along with a blog page.

 

# Make your website accessible

If potential customers want to get in touch with you, then it’s important to provide them the right map and directions to avoid any confusion. Provide different ways for customers to get in touch with you and let them choose how they would like to contact you. It’s crucial to include a map, driving directions, phone number, fax, email and links to any of your social media profiles through the contact page.

 

#Include calls to action statement

It’s important to have a clear call to action on your website so that your visitors know what you want them to do once they reach your website. You may include options for booking an appointment, download voucher, menu, sign up a mailing list or even place a order as call to action statements.

If your business has several locations, then it makes sense to create a custom landing page for each of the options.

 

# Use social sharing opportunities

You can include social sharing functionalities on your website to make it easy to share blog posts or information through social networks. This way you can encourage visitors to share vital piece of news or recent articles among their contacts and boost the visibility of your website. Social sharing and engagement are core to any business and can help in improving your contacts by providing huge networking opportunities.

 

#Mobile friendly and responsive website design

It’s very common for people nowadays to access information using mobile and ipad devices for browsing any website. Make sure your website can automatically resize based on the technology that your customers are using. At the same time, it’s important to ensure fast loading times for your website to ensure that your visitors don’t get distracted easily and leave your website.

A responsive design approach is the best way to encourage more number of visitors to your website so they can easily find your website using their mobile or tablet devices.

WH Official Blames Republicans for Obamacare Website Problems

/in /by

obama_dusting_off_shoulder_APAn unnamed Obama administration official claimed that the White House feared GOP subpoenas would slow their work on the Obamacare website, leading to keeping its design in-house with “trusted campaign tech experts” that seemed to have spectacularly failed at creating a successful commerce website.

In a Politico article lamenting the second week of failed performance of Healthcare.gov, the Obamacare insurance website, the unnamed official attempts to explain why the whole thing has been such a dismal failure: it’s the Republican’s fault.

“Facing such intense opposition from congressional Republicans,” Politico wrote, “the administration was in a bunker mentality as it built the enrollment system, one former administration official said. Officials feared that if they called on outsiders to help with the technical details of how to run a commerce website, those companies could be subpoenaed by Hill Republicans, the former aide said. So the task fell to trusted campaign tech experts.”

This is not a very satisfactory explanation, though. There are many questions regarding the Obamacare website that have yet to be answered.

Firstly, this quote tends to prove that the President wanted to make sure there was no transparency for his healthcare website; this from the President that promised the most open administration in history.

But it also raises another series of questions. Why, for instance, did the administration give this project to their buddies instead of opening it to competitive bidding? Isn’t this the sort of thing Obama and his cohorts always accused George W. Bush and Dick Cheney of with Haliburton contracts?

Secondly, who are these “trusted campaign tech experts”? Is this official talking about Obama’s campaign Internet team? And if so, are these individuals part of Organizing for Action (OFA), which is supposed to be legally separate from the White House?

So, is the White House still working hand-in-hand with OFA?

Finally, it is interesting to note that the Weekly Standard found that Healthcare.gov is violating copyrighted software licensing agreements.

“The latest indication of the haphazard way in which Healthcare.gov was developed is the uncredited use of a copyrighted web script for a data function used by the site, a violation of the licensing agreement for the software,” wrote Jeryl Bier on October 17.

It appears that Democrat Max Baucus didn’t know the half of it when he described Obamacare as a “trainwreck.”

Intro to Responsive Web Design

/42 Comments/in /by

In less than 2 years responsive web design (RWD) has become a digital design trend.

Historically, as website designs became more aesthetically sophisticated, designers wanted to exert greater control over the presentation layer or what the user experienced. Liquid layouts began to be replaced for ‘fixed width’ design thinking and practice. In essence, liquid layouts were complex and more costly to design and develop. However, when they were done well they provided a superior user experience.

If you think the number of devices that needs to be considered is mind-boggling in 2013, this is likely to be insignificant to the potential ways we will use information (and screens) in the future. The proliferation of devices and therefore screens that we will use and access can only increase.  This makes the whole RWD approach very practical and those who have embraced it are building a platform that will allow future devices to be included – this is future-friendly thinking.

A very different digital world

The online world is a different place since the arrival of Apple’s first iPhone on June 29th 2007. Whilst we are in the midst of a social computing revolution spurred on by smartphone and tablet usage, we are by no means finished. There is no roadmap. Where will the web end up in 2015, 2018 or 2023? This is a very exciting time for the web, and designers of web experiences.

The pocket metaphor

We no longer just sit at our desks to use a computer and browse the web. We use a computer on the go and browse the web on the go too. The computer has moved from the desk to our pockets.  Our computers travel wherever we travel.

The smartphone has ushered in greater consideration for how we would eventually support different screen sizes.  Thus, the fixed-width ideology of ‘one-screen-size-fits-all’ has been maneuvered out of the way by RWD or intelligent-rule-based liquid layouts.

Yet, it would be a fallacy to think we can design for all possible screen sizes.  The investment required both in terms of time and money would be too great. Too many new devices with varying screen sizes are coming onto the market all the time so we need to put a metaphorical stake in the ground and move away from thinking about the “number of screens or devices”.

One common misconception is thinking in terms of ‘how many’ screen sizes. In reality we only care about the screen we are using, at the moment we are using it. Imagine all the different screens you use or come into contact with throughout your day. This number is only going to increase in the future. Don’t get sidetracked with the number but instead focus on the quality of the experience you want to provide across all screens – the total experience.

How big is the RWD trend?

Designing for the growing number of smart devices that people use to access the web is big business. At Nomensa we recently calculated that over 50% of our research and design projects since the start of 2013 have involved some form of considerations about RWD. We expect this to increase. As I stated previously, the web is a very different place in recent years.

So, what are some of the factors to consider in a responsive web design project?

Let’s start by examining a very typical RWD scenario: A client has an existing website and they have asked for it to be responsive. Their objective is to deliver a great user experience across multiple devices.

A great responsive experience is more than its design (layout), interaction or content because it is the whole or total experience that matters. We judge and therefore experience a RWD solution holistically so designing holistically is a fundamental consideration.

There are a number of fundamental questions that need to be considered in the RWD approach:

How much do we know about the behaviour of the intended audience and what they expect?

We need to understand the service or product we are designing. When it is used. Why it is used. What solution or benefit it provides. How it is different from other solutions. We need to build a unique perspective of the target audience so we can understand how to translate insight and knowledge into a unique experience. Start the process by understanding human behaviour.

Does your audience expect different features on different devices?

RWD focuses on delivering a single unifying solution. Therefore, the context of the above question may seem a little strange. Yet, how we use and think about our devices will vary.  We have to move away from the one-size-fits-all approach. We need to anticipate what content and functionality should be presented across the whole experience. By applying behavioural knowledge and insight we will be better prepared to anticipate and therefore shape what is expected as people switch between devices. People may expect similar experiences, or, they could expect very different ones – we just don’t know! Understand how to support ‘switching’.

We know that people like to browse a lot more on their tablets when they are in front of the TV. We know people like quicker (in terms of performance) experiences when they are using their smartphones. We know people despise completing forms (especially on their phones).  We must validate what we know and design with that knowledge.

Does situation change usage (behavior)?

Yes. Our behavior is constantly adapting to the new devices we use and more importantly influencing how we use them. Time is also a critical factor for everyone regardless of task, device or situation. Understanding when a person’s time is being pinched will allow us to design tasks or more importantly, understand the amount of information that needs to be processed (during the task) more quickly. Great digital experiences should flex to support our cognitive load and therefore the information demands we have throughout our day.  We need to respect the limits of our memory and utilise the knowledge about how we process information.

When done right, a responsive site will be a more accessible site. Responsive sites tend to provide a better and more inclusive experience which makes them more accessible across a wider range of devices compared to their non-responsive counterparts. In a nutshell, you will be providing a more digitally agnostic solution and therefore reaching a wider market share.

Beginners Guide to Responsive Web Design

/83 Comments/in /by

Beginner’s Guide to Responsive Web Design

Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.

Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

What is responsive design?

Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the Think Vitamin design looks like at various screen resolutions:

The third and fourth stages of Think Vitamin's responsive design.

It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element.

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {

  .content {
    float: left;
  }

  .social_icons {
    display: none
  }

  // and so on...

}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.