Category: Web Design and Development

What does 2017 hold for web design?

What does 2017 hold for web design? by Mark Lusted.  Available from <http://www.netimperative.com/2017/01/top-tips-2017-hold-web-design/> [January 03, 2017]

2016 has been an eventful year, to say the least. Now as the dust begins to settle it’s time to reflect on what 2017 will have in store for us. In particular, what the world of web design might look like next year and what trends will we see start to take off.

Of course, like any trend, these go in and out of fashion and may not necessarily suit every person and every taste. However, we like to think of each trend as an ‘additional tool’ to our designer toolbox, where we pick the right ones for the job at hand.

Custom illustrations and photography

Stock photography and iconography library websites are available to millions of designers all over the world, making it harder to be original and risking ending up like a competitor.

Custom illustration or photography can bring something unique and communicate the brand message in a more meaningful way. It can create a personality, set the appropriate tone and help convey the key information with your audience.

Take our latest project, the redesign of our company website. We decided to take all our own photographs and draw our own icon library set so that we could show our users who we truly are and communicate what it’s really like to work at Dock9.

There is a lot of ‘same same’ evident on the web. Thanks to template offering services such as Squarespace, websites are looking more and more similar to each other. Many are realising that the bespoke design can actually go a long way for a brand and we expect to see a significant change here.

After all, in a hugely competitive business world where your website is often the first place customers interact with you, wouldn’t you want your site to stand out from others?

Conversational interfaces

As the emergence of robo-advisers, such as mortgage firm Habito, chatbots will become an increasingly important part of the online UX, which presents challenges to designers.

Not all designers are able to switch to being content creators – this seems to sit better with those who have been in performing arts or literature previously (Howdy – a chatbot within Slack – and X.ai – a personal assistant who schedules meetings – both hired writers with performing-art experience to assist with defining their products’ UX).

Here the micro-copy writer becomes king. We all know only 5% of language is conveyed through words so it is easy to accidentally come across as rude or offend someone. Designers who have the ability to insert personality (and sometimes humour) into chatbots will be in higher demand.

Animation

Animation is becoming an expected feature. Since the release of Google Material Design, interface animations returned to the designer’s toolset. Not as over the top flash animations, but as a way to give more meaning to mundane interactions, making the interface feel more real, fun and even enabling designers to spin something negative into a potentially positive experience. For instance, loading and 404 animations.

The Google Material Design subtle shadows effects and concepts of movement and depth are becoming an increasingly popular alternative to flat design for designers. We expect to see a lot more of it next year.

Microinteractions

We all use microinteractions both in the physical and online world on a regular basis, from pressing the button at traffic lights to liking a friend’s status on Facebook. They are not new, however, they are becoming more important in terms of design.

Done correctly, microinteractions make users feel in control like they know how to use your site. Done badly and impacts can range from irritating your user to them closing the site completely. It will be interesting to see who gets them right, and wrong, in 2017.

Minimalistic Design

Minimalistic design is popping up more and more on the web. With less ‘cramming’ of content above the fold, companies are choosing their copy and imagery carefully, to create beautiful aesthetic experiences. Not only does it look great on all devices but it loads quickly and is no fuss. Designers are cutting down on the number of elements in order to create hierarchy and a fresh, uncluttered UI. Flat icons, flat navigation bars, flat buttons and a general loving for everything minimal is pretty much everywhere.

Continued growth of long scrolling

Once upon a time, scrolling through lots of content meant moving your arrow to the side of the screen and pulling a bar down repeatedly to reach the bottom. Dark times.

Now with a simple swipe of the finger (including on my touchscreen laptop), it is easy to sweep through long content. Long scrolling requires fewer clicks and allows for more narrative approaches.

What improves the UX is the use of fun and/or eye-catching transitions and differentiated section designs, making what could be a lengthy schlepp into a voyage of discovery.

Virtual Reality

This one may be a bit further in the future than next year but this list would be meaningless without mentioning VR. Both designing a site that uses it and designing using VR itself will happen more frequently in the future. This will require a whole new set of practices and tools that most designers have yet to discover.

