Redesigning My Bootstrap Website

A Fresh Start

It had been at least 10 years since I last redesigned my website. I try to keep up with the ever-changing web landscape by using Bootstrap for my main site and WordPress for my blog. A fresh start was needed for both, so I decided to do for my own site what I do for my clients’ sites: create a unique design using the most current aesthetic and technical protocols. In this post, I share my process and the tools used as I tackled the main site.

Key areas for my Redesigned Website

• clean, uncluttered design
• site speed and performance
• mobile responsiveness
• accessibility and user inclusion
• GDPR (General Data Protection Regulation) compliance
• SEO (Search Engine Optimization)

1. Brainstorm

I begin each design project with brainstorming. This part is really fun for me. I check out other websites, doodle, dabble, and let the ideas flow. I give myself plenty of time (sometimes weeks!) because it’s not a linear process. Avoid editing anything at this stage, just be an open sponge. Concepts emerge.

When I feel saturated with enough ideas, I start squeezing out the sponge and narrowing down the possibilities. Eventually, I zero in on the strongest options. I like to focus on the Home, About, and Portfolio pages.

TOOLS

Sketchbook, pen, colored pencils, Google Search, and Pinterest are ways for me to remember and elaborate on inspirations.

2. Build New Color Palette

My website palettes have been based on nature. Deep, earthy tones have gradually lightened up and adapted to prevailing web design sensibilities. Since I now live near the coast, I wanted an oceanic palette.

Color is one of the key areas that I modified in the redesigned website. WCAG (Web Content Accessibility Guidelines) contrast was a priority. I tweaked each color in my existing palette, tested, and tweaked some more.

TOOLS

— OLD —

• Adobe Photoshop > Adobe Illustrator

— NOW —

• Adobe Color – Today, I discovered the strange updates made to this once terrific tool. The UI is horribly unprofessional. Everything is now segmented into small sections of non-integrated information. The new “Express” color tool placed a head-scratching set of obstacles into my workflow, which came to a screeching halt. What a huge disappointment. Moving forward, I’ll probably go elsewhere to build palettes, test WCAG contast, and enjoy the design process.
  • Explore combinations and generate color schemes.
  • Test contrast and color blindness
• Figma
  • Foundation: Color Generator plugin – I used the Material profile to generate a range of hues for each color
  • Variables – once I was settled on the color palette, I created variables for them to assist with the design process
    

3. Select Fonts and Icons

TOOLS

• Figma – Supports access to thousands of fonts, including all system fonts, Google fonts, custom fonts, and more. Type selections and a typography scale were done in Figma.
  • Google Fonts – Lato and Cormorant Garamond. Prior to the redesign, Asap was the sans serif font.
  • Font Awesome Free – Icons. Connected the Font Awesome Icons plugin to my Font Awesome account’s API token.

4. Redesigned Website Wireframe

Wireframing simplifies the layout to the bare bones so you can easily see how the components interconnect. There is no color, images, or styling to distract you from the essentials of functionality and usability. I constructed a wireframe for the Home and About pages.

TOOLS

— OLD —

• Balsamiq

— NOW —

• Figma – Has resources for just about anything you need. For my first project, I searched in the community libraries and found a template I liked: Wireframing in Figma. It has common layouts for navigation, hero sections, and body content that helped me get started. I’m sure you’ll be able to find what works for you.

5. Design

My wireframe skeletons got dressed up in the design phase.

TOOLS

— OLD —

• Adobe Illustrator > Adobe Photoshop – Doing the layouts in Illustrator allowed me to be very precise. But, I had to export everything to Photoshop where I generated the images. I eventually streamlined my workflow by doing the layouts directly in Photoshop.

— NOW —

• Figma
  • Components and styles serve as a library where reusable attributes are stored. These include the color palette and typography already established in earlier stages, as well as navigation, footers, hero section, icons, and logo.
  • I created detailed, high-fidelity design comprehensives for the Home, About, Services, and Contact pages. Content (images and text) was placed inside the header, footer, and columns, providing a clear visual preview of the final layout. These became my templates for the next phase: development.
  • Variables – Created earlier while I was building color palette, these came in very handy during the design phase.

Web Development Process

1. Create Repository and Set Up Local Dev Environment

I always begin a web project by creating a project folder for it. This folder is uploaded to the cloud in a Github repository (“repo”). All of my redesigned website files reside in the repo. Changes are tracked in Github, so I can always revert to an earlier version if necessary.

Once the repo is set up, I add it to my local development environment.

TOOLS

• Github and Github Desktop
  • Github – Cloud-based repository super-charged with version control and backup features.
  • Github Desktop – Allows me to send and receive copies of files to and from my desktop and my Github repository. 
  • See Front-end Development Workflow Adjustments for details on how I use Github.
