Do This, Not That: Website Edition
Better Solutions for Common Web Problems
There are a variety of ways to complete a task on the Web, but some solutions are better than others. While looking at items that are part of a typical Web update routine, I listed below some common web problems, possible solutions, and then much better solutions. Because there are so many ways to address items on a website, these certainly aren’t all the possible solutions, nor are all of the “poor solutions” always incorrect. The goal for any website is to keep things clean, consistent, and engaging. The “better solutions” listed below are recommendations with this intent in mind.
Problem: Text Styles Need to Be Different
Poor solution: Make in-line style edits.
Better solution: Update the cascading style sheet (CSS) for global changes.
We see in-line styling on sites all the time for a number of reasons: this is because either the person editing the page isn’t familiar with styles (h1, h2, h3), they want something different from what they have (h2 is too big, so I’ll just make it a smaller font), or they want the page to have a specific format (these paragraphs show up on the screen and these are “below the fold”).
You really shouldn’t change the appearance of text without doing so on a global level. If your subheads are too big, don’t shrink them. And skipping headers (from h1 to h3) is bad for search engine optimization (SEO) because the Web crawlers understand order of importance based on these tags. A better way to do this is to change the CSS. This typically needs to be done by a front-end developer, but this will keep styles consistent across all pages.
Also keep in mind, if you’re changing the format of the page to look a certain way, you are only doing so in that area. This will create inconsistency, particularly if a global change is made. In addition, you may be forcing the text to look a certain way—which could look good on desktop but may look very wonky on mobile.
Problem: Adding Large Images to the Website
Poor solution: Resize the photo in your content management system (CMS) or through HTML
Better solution: Crop the image ahead of time
If you load a large image to your website and resize it via the CMS or HTML, it actually means that for every person who views the page, the photo first loads to its full size, then has to shrink down. With many images and, heaven forbid, a slow internet connection, these photos might not even load. Instead, crop the image to the appropriate size for your website ahead of loading it.
Problem: Placing Ads
Poor solution: Place a .jpg in the content area of your site.
Better solution: Ensure the way your ad will be represented is to its best advantage.
By placing an ad as a .jpg, you are potentially missing out on tracking ability and mobile-view legibility. Consider how you’d like the ads to render across devices, how many should show, and what data you’d like to obtain for both yourself and the advertiser (clicks, impressions, etc.). With this information, a tool can be identified or code can be developed to meet your needs.
Problem: Tabular Data
Poor solution: Use a table and set its width.
Better solution: Rethink the format of the data—can this be represented in a clearer way?
Tables aren’t responsive, so on a responsive website, particularly mobile, the information may jut out of the frame, become illegible, or require you to scroll. Consider how to break down the text into header and paragraph styles or perhaps how to incorporate trays to assist with the formatting.
Problem: I Need to Give Members More Info in Print
Poor solution: In the print piece, direct users to the website where they can download the print piece. Users end up stuck in a loop.
Better solution: Edit your print text for web consumption, then load it to a web page as HTML when possible. If it isn’t worthy of a page, why is it on your website? If the information is already on the website, why are we adding the print piece? What is different or is something missing? If you still want a downloadable piece, consider whether it is printer friendly.
Note: If you are using links in your print pieces, make sure to give users a specific page to visit, rather than just your homepage where they’ll need to search for the relevant information. If your links are too long, consider creating short links or vanity URLs.
Do You Agree?
Are these problems familiar to you? Are there ones we’ve missed? Visit the AMC Facebook page and let us know what website problems plague you, and keep an eye out for Part 2 of our series.