Marie Selby Botanical Gardens

by | Jul 17, 2020 | Creative News, Web Design Portfolio

Latest Portfolio Items

Selva Grill Website Design

The Selva Grill has been a cornerstone restaurant in Sarasota, Florida since early 2005. Having gone through many challenges and changes over the years, 2021 saw the expansion of Selva to the new “University Towne Center”’ (UTC) location. This brought with it the need...

Darwin Brewing Company Website

We've been working with Darwin Brewing Co. since the beginning. Originally based in Sarasota, they moved their brewing operation to Bradenton in 2013. Over the years the brewery has become a staple in the Florida craft beer culture. At the start of 2021, the new DBC...

Southside Village Website & Business Directory

Southside Village Association is one of Sarasota’s oldest shopping districts. SVA has collaborated with over 50 established businesses that provide the general public with Dining, Shopping, Beauty & Wellness, and Professional Services. With this being considered,...

Florida Cattle Ranchers Website

Since 2015, Florida Cattle Ranchers has been promoting a harmonious mixture of gernerations-old ranching practices, the science of ecology, sustainable economics, and the values of hard work to a modern world. With this in mind, we set out to tell a story of how...

Tripletail Seafood & Spirits Website

One of a family of restaurants owned by Gecko's Hospitality Group, Tripletail Seafood and Spirits opened in February of 2021. This being the third web project we executed for the group, the familiarity between the Gecko's team and Creative Sarasota made the creative...

Aquarian Sky CBD Sparkling Water

Aquarian Sky CBD Sparkling Water is a new product expected to hit the market in late 2020 or early 2021. It is the result of the combined effort of Florida based FizzH2O, LLC and GreenWay Herbal Products, LLC operating from Tennessee. Partnering with Middle Tennessee...

FourThought Institutions Blog Site

FourThought Private Wealth, previously Pinkerton Private Wealth, is a wealth management and investment advisor practice that has been operating since 1968. After rebranding the company, they wanted a new website look. Implemented by another web firm, Max Kelly of...

Dockside Waterfront Grill

Dockside Waterfront Grill is a restaurant located at historic Fisherman's Warf in Venice, Florida. If you are coming by boat then look for marker 4. Visit Their Website. One of six restaurants owned by the Gecko's Group, this one has a distinct old Florida tiki vibe....

Mike Kelly Photography – Re-creation

Mike Kelly offers professional photography in Chicago, Illinois. In 2019 he started running into some problems trying to update his WordPress website. Mike called is brother, our very own Max Kelly, for some assistance. Objectives & Challenges The primary...

Restaurant Consulting USA

Pablo Castro Insua is a consummate professional and owner of Restaurant Consulting U.S.A. With over 24 years in the restaurant industry, Pablo is highly skilled at observing and evaluating the strengths and weaknesses of a restaurant. Not only does Pablo help new and...

Marie Selby Botanical Gardens (MSBG) is a cornerstone attraction for the greater Sarasota, Florida area. With 45 acres of bay front gardens, Selby boasts:

The Downtown Campus on Sarasota Bay is the only botanical garden in the world dedicated to the display and study of epiphytic orchids, bromeliads, gesneriads and ferns, and other tropical plants.

When they approached Creative Sarasota about spearheading their website redesign, we jumped at the chance to work on such an important project. Not only did we anticipate a splendid challenge working on such a robust website, but we were honored to work with a group dedicated to preserving and documenting our natural environment for generations to come.

Responsive Web Design Example

Directive, Objectives, & Challenges

The objectives and challenges of this project ran the gamut from standard to outside the box. At the core of almost every decision, though, was one directive: clarify and simplify the user experience. Whether addressing the website visitor or the website administrator, clarity and simplicity was the launching point.

The second major directive was scalability. We noticed that the previous website architecture made it difficult for the MSBG management team to accommodate growth. Thus, one of our main focuses was to build the site with the anticipation of expansion. We focused on two things. First was a balance between scalable and easy(ish)-to-use navigation management features. The second was building certain sections in advance so they were ready when the time came to develop the content.

These objectives were challenging for a few specific reasons.

Size, Sitemap, and Disrepair.

Company Size

The first issue was the size of the company. MSBG was already a good sized non-profit. But in May, it adopted the Historic Spanish Point (HSP). This gave them a new campus to incorporate into a single website with a new brand. With that addition, there became 3 brands we had to make distinct while still feeling like a cohesive, single unit. Those brands are The Downtown Sarasota campus (the original Selby Gardens), the Historic Spanish Point campus, and the general Marie Selby Botanical Gardens parent brand. We needed to make sure visitors could easily identify which pages and navigation belonged to which brand. And we had to do that without making the website feel schizophrenic.

A State of Disrepair

The second issue is the size and state of the website. There are hundreds of pages and posts. They exist in multiple levels of categories and parent/child page relationships. This was all in a custom WordPress theme that was built nearly a decade ago. People had come and gone in that time. Thus, information was difficult to manage and navigation was incongruent.

