A Comprehensive Website Planning Guide (Part 2)

Most businesses and organizations require some kind of planning. Unfortunately, there is often a failure to prepare adequately or at all when it comes to websites. The purpose of this guide is to change that.

Part 1 emphasized the necessity of understanding the goal of your website and why planning for the web is just as important as planning for anything else related to your organization. Today, I’d want to go over the process of analyzing a strategy, selecting web specialists, and deciding the structure of your website in greater depth.

Writing the Plan

If you’ve been recruited as a designer to construct a company’s website, your plan is also a proposal that must be reviewed and signed off on before you can move forward with the project. The rules varies depending on the country and type of business/organization, for example, government organizations have a different approach than private firms, but in general, you’ll need a signature from a key decision maker – someone with the authority to authorize the job and pay you.

If you’re constructing the site with company resources, your plan is the project’s working document.

There are various methods to construct a plan, but a good one will include the following, as well as some of the things you’ve already worked out:

• A brief history of the company and its troubles.
• This is vital since it serves as a reminder to everyone why they are working on the project in the first place.
• A site map that shows how pages are organized and how many there are in total.
• An outline of the design process, including modification allowances and the design deliverables.
• Are you displaying Photoshop mockups or working design prototypes? How many do you have room for? (For further information on this distinction, see the Design section.)
• A collection of site features, with clear definitions and comments on where they will appear.
• The term “features” is, obviously, quite ambiguous. A feature is essentially a site component that provides a specific presentation or functionality. It may display a specific sort of content from the Content Checklist (see below). Because websites vary so significantly in breadth, it is impossible to present an exhaustive list of all the features that will ever be available. However, here are a few examples to get you started:
• Showcase of photographs
• Directory of Employees
• Form of contact
• Map
• Blog

The key is to include a clear description of what the feature accomplishes and, if feasible, a link to an example of the feature in action.

Slide Show

Image rotator powered by Javascript. Panorama image (16X9 ratio), title overlay, and link are displayed for each image. Provide next/previous buttons as well as a slide indication for the current slide. Maximum of six photos. Someurl.com/slideshow contains a demonstration.

Third Party Contract

If you’re integrating any third-party services, such as an email newsletter or a Twitter feed, it’s critical to describe how they’ll work and the level of integration you’ll provide. Some third-party content, such as a Facebook Friends Grid, may take 10 minutes to integrate, while others, such as designing a bespoke component entirely from scratch using a third-party API, may take a full day or even longer.

Milestones

A list of the project’s important points and the deliverables for each. Depending on the extent, this may be 30 days or 6 months. Here are the milestones for a 107-day (about 3 1/2-month) project. This is only an example; yours may differ significantly.

• 1^st day

The discovery meeting (designer and client)

• 7th day

Session on Content Strategy (designer and client)

• 21st day

Initial designs are provided to the client.

• 28th day

Designer receives design feedback

• 35th day

Designs were presented to the client (with changes).

• 40th day

The client has approved the designs.

• 42nd day

Start working on the front end (HTML, CSS, Javascript)

• 63rd day

Configure CMS and integrate front-end assets

• 84th day

CMS installation has been completed; CMS training has begun; and content entry has begun.

• 100th day

The beta test

• 107th day

Launch

Terms and Legal Language

Designers frequently ignore this step and nearly always get burnt when a project goes wrong. Take a moment to explain to the client what all of that technical jargon means! In the long run, telling the client in straightforward English will save you a lot of hassle. The adage “Information is power” is completely true, and enabling clients to ask questions about technical words can make them feel more at ease when they are overwhelmed by technical jargon and help them avoid confusion in the process.

What is All This Going to Cost

If you are constructing your full site in-house, your costs will be as follows:

• Employees’ time is spent.
• The software that runs the site, including any upgrades.
• Hardware, i.e., the server that hosts the site.

If you’re outsourcing the task, the response is “it depends.”

Checking Credentials

Website design, comprising all of its components, is a specialized service. Hiring a web designer or business, on the other hand, is not the same as hiring an accountant or an attorney because web design is not a credentialed industry and is frequently collaborative in nature. That is, the individual on the design team who creates the design, user interface elements, mockups, and so on may not be the same person who creates the code (the creation of front and back end markup). Even in tiny online teams, numerous people come together to develop the end output, each with their own speciality, skill set, and training.