What does 2017 hold for web design? by Mark Lusted.  Available from <http://www.netimperative.com/2017/01/top-tips-2017-hold-web-design/> [January 03, 2017]

10 Small Business Website Errors That Drive Customers Away

10 Small Business Website Errors That Drive Customers Away by Brad Shorr.  Available from <http://www.forbes.com/sites/allbusiness/2016/12/18/10-small-business-website-errors-that-drive-customers-away/#593f057c4611> []

Visitors seldom leave a small business website with a neutral impression. For most prospects, your small business is an unknown quantity, so their first impression of your company will either make them more comfortable doing business with you or less comfortable. For this reason, you want their first experience with your website to inspire them to contact you—not your competitor.

These are the 10 biggest website problems that can drive potential new business away:

1. “Look at Me” Content

If you think burying prospects under a mountain of features, benefits, and self-praise will convince prospects to buy from you, think again. Information dumps and inwardly focused website content are big turnoffs. Website visitors want to know what’s in it for them, and they want to know quickly. Always write from the prospect’s point of view, and keep it at a high level.

2. Blurry Branding

Many small businesses try to communicate excellence in everything: “We’re the best,” “we’re the cheapest,” “we’re the most innovative,” etc. All this does is confuse prospects or make them think you’re mediocre at everything. Like big, successful brands, try to be known for one thing, and hammer that point home. Think about Apple: It does lots of things well, but most people are attracted to its products because of its design excellence. What differentiates your company in a meaningful way? That’s your brand.

3. No Credibility Elements

As I mentioned earlier, many small businesses can be unknown quantities. To overcome buyer skepticism, you must have powerful credibility elements on your website. The most impressive types are customer testimonials; BBB and other well-known accreditations; and statistics about your number of customers, volume of sales, and other pertinent data that makes your company look big, growing, and successful. Without credibility elements, website visitors have only your marketing propaganda to go by, and that won’t be enough.

4. Clumsy Contact Options

If your website doesn’t make it easy for visitors to contact you, they won’t. Small business websites frequently lack easy-to-use contact forms, and many don’t even display a phone number. Clumsy contact options can drive site visitors crazy. Good contact forms have only a few required fields and include a privacy statement to reassure prospects you won’t sell or give away their email address. It’s also imperative to send prospects a confirmation email after they submit a form.

5. Poor SEO Structure

Because your small business is not a household name, you need customers to be able to find you in Google search results when they are looking for the products or services you offer, but don’t yet know that you exist. Many small business websites are poorly structured for SEO, making it difficult or impossible for Google crawlers to understand the content and rank it accordingly. The result? You are invisible in Google searches, a deficiency that over time could cost your business hundreds or thousands of sales leads or online orders.

6. Using Stock Photography

Small businesses are usually on a tight budget, so using stock photography is a tempting way to cut costs on website design. Big mistake. This isn’t 2002; prospects have seen thousands of websites and have likely seen your stock photos a hundred times. Stock photography conveys a lack of imagination, a company that is going through the motions and presenting a false image. It should be called “schlock photography.” Instead, spend a few hundred dollars on a professional photographer to take interior/exterior building shots, headshots of personnel, and useful photos of products. It will make your company feel real and add credibility in a big way.

7. Typos

Website copy must be free of grammatical errors, spelling errors, vague statements, and other defects that tell customers your company doesn’t pay attention to details, lacks sophistication, and is content to do the job halfway. Few businesses have professional writers on staff, but they are easily found online, as are editors. Skilled freelancers are affordable, and can transform negative-impact content into content that prospects find irresistible. Obviously well worth the investment!

8. Confusing Navigation

Creating user-friendly website navigation is far more complex and nuanced than meets the eye. Strong navigation is intuitive and simple, and makes it easy for visitors to quickly find what they need and get back to where they were. Small businesses often botch the job by having too many navigation labels in the header, using non-intuitive text for their labels (e.g., “People” versus “About Us”), failing to use sidebar and/or breadcrumb navigation to supplement top-level navigation. A lot of navigation issues can be corrected by observing actual users explore your website.

