Designing with custom code: how to build engagement and interactivity
Get inspired by custom code features and add engaging details to your projects: cursor trails, picker wheels, sound, and other catchy elements.
Websites are primarily designed to address people’s needs. When you visit a web page to book a flight or see a movie schedule, the first thing it should do is provide straight-forward help with your task. Besides having a clear purpose and usability, it should also have an uncluttered layout, interactivity, visual clues, and logical navigation. All of which can be crafted and set intuitively in Readymag.
But the number of user scenarios is infinite. If you want to boost the functionality of your Readymag project, drive engagement and come up with even more solutions, you can use third-party tools and custom code. Let’s put some examples in context and tell you where to find, and how to add, extra assets to your website.
Cursor trail
Cognitive scientist and usability engineer Donald Norman argues that aesthetically pleasing interfaces are more usable. They’re at least more engaging and certainly encourage positive responses. Test that out by observing the cursor trails below.
Illuminating Radioactivity by tubik
Picker wheel
Want to make memorable promotions to grow your brand, or launch an interactive game to engage customers? Picker wheels might be a nice tool to try.
Website navigation
If visitors can’t figure out where to find what they need on a website, they’ll leave. With custom code, you can create navigation that steers traffic from page to page — but that also flawlessly evokes emotional responses on the way.
Sound
Just turn the volume up to get the drill!
Fonts changes on hover
Another smashing effect that can contribute to the aesthetics of your website and user engagement. Hover animations and outstanding typography can both bring awareness to specific services or products you offer, and help convey a more distinctive brand story.
Analytics, e-com, calendars, and even more
With the Code widget, you can easily add Facebook pixel to your website, show playbills and movie listings, allow booking, change any widget’s appearance, and more. Let’s say you run a restaurant and want diners to make reservations directly on your brand-new website. On the web, there are plenty of platforms like OpenTable, that allow you to create a booking widget. Once it’s ready, you can easily add it to your Readymag website by copying and pasting. Easy as 1,2,3, right?
As for playful effects and interactive visual elements, several options that use open-source code can be found on resources like CodePen. You can also find some custom code to upgrade your project on our Forum.
Ultimately, you can integrate almost any service into a Readymag web page–just make sure you’re on a Personal plan or higher so that you can use code injection.
How you can add custom code to your Readymag project
Whether you wrote code or copied an open-source option from CodePen, the general flow looks like this: copy whatever code you’ve generated, go to your Readymag project, open the Code widget, and paste. If you need to execute code for the entire project, use a Code editor in the project’s settings or CSS tab. Our help section explains how to add code thoroughly.
Just a reminder, custom code is available for those on any active paid plan starting from $15 per month (except the archive Creator plan).
Give it a try and good luck with your future code inventions!
Sign up for beta testing to try new Readymag features before anyone else.