Web experts with degrees or certifications in computer science, graphic design, or similar subjects, as well as the occasional SEO master or social media genius, may be encountered. However, because of the field’s dynamic, ever-changing character, as well as its relative newness, it’s dangerous to rely on credentials to evaluate the expertise or experience of the specialists you hire. To be honest, while they demonstrate that a professional has invested in his or her art (which is always a good thing), they don’t mean much in the actual world. There isn’t a single controlled, united body of experts that awards certificates to online professionals as proof that they know what they’re doing.

Lets Not Forget Website Maintenance

While the size, scope, and expense of constructing a site might vary greatly, the finished site is not the end of the road. As long as a site is live, it must be continually maintained. Annual maintenance costs should be expected to be 10% to 25% of the site’s initial budget. So, for a $20,000 site, routine care could cost $2,000 to $5,000 per year. (Of course, more intricate changes, upgrades, and so on will cost more, but this is a decent starting point for basic standard maintenance.)

How to Evaluate and Choose Web Professionals

As previously said, I am not a fan of the RFP (Request for Proposal). RFPs attempt (and usually fail) to compress a creative, dynamic process to a series of figures and milestones that lack sufficient information to be accurate. But how can you pick a team if you don’t have an RFP?

Following these three procedures will increase the chances of selecting an excellent firm.

1.      Ask for Referrals

Obtaining referrals from business owners who have already worked with the service provider is a fantastic place to start when available.

People who have employed the individual or firm in question for a large project provide the most useful referrals. Just because someone made a fantastic PowerPoint presentation for Leticia Gomez, president of Gomez Manufacturing, does not imply that they are qualified to design a 200-page website for your science foundation or radio station.

2.      Consider Substantial Projects

Smart designers always include their most successful, successful, or visually appealing work in their portfolio. However, the appearance of a website is not always indicative of its usefulness. It can be difficult for the layperson to understand whether or not a site is well-structured and correctly created simply by glancing at it in a browser, let alone what went into constructing it. Allowing the designer to walk you through the needs assessment, design, and development process of a large project they have done will give you a sense of how they work. The process itself is just as crucial as the end product. Inquire with the designer:

• What were your first assumptions about the project?
• How many persons were there?
• How much time did it take? Were project milestones met, and if not, why weren’t they?
• What were the client’s thoughts on the project?
• What would you do differently if you had to construct it again?

3.      Meet Them

Many designers are happy to meet with you for an hour to discuss your requirements. Try to get a sense of how this designer will approach your project, but don’t go fishing for ideas. You wouldn’t expect an architect to “just have a quick crack at a blueprint for us” for free, and you shouldn’t expect designers to provide detailed, in-depth solutions to your problem. Instead, use this occasion to learn how they interact with one another and what types of questions they ask. As previously stated, this is an excellent moment to revisit one of their previous projects. Your goal is to learn about them, their people and processes, and whether or not they are a good fit for your company.

Things Not to Rely on When Choosing Web Professionals

Inquire with a specialist about the appropriate tools for the job. Don’t rely a critical business choice on rumor. (You wouldn’t tell your plumber which tool to use when fixing your toilet because you’re not competent to make that decision.) Even if you’re a plumber, the expert you hired most likely has a valid reason for doing things her way – let her do her job.)

What you pay for is what you get. If the price appears too good to be true, it probably is. Period. (If you’ve read thus far, you’re aware that your job cannot be completed satisfactorily for the price of a smartphone.)

Find the appropriate individual for the task. (Do not engage an airline pilot if you require the services of a ship’s captain.)

But have you designed a site for a restaurant/car wash/toddler Parkour center?

Everyone has a product, service, or benefit to communicate, whether they offer baking materials or cold fusion reactors. The designer’s job is to build a product that is tailored to the client’s business and sector. A skilled designer can create for almost any industry, whether they’ve done so previously or not.

