The Full Stack of a Website: What Clients Often Overlook

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.

Show Notes

Introduction

• Customers often make the mistake that their website is “just a website” meaning it’s simply what they can see on the surface:
  
  • Images
  • Writing
  • Product pages
  • Landing pages
  • Design elements
• Behind the composed and polished veil hides the chaos and complexity that is as difficult to implement as it is time-consuming - a recipe for disaster if you’re expecting to just “throw something together”

CMS

• Clients like to be able to edit the site themselves, but it’s not as simple as a quick blog editor set up
• Think about all the websites that you’ve worked on over the years - covering everything from industrial mechanics through news websites - not to mention different strategies (ie landing page, business card website, consumable event website, blog)
  
  • Each of these sites’ have unique needs based on the content they cover, and the goal of the site itself
  • When we interviewed Per Borgen, we had a brief discussion on how web developers assume a lot when they put together websites for people (ie what fields go into their CMS) - this is very true for anyone that makes websites across a diverse set of clients because there’s no way to have expertise in so many areas
  • Hot take: This is why having expertise in a non-development field can come in handy. If you’re experienced in construction and you go to build a construction company’s website, there’s less assumptions
•  When setting up a CMS you have to consider:
  
  • How the data is organized 
    
    • What CMS collections are you going to have? Blog posts, Call-to-Action
    • Validation to ensure the content works inside the design but also ensures the site doesn’t become bloated
      
      • Character count limits 
      • File size limits and resolution restrictions on images
    • Field UX
      
      • Users need to be able to quickly understand what to edit and where
    • Prevent user mistakes
      
      • You want to prevent as many mistakes as possible - you don’t want the user to make changes they don’t mean to, or waste time uploading files that aren’t the right format
      • Validation helps a lot with this
      • But good field UX helps even further

Scalability and Hosting

• Development can take center stage of many websites, but where is the site going to live?
• Hosting is a foundational part of any website - having a huge impact on performance and scalability
• Are you going to use:
  
  • Traditional cPanel hosting
  • Cloud (ie Vercel, Netflify)
  • VPS
  • Dedicated
• Scalability is key:
  
  • Are you going to need more storage space?
  • Load balancing?
  • More computing power (typically for web apps)
• From the devops side the hosting choice influences
  
  • How staging and production works
  • Deployment pipelines
  • Functionality availability (ie maybe this hosting provider doesn’t allow cron jobs)

Performance and Core Web Vitals

• After your site is all built up and looking good… it may not perform well
• Using products like Google PageSpeed Insights can give you an in-depth look at how your website is performing (as well as other goodies like SEO score)
• Having poor performance can hurt your SEO rankings (this is particularly true if the performance is very bad)
• Common performance fixes:
  
  • Lazy loading images
  • Compressing assets like images, minifying CSS & JS files
  • Caching data, managing how much is called from remote sources (ie API calls)
  • Managing what you allow to block the page load
  • Loading scripts as async, defer, etc.
  • Removing unused code

Content Strategy & SEO

• Choosing what your goal is front the onset is key!
  
  • If your website is relying on other marketing and not SEO (ie an event website that has banners at the event, then a lot of SEO stuff can be left out)
• “We want to rank on Google” but that’s easier said than done
  
  • Good Information Architecture
  • Blog setup (tagging, categories, related posts for interlinking)
  • Schema and meta fields with proper parameters (Google is only going to show 55-60 characters for titles and will replace any title it sees fit)
  • Sitemap setup and hosting
  • Robots.txt setup
  • Sitemap variants (ie google news sitemap w/ proper updating)
• SEO is ongoing not only from the user perspective, but also from the search engine perspective
  
  • Users need to ensure they’re adhering to SEO strategies throughout any content they add/remove/modify on the site
  • Google and other search engines change what they bubble to the top, so strategies need to be adjusted on an ongoing basis

Maintenance and Longevity

• Many clients assume that once the site is “done” that, that’s it - but that is not true
• Websites need constant updates:
  
  • Content updates
  • SEO strategy updates
  • Security updates
  • Tune-ups as the site ages and old information adds up (ie broken links over hundreds of blog posts)
• Routine site backups are key to recovering from technical disaster
• Laundry list:
  
  • Plugins break
  • APIs need to be updated or replaced
  • A flow of new content is needed
  • Content strategy needs to update with the times
• Does the client need training?
• Uptime monitoring for mission critical sites?

Security, Compliance, and Spam Protection

• SSL certificates (HTTPS) 
  
  • Encrypts data between user’s browser and the server (ie form data, page content)
• CSP header (Content Security Policy HTTP header) 
  
  • Helps prevent web vulnerabilities like cross-site scripting (XSS), data injection attacks, some types of code execution
• GDPR/CCPA and other privacy laws adherence (ie cookie policy, data storage)
• Contact forms
  
  • Spam prevention with Captchas and challenges
    
    • This not only prevents annoying spam, but also saves receiving users’ time and prevents service limits (ie your email server only allows for 200 emails to be sent per day from your form)

Third-Party Integrations & APIs

• Newsletter sign-ups
  
  • Dealing with service providers like MailChimp, spam law compliance
• Ecommerce
  
  • Working with payment vendors (region specific sometimes due to tax laws and other laws)
    
    • Integrating with Stripe, PayPal
  • Integrating with internal business-workings
    
    • What do we do when something is out of stock? Will it come back? Can users backorder?
• SEO Tools
  
  • Google Analytics
  • Google Search Console
  • Google Tag Manager