Mobile-First Design & Tech Stack for our Website Redesign
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.
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
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.
Modern Web Development
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.
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!
WordPress - content management system
UI Design for Developers by Meng To
Coolors - color scheme generator
OneSignal Blog - customer engagement blog
MacRumors - Apple, Mac, iPhone News and Rumors
Figma - collaborative design tool
Visual Studio Code - code editor
Statamic - flat-file CMS built on Laravel
Tailwind CSS - utility-first CSS framework
DigitalOcean [affiliate] - cloud infrastructure provider
The Complete Web Development Course by Angela Yu
Bootstrap - popular HTML, CSS, and JS library
Antlers Templates - Statamic's simple and powerful templating engine