Lack of detailed information about a sector can sometimes be an advantage, as it will be seen with a fresh perspective. For more on worrying over designs for a specific industry, see If Carpenters Were Hired Like Web Designers.

Roles: Who is Doing What ?

It is fairly usual in smaller organizations for the business to communicate with only one or two members of the team. Don’t be concerned; the entire staff is working on your project; you just can’t see them. It’s not a good use of anyone’s time for the company to have a phone chat about the finer details of JavaScript development for a certain module.

The communication flow is similar to that of a waterfall: the business will communicate with one or two team members, who will then communicate with the remainder of the team. Team members will interact with the business as needed, but the firm should not expect to talk with the full team on a frequent basis.

Internal stakeholders (representing all primary aspects of the business)

This could be a single person or a small group. Please read on for more information on design by committee.

Project Manager

The function of the project manager is similar to that of any other project manager, but it is critical that he or she be aware enough with the web project process to make educated decisions and suggestions concerning approach, timeline, and roles.

Content strategist/information architect

Aids in the planning, organization, and prioritization of the site’s content and structure, including navigation. May also be in charge of editorial workflow, which is the process through which an organization moves material from initial draft to approval stages and eventually to publishing.

The greater the breadth of a project, the more important this function will be. These responsibilities are undertaken by the project manager and/or web designer on smaller projects.

Content Creators

At the very least, one individual from the company should be in charge of writing and providing various sorts of material. It is strongly advised to divide these responsibilities among several people.

Copywriter/ Editor

The copywriter will either request a basic framework from the company to work from, or will begin by interviewing key personnel at your organization and create polished copy based on their notes.

Sometimes a combination of both strategies is used, but a copywriter will work closely with the company to generate the greatest possible text for a website. Professional copywriters can help you save time while also improving the quality of your website.

Web Designer

The web designer may also provide graphic design, interaction design, illustration, and animation as part of the work, in addition to creating the visual look of the website, the creation of every single user interface element on the page, the style of the text, the placement and layout of photos — the entire page top to bottom.

They may also be involved in the management of user experience (“UX” — which is exactly what it sounds like – the experience of your website’s users).

The Front End Coder

The coder’s job is done separately from the rest of the site’s development. Typically, the coder will take the web designer’s drawings and specifications and produce piles of code and assets (images, videos, etc.) that will be utilized to assemble the finished website.

Web /CMS Developer (Back End Coder )

Because no two CMS are the same, with different programming languages and ways of doing things internally, you’ll need a CMS developer who is familiar with the CMS you’re using to build your site. A CMS developer may be an expert at building WordPress sites but have no idea what to do with Drupal.

Are you utilizing project management software?

This should almost go without saying, but project management software will substantially assist your web project. Keeping track of message threads, files, changes, and duties among several project participants becomes extremely difficult when done via email – don’t do it. We became so unhappy with email-based project management in my company that using our preferred project management platform has become a requirement of working with us. Learn and use a system, whether it’s Basecamp, Trello, DaPulse, or another.

Where Will It All Run ? Choosing a Content Management System

There are four main questions to consider while selecting a CMS:

• Is it well-known and supported?

• Is it reasonably stable? Is there any known security or stability issues?

• Does the person or team working on it have the required expertise?

• Will it be able to handle the site’s style, features, and functionality?

“One Dude In A Basement Built This For Us” — Avoiding Proprietary Solutions

In the best-case situation, you might (try to) employ someone to go over the software and update the code, but this can be tough and costly, and you’re throwing money at orphaned software that no one else will ever use. Many developers just will not accept this type of work – it’s not worth taking responsibility for something over which they have no influence.

WordPress, The 800 Kilo Gorilla Of CMS

WordPress is the most widely used open source CMS in the world, with more installs than any other CMS. It is open source, free to download, and was originally designed as a blogging platform. It is an appropriate option for some websites, but not for many.

Trusting the Designer

Most designers specialize in one or two CMS, and if their honest appraisal of your project indicates that it will work well in their CMS of choice, the decision boils down to trusting the designer.

Dealing with your Information Technology (IT) person or department

Feel pity for the beleaguered IT expert, who is justified to be concerned that someone would increase the demands of their work without giving the resources or training required to support new technologies.

