Getting it wrong means none of that happens, and you have a lot of website rework ahead.<\/p>\n
Your website must also be designed to bring in target audience traffic and convert potential customers. While brand marketers should have their say about visuals, user experience (UX) designers and developers should be as involved to partner on core functional aspects like:<\/p>\n
- \n
- Information architecture and navigation<\/li>\n
- Calls to action<\/li>\n
- Content hierarchy<\/li>\n
- Platform integrations and data storage expectations<\/li>\n
- Back-end search and social attributes<\/li>\n<\/ul>\n
On pages, let\u2019s break down the individual elements of content. Depending on the content management system (CMS) your website is being built in, content elements within web pages may be called widgets, page blocks, blocks, containers, fragments, components, items, or something similar. What\u2019s most important as a marketer is to be sure of two things:<\/p>\n
(1) Blocks should be designed and developed with flexibility in mind.<\/strong>\u00a0Think about the layout of information and how you want website visitors to interact with elements, or move from page to another, across various page and content types.<\/p>\n
Instead of thinking about how you\u2019d want something like a featured webinar (for example), to\u00a0look<\/em>, think,\u00a0\u201cwhen we feature any piece of content, we\u2019ll want to include a heading, an image, teaser copy, and a way to click to that content.\u201d<\/em>\u00a0Having those content guidelines will help the design and development team create a template that houses those elements seamlessly for all of your featured content.<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-1.jpg\" "\\"\\"")
<\/p>\nThis content block is promoting a webinar, but with a flexible design mentality, you\u2019d want to use the same design to feature an ebook, case study, report, etc.\u00a0<\/em><\/p>\n
(2) Talk with your design and development teams about defining requirements for all page blocks.<\/strong>\u00a0You\u2019ll want to define requirements for both the author (the person updating the website) and the end-user (your site visitors). For example:<\/p>\n
\u201cAs an author, if I associate this block with a URL \u2026<\/em><\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-2.jpg\" "\\"\\"")
<\/p>\n\u2026 And I would like to be able to manually override everything but the link.\u201d<\/em><\/p>\n
And<\/p>\n
\u201cAs a user, I need to understand what the featured content is about by seeing its title, a sentence or two about it, and an image. I then need to be able to click the button to get to the promoted asset.\u201d<\/em><\/p>\n
Lastly, you want a website with content that can be updated by non-technical people. That means you should limit the need for HTML and CSS knowledge, technical understanding, and photo-editing skills for regular, ongoing site updates.<\/p>\n
2. Not checking and preserving existing page rankings<\/h2>\n
Even if your company isn\u2019t focused on SEO, your site likely ranks\u2014or is close to ranking\u2014for some terms. Check what your website currently ranks for, and which pages are performing, and coordinate content and development teams to preserve those rankings \u2014 especially if the URLs will be changing.<\/p>\n
How do you see what keywords your website is ranking for?<\/h3>\n
There are several ways to find this information, including\u00a0Moz<\/a>\u00a0v\u00e0\u00a0SEMRush<\/a>, and also for free using Google Search Console. If you have GSC connected with Google Analytics, you can find ranking keywords under Acquisition > Search Console > Queries. (If you don\u2019t have these tools connected, find out how\u00a0here<\/a>.)<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-3.jpg\" "\\"\\"")
<\/p>\nI use Moz\u2019s Ranking Keywords report. All you do is put in your website\u2019s URL, click \u201cAnalyze\u201d and Moz spits out a report with every keyword your site ranks for\u2014and the specific page that\u2019s ranking for each term.<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-4.jpg\" "\\"\\"")
<\/p>\nOn your new site, you probably don\u2019t want to remove or dramatically edit these pages.<\/p>\n
Pro tip!<\/em><\/strong><\/p>\n
You can also use this as an opportunity to identify potential keywords for other pages. For that, you just drop down to \u201cKeyword Suggestions,\u201d put in your URL in again, and you\u2019ll get a report with a ton of suggested terms that you can save in the system and\/or export to a spreadsheet.<\/em><\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-5.jpg\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-6.jpg\" "\\"\\"")
<\/p>\nEnter a term you want to write a page about in \u201cExplore by Keyword.\u201d Moz shows the estimated search volume, difficulty, and competitive insights about it, as well as a list of similar terms to consider.<\/em><\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-7.jpg\" "\\"\\"")
<\/p>\n3. Not trashing underperforming content<\/h2>\n
Now that you know what terms and pages rank and what to preserve, what about everything else? A website redesign is a great opportunity to\u00a0audit your website\u2019s content<\/a>\u00a0and trim the fat.<\/p>\n
Letting go of outdated, under-performing content does three great things:<\/p>\n
- \n
- Leaves you with less content to have to replicate on the new site<\/li>\n
- Gives you a cleaner, easier-to-manage content environment moving forward<\/li>\n
- Provides only the highest quality content for your visitors<\/li>\n<\/ol>\n
4. Working on design and copy separately<\/h2>\n
What comes first, copywriting or design? In my experience, this is the web world\u2019s chicken-and-egg question.<\/p>\n
Copy often needs to be a certain length for design, conversion and SEO purposes. Conversely, content needs will likely dictate page templates, page types and page block design tweaks. This is why your design and copy teams should collaborate closely.<\/p>\n
Longform content\u00a0tends to perform better in search<\/a>. But modern design for core web pages favors short and punchy copy with lots of content blocks and visuals. It\u2019s important to think about this when planning your content mix and appropriate layouts for types of pages your site will have.<\/p>\n
Think about how different your content needs are for a simply designed page, like a blog post:<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-8.png\" "\\"\\"")
<\/p>\nCompared to something like a product detail page with images, product information, related content and product recommendations, and need-to-know details:<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-9.png\" "\\"\\"")
<\/p>\nBut don\u2019t go overboard. Templates that are flexible and can be repurposed are your friends. Having too many content templates will make content management a bear once the website launches.<\/p>\n
5. Underestimating stakeholder input, timelines, and revision rounds<\/h2>\n
New websites mean lots of eyes internally. People are passionate about their roles in the business and want to be involved. Your CMO or even CEO may need to approve some pages.<\/p>\n
Not to mention, if you\u2019re trying to write copy to rank in search, expect lots of messaging conversations with the service line, product and\/or brand teams.<\/p>\n
Content production for your new website is going to take serious collaboration. You need a strong leader, clear goals, and a solid internal project manager to coordinate it in order to adhere to your timeline and budget.<\/p>\n
6. Ignoring metadata<\/h2>\n
Every page should have a title, meta description, etc. for search engine optimization (SEO) purposes. Though Google may not always use your page titles and meta descriptions verbatim in search results, that\u2019s often what\u2019s pulled through to validate to a searcher what they\u2019ll find on a page. These SEO attributes not only help you rank in search for your target terms\u2014they can also help convert a searcher to a site visitor.<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-10.png\" "\\"\\"")
<\/p>\nThis is the back-end of a blog post in WordPress, where we\u2019ve input the page title, URL, and meta description.<\/em><\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-10-1.png\" "\\"\\"")
<\/p>\nThis is how that same blog post appears in Google search results.<\/em><\/p>\n
And don\u2019t forget about social shares! If you\u2019ve ever wondered where the image and descriptions for these come from, it\u2019s called the open graph. Talk to your developers and make sure that open graph is installed across your website, and you know what the defaults will be set to\u2014especially for social share images.<\/p>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-11.jpg\" "\\"\\"")
<\/p>\n7. Letting images take a backseat<\/h2>\n
Images: You need a lot of them, sized appropriately, in multiple formats. And depending on design timelines, you may not know the details until later in the game. Start sourcing images early, and don\u2019t lock yourself into a design with complicated image requirements.<\/p>\n
Based on some of the decisions you made about metadata, see if your CMS can auto-size images from a single file for common use cases like page hero, teaser, and social shares. Also, talk with your development team about image size compression and content delivery networks, so your image-heavy pages don\u2019t take forever to load.<\/p>\n
Pro tips!<\/em><\/strong><\/p>\n
- \n
- If you don\u2019t have photo editing skills in-house, design elements like transparent backgrounds or collages can be expensive to maintain going forward.<\/em><\/li>\n
- Make sure team pictures are taken in a style that can be repeated as new employees join the company.<\/em><\/li>\n
- Be thoughtful about\u00a0iconography<\/a>. It\u2019s easy to get carried away with icons, but they can be hard to find. And you\u2019ll probably need to be able to create new ones later.<\/em><\/li>\n<\/ul>\n
8. Underestimating resources needed for content updates<\/h2>\n
Depending on the complexity of your site, standard pages will typically take anywhere from 15 minutes to several hours to create. Someone\u2014or more likely several people\u2014need to have the time to do this. If your site is particularly large and complex, a project manager dedicated specifically to content management can be a huge help.<\/p>\n
Pro tip!<\/strong>\u00a0Since you\u2019re documenting all of your site content, use this as an opportunity to keep track of new (and old) content regularly. You\u2019ll never have to do a massive content audit again.<\/em><\/p>\n
9. Not having an internal process for content approval<\/h2>\n
Who \u201cowns\u201d the site, or elements within it? Is there content that needs to go up the ladder for approval? Before your website launch, you should clearly understand who needs to approve what, and by when. Plan for revision rounds, and be sure that anyone who needs to review content is aware of their deadlines in advance.<\/p>\n
You might consider having several people responsible for various pages and site elements. For example:<\/p>\n
- \n
- Content marketing person signs off on copy<\/li>\n
- Brand person signs off on visuals and overall design<\/li>\n
- Subject matter expert signs off on overall messaging and checks for factual errors<\/li>\n
- Digital person confirms the page is complete and correct, based on its template and page type<\/li>\n<\/ul>\n
Additionally, you might want to include a web development or technical person who signs off that the coding is correct and the content is still visible even after a user filters out explicit content off their device. This is especially important if your website caters to kids and teens.<\/p>\n
\u201cWhen creating content, you always think about your target audience. If your website has products for children, there\u2019s a large portion of your audience that classify themselves as parents. Nowadays, it\u2019s easy for children to get exposed to harmful content online. Parents invest in their children\u2019s safety, so there are chances that they enable\u00a0parental control apps<\/a>\u00a0on theirs and their kid\u2019s devices.\u201d<\/em>\u00a0Sean Clifford, CEO, Canopy<\/p><\/blockquote>\n
For high-profile or high-priority pages, you may need to plan for additional layers of approval. Example: It\u2019s likely your CMO and CEO will want to give the homepage their stamps of approval.<\/p>\n
Assign one person or committee that designates the priority of various types of content, website sections, and individual pages. Particularly at larger organizations, you\u2019ll likely have multiple teams vying for prime navigation or homepage real estate.<\/p>\n
You need a decision-making body to intake and assess these requests\u2014and be empowered to make the final decisions for the whole of the company. Otherwise you could end up catering to the loudest voices, which can compromise your website\u2019s user experience and ability to meet its goals.<\/p>\n
Speaking of \u2026<\/p>\n
10. Not defining website goals and performance measurement plans<\/h2>\n
Determine what questions you want to know the answers to, how you\u2019ll answer them, and how often those reports will be needed. Define your key performance indicators (KPIs), and put some numbers down that you want to achieve so you have something to work toward.<\/p>\n
- Make sure team pictures are taken in a style that can be repeated as new employees join the company.<\/em><\/li>\n
- If you don\u2019t have photo editing skills in-house, design elements like transparent backgrounds or collages can be expensive to maintain going forward.<\/em><\/li>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/content-web-design-mistakes-12.jpg\" "\\"\\"")
<\/p>\n