Categories
Content Management

SBW Revisited Report

New Updations

  • Shop open and close indicator
  • PHP- Modularity using server-side includes
  • Contact form as an additional feature
  • Proper HTML and CSS Validations
  • Accessibility features implementation
  • Improved SEO features
  • Responsiveness, Mobile friendly implementation
  • Custom error pages

The first small business website was built using a desktop-first strategy, and it only works on standard desktop sizes. The main goal was to create a site that had a polished appearance and feel while also giving the intended audience the feel of a premium branded bakery website. The colour design for the logo was chosen to be related to the sweets. The entire page’s colour palette is based on the logo. The complete webpage layout was constructed with a suitable amount of white space and an attempt to achieve acceptable aesthetic balance after multiple iterations and re-designs.

I went with a font that is both readable and high-end. Only two font faces were used throughout the website to preserve consistency. Text colours are chosen to create a high level of contrast and legibility. Because the initial version of the small company website was almost effective in delivering the website’s stated function, I decided not to make any significant design changes. Concentrate on the most significant small content and minor design modifications and additions rather than major design changes. Even if the original copy had some flaws, such as putting an article in the footer, using a section tag instead of a div tag, putting a button inside an anchor tag, and so on. Although almost all of the photographs had alt tags, there were no decent explanatory descriptions, which was another issue that needed to be addressed. These were the most significant aspects to consider while revamping the small business website’s major edition.

Shop open and close indicator

With the aid of Java-script, I have developed an indicator as a new update that the website user will be able to understand if the Bakery is open today or not, as well as the hours of operation. This is placed in the homepage’s title area so that the user sees it first when the page loads.

PHP- Modularity using server-side includes

I used the same code for navigation, footer, header and other elements on every page of the initial small company website. I used PHP server side includes for the head, header, and footer sections of the new small business revamped website to boost code reusability and make it modular. The title is supplied as a variable in the head section, along with the PHP include. Using PHP includes for a smart navigation menu in the header allowed the small company website’s other subpages to have the same and consistent menu.

Responsive Design

The website was not responsive at first, and it had troubles with different screen sizes. The revised version now has a mobile-friendly design with toggle navigation. Another issue I had was the logo showing up on mobile views, which I was able to fix by using the display: none attribute.

Breakpoints for responsiveness have been established at 1200px, 992px, 768px, and 576px, allowing for a beautiful and responsive design across a variety of devices. It was also tested on a real mobile device to ensure that the mobile layout was user-friendly and functioning.

Custom 404 page implantation

Creating a custom 404 error page with.htaccess was another time-consuming step for me. The colour scheme for Richardson’s bakery’s website now includes a custom 404 page with a link to the homepage.

Animation

I attempted to develop a small java-script based animation for the homepage banner image in order to draw the user’s attention to the image and inform him that he is visiting a bakery website. It’s also an experiment in learning how to use java-script to animations.

Summary

The design of this website was primarily focused on increasing business, user experience, and website reach. The website is largely accessed by mobile devices by the target population. The mobile-friendly responsive design will contribute to the consumers’ delight. The overall user experience will be improved by using SEO-friendly coding approaches and other accessibility strategies. Small coding errors were discovered and corrected, which helped to clean up the website and increase its general efficiency.

It is simple to design a website, but adhering to all of the concepts and theories I have studied thus far is more difficult. Things we overlook can have a big impact on a website’s functionality, performance, purpose, usability, and user experience. In order to build clean websites that fulfil all user expectations, it is vital to continue to study and refresh our skills in all essential areas of web development, including content generation, design, coding, and implementation while following to all standards. There’s still a lot to learn, and I’m doing so every day.

Leave a Reply

Your email address will not be published.