While every business’s needs are unique, in most circumstances, websites that do not require significant integration with other software can be hosted outside of your organization. If your IT department makes a big deal about supporting your chosen solution, you should seriously consider hosting it elsewhere.

If your project is particularly sophisticated, requires high security, or requires intensive monitoring, you may require the assistance of your IT department or expert external resources. Whatever you choose, make certain that the individuals who will be supporting your solution are well-versed in dealing with its unique issues. If there isn’t a good in-house option, don’t be afraid to go elsewhere for people who can provide these services.

Determine Site Content

Who’s responsible?

When deciding on material for the site, you should also consider who will contribute to it. Remember that it is up to you (or possibly the copywriter you’ve smartly recruited) to develop your content, not the designer. It’s okay if there are only two of you in a five-person company. In a larger organization, five, ten, or fifteen employees may contribute content. In this instance, it’s a good idea to appoint a project manager who will design an editorial calendar, assign writers, and set deadlines.

“We had no idea it would take this long!

There is no hard and fast rule for how long it takes to collect content, but for written material, estimate how long it will take to create and edit at an average of 300 words per page. Then divide by the number of pages. If it takes one hour to compose 300 words and a half-hour to edit them, that’s 1.5 hours X 40 pages = 60 hours.

Good writing takes time, as does good photography, and films that people want to watch must be prepared, produced, shot, and edited. Keep this in mind as you begin your project and plan properly.

Consider having different people in your business split the task, especially when it comes to writing. Setting — and meeting — deadlines requires a dose of realism about how long content development will take.

Content is Not Just Text

You can considerably improve the site’s appeal and usability by incorporating one or more of the following multi-media elements:

• Documentary Photography (usually PDFs)
• Audios/Podcasts /Interviews
• Playlists
• a video (i.e., YouTube, Vimeo, or self-hosted).
• Other websites’ content streams, such as Twitter, Facebook wall content or friends grid, Instagram photographs, YouTube/Vimeo videos, and RSS Feeds
• JavaScript, Java, Flash, and Quicktime. These are effective tools for video, animation, and interactive features such as a mortgage calculator. All but JavaScript, however, do not work reliably across mobile devices. When considering one of these technologies, make sure your target audience can use it.

The Value Of Quality Photography

There is no business that will not profit from strong visuals, but it is especially critical for companies that offer actual visual outcomes, such as house remodelling, interior design, or automotive restoration.

It’s ridiculous to finish a $50,000 kitchen and not spend $500 for a photographer (1 percent of the total).

If you absolutely have no budget, shoot your own images. Keep lighting, frame, and focus in mind, and hope for the best. Taking a huge number of images and sifting through them afterwards can increase the likelihood of a good shot, and minor changes (changing levels, removing red eye) in Photoshop or another image editing program can improve them even more. However, keep in mind that no amount of “editing it in Photoshop” can save a truly terrible photograph.

The value of quality writing

Writing properly, like good photography, is not a skill that everyone possesses. As previously said, writing for the web is not the same as producing memos, policy papers, or technical documents. You or a colleague may be excellent at writing operating instructions for precision machining tools, but this does not imply that you can write well for the web.

Hire an expert if you don’t have someone in your business who can write clear and succinct marketing copy. Consider hiring an editor to improve your product if you can write relatively well but need some assistance.

Writing For The Web: Quick Guidelines

Avoid corporate jargon, perplexing acronyms, and dry details. Customers do not work in your store, office, or widget factory; they buy your goods or services. Speak to them as such. When appropriate, use broad strokes on your website and keep the specifics for a voice-to-voice chat, or better yet, offer multi-page PDFs for download on the site. This method is particularly useful for product information, white papers, and copy that is close to or surpasses a thousand words.

Reading on a screen is fatiguing.

 A screen, whether massive 26-inch monitor or diminutive smartphone, projects tiny points of light at your eyes. Consequently, reading large amounts of text can be very tiring. Because of this, readers will scan for key points within your text. That’s why short blocks of copy and bulleted or numbered lists are so helpful, because they’re easy to spot. Try to make each paragraph/section encapsulate a single idea.

