As a front-end web developer who works with marketers on a daily basis, I am often responsible for identifying issues that may hurt SEO rankings or cause mobile issues, especially within the HubSpot platform. Marketers are known to be savvy self-learners who research and consume information daily to better improve their skill set and competitive advantage. However, this can often lead to marketers knowing just enough CSS or HTML to be dangerous. Often, small CSS and HTML tweeks can cause your mobile experience to break, which in turn can penalize your SEO rankings because your website is not being mobile-friendly. Beyond identifying HTML and CSS pitfalls, in this post, I will help you identify items which can be overlooked because we are often used to making website changes on our non-mobile devices.
Test Before Publishing
While this may seem obvious to many when publishing a new blog post or editing the contents of a website page, testing different browser window sizes is often overlooked. People tend to only test their page on desktop or phone. It’s important to remember that people view your website from a wide range of browser widths. Once a change is made to a page, you should preview that page while manually and slowly shrinking the width of your browser to see how the content reacts. If you are only checking desktop and phone sizes, you are missing a large chunk of display possibilities for those viewing from smaller laptops or tablets. A clunky website experience may lead to you losing customers, which is why it’s so important to get this right from the start.
Be Wary of Tables
The general rule of thumb in web development is to never use tables to define a container, unless the table is in an email. But some data only makes sense to display in a matrix type format and a table seems to be the only way. Feeling smart, you look up the syntax for how to create a table in HTML, digesting the different parts from table headings to table rows, and think to yourself, “That seems doable”. However, tables can be extremely tricky if they have too many columns, and they don’t tend to resize the way you would expect them to. If you absolutely must have a table and you don’t have a developer to add CSS for mobile fixes, I would consider using an image instead, adding as much relative content to the alt-text as possible to keep it SEO-friendly. On smaller devices, a wide table image may not be readable because the text has become so small, so having the image also be a link that opens in a new window could be useful because then users can use their phone to zoom in and out of the full-size image as needed.
The Pitfalls of Inline Styling
Inline stylings are the CSS properties that can be attached to a specific element on the page, such as a paragraph tag <p> or heading tag <h1>. If you have ever ventured into the HTML version of the text you are editing in WordPress or in a Rich Text Editor in HubSpot, you have probably noticed the inline stylings being set, for instance, when you highlight text and change the font or color. You may see something like the following:<h1 style=” font-family: arial;”>My Great Heading!</h1>
Recommended for You
To most people, this is readable enough that you can deduce what this CSS is doing by setting the color to “red” and the font to “arial”. So now you may think that you want to expand on this and make your heading bigger, so you add “font-size: 80px;“ creating a nice big heading that stands out and fits the layout of the content. However, what most non-developers don’t understand is that inline styling generally overwrites the CSS in the stylesheet.
In general, font size should shrink when it moves from desktop to tablet to mobile, but now it’s permanently at a very large size. Developers use what is known as media queries, which are styles set for a maximum browser width, so that the CSS changes depending on whether you are viewing the page from a phone, tablet, or desktop. If you are creating very large headings with inline styles, your heading on mobile may now only be one word per line and very difficult to read without scrolling because it is so large.
Adding Too Many Menu Items
This issue is far more common than many people think. As the direction of your website changes over time, you may find that you need to add more top-level navigation items. You are sure to check that it looks good on desktop and mobile. However, what you have forgotten are the sizes in between a mobile menu and full desktop version. By shrinking the browser down, you may find that your menu items are wrapping to two lines, creating a terrible user experience.
Small mistakes such as these could be the difference between losing and gaining a customer. Your website is your chance to make an impression on your prospective clients who are not likely to hand over their hard-earned money if their experience browsing your website is subpar. Avoiding these common mistakes will ensure that you are keeping your site optimized for mobile friendliness that helps SEO rankings, while also maintaining a professional look and feel.