{"id":15398,"date":"2022-09-21T11:39:38","date_gmt":"2022-09-21T11:39:38","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=15398"},"modified":"2025-04-03T22:11:20","modified_gmt":"2025-04-03T22:11:20","slug":"frontend-development-case-study","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/frontend-development-case-study.html","title":{"rendered":"How We Brought usafootballpools.com Into the Green Zone on PageSpeed Insights"},"content":{"rendered":"\n

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. <\/p>\n\n\n\n

If your target audience doesn\u2019t 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. <\/p>\n\n\n\n

The best way to make sure a website is both attractive, well performant, and search engine friendly is to hire professional web developers<\/a>. That\u2019s 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. <\/p>\n\n\n\n

Today, we will discuss the project more in detail. <\/p>\n\n\n\n

The Client <\/h2>\n\n\n\n

USAFootballPools.com<\/a> 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\u2019s functionality was enhanced to let multiple managers set up and run their own pools. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

The Challenge: Making USAFootballPools.com Mobile Friendly <\/h2>\n\n\n\n

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<\/a>. <\/p>\n\n\n\n

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\u2019s back-end. Our task was to optimize its front-end. <\/p>\n\n\n\n

The Solution<\/h2>\n\n\n\n

To achieve the goal, we did the following: <\/p>\n\n\n\n

    \n
  1. Ran a Google mobile-friendly test and registered all the errors produced. Then we fixed those errors<\/strong> in the HTML, CSS, and JavaScript code. <\/li>\n\n\n\n
  2. Made around 20 pages responsive <\/strong>by tweaking their source code, including the Home Page, Login Page, Logout Page, Terms of Service Page, and many more. <\/li>\n<\/ol>\n\n\n\n

    As a result, USAFootballPools.com passed the Google mobile-friendly test easily, which greatly improved its chances to rank high on SERPs.<\/p>\n\n\n\n

    The Challenge: Restyling USAFootballPools.com <\/h2>\n\n\n\n

    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. <\/p>\n\n\n\n

    The Solution <\/h2>\n\n\n\n

    Again, the back-end was handled by the client himself while we worked exclusively on the front end. The client\u2019s designer created the designs of the main pages and our developers styled the screens by mimicking those designs. <\/p>\n\n\n\n

    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. <\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    As the screenshots below show, our developers knocked it out of the ballpark. The website\u2019s performance scores are in the green zone for both the desktop and mobile versions.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    info<\/i><\/div><\/div>

    <\/h3>

    The scores are calculated based on a variety of factors and can change over time. The values in the screenshots above show the website\u2019s performance at the time of this writing.\u00a0<\/em><\/p><\/div><\/div><\/div>\n\n\n\n

    <\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    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.  <\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    Email Templates <\/h2>\n\n\n\n

    We also created two email templates based on the designs provided by the client. Here\u2019s one of those. <\/p>\n\n\n\n

    The Outcome<\/h2>\n\n\n\n

    USAFootballPools.com is now a mobile-friendly website with a modern look and feel thanks to the effort of our frontend developers<\/a>. The fact that the client keeps coming back with more projects for us is solid proof of our professionalism and reliability. <\/p>\n\n\n\n

    Have a frontend project or task for us too?  We\u2019re just a click <\/a>away. <\/p>\n