Customer- Oriented Copy 

Because the eventual purpose of most company websites is to increase sales, the material on your website should be targeted toward your consumer.

Our auto body repair customers typically call after their car has been damaged in an accident.

• Their need is to have their car repaired so they can drive it again.
• Their desires are to have the repair done fast, at high quality, and with a minimum of hassle.
• Their fears include getting ripped off, shoddy repairs, a difficult process, or repairs taking too long.

If our company provides free loaner cars, we’d consider it a feature — but we can portray it as a benefit: “Acme Auto Body’s free loaner cars ensure you don’t miss a day of work, important appointments, or other plans while your own car is in the shop.”

Determine Your Site Structure

Here are the key building blocks of your site, in structural terms.

Site Map

Your site map can be designed in the form of a flowchart using software such as Visio or a free application such as Gliffy. This method presents your site map as an organizational chart, with a sequence of items connected by lines and labeled to show how the pages connect to one another.

Here is an example site map for New Harvest, prepared in Adobe Illustrator.

Content Definition

You might wish to add a photo gallery to your website. That’s a good idea, but how will this photo gallery look? How will it function? Is it twenty images in a grid of thumbnails with a pleasant pop-up overlay when you click on them, or a multi-page gallery with 1,000 shots, each individually categorized and with meta data tracked?

Should the photographs be rated by users?

What are your thoughts?

Can I get high-resolution versions?

Should I send them to a friend?

Do they all open in a new window?

Simply observing the functionality of existing websites and seeing what can be useful for your needs is one technique to help determine content. Explore the web with an eye toward content categories and their shape and function, and compile a list of the ways you like most and why they might work well for your website. Simply taking note of content kinds you appreciate that are executed in a way you think works well is a wonderful place to start.

Content checklist

The following is a non-exhaustive list of the most prevalent categories of website content. Keep in mind that these are only examples, not definitions.

• Articles
• Audio
• Weblog (sometimes with user comments)
• Advertisement on banners
• Discussion board
• Documents
• E-commerce
• Contact forms, quote request forms, and other forms
• How many physical products are there?
• What kind of digital stuff is there, and how much of it is there?
• Newsletter by email
• Calendar of Events
• Registration for the event
• Photo gallery
• Link administration (dozens or hundreds of links, ordered by category)
• Maps
• Incoming RSS Feeds (external, pulled from other sites in to yours)
• Outgoing RSS Feeds (your site’s information syndicated to other sites)
• Reviews/Testimonials
• Search
• Links to social media sharing sites, such as Twitter and Facebook.
• Directory of Employees
• Locally hosted video or video from YouTube, Vimeo, or another service.

Content Relationships

Our New Harvest website is too small to necessitate this, so consider a massive restaurant expo with 100+ learning sessions over the course of a weekend.

Keep in mind that changing material in one section of the site may need changes in other areas for consistency and accuracy. Employees, for example, will join and depart your company, as well as change positions and responsibilities. The proper use of a decent CMS should reduce content duplication.

SEPARATING DESIGN FROM CONTENT

Design and content are inextricably linked, but they are also distinct. This may be perplexing at first. The concept of divorcing design from content implies that site content is virtually entirely devoid of design components. Let’s look at a simple, tangible scenario to be sure we’re not just thinking hypothetically. Assume you have articles on your website. There is one of the following for each article:

• Title
• The meta title
• Description of the meta
• Author(s)
• Publication date
• It is ascribed to the following categories:
• Teaser
• Text of the article
• Image.

Together, these pieces of information comprise an article. They should also map neatly to fields in your CMS’s database, where information is stored. At this point in the process, it doesn’t matter what design you apply to the copy — fonts, layout, colors, author photo thumbnails, etc. The content is valid even in the absence of design. The website is capable of displaying all of these items on an article page, in the correct order. It may not look pretty in the page as plain text, but it reads correctly. It makes perfect sense, and it’s all there. In other words, when you have all the above elements together, related to each other correctly, you have what (at least technically) constitutes an article.

This necessitates further content segmentation and, at the very least, the creation of versions of content headlines and principal pictures for use in diverse circumstances. Consider a more extensive collection of article fields:

