7 Web Design Best Practices

What Your Web Design Agency Should Know

Although web design best practices have evolved over the years, some things have not. In this article we will discuss the 7 web design best practices that your web design agency should know.

1. Know Your Business

web-design-know-your-business

Your web design agency does not need to know how to modify your software architecture, increase efficiencies in your manufacturing process or develop new service lines. However, your web design agency does need to understand your business fundamentals: who you are, your core values, what you do, who you do it for and how you differentiate yourself from your competition. Your web design agency should also understand your culture. A tech startup in San Francisco, for example, will have a vastly different culture than a manufacturer in Waco, Texas.

2. Know Your Target Audience

web-design-target-audience

As mentioned above, your web design agency needs to know your target audience. Most organizations have multiple audiences, so your web design agency needs to know how to structure your website architecture to cater to each specific audience.

3. Content & Information Architecture

web-design-information-architecture

They say on the web that content is king, and this is true. But content left unchecked can quickly become a vast wasteland of dead, scrolling pages that customers will either ignore or become so frustrated with that they leave the website. Whether your new website is using re-purposed content or you are creating fresh content, it needs to be well organized. Information architecture is the process in which your web design agency will effectively organize your content. This includes creating navigation schemas, page wireframes and search systems that will provide the blueprint for a well organized website.

4. Design, Design, Design

web-design-information-architecture

Content defines information architecture, information architecture defines design, design defines how successful your new website will be in the eyes of your customer. I describe information architecture as the UI (user interface) and design as the UX (user experience). The design of your website will represent you in the most practical sense, and it needs to be a true representative of your business. Your web design agency should create a custom design based on collaboration and focused on UX on both desktop and mobile views. The process of building a website that adapts itself according to screen size and device is called responsive web design, which is an absolute standard in 2018. If your web design agency does not use responsive web design on its own site or client examples run away. Don’t look back, just run away. A good tool to test for responsive web design can be found at Responsinator: https://www.responsinator.com/.

5. Content Management System

web-design-content-management-system

Your web design agency should build your website using a content management system, or CMS, that is intuitive, robust, scalable, flexible and open source (non proprietary). WordPress is the most popular open source CMS in the world and is our recommended CMS of choice. With WordPress, you get all of the advantages of using a content management system without any of the drawbacks, including ease of use for non-programmers, a large online community of add-on developers, security and perhaps most importantly for small business owners, no license fees. If your web design agency is pushing you towards a licensed platform ask them how it has any advantage over WordPress in regards to these factors.

6. Calls to Action

web-design-calls-to-action

Calls to action are the most important psychological drivers on your website. They drive users to desirable outcomes you have already identified during the planning stages of your website. Your web design agency should work with you to help determine the calls to action and make certain that they take priority in the overall flow and structure of your website. Calls to action can include filling out a request form, signing up for a newsletter, register as a customer, make a purchase or join your social networks. The flow of the website in regards to calls to action should be designed during the information architecture and design phase of the project. All calls to action should be measurable via analytics.

7. Web Standards

web-design-web-standards

Web standards are invisible, but critical to the overall success of your website. Web standards ensure that with compliance your website will be optimized for search engine optimization (SEO), cross browser compatibility, mobile device compatibility, site performance and accessibility. The most popular web standards are the World Wide Web Consortium (W3C), the “Living Standard” created by the Web Hypertext Application Technology Working Group (WHATWG) and 508c3 government standards for accessibility compliance. To test your website for W3C compliance go to https://validator.w3.org/. Ask your web design agency about web standards. Have them place a web standards compliance guarantee in their service and maintenance agreements.

Conclusion

This list of web design best practices is just the tip of the iceberg and I will be adding more components in more blogs to come. The purpose of this article is to help you determine which web design agency is best for you. After all, you are the last word on whether or not it fails or succeeds.

We are recognized as a top Logo Design Company on DesignRush.

Antje Knott

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

Responsive vs. Adaptive Design: Which Approach is Best?

