To illustrate the importance of designers and marketers being able to read and write code, the website of a leading SEO-firm is assessed in this post. What I will show is that even world-class agencies make mistakes and sometimes also lack in their understanding of the web and its related tools, technologies, 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. Even for the largest 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 have 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, technologies 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 has become a necessity that all members of a marketing team keep updated on the latest tools and technologies and also are proficient in reading 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 perform poorly in Google or other search engines which demands a basic proficiency in all areas of the web- and mobile stack—including basic code proficiency in HTML, CSS, JavaScript and app-development methodologies.
To illustrate the importance of marketers being able to read and write code the website of a leading SEO-firm is assessed in the following sections. 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 general web technologies for in-house marketing teams.
A technical audit of redevulution.com
Redrevolution.com (2017) (Figure 1, below) describes themselves as “specialists in web development, inbound marketing, web application development and SEO.” When analyzing their website, three technical deficiencies, however, can be identified, which have serious implications for both SEO and user experience.
#Excessive HTTP-requests
As can be seen below, a site audit using mysiteauditor.com (2017) reports a warning of excessive file requests:
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 major contributors to performance problems in websites is excessive HTTP-requests (2017) leading to slow download times, visitor drop-offs, 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 also using 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 a 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. In addition, they also should stop using the AddThis.com social media sharing buttons which generate more than thirty HTTP-requests and (Mobley, 2017; Kmetko, 2015) and instead write these connectors manually. Implementing these improvements will reduce the total number of HTTP-requests from the current +160 do less than twenty.
#Render blocking Javascript and CSS
A technical audit using Google PageSpeed (2017) shows render-blocking code in the page (Fig 3, below):
Implications
When a website is loaded in the browser, the code is “read” from top-to-bottom and any code in the header 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 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 instantly at page load. If migrating to a flat-file CMS and if re-factoring the codebase, most of these 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; which also is confirmed in the Chrome Development Tools (Fig 6 & 7, below):
Implications
Headlines on websites are presented in six levels called ‘H1-H6,’ with H1 being intended for the main page title. For indicating page sections, 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 with Google also confirming 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 webpage is about. More importantly; multiple H1-tags also are semantically incorrect and can be compared to using the same font- and font-size on the title of a report, as for chapters- and subheadings. While possible, doing so is problematic 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 H1-tag, which in fact is a sub-headline (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:
- References
- Adobe Marketing Cloud. (2017). Adobe Marketing Cloud. [online] Available at: https://login.marketing.adobe.com/ [Accessed 25 Sep. 2017].
- Bing Webmaster Guidelines. (2017). Bing Webmaster Guidelines. [online] Available at: https://www.bing.com/webmaster/ [Accessed 20 Sep. 2017].
- Cutts, M. (2017). More than one H1 on a page: good or bad?. [image] Available at: https://www.youtube.com/watch?v=GIn5qJKU8VM [Accessed 22 Sep. 2017].
- Deferred JavaScript. (2017). Asynchronous vs Deferred JavaScript. [online] Available at: https://bitsofco.de/async-vs-defer/ [Accessed 22 Sep. 2017].
- DoubleClick by Google. (2017). Mobile speed impacts publisher revenue – DoubleClick. [online] Available at: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ [Accessed 20 Sep. 2017].
- Google Developers. (2017). Remove Render-Blocking JavaScript. [online] Available at: https://developers.google.com/speed/docs/insights/BlockingJS [Accessed 22 Sep. 2017].
- Google Developers. (2017). Remove Render-Blocking JavaScript. [online] Available at: https://developers.google.com/speed/docs/insights/BlockingJS [Accessed 22 Sep. 2017].
- Google PageSpeed. (2017). PageSpeed Tools | Google Developers. [online] Available at: https://developers.google.com/speed/pagespeed/ [Accessed 22 Sep. 2017].
- Google Technical Guidelines. (2017). Google Technical Guidelines. [online] Available at: https://techdevguide.withgoogle.com/ [Accessed 20 Sep. 2017].
- Google. (2010). Using site speed in web search ranking. [online] Available at: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html [Accessed 22 Sep. 2017].
- Grav. (2017). Grav – A Modern Flat-File CMS | Grav. [online] Available at: https://getgrav.org/ [Accessed 22 Sep. 2017].
- Jaiswal, S. (2013). Instant PageSpeed Optimization. Birmingham, England: Packt Publishing.
- Joomla!. (2017). Joomla! The CMS Trusted By Millions for their Websites. [online] Available at: https://www.joomla.org/ [Accessed 22 Sep. 2017].
- Kmetko, L. (2015). A Big Test of Social Media Buttons – Performance, Privacy, Features – Xfive. [online] Xfive. Available at: https://www.xfive.co/blog/social-media-buttons-test-performance-privacy-features/ [Accessed 22 Sep. 2017].
- Kolowich, L. (2017). hubspot.com. [online] hubspot.com. Available at: https://blog.hubspot.com/marketing/reduce-http-requests [Accessed 22 Sep. 2017].
- Maxcdn.com. (2017). What are CSS Sprites?. [online] Available at: https://www.maxcdn.com/one/visual-glossary/css-sprites/ [Accessed 22 Sep. 2017].
- Millar, A. (2017). Are H1 Tags Important for SEO. [online] Abra Millar – Digital Marketing Consultant. Available at: https://www.abramillar.com/2017/01/25/h1-tags-important-seo/ [Accessed 22 Sep. 2017].
- Mixpanel. (2017). Mixpanel. [online] Available at: https://mixpanel.com/ [Accessed 25 Sep. 2017].
- Mobley, E. (2017). Social Media Share Buttons Impact On Website Performance. [online] Ericmobley.net. Available at: http://www.ericmobley.net/social-media-share-buttons-impact-on-performance/ [Accessed 22 Sep. 2017].
- Mozilla. (2017). Fantastic front-end performance Part 1 – Concatenate, Compress & Cache – A Node.JS Holiday Season, part 4. [online] Available at: https://hacks.mozilla.org/2012/12/fantastic-front-end-performance-part-1-concatenate-compress-cache-a-node-js-holiday-season-part-4/ [Accessed 22 Sep. 2017].
- Mozilla.org (2017). Dynamic sites, server request. [image] Available at: https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction [Accessed 20 Sep. 2017].
- Nielsen, J. (2017). Nielsen. [online] Nielsen. Available at: https://www.nngroup.com/articles/website-response-times/ [Accessed 22 Sep. 2017].
- Optimizely.com. (2017). Optimizely: The World’s Leading Experimentation Platform. [online] Available at: https://www.optimizely.com/optimization-glossary/web-analytics/ [Accessed 25 Sep. 2017].
- [email protected], A. (2017). Sphido: A rocket fast flat file CMS. [online] Sphido. Available at: https://sphido.org/ [Accessed 22 Sep. 2017].
- Patel, N. (2017). How to Create the Perfect H1 Tag for SEO. [online] Neil Patel. Available at: https://neilpatel.com/blog/h1-tag/ [Accessed 22 Sep. 2017].
- Picocms.org. (2017). Pico – A stupidly simple, blazing fast, flat file CMS.. [online] Available at: http://picocms.org/ [Accessed 22 Sep. 2017].
- Redevolution.com. (2017). Redevolution.com. [online] Available at: https://www.redevolution.com/what-we-do [Accessed 20 Sep. 2017].
- Screamingfrog. (2017). Screaming Frog SEO Spider Tool & Crawler Software. [online] Available at: https://www.screamingfrog.co.uk/seo-spider/ [Accessed 22 Sep. 2017].
- SEO Group, L. (2017). Mysiteauditor.com. [online] Mysiteauditor.com. Available at: http://mysiteauditor.com/user/tools [Accessed 22 Sep. 2017].
- SitePoint. (2017). Seven Mistakes That Make Websites Slow — SitePoint. [online] Available at: https://www.sitepoint.com/seven-mistakes-that-make-websites-slow/ [Accessed 20 Sep. 2017].
- Support.google.com. (2017). Google Speed Guidelines. [online] Available at: https://support.google.com/analytics/answer/1205784?hl=en [Accessed 20 Sep. 2017].
- Wagner, J. (2017). Web Performance in Action. Saintmpford: Manning Publications Company.
- Webpagefx. (2017). Can a H1 Tag Improve My SEO? | How H1 Affects SEO. [online] Available at: https://www.webpagefx.com/internet-marketing/can-H1-improve-SEO.html [Accessed 22 Sep. 2017].
- WordPress. (2017). Blog Tool, Publishing Platform, and CMS — WordPress. [online] Available at: http://www.wordpress.org [Accessed 22 Sep. 2017].
- Zeichick, A. (2017). Are slow website load times costing you money and pageviews?. [online] GoDaddy. Available at: https://www.godaddy.com/garage/webpro/development/are-slow-website-load-times-costing-you-money-and-pageviews/ [Accessed 22 Sep. 2017].