Beginner Mistakes: Lessons Learned from Reviewing Old Work and Inheriting Websites
WordPress DC, August 2018
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
Resulting Problems
zero gutter
Resulting Problems
weird content flow at various widths
Resulting Problems
overlapping content
Resulting Problems
oddly scaled type
Resulting Problems
wrapping menus
Now
tested by screen dragging and on multiple devices by multiple humans
Positive Results
visible logo
Positive Results
gutters that scale
Positive Results
reordering and reformatting of content on mobile
Positive Results
type resizing
Positive Results
modern mobile menu
Mistake 2: Rigid CSS
Then
layout breakages with variable length or width content
Resulting Problems
feed layouts broke unpredictably
Resulting Problems
table layouts required horizontal scroll
Now
replacement of float-based layouts with flexbox
Now
removal/reformatting of table-based content on small screens
Positive Results
content editors won't wonder why a layout "works only sometimes"
Positive Results
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
Resulting Problems
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 were hardcoded in widgets
Resulting Problems
required HTML knowledge to update
Resulting Problems
inconsistencies in editors' changes
Resulting Problems
eventually no one knew how to update it
Now
custom queries in page templates for all dynamic content
Positive Results
zero HTML knowledge required
Positive Results
automatically populates from content type
Positive Results
no one else needs to know how it works
Mistake 5: Post Type Identification and Taxonomy Misuse
Then
- posts
- pages
- candidates
- legislation
Resulting Problems
used standard categories to store different types of content
Resulting Problems
blog had unrelated content in it
Resulting Problems
navigation problems
Resulting Problems
weird and/or nonexistent URL structures within content types
Resulting Problems
no one could figure out how to make content appear in specific places
Now
- posts
- pages
- endorsements
- press releases
- our work
- actions
- election results
Now
shortcut to "homepage" page in WordPress admin
Positive Results:
labels for content are accurate
Positive Results:
content editors know where to add specific content
Positive Results:
less likely to degrade over time
Positive Results:
URLs appropriately generated by content type
Positive Results:
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
Resulting Problems
inability to update plugin
Resulting Problems
possible security risks
Resulting Problems
text formatting eventually became illegible
Now
custom plugins for custom functionality
Positive Results
all plugins are updateable
Positive Results
minimum viable code for custom functionality
Mistake 7: Inline Documentation
Then
zero documentation within admin
Resulting Problems
users guessed where/how to update content
Resulting Problems
users modified things to force them to "work"
now
field labels everywhere
Positive Results
editors can match fields on admin to output on site
Positive Results
editors know recommended sizes for images
Positive Results
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
Resulting Problems
I managed to kill lots of necessary padding
Resulting Problems
I chose odd colors
Resulting Problems
lack of visual excitement
Resulting Problems
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
Positive Results:
infinitely improved color scheme
Positive Results:
sense of balance
Positive Results:
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
Resulting Problems
visual weight of sidebar content overpowers content
Resulting Problems
now looks quite dated
Now
layout with right sidebar as needed
Positive Results:
eye goes straight to key content
Positive Results:
extraneous sidebar content eliminated/moved to homepage
Positive Results:
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
Resulting Problems
requires extra clicks to access content
Now
landing pages with real content and section navigation
Positive Results
SEO benefits
Positive Results
no extraneous clicking required
Area for Improvement 4: Homepage Slider
Then
Nivo Slider with image
Resulting Problems
badly designed slides
Resulting Problems
random aspect ratios for individual slides
Resulting Problems
text always baked into slide images
Resulting Problems
sliders are a bad idea for conversion
Now
Advanced Custom Fields that allow for slider options:
- headline
- background options
- image with image upload
- color with select color choices
Positive Results
limited factors that produce ugly slides
Positive Results
visual cohesion between slides
Positive Results
client now understands that sliders are bad for conversion
Area for Improvement 5: Navigation
Then
8 main menu items and 5 secondary menu items
Resulting Problems
visual overload
Resulting Problems
some items too granular
Now
7 main menu items and 3 secondary menu items
Positive Results
increased scannability
Positive Results
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
variables, mixins, partials, etc.
Positive Results