Frankly Co

Since Frankly already had an awesome brand designer they were working with on this project, we were called in to do the heavy lifting by building the page out and integrating it with their CRM.

There were a few caveats to this project that made it unique:

1. The design had a lot of elements that needed custom positioning.
2. It also didn’t just re-flow on mobile and tablet, it often had extra sections or things that needed to change shape or alignment.
3. There were some custom typography needs like special fonts, custom underlines on elements, and even transformations.
4. Finally, the beta sign-up needed to be linked up to Active Campaign so that signups could be on the right email campaigns

Our goal was to address each of these elements carefully and skillfully while testing with various mobile devices to ensure the site looked beautiful no matter who was viewing it.

Positioning

For the custom positioning, we made sure that we anchored them to the correct positions so that they flowed smoothly while changing devices. This sometimes meant having to create special invisible containers to house these elements and position them.

Responsiveness

A mobile experience isn’t the same as a desktop, nor is a tablet – the screen real estate is different so you have to be super careful with how you position things. Fonts are also super important on smaller devices, the text size should be legible but not too large that it takes up the whole screen (unless the design intended for that). Line spacing is also valuable. If text is too close together, it can feel crowded and make the content difficult to consume.

To make sure that mobile and tablet really rocked, we had to separate content differently and sometimes even hide/show elements that may or may not have been visible on other devices.

Typography

Lettering and typography can change the entire feeling of something. Whether you are looking at a logo that uses a thin and feminine font or a strong bold masculine one, or reading a webpage that has a nice combination of fancy serif headings with clean and easy to read sans serif body text – if you don’t give thought to your font choices, you are missing out on an additional level of emotional impact for your project.

For this project, we had fun with the fonts and the implementation of some custom (almost script like) lettering that evokes a certain sense of urgency. There is also a particular attention to line height so that you can comfortably read the text.

Technology Choices

There were a few technical choices we made to help this site get to the next level.

• For their website build, we used our favorite page builder Elementor Pro. This gives them unparalleled control and flexibility over editing their layout and the ease of use that anyone can do it.
• For forms we opted for Gravity Forms Pro as it is robust and has an awesome extension ecosystem. We were able to setup custom ajax responses for the form submission and style the forms easily to achieve a beautiful result.
• Finally, we installed an extension for Gravity Forms that links it up with Active Campaign. This allowed us to redirect form submissions automatically to the correct lists so that they can trigger the corresponding email sequences.