THE REDESIGN OF A POOR WEBSITE
As someone who loves the outdoors and is always eager to find places where you can do horseback riding I came upon this site: maverickhorsebackriding.com.
What Makes it Poor Design
The desktop version for the site doesn’t look too poorly and isn’t too difficult to navigate or use. However, many of the page sizes are over 500k. The original site’s gallery page takes an a great amount of time to load the page content. It made me as a user question if I really wanted to click on a navigation link with the change of it taking too long to load content. On top of that issue, although it’s not a big deal, the hero image for each page is exactly the same and takes up a large amount of screen real-estate. It make it difficult for users to tell if they have successfully navigated to the new page or if they are still on the same page. The navigation provides no help or clues in terms of which page is active.
For mobile and tablet, the site definitely wasn’t designed for them. You get everything from fixed-width elements that cause horizontal scrolling, text pressed up against the phone screen edges, and justified text that becomes difficult to read on smaller screens due to long vertical scrolling.
User Navigation and Location Solution
I first approaching redesigning this site by changing the hero image and navigation. The original site was in obvious in need of providing users with a better sense of location.
For the navigation, I designed active pages have a different text and background color. This helps users to know by looking at the navigation where they are navigation wise. I also felt the site would benefit from changing the hero image for each page. Doing this will help solidify that users have in fact navigated to a new pages.
Fixing Mobile Vertical Scrolling
The original site’s fixed-width elements for h1 page titles were the downfall for mobile. Their fixed-width element sizes weren’t adjusted to appropriately fit a mobile screen which caused vertical scrolling. I changed those elements to be percentage based and adjusted certain percentages based on the width of the title and the screen size to keep those elements from creating vertical scrolling.
Long Unreadable Text Solution
The original site has their blog articles located at the bottom of each screen. While reading the article blog text wasn’t difficult for desktop, it became a problem for mobile. They kept the same three column layout for all screen sizes and justified aligned text. On mobile the text became long blocks of stretched out text and awkward gaps of space between words. On top of this challenge, the white text is placed on a colorful background which also adds to the difficulty of reading the blogs.
For each screen size I adjusted the number of columns for the blog posts. For desktop I had three columns, tablet two columns, and mobile one column. this made the text easier to read due to the text having a larger real-estate. I also placed the text on a solid background color and text aligned left. This made the text more pronounced and easier and more efficient to read.
The Addition of Padding
For my redesign, I added a small amount of padding to the header, navigation, main, and footer. This small adjustment helped make page elements more presentable and readable. All text and page elements are no longer pressed up against the screen edges making the smaller screen layouts appear more aesthetically pleasing.
Initial Page Load
To address the problem of the original site’s large initial page size and download time I incorporated lazy loading. Lazy loading enabled larger components, such as images and videos, to only load when they entered the screen as opposed to having all the images and videos load the moment users accessed the page. This helped to cut down the loading time by more than half of what it originally was. This approach was especially helpful for the gallery page which had the longest download time and page size.
My Key Take Aways
Completing this redesign taught me how small items can either make or break your website. When designing and developing a website, it is beneficial to do a mobile first approach. A mobile first approach will help you address all of the problems your site may encounter first, anything from vertical scrolling due to fixed-width elements to long unreadable text. Mobile design is becoming more important now that more people use their phones more frequently to search for information and websites than they do on computers.
On top of the benefit of using mobile first approach, this project really opened my eyes to the importance of good navigation and providing users with a good sense of location. The original site I worked with left user’s with no apparent clues as to where they were located. This left even me frustrated when I first was learning how to navigate and use their site. Providing user’s with a very clear idea of where they are can greatly depend on efficient use of navigation, hero images, and page titles. All of those components are important to help user’s feel more in control and they will be able to use your site with more ease and little to no frustration.
Access my website redesign here: https://maggiemcc.github.io/2740_capstone/index.html
Maggie McCausland is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The previous article relates to the Capstone project in the DGM 2740 class, and is representative of the skills learned.