• Local by Flywheel – I find it quicker and safer to develop new sites locally (on my computer), rather than on a live server. In 2020, I switched from MAMP Pro to Desktop Server to Local by Flywheel for local development. When you create a new site in Flywheel, it automatically adds the WordPress files and database. Since this was a Bootstrap site, I didn’t need the WordPress files. So, I renamed Flywheel’s “public” folder to “public-wp”, then created a new “public” folder for my own files. Matching the Flywheel site name with the Github repo name is important. It took me a few attempts to get things right. 

2. Build the Redesigned Website

My web design and development journey began more than 20 years ago. I’ve tried many different applications and fine-tuned my methods. It’s a continual process of discovery, learning, and adjusting.

BUILDING TOOLS

— OLD —

• 2002 to 2009 – tables using Adobe Photoshop, ImageReady, and BBEdit
• 2006 to 2017 – Firebug > Firefox web development tools
• 2009 to 2013 – pure html using Adobe Dreamweaver
• 2013 to 2016 – Gumby 960 (a.k.a. Blueprint) framework
• 2016 to 2026 – Bootstrap v3.3.7; changed from Dreamweaver to Sublime to Visual Studio Code; Chrome Dev Tools

— NOW —

Building the site took me just as long as designing it. That’s because I used a lot of new applications, implemented accessibility code, and modified several areas of content. New tools have a learning curve!

• Visual Studio Code – Code editor specifically for web design and development. Its features and UI ease and enhance the writing, editing, and programming tasks.
• Bootstrap v5.3.8 – I was familiar with Bootstrap, but updating from v3.3.7 to v5.3.8 was a big leap. The newest version had some key changes that required a complete rebuild.

Comparing Bootstrap v3.3.7 with v5.3.8

• Chrome Developer Tools – A suite of tools built into the Google Chrome browser. Used to view/edit the underlying page code, diagnose problems, analyze/debug, and evaluate performance, accessibility, best practices, and SEO.

• Accessibility and Inclusion – In order to foster a positive user experience, it was important to make the redesigned website as accessible and inclusive as possible. While Bootstrap addresses accessibility, it is not fully compliant. Developers still need to implement semantic HTML and aria roles where necessary. In the pre-design phase, I tackled the color palette. During the web development phase, I paid close attention to making the site behave well for all users.
  
  There are plenty of informative resources available, but here are a few that helped guide me:
  • Web Accessibility Initiative
  • Web AIM’s checklist and contrast checker
  • PowerMapper Accessibility Checker
  • The A11y Project checklist
    

• Portfolio galleries – The galleries were constructed with Bootstrap’s grid system and Lightbox for Bootstrap 5 Javascript. The filtering was accomplished with Metafizzy’s Isotope Javascript library. I used the Vanilla Javascript scripts. I thought it would be beneficial to enable users to select the different kinds of design (graphic and web) and art (pastels, watercolor, landscapes, flowers, etc.) they want to see. All of the items are still viewable, and now users can specify which category they are interested in.
  • Implementing the Lightbox was relatively simple and straight-forward.
  • Implementing Isotope was quite the challenge for me. Fortunately, the script developer provides plenty of documentation and examples on his website, Github, and Codepen.
  • Prior to the redesign, the galleries were built with Bootstrap’s grid system and the Lightbox2 plugin.

ADDITIONAL TOOLS

• MailChimp – Mailing List subscribe form. Updated the styling.
• Jotform – Contact form. I tried to construct my own form, but it became such a struggle that I decided to go with an online service. I styled the form in Jotform to match my site’s look and feel. There are a variety of ways to publish the form. Rather than embedding the code into my page, I provided a link to Jotform’s form. Changes are thus immediately live, without the need to redo the embedding.
• CookieYes – Google-certified tool Consent Management Platform for cookies and privacy settings
• Google Tag Manager (GTM) – serves as the central hub for all analytics, cookies, and other tracking codes. Data is sent from the individual tags to the GTM. Instead of deploying multiple javascript codes on a page, you can use the single GTM script.
  
  It took some effort to wrap my brain around this technical mechanism. Here’s an article with a great explanation: What Is Google Tag Manager & How Does It Work?

Next Project

Now that I’ve finished with the main site, my next big project is redesigning my blog. I’ll create a child theme of a new block theme for customizing, and apply the new styling. Accessibility, cookies, and privacy settings will also be updated. I’ll let you know how it goes, so stay tuned!

Video Overview

I created an video that provides an overview of Redesigning My Bootstrap Website. Check it out for some visual descriptions of the tools and methods.

How do You Design and Build Websites?

It’s good to hear how other people approach the same problems. We learn from one another. Please share your process and methods in the comments below!