• Title
• Long title alternative
• Alternative social media short title
• The meta title (for search engines)
• Description of the meta (for search engines and some social media)
• Author(s)
• Photograph of the author
• Publication date

It is ascribed to the following categories:

• Teaser
• Text of the article
• Image
• Alternate size image
• Thumbnail image.

What is meta data?

Meta data is information about your content. Everything other than the title and article text may be considered meta data in the case of an article. When some individuals hear the term “meta data,” they automatically think, “Oh, for search engines.” Yes, various sorts of meta data are used by search engines to successfully index your site. However, meta data is also necessary to ensure that your site’s content is appropriately reflected on social media and elsewhere on the Internet.

When you have 10 articles, tracking the authors and categories via meta data may not seem all that useful. In two years, when you’ve built up a library of 150 articles, you’ll be glad you took the time to collect this.

Now you can offer sorting and searching content in a way that’s especially useful to users. But if you haven’t planned for this from the start, it’ll be difficult and time-consuming to add after the fact. Manually going through 150 articles, one by one, and adding meta data by hand isn’t a lot of fun.

URL Structure

Whatever CMS you choose to design the site using, your pages will need a specified structure. Plan ahead of time so that you have logical, neatly constructed URLs for every sort of page on your site. This will require collaboration with your CMS developer. As an example:

• www.mysite.com (Home page)
• www.mysite.com/blog (Blog main page)
• mysite.com/blog/ten-ways-to-save-on-a-kitchen-remodel (This is a one-post blog.) This is the URL for an article titled “Ten Ways to Save on a Kitchen Remodel”), as you might anticipate.
• mysite.com/services/widget-repair (Internal pages under the heading “services”)
• mysite.com/articles/fixing-your-model-5-widget

WHERE IT COMES TOGETHER: SEO

Assembling these previously noted elements properly:

• Quality writing
• Well-defined content, including proper use of header tags (h1, h2, etc.)
• Good meta data
• Logical URL structure.

is the most effective way to achieve good SEO for your site. These are not the only points that matter, but they are the most important, as they are key factors which you can influence when addressing how your site is built and structured. Your CMS should provide the framework for setting up these elements. Like many of the topics discussed here, SEO is very complex, with a huge number of moving parts, and needs its own book. To dig deeper, see recommended reading.

Wireframes

Wireframes enable us to focus solely on the structure of the pages, seeing what goes on them and how those pieces interact without being distracted by the design. There are numerous excellent tools for creating wireframes. Photoshop, Illustrator, and Visio are all good choices, as are specialized programs like Balsamiq Mockups. Working on paper or a whiteboard can also be quite effective.

What about Responsive Web Design (RWD) and mobile devices?

As you’ll see below, the necessity that sites work on mobile devices is drastically and swiftly transforming the design process from beginning to end. When it comes to wireframes, you should consider creating them for both mobile and desktop, or “large screen” views. Alternatively, depending on your workflow, you may consider the wireframes stage for mobile devices unnecessary. Of course, this changes from project to project, and you’ll want to pick the strategy that works best for your specific site.

Wireframes might be a quick process or a lengthy one, depending on the complexity of your project and the approach you prefer.

Here are some sample wireframes for our fictional restaurant, created in Balsamiq:

After you’ve reviewed the wireframes, it’s time to move on to the graphic and interaction design stages.

The Value of Good Design

Consider the iPod. Apple Computer has had tremendous success selling products with highly honed design, both physical and in their user interface (User Interface). The iPod does not have any unique capabilities that its competitors do not.

In fact, by certain standards, it is less feature-rich than other music players. Early models, for example, did not record external sounds. Before the iPod could record the world around it, you had to connect it to another piece of technology.

When it comes to websites, however, the value of good design and attention to detail is often discounted. The thought is that as long as something works, it doesn’t really need refinement. There’s no reason to go further if millions of other people are doing just fine with the lowest possible common denominator. This is misguided thinking. Your website, along with logo, business cards, signage, letterhead, direct mail and other visual expressions of your brand are critical to the way customers perceive the business.

