Designing a Responsive Website
For my semester project in my “Responsive Web Design” course at Kent State University, I built a website for Franklin County Family and Community Services (FCFCS), a fictional non-profit organization devoted to serving and educating the Franklin County area through rehabilitation, reproductive health, and youth outreach.
Project Timeline:
2 months (April 2019 — May 2019)
Project Goal:
Create a fully responsive company website using HTML/CSS
The Overview
The development process was broken down into the following steps:
- Conduct competitive analysis on similar websites
- Create rough mockups for both desktop and mobile versions of the website
- Refine mockups & create style tile for website
- Use HTML & CSS to construct the website
How I Did It
The process began with a competitive analysis of sites with similar goals and content to FCFCS. These sites included United Way, Greenleaf Family Center, and Cobb County & Douglas County Community Services Boards. From these sites, I was able to pull some common elements of navigation and content to incorporate into my site, including an emphasis on navigation and service information and inclusion of pictures and testimonies.
After the competitive analysis, I created low fidelity wireframes for each page of the website for both the mobile and desktop versions of the FCFCS website, a total of eight wireframes. These wireframes were built around the elements pulled from the competitive analysis.
Once the wireframes were complete, I created a more detailed layout of both the mobile and desktop versions of the website homepage in Moqups. This allowed me to see both the strengths and weaknesses of the layouts I created earlier, and significant changes were made as a result. I also created a “style tile” containing the fonts, colors, and shapes for the final site.
The next step was to build the site in HTML and CSS. This was both the most challenging and most exciting part of the process; while I found HTML easy to structure, the CSS sometimes created issues in formatting that took up more time than I would have liked to fix them. Additionally, I ran into issues with my color palettes and had to change my background from green to white, which allowed for easier reading.
However, I also learned a lot CSS tricks during this time, including the use of flexbox and floating objects. It also became easier over time for me to identify and fix the more common errors found in programming (i.e. missing values, inconsistent coding, etc.). Overall, using these and other methods learned throughout the course, I was able to create a series of webpages that closely aligned with the mockups I had created with improved colors and formatting.
Challenges & Setbacks
At the time, the biggest challenge for me was adjusting my expectations and imagination. During the initial mockup stages, my designs tended to be out of my respective skill level; thus, my final mockups were simple and straightforward; however, this simplistic style is not dynamic and does not hold as much visual appeal. Still, it had a stable hierarchy and consistent navigation, which worked to the site’s advantage.
Ultimately, if I could do it over again, I would add more dynamic content like hover states and perhaps carousel content, and I would space everything out in a way that allows for some interaction between items rather than separating them in a more center-aligned format.
The final website contains 4 webpages of HTML with a corresponding CSS stylesheet. It includes a home page, a list of center services, a contact page, and a page on donations and volunteering.
The site was given critique by the course instructor and peers during the final week of the course. Feedback included alignment adjustments, resized pictures, and more detailed media queries to enhance adaptability to different screen sizes; nevertheless, I still received a perfect score for my HTML and CSS templates.
While the webpage itself could have been improved in several areas, I still learned an incredible amount over the course of the project. Because of this course, I now know how to structure webpages using HTML and CSS. I also know how to complete a competitive analysis of sites similar to my client’s, how to create and edit a style tile, and how to better map out webpages using both sketched and digital wireframes. Looking back on this project, I can also see the emphasis I place on structure and hierarchy in my designs, which sometimes takes precedence over visuals. With that in mind, I now try to consider the power of visual appeal in my designs as well navigation and information hierarchy.
Developing this site has left me more proficient and more experienced, and I am eager for the chance to work on another web project using what I have learned.