9. Not Showing Your Work

Small business websites that talk in generalities are not going to persuade visitors that you can deliver the goods. To build credibility and also provide insight about how you get results, make sure your website has detailed case studies, a portfolio with brief narratives and images of successful projects, and/or data showing specifically how you helped customers save money, improve throughput, or whatever else it is you do that makes your products and services valuable. Unfortunately, a lot of small companies try to shortcut the website work, and fail to provide this type of information, which is often right under their noses.

10. No Mobile-Friendly Website

This last point is probably the most important of all. Today, more people access the Internet from mobile devices than from desktop computers. If your website is not mobile-friendly, you are writing off half your potential audience—maybe a lot more depending on your business. Beyond that, a mobile-unfriendly website hurts SEO, and is likely to hurt it a lot more in the coming years. The best mobile option is usually to have a responsive design, making your website adjust automatically for optimum display on any size screen.

Avoid these 10 errors and you can transform your website into a lead- and revenue-generating machine. Plus, because so many small businesses fall into these traps, by avoiding them you will give yourself a substantial competitive advantage and get more than your fair share of business from online sources. That alone will add value to your company.

10 Small Business Website Errors That Drive Customers Away by Brad Shorr.  Available from <http://www.forbes.com/sites/allbusiness/2016/12/18/10-small-business-website-errors-that-drive-customers-away/#593f057c4611> []

3 Core Elements To Stay On Top Of When Launching A Website

3 Core Elements To Stay On Top Of When Launching A Website by Michael Lyons.  Available from <http://www.business2community.com/web-design/3-core-elements-stay-top-launching-website-01734513> [December 19, 2016]

If you’ve ever launched a website, you know that Murphy’s Law does in fact exist: anything that can go wrong, will go wrong. From small grammar mistakes to plugins that make the site inaccessible, you must be prepared to troubleshoot both the expected and unexpected. Below are three core elements to account for when launching a new website, and tips on how to make each go more smoothly.

Content

The more content that you have on your site, the more organized you must be. Here’s a list of some of the things to watch out for when you’re juggling content for your new site:

  1. Content version control (or lack-thereof)
  2. Losing assets
  3. Wrong content/media in the wrong location on the site

To avoid these pitfalls, here’s a couple recommendations to help your content launch goes more smoothly:

  1. Assign a “Content Manager:” Similar to a project manager, this person’s role isn’t to create the content, but to make sure everything is in-line, organized, and the right assets progress accordingly.
  2. Don’t use email as storage: Any assets that are transferred via email should always be saved into a centralized storage location (CMS, shared folders, etc.). You should never have to “look back” into your email to find an asset that someone sent you. As soon as you receive it, save it in a shared location.
  3. Digital storage/organization tips:
    1. Organize assets by website structure: consider setting up your folders according to your site structure. This way, there’s a 1:1 match between the content and where it should reside on the site, minimizing the chance that the wrong content ends up in the wrong locations.
    2. Plan for multiple versions: have separate folders for each round of content revisions – ie version 1, version 2, etc. That way, when you get to the final version, every asset is included and everyone will know where to pull the latest update from.
    3. Files of a feather flock together: folders should sit next to folders and files next to files. Whenever a file sits next to a folder, that means it’s time for a new folder. I realize many people have their own naming conventions that they remember, but it’s better to build an organizational structure that doesn’t require you to be there to find something. While creating nested folders within your storage system may take a few more clicks to access, it will pay off in the time you won’t have to spend sending files to people who could instead find them themselves.

Design

The two big design factors you need to account for when launching your site are:

  1. Browser compatability
  2. Device compatibility

If you have a responsive website (you should), it can and will appear differently depending on which browser and device your visitors are on. While doing your testing, it’s important to download different internet browsers and do a spot-check to make sure everything looks how you want it to. It’s also a good idea to check your web analytics to see which browser the majority of your traffic uses; then, you can prioritize your testing with that browser.

