Typedream Mobile V2: Highlight Content and List Products using Cards

I’ve made a lot of updates in the past month and Typedream Mobile is now on Version 2! Thanks to our incredible waitlist users, we’ve been able to know more about what’s required to make mobile sites more user-friendly.

Sections

Being able to section parts of your mobile site is crucial, it helps your visitors find information more easily and faster with visual cues. They can skim and quickly arrive at the link they’re looking for without having to read each button one by one.

Read more about why sections are important →

However, designing sections that look great on your mobile sites is quite hard to do on the phone! So I’ve designed several pre-designed sections that can be easily added and modified.

Adding sections with Typedream Mobile

Mobile sites made with pre-defined sections

These pre-designed cards allow you to create amazing mobile sites like these examples:

Example mobile sites made with pre-defined sections

Each one of these examples shows a great demonstration of how sectioning parts of your mobile site help users easily jump to the section they’re interested in and find things visually. It also allows you to highlight contents that are important but still list out other content that is less important.

Product lists

A lot of users need to show a list of products or resources on their mobile site. These are usually a list of products or resources of the same category, like:

• List of products
• List of book recommendations
• List of YouTube guides

and more.

These lists can take advantage of being listed horizontally to save space!

A horizontal list of products allows users to see other content vertically

See the first part for example where we show a list of keyboards that we’re selling. Users immediately know that if they can browse keyboards in that section, scrolling horizontally feels natural.

Since the list of keyboards doesn’t take up much space vertically, users can still see other content that you want to show them on the mobile site. They can see that you have Discord and Reddit communities, as well as available stores where they can buy the keyboards from.

Imagine if the list of keyboards were horizontal, they won’t be able to see the things below, and they won’t know it exists unless they intentionally scroll until the end (which is quite unlikely)!

Adding and editing lists

Adding and editing items in a product list in Typedream Mobile

I’ve also made sure that adding and editing lists should be as easy as possible. I’ll add a lot of list templates so you’ll have a lot of options to choose from, then simply fill in the fields that are available in each list. Re-arranging is as easy as dragging and dropping.

Behind the scenes 👀

To be honest, these 2 features were very challenging to make. I wasn’t even sure if I’d be able to make them… However, a good back-and-forth discussion with my co-founder was all I need, and with that, we’ve made sure that the lists will be compatible with other templates and we’ll add the feature to change templates without losing the product data that users have inserted.

What’s next for sections and lists

We love how our Typedream community has thrived, and we hope the same for Typedream Mobile. These templates are designed in such a way that the community would be able to make and share templates themselves! We think that the community would be able to help us generate much more useful and beautiful templates to fit your every need.

Help me improve Typedream Mobile for you and your users

These are a couple of the biggest updates that I’ve made in the past month! Would love to know what you all think about it ❤️. If you haven’t, please join the waitlist so we can chat!

Thanks for reading 💕

Looking forward to building better mobile sites with you 😻. If you enjoy this post, let me know!

- Putri