Crafting a Mobile-First and Accessible WordPress Site for Dinghy Daily Charter
Discover our latest case study featuring the Dinghy Daily Charter project. See how our expert WordPress team developed a mobile-first, responsive website to engage and convert visitors.
Over the years, we have served clients from almost every industry you can name, including construction, medicine, showbiz, finance, automobile, education, and many more. In this post, we want to share a success story from yet another industry: boat rentals.
It showcases our ability to create beautiful, engaging digital experiences that can easily convert visitors into loyal customers.
Let’s get going!
The Client
Dinghy Daily Charter is dedicated to creating unforgettable maritime experiences around Gdańsk. Specializing in tailored adventures, they ensure each journey reflects the unique interests of their clients.
Whether it’s uncovering hidden gems or enjoying the picturesque Baltic sunsets, Dinghy Daily Charter provides a seamless service from booking to docking, making luxury and comfort a given on their modern fleet.
The Challenge
Dinghy Daily Charter turned to us for assistance with a WordPress project that they were developing – a mobile-first site for a boat charter business that included several iFrame elements.
They didn’t ask us to use any front-end frameworks such as Bootstrap, only the basic web technologies: HTML, CSS, SCSS, and WordPress.
The client also wanted us to make the website more engaging by creating some JavaScript-powered animations.
Dinghy Daily Charter provided us with the designs of the following pages and popups:
Pages
Homepage
Cruise Details
Summary
Additional Services
Popups
Terms & Conditions
Cookies
Privacy Policy
After sorting out the technical and financial details, our expert WordPress team, made up of a full-stack developer, a QA engineer, and a dedicated project manager, set out to turn Dinghy Daily Charter’s vision into a beautiful and functional website.
Top-Speed WordPress
Development
Immediate start. ASAP projects.
Beat any deadline!
As requested by the client, we started the development from the mobile version – a crucial factor from an online visibility standpoint, especially for a company involved in a rental business. Here are the most notable features and effects that we created page by page.
Homepage
Hero Section with a Background Video
First, we added an engaging, professionally shot background video with the company’s slogan atop to the hero section. This is probably the most standout feature, visually presenting Dinghy Daily Charter’s offering.
Find Perfect Trip for you Section
The most labor and time-consuming part of the Homepage that we developed was the Find perfect tripfor you section. It includes two tabs implemented through iFrames: Rent a boat and Join a trip.
The Rent a boat tab features three subsections:
Adventure. This contains several cards with information about boat trips for adventurous clients available on future dates. Each card includes the name of the boat, the price, the maximum number of people who can take the trip, and a link to Additional services. Clicking on a card takes you to the corresponding Cruise Details page.
Leisure. This section is almost identical to the Adventure section, except that it includes cards with details about trips for leisure-loving clients available on future dates.
Watertaxi. This contains information about water taxis to get to a specific destination in the area by sea quickly on a future date. If there are no offers at the moment, the section displays a subscription form.
Notice the fade-in/fade-out animation when switching from section to section that we created using JavaScript. Also see the currently selected section icon turn blue.
When the company has no offers for either of the sections within the tab, the corresponding section displays a subscription form.
The Join a trip tab includes two subsections:
Sightseeing, containing information about currently available sightseeing trips with vacant seats. The cards in this section look identical to those in the Rent a boat tab.
Watertaxi. This contains information about vacant seats on currently available water taxi trips. If there are no offers at the moment, the section displays a subscription form.
Our Philosophy Section with Per-Character Heading Animation
Our Philosophy section is nothing but text, but we made it more engaging by animating the heading – one letter at a time.
Extra Services and Reviews Carousels
We also created the Extra Services carousel on the Homepage. It contains several cards with identical information, representing the additional services Dinghy Daily Charter provides: a photo, the name of the service, a short description, and a Read more link. Users can slide through the carousel by clicking the arrow buttons under the cards.
Clicking a card takes you to the corresponding Additional Services page, where you can find more details about the service.
Apart from the Extra Services carousel, we created the Reviews carousel. Users can scroll through it by clicking the arrow buttons to the right and left of the reviews.
FAQ Accordions
Finally, we added the FAQ section with accordion-style questions and answers that open and close smoothly.
The Cruise Details page contains comprehensive information about a specific cruise, including its name, price, starting place, trip time, maximum number of passengers, additional services, and a detailed description.
We also added a booking system here. It’s an external service built-in with two iFrames. The first one is on the page. It contains a datepicker along with BOOK NOW and BUY GIFT CARD buttons. Clicking on either of those opens the cruise Summary popup with the booking details, which is the second iFrame.
Additional Services
Each additional service page contains the details about the respective service plus the Extra Services carousel for users to view the other services the company offers. Besides, there are breadcrumbs at the top of the page for switching to the Homepage easily.
Website-Wide Features
We also created several site-wide functionalities accessible from any page.
Header
First, it’s a website header with a navigation bar. It’s quite straightforward, but notice the animated Book Now button. When you hover over it, the icon disappears and the button becomes transparent. Once you move the cursor away, the initial state is restored.
Anchor Scrolling from the Footer
The footer is displayed across the site, too. It contains links to the pages and sections of the website. Once you click a link, you’re taken to the corresponding page or section with a smooth scrolling effect.
The last two links Privacy Policy and Terms & Conditions open the respective popups.
The Outcome
While the website is quite straightforward, it did require some minor fixes the client requested. Overall, though, Dinghy Daily Charter was fully content with our outstanding performance, excellent communication flow, and meticulous attention to detail.
As usual, we made sure the website followed the WAI A guidelines so that it could be easy to use and navigate by people with disabilities. Another thing worth noting is that we completed the project exactly by the deadline we agreed upon with the client: 16 business days.
To sum up, Dinghy Daily Charter now has a mobile-first, responsive, engaging, and accessible website that boosts the company’s chances of converting more visitors into clients and increasing revenue. And all that thanks to our skillful WordPress developers who always put the client’s needs front and center.
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.
Your WordPress website's speed is an important UX characteristic that can seriously impact your search rankings. Read this post to learn how you can make your site faster to boost your organic traffic.