In this post, we talk about one of our frontend development projects. You will learn about the challenges we faced, the solutions we offered, and the results we achieved.
There are three characteristics of a website that probably weigh more on the final results than anything else. These are visual appeal, performance, and search engine visibility.
If your target audience doesn’t find your website among the first results on a SERP, you have little chance of succeeding. Similarly, when a visitor opens your home page and sees that it is dull, slow, poorly designed, and full of bugs, they will most likely close it then and there.
The best way to make sure a website is both attractive, well performant, and search engine friendly is to hire professional web developers. That’s what one of our clients did by requesting our front-end experts to optimize his website for mobile first and then restyle it for a new shine.
Today, we will discuss the project more in detail.
USAFootballPools.com was started in 2000 by a group of web developers passionate about American football in order to build out an online football pool system. In 2008, the website’s functionality was enhanced to let multiple managers set up and run their own pools.
The website allows admins to create pools, invite their friends to them, send e-blasts with game-related information and statistics, track various data such as Pool Admin Actions on Players, and perform other essential administrative tasks.
Our collaboration with USAFootballPools.com spans almost five years when they contacted us back in 2017, requesting our assistance with making the site mobile-friendly in order to pass the Google mobile-friendly test.
The website uses custom PHP and is not based on any web authoring tools such as WordPress. The USAFootballPools team took care of the website’s back-end. Our task was to optimize its front-end.
To achieve the goal, we did the following:
As a result, USAFootballPools.com passed the Google mobile-friendly test easily, which greatly improved its chances to rank high on SERPs.
In 2022, the client returned. This time around, he wanted us to restyle the website in accordance with his new designs and make some of the pages responsive just like we did before. The number of pages we needed to restyle was way larger than the first project – around 100.
Again, the back-end was handled by the client himself while we worked exclusively on the front end. The client’s designer created the designs of the main pages and our developers styled the screens by mimicking those designs.
We wrote new HTML/CSS/JS code without any frameworks or libraries such as Twitter Bootstrap. That allowed us to create code that was clean, semantically correct, and well optimized for search engines.
Here are some screenshots that show how we transformed the old website into what it is today.
We also remembered how important mobile-friendliness was for the client and applied the best practices to ensure that the website rendered perfectly across devices, screen sizes, and resolutions.
As the screenshots below show, our developers knocked it out of the ballpark. The website’s performance scores are in the green zone for both the desktop and mobile versions.
The scores are calculated based on a variety of factors and can change over time. The values in the screenshots above show the website’s performance at the time of this writing.
Another issue we had to deal with was oversized tables that required lots of scrolling on both mobile and desktop resolutions. We also wanted to avoid font sizes that are too small and keep the content both readable and compact.
We were eager to solve the issue by coming up with multiple options: a responsive table, a scalable table, and a horizontal scroll. The latter solution did the trick and was accepted by website’s audience.
The client was pressed for time, so we had two developers working in parallel, which allowed us to deliver in batches and process feedback as we kept working on new pages.
We also created two email templates based on the designs provided by the client. Here’s one of those.
USAFootballPools.com is now a mobile-friendly website with a modern look and feel thanks to the effort of our frontend developers. The fact that the client keeps coming back with more projects for us is solid proof of our professionalism and reliability.
Have a frontend project or task for us too? We’re just a click away.
Do you know that preventing search engines from accessing and indexing some pages on your site can can be beneficial both for your SEO and your privacy? Read this post and you will learn how to achieve this by changing the contents of a small but extremely important file - robots.txt.
Learn what headless Drupal is and when you should choose it for your own project. In this post, we discuss decoupled Drupal. We define it, talk about its most common use cases, its advantages and drawbacks, and, finally, give recommendations as to whether you should make your own Drupal website headless. Walking down the decoupled […]
Struggling to choose the right e-commerce platform for your business? Our comprehensive guide compares the pros and cons of WooCommerce, BigCommerce, Shopify, and Adobe Commerce. Discover which platform best fits your business needs and ambitions, and learn how our e-commerce development expertise can help you succeed online.