Similarly, your site elements will appear differently on different size screens. Pull out your phone, tablet, and a couple computer sizes if possible to see if everything looks right. It is also important to note that there could be SEO implications, as sites that are not responsive or mobile-friendly could be penalized in search results. A great tool you can use instead of manually looking at different screens is called Screenfly. You simply enter your URL, it’ll pull up your site, and you can pick virtually any device brand, model, size etc to see how it appears.

Functionality

Elements on your site can look pretty, but if the plumbing doesn’t work, then your Demand Generation efforts will be for naught. Be sure to double check that:

  • Links are working properly.
  • Form submissions are leading to the right ‘Thank You’ pages as well as sending the correct data to your database.
  • Any automated follow-up emails are triggering.
  • 3rd party site integrations such as marketing automation, sales CRM, SEO plugins, social plugins, etc. are working properly and not interfering with other site functionality.
  • Any old content is redirecting to the respective new page(s). If you have high-traffic pages, you don’t want to lose that SEO “juice.” Using redirects to the new site locations, will make sure you don’t lose out on that valuable traffic.

Pre-launch quality assurance testing is not optional. It’ll save countless hours of fixing later. However, not everything will be caught pre-launch. Here’s a few tips to minimize the bumps in post-launch damage control:

  1. Launch when traffic is low: Sites have different traffic patterns depending on audience, so check your analytics to see when would be best.
  2. QA is a team effort: You should have multiple eyes testing the site, then reporting bugs to a single person who will prioritize them. Read more on When Mistakes Happen here.
  3. Prioritize bugs: Bugs should be prioritized based on urgency and impact. Urgency refers to how quickly the bug must be fixed (based on site priorities, site-usability, etc) and impact refers to how big the bug is – what are the downstream ramifications of the bug? High urgency and impact bugs should be addressed first.

Summary:

  1. When launching your site, you must account for content, design and functionality elements to make sure everything’s running smoothly.
  2. Accountability and organization are critical to ensure bugs and their fixes don’t fall through the cracks.
  3. Post-launch bugs are inevitable, but they should not all be treated equally. Those with high urgency and impact should be prioritized.

Launching a new website is a strenuous endeavor, often including many parties. With so many balls being juggled simultaneously, it’s easy to let something drop. However, an organized process and clear lines of accountability will greatly reduce the firefighting needed.

3 Core Elements To Stay On Top Of When Launching A Website by Michael Lyons.  Available from <http://www.business2community.com/web-design/3-core-elements-stay-top-launching-website-01734513> [December 19, 2016]

5 Essential Steps to Take Before Launching Your First Site

5 Essential Steps to Take Before Launching Your First Site by .  Available from <http://tech.co/5-essential-steps-to-take-before-launching-your-first-site-2016-12> [December 7, 2016; 9:15 am]

hind every successful product or service is a great website. This is because in today’s digital age every business needs a high-performing and aesthetically pleasing online home where consumers can learn more about its offerings. Although the process of creating a site is easier than ever thanks to the hundreds of site creation options available, the process of creating a site that can actually perform for your company is still pretty complex.

Although it may be tempting to sign up and build your new site on the first template service you see an ad for, take a moment to think about your company’s needs as it grows first. There are several key areas where entrepreneurs should focus as they create their first website in order to set the site up for success in the future.

Here are five essential steps you should take before launching your first website.

1. Choose a Relevant Domain Name

Most website creation services will allow you to host your site within their domain. The problem is, doing so tags the service’s name onto your domain name, which clues site visitors in to the fact that you didn’t pay for your own hosting. The first step you should take in securing a solid domain name is to choose a reliable hosting service that is secure and capable of handling your site’s needs. Check out PC Mag’s guide to the top hosting services of 2016 if you’re not sure which hosting services are highly rated among site owners.

Once you have a hosting service that will allow you to create your own domain name, select a domain name that will be intuitive in a consumer’s mind when he or she is looking to visit your site. This not only helps you further establish your brand, but it also helps consumers find you without having to look up your business first. You can use a domain lookup tool like this one to find out if the domain you have in mind is already taken. If it is, the tool will provide several suggestions for similar domain names that aren’t already taken which could help you identify an available option that is relevant to your brand.

