Lessons Learned from Rebuilding My First Website

WordCamp Lancaster 2017

Beth Soderberg | @bethsoderberg

Photo by geralt at pixabay.com

Photo by Martin Falbisoner on Wikimedia Commons

Outright Mistakes

Mistake 1: Responsive Layout Issues

lack of testing

  • logo not always fully visible
  • zero gutter
  • visual breaks in content
  • overlapping content
  • oddly scaled type
  • wrapping menus

tested by screen dragging and on multiple devices by multiple humans

  • visible logo
  • gutters that scale
  • reordering and reformatting of content
  • type resizing
  • modern mobile menu

Mistake 2: Rigid CSS

layout breakages with variable length or width content

  • feed layouts broke unpredictably
  • table layouts required horizontal scroll

replacement of float-based layouts with flexbox and reformatting of table-based content on small screens

  • content editors won't wonder why a layout "works only sometimes"
  • all content accessible without horizontal scrolling

Mistake 3: Static Copyright Year

year was hardcoded into footer template

  • no one knew how to change the year
  • when I returned to the project it still read 2012

PHP used to auto-generate the year

no one has to update the year ever

Mistake 4: Complex Content in Widgets

feeds and dynamic content was hardcoded in widgets

  • required HTML knowledge to update
  • inconsistencies in editors' changes
  • eventually no one knew how to update it

custom queries in page templates for all dynamic content

  • zero HTML knowledge required
  • automatically populates from content type
  • no one else needs to know how it works

Mistake 5: Post Type Identification

  • posts
  • pages
  • candidates
  • legislation
  • used standard categories store different types of content
  • blog had unrelated content in it
  • navigation problems
  • no one could figure out how to make content appear in specific places
  • posts
  • pages
  • endorsements
  • legislation
  • scorecards
  • press releases
  • our work
  • actions
  • ballot measures
  • election results
  • labels for content are accurate
  • content editors know where to add specific content
  • less likely to degrade over time
  • logical navigation management

Mistake 6: Improperly Hacked Plugin

tried to modify WPB Accordion Menu or Category

  • custom functionality lost upon plugin update
  • inability to update plugin
  • possible security risks

custom plugins for custom functionality

  • all plugins are updateable
  • minimum viable code for custom functionality

Mistake 7: Inline Documentation

zero documentation within admin

  • users guessed where/how to update content
  • users modified things to force them to "work"

field labels everywhere

  • editors can match fields on admin to output on site
  • editors know recommended sizes for images
  • editors have meta information required to maintain site

Things that weren't "wrong", but could be better

Area for Improvement 1: Design

improvised design off Eleven40 theme for Genesis framework

  • overreliance on existing layout options
  • I managed to kill lots of necessary padding
  • I chose odd colors
  • lack of visual excitement
  • extra weight in theme and overrides in child theme

implemented design off homepage and interior page mockup created by a designer

  • unique layouts for homepage and featured internal content
  • infinitely improved color scheme
  • sense of balance
  • cleaner code

Area for Improvement 2: Column Layout

layout with right and left sidebars

  • longer content in sidebars than in content region
  • visual weight of sidebar content overpowers content
  • now looks quite dated

layout with right sidebar as needed

  • eye goes straight to key content
  • extraneous sidebar content eliminated/moved to homepage
  • looks clean and includes white space

Area for Improvement 3: Landing Page User Flow

landing pages with sections to click on

  • landing pages had no meaningful content
  • requires extra clicks to access content

landing pages with real content and section navigation

  • SEO benefits
  • no extraneous clicking required

Area for Improvement 4: Homepage Slider

Nivo Slider with image

  • badly designed slides
  • random aspect ratios for individual slides
  • text always baked into slide images

Advanced Custom Fields that allow for slider options:

  • headline
  • background options
    • image with image upload
    • color with select color choices
  • button text
  • button link
  • limited factors that produce ugly slides
  • visual cohesion between slides

Area for Improvement 5: Navigation

8 main menu items and 5 secondary menu items

  • visual overload
  • some items too granular

7 main menu items and 3 secondary menu items

  • increased scannability
  • secondary menu became buttons, not more text links

Area for Improvement 6: Hosting

windows-based server

all kinds really


optimized for WordPress and reduced stress

Area for Improvement 7: CSS


extra bulk over time


  • developer happiness
  • variables, mixins, partials, etc.

Things That I'll Never be Able to Control

Uncontrollable Factor 1: Available Technology

Uncontrollable Factor 2: The Client

Uncontrollable Factor 3: The Content

We all start somewhere.

Thank you!