The experience users have on your website is part of this impression. When a website is professionally designed (looks and feels like skill, talent and time went into building it), when it is harmonious, pleasing to the eye and easy to navigate, it makes a positive impression on site visitors.

When a web user becomes frustrated, they often do not search more, do not phone or email, and simply abandon your site. You can get a sense of this by analyzing your website visitor statistics4 (look at “bounce rate” if they’re set up correctly), but these metrics don’t tell you what a visitor was thinking when they left your site.

Good design does not happen by chance. It’s not arbitrary. Every pixel is planned and performed in accordance with an overarching quality design guideline. Visitors can recognize when a site has been well-designed. Good design just feels better than bad design, and a user’s experience will influence his or her likely to buy your items or services. It makes a significant difference.

The Puzzling Popularity Of Ugly Websites

While design is important, some websites succeed despite their lack of design. Craiglist is maybe the most well-known. Craiglist is incredibly popular despite being almost fully free and ubiquitous, yet “un-designed” and cumbersome to use. Why? Because it works and has quickly built a market position.

However, the popularity of uglier sites such as Craigslist should not be used to justify poor design decisions on your own site. Small businesses, particularly startups, cannot afford to create a website that is both visually appealing and functionally sound. In this day and age of high design standards, releasing Craigslist as a brand new website would fail terribly.

Responsive Design And Evolving Technology

Designers must now account for a wide range of devices, user agents (web browsers), screen sizes, and resolutions, rather than just a few variations in web viewing technology, such as the unique quirks of different web browsers across different operating systems — Internet Explorer on Windows vs. Safari on Mac. Furthermore, standard technologies such as Adobe Flash, which used to run on almost all devices, can no longer be relied on to perform reliably.

What Is Responsive Web Design?

Responsive Web Design is an approach to presenting content and design that allows text, images, video and other elements to change in size, appearance and layout according to the capabilities of the device on which they’re viewed. These changes appear to happen “automatically,” though, of course, a developer has specified exactly when and how these changes should happen in every possible scenario.

For example, here’s a simple arrangement for displaying six films on a single page. On a full screen (for our purposes, a laptop or desktop), we display them in three rows.

We display them in rows of two on a smaller screen, such as a tablet.

On a smartphone screen, we stack them in a single column and allow the user to easily scroll between them by swiping their finger down the screen.

Different Device, Different Experience

In comparison, a smartphone lacks a mouse and, in many cases, a tactile (button) keyboard. The touchscreen allows users to swiftly scroll, zoom, or cycle through content by using their fingers, while data is typed using a virtual keyboard on the tablet itself. This screen is only present when we require it.

Larger screens can show a lot of content at once, but scrolling through it quickly can be disorienting. Small screens have very limited “screen real estate”, but it’s fast and intuitive to use one’s finger to scroll through long columns of information, like movie listings, pharmacy locations, or available appointment slots very quickly. We have gotten very comfortable with the process of touching our websites.

Breakpoints

But how does the website know whether to show the “large screen version,” “small phone version,” and everything in between? In the opposite direction, how does the phone determine what size the website should be in order to look well on the phone’s little screen? We use breakpoints to instruct the site how it should show on different screen sizes because we can’t rely on devices to stick to a small and finite range of screen sizes/resolutions. Breakpoints are essentially small pieces of code that trigger the points at which the design’s appearance changes.

Breakpoints are created using a technique known as media queries, which instruct the web browser on how to display content based on the available screen space. These media queries inform the website about the breakpoints and what to do with the page when one is encountered.

While the available height of a screen is obviously significant to how we want to show content, we are more concerned with screen width and what is feasible to display in each row of our layout when setting breakpoints. Consider our previous video example: because they are presented row by row, we need to know how much width we have available to show them for each screen size.

Next Year’s Model, Or “What Are We Going To Do About The iphone 6S?

We may anticipate that technologies and their capabilities will shift and evolve, as will best practices. A well-designed website can be helpful and relevant for many years, but not indefinitely. There will come a moment when the technology used to access a website will simply outperform the site itself. It’s time to re-evaluate and create something new at that point.

Navigation

