Mobile-First Design & Tech Stack for our Website Redesign

Introduction

We're proud to announce the launch of our new website! Our completely redesigned site is the culmination of months of work to develop a faster, more useful, and better-looking website.

Replacing WordPress

We built the original Bite-Size Bytes website using WordPress. To improve security, simplify maintenance, and increase performance, we converted the dynamic WordPress site to a static site.

Motivation for Redesign

While the old website was functional, it was a very simplistic brochure site that looked dated and was cumbersome to use on mobile devices. In preparation for launching new apps, we decided to redesign our website from scratch to incorporate modern web design principals.

Mobile-First Design Focus

The web has changed a lot since the launch of our original website. Global traffic from mobile devices has surpassed desktop browsers. To familiarize myself with the latest mobile-first best practices, I took web design and development courses. I started with Meng To's UI Design for Developers. Being a computer engineer, I usually think about things from a software engineering and implementation perspective. This course not only helped me think more like a designer, but also enabled me to generate new design ideas and provided me with the tools and techniques to implement them.

Color Scheme Generation

One tool Meng recommends is the Coolors color scheme generator. For the redesign, we used Coolors to generate our new color scheme.

From Inspiration to Figma Design

For inspiration, we looked at over a hundred different websites including blogs, technology and gaming news aggregators, and corporate websites. One particular design that caught my eye was the 3 column card layout and clean typography from the Ghost CMS Casper theme exemplified by the OneSignal Blog. We incorporated elements from this and many other websites including MacRumors and Kotaku into our new designs we created in Figma.

Tech Stack

We evaluated many different components for our technology stack including Content Management Systems (CMS), static site generators, JavaScript development frameworks, CSS frameworks, and hosting providers to determine which fit our needs best. We finally settled on using Statamic CMS, the Tailwind CSS framework, and DigitalOcean hosting. We'll provide more details about these evaluations in an upcoming article.

Modern Web Development

I brushed up on modern web development techniques by taking The Complete Web Development Course by Angela Yu. This course covers HTML, CSS, and JavaScript through informative projects and related challenges that reinforce what you've learned. I found this course to be a good refresher on HTML and CSS. While the Bootstrap lessons were helpful to learn mobile-first development concepts, I recommend considering alternative frameworks such as Tailwind CSS.

Design Implementation

Finally, we implemented our designs in code in Statamic's Antlers Templates. This simple yet powerful templating engine provides dozens of tags and modifiers to transform your static HTML files and infuse them with content stored in Statamic.

Conclusion

While the website redesign required months of work, during the process we learned valuable, and we are very happy with the results. Our new website is more informative, makes it easier for us to deliver content, incorporates modern mobile-first design principals, runs much faster, and is more secure. We will continue to make design improvements and implement new features.

Welcome to the new Bite-Size Bytes website!