“The Mom’s Guide to San Diego” is a website providing tips to parents for recommended things to do with their kids in the big Californian city. Although the website was originally made by someone else a long time ago, the owner hired me recently to do a variety of fixes, updates, enhancements, and additions to it, while also requesting to keep its visual style mostly the same.
The Old Site and Its Technical Problems
The old website of The Mom’s Guide was (and still is) powered by WordPress, which is an online system that makes it easy for website owners to write and edit content on pages without needing to code anything or manually upload files to servers.
There were several technical problems with the old Mom’s Guide site, causing a sub-par user experience. Most of these problems involved the custom-made WordPress theme (which I didn’t originally make). These were the biggest issues with the old site:
- The custom WordPress theme was very outdated and hadn’t been maintained over the years with the constantly evolving states of WordPress and the numerous plugins installed on the site. As a result, the website had gotten glitchy.
- The site’s layout wasn’t optimized at all for viewing on mobile devices (another sign of the theme’s age).
- The site used a decorative handwriting typeface for headings, which is fine, but these headings were in the form of “fake” text in images rather than “real” text using a web font file. The trouble here is that text within images lose the SEO (search engine optimization) benefits and user accessibility that real text has.
- The custom theme wasn’t entirely developed to proper W3C coding standards. For example,
<h2>tags were missing for some headings, table tags were sometimes used for layout instead of tabular data, and some links weren’t closed with closing anchor tags.
- The site included a page containing an Adobe Flash document which didn’t even work anymore. Even if it did still work, Flash is completely inaccessible on mobile devices, and Adobe will soon phase it out for desktop computers too.
- The site had a strangely tiny font size.
When the owner of The Mom’s Guide hired me to improve her website, I fixed all the problems mentioned above. I kept WordPress installed, but I removed or replaced depreciated or erroneous functions using the WordPress PHP function
WP_DEBUG and the plugin Theme Check as aids (on an offline copy of the website).
I also made several extra enhancements to the site, many of which include the following:
- I used more interesting fonts to replace the banal, computer-default fonts Verdana and Georgia that the site’s WordPress theme originally used. I applied the Google Fonts “Muli” for body text and “Rancho” for headings.
- I added “EDIT” buttons to every page with an area that’s editable in WordPress. The Edit buttons are for the convenience of the site owner, and they’re invisible to everyone except her.
Previously in the “Family-Friendly Businesses” section’s directory pages, each business was in a box, and most of these boxes had a fixed, uniform height which resulted in excess space for the boxes containing less information. I applied the jQuery plugin Masonry for these pages to remove the awkward gaps between each listed business.
I improved the overall appearance of the calendar on the Local Events page. Additionally, when the page is viewed at narrow browser viewports (like on smartphones), I gave the calendar the ability to transform into a vertical list for much better readability. (Without that transforming ability, users on smartphones would have to scroll the page sideways in order to see the other side of the calendar.)
- Some sections of the website contained text that was hard-coded into the theme’s PHP files, which means the client wouldn’t be able to edit them through the WordPress editor. I made changes to the theme to make those sections become editable.
- The client requested me to make whole new “Guide” pages to the website. For these new pages, I created custom WordPress post types with their own structuring and styling.
- I replaced some generic
<div>tags with the more semantic HTML 5 tags where appropriate, such as
- I made the site’s previously disorderly color scheme a little more visually consistent while still preserving its colorfulness.
- I made various miscellaneous improvements in appearance and usability throughout the site.
- I converted the site’s protocol from insecure HTTP to secure HTTPS.
- I switched the site’s web server’s PHP version from 5.4 to 7.2 (for security and speed benefits).
I also occasionally gave some advice to the client. For example, she once requested me to put an extra space for advertisements in the rightmost sidebar on the home page. I cautioned her this could be a bad idea, because if visitors notice an ad in that sidebar, then they might incorrectly assume the important image-based links next to it are also ads, which may cause visitors to ignore them rather than to go click on them. Convinced, the client changed her mind, and instead we put ad spaces in more appropriate places on the site.