2. Work With a Versatile CMS

The site you build now will need to be updated regularly as your brand grows and industry needs and demands change. This is why it’s important to begin with a CMS (content management system) that is versatile enough for web developers and designers to go in and make changes as necessary in the future.

The most widely used CMS among the creative industry is WordPress. This is because the platform is customizable, SEO friendly, easy to use and navigate, secure, and flexible. All of this essentially means that it is an excellent platform to build and grow a successful site within. Wordpress benefits site owners and the creatives who work on their sites.

3. Invest in Design

Templates have made it easier than ever to build and alter your own site. If you have the resources to hire a designer and would prefer to go that route, great! If not, a DIY template is a great way to get going on your site, so long as you avoid free themes at all costs.

Free templates and WordPress themes might seem appealing at first, but there are several issues you might run into later on down the road if you opt for a free option rather than investing a small amount in a paid theme.

First of all, free themes look like free themes. They are pretty generic and don’t do much to help your brand stand out from competitors in its field. Second, they often don’t come with all the bells and whistles you’ll need and aren’t guaranteed to be responsive.

Some of the top themes for WordPress run for around $59, which means you can get a high quality WordPress theme for your site that includes everything you need without breaking the bank.

4. Run CRO Testing

Even if you pick the coolest WordPress theme, it can do very little for you if you don’t do your part to create solid user experience on your end. This is where CRO, or conversion rate optimization, testing comes in.

Your conversion rate shows how many visitors who come to your site actually convert to customers. Conversion rate optimization basically means taking a strategic approach to improving the performance of your site by defining your site’s goals, collecting consumer insights, and making the most of the traffic your site receives based on what you’ve learned from AB testing and consumer feedback.

CRO is an important process that should be implemented prior to your site’s launch to ensure it is able to perform to its highest potential for your brand.

Quicksprout and Qualaroo both offer up excellent CRO testing guides for beginners if you need some help getting started. If you’re already familiar with CRO testing, I recommend checking out this Tech.co article for some excellent tips for refining your strategy.

5. Make Sure It’s Mobile Friendly

A user’s ability to access and view your site easily from a mobile device has always been important. However, it’s become increasingly important now that Google has officially announced an algorithmic change that favors sites with mobile-friendly design.

Changes to Google’s ranking algorithm now push sites that are not mobile-friendly down in the search results and boosts those that are mobile friendly up in ranking. If your site doesn’t pass Google’s test for mobile-friendliness, it could be difficult for consumers to find it as they search relevant terms in the search engine.

Speak with a designer or enlist the help of an SEO to find out how you can make your site mobile friendly. Building your first website is equal parts exciting and nerve-wracking. Despite the frustration, keep focused on the details and implement these tips throughout the creative process to build a site with a solid foundation.

5 Essential Steps to Take Before Launching Your First Site by .  Available from <http://tech.co/5-essential-steps-to-take-before-launching-your-first-site-2016-12> [December 7, 2016; 9:15 am]

 

6 Common Front-End Web Development Mistakes to Avoid

6 Common Front-End Web Development Mistakes to Avoid by Jennifer Marsh.  Available from <http://www.business2community.com/brandviews/upwork/6-common-front-end-web-development-mistakes-avoid-01717769#YMrkXBlRp8vGI6k4.97> [Nov 30, 2016]

Front-end designers and programmers are responsible for developing everything that users of a site or app see and interact with. This includes coding and bringing interfaces to life that are engaging and aesthetically pleasing to viewers. Just because a customer-facing interface functions well doesn’t mean it will be a success. The wrong design can destroy a site’s user base and cause a dramatic drop in revenue, and getting that design right is the role of a front-end developer.

In front-end development, it’s very important to understand users and their behaviors to build a beautifully functioning front end, but there are also a few common coding mistakes to avoid. Here are a few to keep an eye out for when developing a site or application as well as some tips and best practices that can help you keep your projects on track:

1. Using Tables Instead of Div Containers

