Town of Cary

The Town of Cary was looking to have their website upgraded for residents with the aim of offering them the basic services that they may need while on the go. Media Queries were used to redesign the website into a responsive and mobile-friendly site. A live mock-up was created to show how the site would look & function with an emphasis on site navigation, lorem ipsum (placeholder latin text) was utilized for text content and the following requirements:

  • A custom bookmark icon
  • Mobile-friendly navigation
  • 6-10 functioning pages
  • The same branding/styling the site already employs.
  • A manifest for offline browsing
  • ARIA Roles
  • Progressive enhancement (i.e. the site needed to look and function well on all browsers including older browsers)

I decided to use the Bootstrap framework to address the mobile usability issues with the small screen sizes and larger touch targets which worked out quite nicely. A mega-menu, drop-down styling was applied to all the main menu links to allow for accessibility and scan-ability access. A left-sidebar navigation menu was added to all sub-pages with accordion styled sub-links that disappear to conserve space. On small screen sizes, the left-sidebar navigation slides to the left leaving more room on the page for content while remaining quickly accessible.

Town of Cary live mock-up site

Carolina Trucking Academy

The challenge for this project was to redesign the out-dated Carolina Trucking Academy website with a responsive version that retained all of the information of previous site while also catering to mobile users. The project had a number of requirements which included:

  • HTML5 compliant
  • Contain accessibility attributes to key elements (i.e. use of ARIA roles)
  • Use an embedded font for headings
  • Have an example of a rounded corner or a drop shadow
  • Visually appealing, using the principles of good design
  • Suitable colors
  • Offer an excellent UX with both full and mobile version (incorporating responsive or adaptive design)
  • Fully functional navigation
  • Contact form
  • Contain links to social media
  • Stock photos that do not violate any copyright

I decided to implement the bootstrap framework for this site since it would make building the site much easier and it would address the mobile and desktop UX quite nicely. All of the previous information was incorporated into the new design along with fresh images to generate excitement and inspire increased enrollment. Special attention was given to the site navigation to make sure that the links were intuitive and ranked in importance accordingly. I also wanted to give the site a little more of a custom look so I added quite a bit of styling and custom bits such as an oversized logo and custom media icons. I was quite pleased with the results and the website was well received.