Why marketers need to learn how to read and write web-code

Posted On 12th May 2020

To illustrate the importance of marketer being able to read and write web-code the website of a leading SEO-firm is assessed in this post. What I will show is that even a world-class agency makes mistakes and sometimes also lack in their understanding of the web and its related tools and methodologies.

Today’s complex and fast-evolving media landscape with new technologies and channels introduced almost on a daily basis; it is not viable to hold in-house competence in all areas of a marketing project and even for the biggest and most well-funded organizations and brands, it often is a necessity to bring in external expertise in areas including design, web- and app development, SEO, SMM, PR, and media advice/bookings when working with marketing campaigns and product launches.

While I personally been fortunate to work mostly with large and established brands and in organizations with the budget for employing the best creative- and marketing firms in the world; I also have come to learn time after time that even a world-class agency makes mistakes and sometimes also lack in their understanding of the web and its related tools and methodologies. With marketing strategic decisions in modern campaigns also being based on data from sophisticated analytics tools such as Google Analytics (2017), Optimizely (2017), Adobe Marketing Cloud (2017), Moz (2017) and Mixpanel (2017); and with modern campaigns often involving the production of apps, websites, animations, specialized landing pages and even forums and communities; it simply has become a necessity that all members of a marketing team keep updated on the latest tools and technologies of marketing- and web development and also are proficient in reading web code.

While of course, it is neither necessary nor possible that everyone in a marketing team are skilled web developers; to work efficiently, though, all members need to have the competence to interpret analytics reports, to evaluate the quality of work made by external co-workers (agencies and freelancers) and to understand why, for example, a campaign or marketing asset, such as a website, perform poorly in Google or other search engines which demands a basic proficiency in all areas of the web- and the mobile stack including basic code proficiency in HTML, CSS, JavaScript and app-development methodologies.

To illustrate the importance of marketer being able to read and write web-code the website of a leading SEO-firm is assessed in this post. In the final section, I then will summarize some of the main arguments, challenges and resource requirements that come with implementing ongoing educational- programs in coding and web technologies for in-house marketing teams.

Redrevolution.com (2017) (Figure 1, below) describe themselves as specialists in web development, inbound marketing, web application development and SEO. When analyzing their website, three technical deficiencies have been identified which have serious implications for both SEO and the user experience.

The website of redevolution.com

#Excessive HTTP-requests

As can be seen below, a site audit using mysiteauditor.com (2017) reports a warning of excessive file requests; Fig 1, below:

Performing a network audit in the Chrome developer tool, this also is confirmed and as illustrated in Fig 2, below, this page requests a whopping 163 files from the server which in total weights in at 2.2 MB(!).

Implications

According to SitePoint (2017), Kolowich (2017), Jaiswal (2013) and Wagner (2017); one of the single biggest contributors to performance problems in websites is exessive HTTP-requests (2017) leading to slow download times and consequently visitor dropoffs and lost revenue (Nielsen, 2017; DoubleClick, 2017; Zeichick, 2017). With page speed also being an important ranking factor in Google and other search engines; slow download times also have serious implications for SEO (Google, 2010; Bing Webmaster Guidelines, 2017).

Redevolutions (2017) excessive number of HTTP-requests is attributable to the fact that their site is built using Joomla! (2017) and a template with a number of deficiencies in the codebase; including an extensive number of badly coded plugins. As with WordPress (2017) Joomla is a great solution when building blogs, e-commerce systems and other database drive web-applications. For static websites like a corporate presentation page, however, these CMS-systems are unnecessary and often detrimental for SEO and page speed due to the large codebase that comes with them.

Improvements

Redevolution should migrate their site to from Joomla to flatfile cms like Grav (2017), Sphido (2017) or Picocms (2017) and also re-write the codebase and delete excessive Javascript and CSS files. To minimize HTTP-requests, they also should concatenate all JavaScript and CSS files (Mozilla, 2017) and instead use image sprites (Maxcdn.com, 2017) for decorative imagery and partner logos. They also should stop using the AddThis.com social media sharing buttons which generates more than thirty HTTP-requests and (Mobley, 2017; Kmetko, 2015) and write these connectors manually. Performing these improvements will reduce the total number of HTTP-requests from the current +160 do less than twenty.

#Render blocking Javascript and CSS

Implications

When a website is loaded in the browser, the code is “read” from top to bottom and any code in thereby will be executed before the actual content is rendered (text and images). If a web page has a lot of files/code in the head, consequently this will result in a delay before the actual content is displayed which has serious implications on both SEO (Google, 2010; (Bing Webmaster Guidelines, 2017) and the user experience (Nielsen, 2017; DoubleClick, 2017; Zeichick, 2017).

Improvements

As can be seen in Fig 4, below, the site has an excessive number of JS and CSS files in the head which should be moved below the ending body-tag and also deferred (Deferred JavaScript, 2017) to enable content to be loaded immediately at PageLoad. If migrating to a flat-file CMS and if re-factoring the codebase, most files also can be deleted.

#Multiple h1-tags

A technical audit of Redevolutions website using Screamingfrog (2017) reveals multiple H1-tags on the start page as can be seen in Fig 5, below; and which also is confirmed using the Chrome development tools in code view (Fig 6 & 7, below):

Implications

Headlines on websites are presented in six levels called ‘H1-H6’ with the H1 being intended for the main title. For indicating section, sub and paragraph headlines the H3 to H6-tags are used (Fig 8, below):

As with titles, chapter headings, and sub-headlines in printed documents such as books and reports; the H-tags gives a website structure which helps search engines and visitors to understand intent, content, and structure.

While multiple H1-tags now validates in HTML5 and Google also confirms that multiple H1-tags will not be punished by its algorithms (Cutts, 2017); the H1-tag still is one of the strongest signals Google use to understand the intention of a website and as noted by Patel (2017), Millar (2017) and Webpagefx (2017) using multiple H1-tags, thereby, can dilute the signal what the web-page is about. More importantly, however, is that multiple H1-tags are semantically incorrect and can be compared to using the same font- and font size on the title of a document or a book as for chapters- and subheadings. While this is possible it is very bad from a semantic- and usability standpoint.

Improvements

Redevolution should make sure that their main business keywords are published in the first H1-tag of the page (Fig 6) while the second current H1-tag ) which in fact is a subheadline (Fig 7) should be changed to a H2-tag.

A marketer’s cheat-sheet to benefits, challenges and resource requirements for implementing educational programs in coding and web technologies for in-house marketing teams

The infographic below summarizes this article and presents the requirements, challenges and benefits of implementing educational programs in web-technologies for in-house marketing teams: