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

Then

lack of testing

Resulting Problems

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

Now

tested by screen dragging and on multiple devices by multiple humans

Positive Results

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

Mistake 2: Rigid CSS

Then

layout breakages with variable length or width content

Resulting Problems

  • feed layouts broke unpredictably
  • table layouts required horizontal scroll

Now

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

Positive Results

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

Mistake 3: Static Copyright Year

Then

year was hardcoded into footer template

Resulting Problems

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

Now

PHP used to auto-generate the year

Positive Results

no one has to update the year ever

Mistake 4: Complex Content in Widgets

Then

feeds and dynamic content was hardcoded in widgets

Resulting Problems

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

Now

custom queries in page templates for all dynamic content

Positive Results

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

Mistake 5: Post Type Identification

Then

  • posts
  • pages
  • candidates
  • legislation

Resulting Problems

  • 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

Now

  • posts
  • pages
  • endorsements
  • legislation
  • scorecards
  • press releases
  • our work
  • actions
  • ballot measures
  • election results

Positive 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

Then

tried to modify WPB Accordion Menu or Category

Resulting Problems

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

Now

custom plugins for custom functionality

Positive Results

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

Mistake 7: Inline Documentation

Then

zero documentation within admin

Resulting Problems

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

now

field labels everywhere

Positive Results

  • 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

Then

improvised design off Eleven40 theme for Genesis framework

Resulting Problems

  • 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

Now

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

Positive Results:

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

Area for Improvement 2: Column Layout

Then

layout with right and left sidebars

Resulting Problems

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

Now

layout with right sidebar as needed

Positive Results:

  • 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

Then

landing pages with sections to click on

Resulting Problems

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

Now

landing pages with real content and section navigation

Positive Results

  • SEO benefits
  • no extraneous clicking required

Area for Improvement 4: Homepage Slider

Then

Nivo Slider with image

Resulting Problems

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

Now

Advanced Custom Fields that allow for slider options:

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

Positive Results

  • limited factors that produce ugly slides
  • visual cohesion between slides

Area for Improvement 5: Navigation

Then

8 main menu items and 5 secondary menu items

Resulting Problems

  • visual overload
  • some items too granular

Now

7 main menu items and 3 secondary menu items

Positive Results

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

Area for Improvement 6: Hosting

Then

windows-based server

Resulting Problems

all kinds really

Now

WPEngine

Positive Results

optimized for WordPress and reduced stress

Area for Improvement 7: CSS

Then

CSS

Resulting Problems

extra bulk over time

Now

Sass

Positive Results:

  • 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!

@bethsoderberg

bethsoderberg.com

http://bit.ly/wclanc2017