A 200+ page site that informs users about the benefits and techniques of fishing, featuring the latest trends in web development, including breaking some of those trends…to make it better.
//case study video
The VamosAPescar.org, or “Let’s go fishing”, site’s primary goal is to help users obtain their fishing license and register their boats within the U.S. The secondary objective is to teach users about fishing and boating basics. The first development task for this site was to take the basic design of Recreational Boating and Fishing’s current site and optimize it for today’s web. This meant making the new site fully responsive, applying the more modern browser features to the site functionality, converting all the older flash-based systems to HTML, and keeping the underlying C# ASP.NET technology so that their original site’s modules could easily be adapted to this new system.
Something that is outside of the typical rules of responsive design on this site is the excessive use of the wood-themed responsive bordering. Using borders around visual blocks of content in responsive design is highly not recommended as this creates issues that can make the borders, and overall design, very poor visually. However, this site is beautiful example of how designers and developers do not need to compromise their design for the sake of improvements on functionality and technology as the borders keep their visual ratios when the pages respond to different screen sizes.
//Place image montage of wood borders
The site allows users to find where to fish and local fishing events using browser-based GPS and the user’s IP address. This geolocation based search is based first on the user’s IP address that is ran against a MaxMind GeoIP database. This allows the user to receive partially sorted results at the city-level resolution quickly and without the user needing to grant permissions to find their location. Then, upon receiving the user’s approval to better define the search, the browser’s geolocation methods are used to increase the resolution for exact user locations.
//image of ip/geoloc event search
Additionally, many of the page’s content on the site are compacted visually into accordion sub-systems for easier navigation by subject topics. Within many of the these accordions are mobile-enhanced, touch enabled, and animated rich media modules built with HTML 5, CSS 3, and Javascript. These units were converted over from Actionscript 3 by a full re-build starting from scratch. In the most complex of units the user can find up to 6 different navigational methods, depending on the device being used, that allows the user to move around in these systems just as easily as they could, taking into account that doing so requires overriding the native iOS browser functionality. And again, note the good use of the responsive borders handled via Javascript here.
//image montage of interactive modules
One of the challenges during the site build was the client request to change the CMS from Ektron 8 to Kentico 7 one month into the build. This would also require learning the new CMS to be used, which was done as the site was finished and launch on the original scheduled date. Another challenge was to create a fix for the way the Kentico CMS pulls image data from it’s own Azure cloud server’s blob storage as the content administration section of the CMS was not up-to-date with it’s link-ability to an image on the blob storage. An extending class was written to override the out-dated functionality. This class was also used as a solution to Kentico’s Azure instance methods returning raw binary data for images, which works fine for HTML image src attributes, but works horribly for setting CSS background-image URLs as CSS cannot interpret binary and rather prefers links instead.
Details
Awards:
- W3 Awards – 2014 Silver Award Winner: General Website Categories – Lifestyle
- W3 Awards – 2014 Silver Award Winner: Mobile Websites – Education
- Mobile Web Awards – 2014 Best of Industry: Family Mobile Website
- Mobile Web Awards – 2014 Best of Industry: Leisure Mobile Website
- Mobile Web Awards – 2014 Best Non-Profit Mobile Website
- Davey Awards – 2014 Silver Award Winner: Websites – Branding
- Davey Awards – 2014 Silver Award Winner: Mobile Websites – Education
- Davey Awards – 2014 Silver Award Winner: Mobile Websites – Sports & Recreation
- Davey Awards – 2014 Silver Award Winner: Mobile Marketing – General Interests/Variety
- Davey Awards – 2014 Silver Award Winner: Mobile Marketing – Lifestyle