One of your initial considerations should be navigation. And it’s the most crucial, because it’s how users move around your site, or “navigate.” A row of links near the top of a desktop website is a highly typical type of navigation.

You can have only one level of links, or you can have drop-down menus for any or all of them. When you have a lot of screen real estate to work with, this works beautifully.

When creating mobile responsive menus, the most typical way is to employ collapsing menus when the site reaches its first small-screen breakpoint. We specified a breakpoint at which the navigation will transition from a single row across the top to a vertical navigation system spanning the entire width of the screen.

If we need drop-down menus, we place them beneath each top-level link. This looks like this, and if you’ve ever visited the web on your phone, you’ve probably seen it:

As a result, when the user clicks on the About link, for example, the drop-down menu should show. The link can’t also send visitors to the About page – if it did, there’d be no way to make the drop-down appear. As a result, if your About section requires a proper landing page, call the first link in the drop-down menu Overview and route them to your About section landing page. When the user extends the menu, they will be able to access all of the links under About and select the Overview landing page to view that material.

You’ll also note we repositioned the social media icons in a way that makes sense for a narrow display.

Relative Sizing

We can apply relative sizing to any element — columns, images, videos. This makes it easy to expand and contract everything on our page, based on breakpoints.

Images

Our sample image is a magnificent panorama of the Redwood Forest in California, with some text overlay. On large screens, it looks fantastic.

The first option is to simply scale them down to fit the width of the screen.

The second step is to give a replacement image that still conveys our message but is more appropriate for the device.

Typically, for graphics that “float” among text.

Adaptive pictures provide more flexibility and reduce bandwidth and hence load time, but they are more difficult to install.

Considerations For Advertising

While the Internet Advertising Bureau (IAB) provides several fixed-dimension banner ad standards, these are no longer applicable to a responsive website where available space varies. If you must serve advertising, pay close attention to size and placement, and test your site on a number of devices. For banner ads, you’ll probably need to employ some of the same responsive strategies mentioned previously (stacking, adaptable images). Also, keep in mind that ad blockers may interfere with the display of advertisements on your website.

Taking Advantage Of Mobile Device Capabilities

Mobile gadgets introduce new capabilities such as accelerometers, multi-touch, and GPS (Global Positioning System). Consider how you may use these to make your content more relevant to users. For example, as the user approaches closer to a place, directions will change based on their location (as determined by the user’s GPS). It is worthwhile to discuss the new possibilities provided by mobile devices.

Responsive Images And Art Direction

On your website, art direction can assist convey moods, thoughts, and concepts. Assume we want the danesi logo to be prominently displayed on this cup of espresso. This image, which has been lightly cropped, will look amazing on wide screens.

However, for smartphones, we may want to use this closely cropped image to make the logo stand out more.

Video

Video is a demanding medium; it may not be ideal over sluggish or poor connections, which are particularly common on mobile devices. (Imagine you’re on the go and using whatever 3G/4G connection is available.) It could be quick or sporadic.) Never allow videos to play automatically, and avoid loading too many on a page at once, as this causes pages to load slowly. Consider utilizing a “lazy loading” strategy for images, in which video players defer loading until the user scrolls to them.

Tables

When we get to smartphone size, though, we just don’t have enough place for all of these columns, so we use JavaScript to reformat the data so that it can be displayed in a meaningful fashion. There are several technical solutions to this problem. The best one for your project will be determined through research.

Links, Buttons, And Hotspots

Feature phones are extensively utilized in several countries to access web-based content. (Most Blackberry phones are classified as feature phones; they can connect to the Internet but lack the full range of smartphone functionality, including a powerful web browser.) Feature phones are not smartphones, and their user agents (browsers) are often limited. Additional problems about bandwidth and latency may arise, particularly when servicing populations in rural locations, developing regions, or other areas where Internet connectivity is less than ideal.

This tutorial does not cover the design of these gadgets. You must conduct more research if you require your site to be available on feature phones or devices with certain limitations. Know your target – if you’re aggressively marketing in a region of the world where customers prefer feature phones over, say, Samsung Galaxy S phones, you might want to revise your strategy to account for these users. There are technological ways to ensure that all of your users have a positive experience on your site; it simply may require some more effort.