Beginner Mistakes: Lessons Learned from Reviewing Old Work and Inheriting Websites

WordPress DC, August 2018

Beth Soderberg | @bethsoderberg

Photo by Martin Falbisoner on Wikimedia Commons

Outright Mistakes

Mistake 1: Responsive Layout Issues

lack of testing

logo not always fully visible

zero gutter

weird content flow at various widths

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 on mobile

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

removal/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 were 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 and Taxonomy Misuse

  • posts
  • pages
  • candidates
  • legislation

used standard categories to store different types of content

blog had unrelated content in it

navigation problems

weird and/or nonexistent URL structures within content types

no one could figure out how to make content appear in specific places

  • posts
  • pages
  • endorsements
  • press releases
  • our work
  • actions
  • election results

shortcut to "homepage" page in WordPress admin

labels for content are accurate

content editors know where to add specific content

less likely to degrade over time

URLs appropriately generated by content type

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

text formatting eventually became illegible

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

sliders are a bad idea for conversion

Advanced Custom Fields that allow for slider options:

  • headline
  • background options
    • image with image upload
    • color with select color choices
  • text position
  • button text
  • button link

limited factors that produce ugly slides

visual cohesion between slides

client now understands that sliders are bad for conversion

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


variables, mixins, partials, etc.

developer happiness

Things That I'll Never be Able to Control

Uncontrollable Factor 1: Available Technology

Uncontrollable Factor 2: The Client

Uncontrollable Factor 3: The Content

Uncontrollable Factor 4: The Timeline

We all start somewhere.

Learn from your mistakes, we certainly all make some!

Thank you!