Tables were the de facto way of HTML element placement years ago. They almost seem easier to work with than using div containers and CSS when you’re starting a front-end design career. However, tables can be pretty messy and can cause design flaws and misplacements in different browsers.

Table designs have been replaced more and more by CSS and div containers as a more optimal way to place elements and create a layout. Tables are still useful when displaying charts of information, but they’re rarely used to create layouts. Try to opt for “table-less” layouts when designing your front-end HTML code.

2. Coding with Old HTML Elements

HTML5 is the newest form of the HTML coding language, and it’s provided a lot of changes to standard page design. HTML5 replaces elements such as Adobe Flash with the <canvas> tag. The new standards also deprecated some tags such as <frames> and <center> for CSS design.

It’s usually best to avoid coding with older HTML standards. Front-end design depends heavily on browser support. Older HTML support is not always available in some browsers, and it’s bad practice that can put your site at a disadvantage in the long run. (Not to mention, HTML5 has many awesome advantages that will make a site more modern and secure.) The code can be harder to support and in some cases, it can leave your site more vulnerable to security attacks.

3. Forgetting to Test for Each Major Browser

Front-end design relies heavily on JavaScript and client-side scripting. This is why the best practices is to test your code in all the major browsers. At a minimum, most people expect you will test your code in Chrome, Firefox and Internet Explorer (now Edge). You can determine what browsers you’d like to support by looking at your site’s browsing analytics data or using an external source to determine common browsers.

You should also determine the oldest browser version you’ll support. Many users stick with the same older browsers as their computer ages, so you should weigh the pros and cons of possibly alienating these users with the effort it takes to maintain code for both older and newer browsers. Decide the oldest browser version you’ll support and then test on these older versions.

4. Forgetting Responsive Mobile Design

Mobile is the new generation web browsing. Tablets and smartphones are the most popular ways for browsing the web, increasingly replacing desktop browsing. Your front-end design should always be responsive and support mobile devices, or you’ll risk penalties in search results. You can also create a separate site for mobile (also called “m sites”) on a subdomain, but responsive design should be the default in modern front-end coding.

After you make your design responsive, you’ll want to test it as well—with all browsers and browser versions. Remember that mobile devices have several different screen sizes, so ensure that your code supports all possible breakpoints. You can use emulators that help you test so that you don’t need to have several devices on-hand to test.

5. Not Prioritizing Site Speed

Servers and bandwidth are important for site speed, but it’s possible that your front-end can be too bloated even for the fastest server. Image size is a major factor, as is bloated JavaScript code that could be too slow. Always reduce image size and use a format that can be resized without losing much quality such as PNG.

Several site speed testers are available to help you identify what elements of your site design are slowing down your application. “Spaghetti” JavaScript code can slow down the client-side, and large images can slow page load performance. As with responsive design, search engines even take site speed into consideration for ranking, because slow sites frustrate users. A best practice is to always test your site and ensure its performance is fine tuned.

6. Using Outdated or Abandoned JavaScript Libraries

Expert tip: Stick to JavaScript libraries that have active support, documentation, and consistent updates by their developers. You don’t have to only stick with worldwide famous libraries, but you should ensure that the one you do choose will be maintained down the line. If the library is not supported or maintained years later, you might find yourself in a sticky situation with a dependency that is no longer functional if a developer abandons his or her project.

It’s difficult to predict what a developer will do with a project years from now, but you can view its popularity by searching the number of support communities online. For instance, you can’t go wrong with AngularJS or KnockoutJs libraries—they’re popular and supported by big brands.

These mistakes are common, but very easy to avoid. As a front-end developer, your goal should be to create applications that are easy to use for your viewers and support site functionality and speed. JavaScript is probably the most difficult front-end technology to streamline, but by using good libraries and supported code, you can design a front end that doesn’t slow your site down and is highly responsive to mobile devices.

6 Common Front-End Web Development Mistakes to Avoid by Jennifer Marsh.  Available from <http://www.business2community.com/brandviews/upwork/6-common-front-end-web-development-mistakes-avoid-01717769#YMrkXBlRp8vGI6k4.97> [Nov 30, 2016]