The custom theme and plugins also proved a little problematic. The previous architects had built some wonderful custom functions. They used many plugins to build out a lot of features. Unfortunately, over time much of this fell into disrepair. Plugins that were crucial to the existing design had been abandoned by the creator. Thus, creating security risks.

Content Volume

Existing versus anticipated content was also an issue. Some sections had quite a few pages while others had exactly one page but were exptected to grow. Thus, we felt it prudent to put navigation and page sections in place so they were ready for content when the time came. But, what do you do with space when there’s no content?

Complex Navigation

By far, one of the biggest challenges of this project was navigation. The navigation experience is paramount to an effective website. Especially when it is a large and complex website. Here are a few of the big issues we had to contend with.

  • Large site with a final page count of over 130 pages and hundreds of posts.
  • Multiple campuses requiring separate representation.
  • 3 brands requiring individual distinction while maintaining a cohesive relationship.
  • Multiple company departments with vastly different content volume.
  • Multi-level parent/child page relationships.
  • Section-specific sidebar navigation

To accommodate this, we opted for a mega menu. The menu was organized into six primary levels. Each of those descend to a second, vertical tabbed level. Each of those break further down into third and fourth levels of pages.

Mega Menu Example

Content Volume… Again

As previously mentioned, there was some disparity between the amount of content for the different sections or departments. This resulted in some of the tabbed menu sections having many links, while others had only one or two. We employed a few different tactics to fill that empty space and make the navigation look more evenly populated.

In some areas we created Featured Content blocks so the Selby team could highlight pages at will. We also filled out space by displaying automatically generated upcoming calendar events. Finally, in some areas we simply put copy that we thought would be useful to the visitor. Content like definitions, addresses, or hours was used.

Section Clarity

The three different brands posed a unique challenge. Some pages and sections were specific to one of the two campuses while some related to the general parent brand. It was important to mitigate the potential confusion for visitors. We needed it to be as clear as possible if a link, page, event, or exhibition was campus specific or general.

To address this we provided a simple way for the MSBG team to specify one of three background colors when a visitor mouses over a link. Purple for the Downtown Saraosta campus, green for the Historic Spanish Point campus, and gray for general pages. This way there is a strong visual cue for where the page belongs.

We also incorporated link sub-headings so the team could place clarifying copy below the link if need be.

Style and Beauty

Finally, we wanted the navigation to look good. Mega menus are a unique opportunity to do just that. Because they expand to accommodate larger navigation structures, there is invariably more room to augment the navigation experience with photography. graphics, and more color. Thus, we incorporated muted, background images of beautiful flowers and succulents relevant to the gardens.

Mega Menu Example

Page and Section Identity

Large websites often need to implement a way to identify to a visitor what section or department they are viewing. With Selby, not only do they have multiple departments, they have multiple campuses and brands. We used color and sidebars to further clarify where a visitor is on the website.

The secondary navigation (very top of page) changes color depending on the section brand. For any page that is specific to the Downtown Sarasota Campus it turns purple. For Historic Spanish Point it turns green. For non-campus specific pages it turns deep blue.

We also used the header image as a means of specifying location. Each of the three brands had a header image that reflected that section.

The sidebar heading also reflects the current section in a couple of ways. First, the heading reflects the name of the top level section. The sub-heading reflects which campus or none. And finally, the background image behind the sidebar heading is the respective campus-specific logo.

Custom Page Branding Example

 Other Project Highlights


We implemented a robust calendar that accommodates all the standard and custom calendaring needs.

Selby Gardens Calendar

Sidebar Nav

Using multiple section templates, we built sidebars that display links specific to the page category. Both sidebar and main nav elements are updated simoultaneously, minimizing incongruency issues.

Selby Gardens Custom Sidebar Nav


Homepage Carousel

The Selby team wanted an easy and attractive way to highlight certain pages on their home page. We implelented a carousel that allows them to easily add, modify, and remove stylish carousel items.

Footer Banner

Selby Gardens Footer Banner

A pre-styled, rotating footer banner displays selected pages as advertising. All the Selby team has to do to change or modify the banner is select an appropriate featured image for a page, change the page excerpt, and add a specific tag. Then, the page image and excerpt copy is automatically fed in the rotation of pages displayed randomly on the footer of all pages.

High Exposure

As a very active non-profit organization, Selby has a lot of initiatives. All of which are important. We designed layouts that accommodated a large number of high exposure initiatives with out making the visual space feel cluttered.

Selby Gardens HighExposure Areas


We configured software solutions that allow the website to be more easily navigated by assitive technologies.


As with all Creative Sarasota designs, we make sure the website lays out attractively and appropriately on the standard sizes for the 3 main device categories: desktop, tablet, and mobile phone.

Let Us Create Your Internet Presence.

Creative Sarasota Design and Development is a full service website and graphic development workshop. We work with you and your team to create the visual, written, and web-based tools you need to advance your organization's agenda.

Please take a moment to view our portfolios and read more about our services. 

Drop us a line today.

If you have any questions, please call or email us for a free, no-obligation consultation.


(941) 229-0920