Those of us in the web industry have become familiar in 2012 with a new approach to website development. Responsive Web Design, or RWD for short. The promise of RWD is that it allows developers like DeepBlue to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD provides an elegant solution for a complex problem – how to develop a single website that satisfies today’s multi-platform consumer. RWD is not a new technology; rather, it is a new way of thinking about the web. Although a website built using a responsive approach is self-evident when pointed out, we have found that the term creates much confusion with customers, hence the purpose of this article. To try to clarify, we will define the two main design approaches to modern website development – Responsive Design and Adaptive Design – and allow the reader to decide for themselves which approach is right for them.

Let’s begin with the basics:

Responsive Web DesignMultiple Fluid Grids

Adaptive Web DesignMultiple Fixed With Layouts

Confused? I don’t blame you.

RWD uses something with the obscure concept of fluid-based proportion grids. 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 addition RWD uses flexible images, and media queries, and when all three components are combined we create a quality experience for users no matter how large (or small) their display.

Make sense?

Let me try to put this in simpler terms: RWD websites are like silly putty, they have the ability to bend and curb, essentially morphing themselves into the proper dimensions for any web experience, including desktop, tablets and smartphones. For those of you who remember the 1996 Summer Olympics in Atlanta – think Whatizit, just without all the horrible embarrassment it befell onto our fair city.

Olympics Logo

Got it? Good. Let’s move on.

Adaptive Web Design (AWD), on the other hand uses a fixed width layout in designing and developing a website. Instead of a responsive site that will adjust itself accordingly, the AWD approach is to create multiple versions of a website based upon its anticipated use. We used this approach for the Tennessee Aquarium website several years back. At that time, the iPhone had just made its glorious appearance onto the scene and users were excited about the ability to visit actual websites on their phone. Granted, of course, that the experience was not always optimal – I will not even mention Flash – we loved the fact that the geniuses at Apple were thoughtful enough to create an intuitive, gesture-based interface which allowed us to zoom in and out, making it possible to read content that was designed for a larger screen on our tiny 3.5 inch phone. For the time being, it was good enough. Soon, however, customers started complaining to us that their customers were complaining to them that their website was not very useful on their smaller devices. They asked us if we could create an alternative version of their website, designed specifically for small screens, squinty eyes and fat fingers. Witness the birth of the mobile-friendly website experience – a scaled back, dumbed down, easier to use version of what has become affectionately known across small screens everywhere as the ‘full site’. Even though the creation of a mobile version required additional cost, design, development and the creation of a sub-folder inside the CMS (thus duplicating content entry efforts), our customers were once again happy because, indeed, their customers were also happy.

Between the years 2006-2010, the Adaptive Web approach dominated mobile strategies. Essentially, we developed two websites – one for the desktop experience and one for the smartphone experience. Then, wouldn’t you know it, those geniuses at Apple introduced yet another disruptive product. The iPad. What exactly was the iPad? At the time, we were not quite sure. It wasn’t a laptop, yet it wasn’t a phone either. It was a brand new category. Inevitably, our customers started calling us asking about how we can help them optimize their tablet experience. Although the average website will default to its desktop version on a tablet, the content was not always an ideal fit, especially in portrait mode. Should we really build a third website that was optimized for tablets? Will customers actually pay for three websites? Things started to get a little murky, and that’s when we started hearing about yet another rumored device that would strike fear in the heart of designers – the iPad Mini!! Chaos ensued.

It all started to change with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations using what you are now familiar with (thanks to this article) as the Responsive Design approach. RWD is still in it’s infancy and best-practices are being established as I write this article. It is by no means flawless – the concept of pixel-perfect has been thrown out the window along with Flash architecture. But it does represent the single greatest hope for a portable web that works the way we expect it to.

Earlier in this article, I offered to clarify the differences between RWD and AWD and allow you, the reader, to decide for yourself which approach is best for you and your organization. I realize that my intentions for objectivity may have been slightly influenced by my obvious subjectivity and preference for RWD. Still, I leave the ultimate conclusion to be made by you. If you were undertaking a new website, which approach would you choose?

RWD Rules!

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development | Leave a reply