Have you heard about responsive websites? It is nothing new that Internet access via cell phones is growing more and more in Brazil and in the world. You yourself, dear reader, must have used your smartphone at least once for some quick searches.
Perhaps, even at this moment, you are reading this blog on your cell phone or tablet, but the big question here is not the device you use to browse the Internet, but how sites have adapted to different platforms, that is, if Contents are responsive.
With a generation increasingly adept at mobile devices, a responsive website is essential for any company, and if yours isn't yet, know that you might be missing out on the chance to improve your lead capture.
To change this situation, we will teach you, in this post, how to create a responsive website using Hubspot. Continue reading and find out what responsiveness is and how to apply it.
What you will see in today’s content
-
What a responsive website is and how it fits different screen sizes.
-
Differences between a mobile site and a responsive site, including URL and structure.
-
Why responsiveness affects attention, forms, lead capture, SEO, and bounce rate.
-
How Google prioritizes the mobile version for indexing and ranking.
-
How to create a responsive website in HubSpot using Content Hub.
-
How to choose responsive templates in the themes Marketplace and customize them.
-
How to use drag-and-drop and validate responsiveness on mobile, metrics, and loading.
-
How to adjust text and images for readability, zoom, and speed.
-
HubSpot resources and integrations, such as plugins, AI chatbots, and adaptive testing.
Good reading!
What is a responsive website?
You know that blog that you can open on your cell phone, tablet or notebook and it always adjusts to the screen size? This is a responsive website.
In short, responsive websites are pages that adapt to different devices without distortion. That is, all the design, image and text of your website adjust to the space in the best way, so that the reader has the same experience on all devices.
But be careful! Don't confuse a responsive site with a mobile one, okay? Although both have versions for smartphones, they are not the same thing, and in the next topic, we'll talk more about it.
Site mobile X Site responsive: what's the difference?
If you've ever confused both terms, know that this is common. A lot of people often wonder if a mobile and responsive website are the same thing. But, so you don't fall into the same mistake, we're already advancing that no, they're not the same thing.
On a mobile site, your page layout is created specifically for mobile devices, such as your cell phone. It functions as a second website and even has its own URL.
A responsive page does not need to create a new website or domain. A single structure can automatically adapt to both desktop and mobile versions.
Therefore, we repeat: the ideal is to invest in a responsive layout, it is easier to manage and, in general, can rank better in search engines.
Now, even knowing what a responsive website is you are still not convinced of the importance of having one. We will show you in the next topic why having an adaptable page is essential. Come on?
Read too:
- 7 Tips on how to set up an e-commerce website
- The 10 Whys of Having a Blog in Your Marketing Strategy
- Why should you use HubSpot as a CRM
- Blog Posts: the 6 most common mistakes when publishing
Why should your website be responsive?
Mny people in Brazil browse only on mobile. When the mobile experience breaks, your institution loses attention, form completions, and lead generation opportunities.
If most Brazilians use mobile devices, it is clear that, to serve this audience, you need to have a website that adapts to these devices as well.
But that's not the only reason why you should invest in a responsive website. In fact, a responsive website can bring you more visitors, improve your SEO, increase your page speed, decrease bounce rate and even contribute to the customer experience.
The mobile-first indexing documentation makes it clear Google primarily uses the mobile version for indexing and ranking. In practice, a page that looks fine on desktop but fails on mobile often loses visibility and conversions, even when the content is strong.
I imagine that, after these data, you already understood the importance of a responsive website. But after all, how to apply responsiveness on your page? Next, we show you how to create a responsive website with Hubspot's templates.
How to create a responsive website on Hubspot?
Among HubSpot’s capabilities, Content Hub is the solution focused on creating and managing content and pages. It centralizes themes, modules, and visual editing so you can publish consistently across desktop and mobile.
In addition to hosting, the software includes custom templates, dynamic content, and much more. But, after all, where to start creating a responsive website? Below, we'll give you four tips on how to make an adaptive page within Hubspot.
Use Hubspot's responsive templates!
Within the Hubspot platform, you will find several ready-made and responsive templates. If you don't have much experience with the software, don't worry, as the platform is very dynamic and intuitive. Just access the themes marketplace to the HubSpot website, where you'll find several options.
There are several professional and visually harmonic templates that you can easily customize and add logo, colors and other elements, giving your touch to the page.
And as we mentioned, all of them are already responsive, that is, adaptable to any device. By the way, if you want to check out some ready-made templates.
That's it, select one of the pre-designed templates and let's move on to the next step: customizing your page with Hubspot's drag-and-drop feature.
Customize your template with the drag-and-drop feature!
It's time to add your touch to the template! You can change the color, typography, spacing and anything else needed to build a good website.
With the drag-and-drop feature, you can do this customization without needing a lot of experience or being an expert in programming code. Simply drag and drop elements or templates and preview them on your page. Easy, isn't it?
To ensure a safe outcome, validate responsiveness on three fronts: specific mobile adjustments within the editor, user experience metrics, and loading tests. Mobile customization helps control visibility and spacing, and monitoring Core Web Vitals reduces the risk of performance loss on mobile devices.
When customizing your page, remember to put into practice the UX design to create a user-friendly interface that maximizes the user experience.
The tip is: put the quick access tools in the main menu, this can facilitate access on smartphones. Also remember to enterCTAs, that is, buttons with a call to action to direct your visitor.
Adjust the size of text and images!
Instead of fixed “magic numbers” in pixels, aim for real-world readability: text should handle zoom without breaking layouts or hiding content. The Resize Text criterion is a solid way to validate this, especially for forms and CTAs on mobile.
You can use more sources and standards that are on Hubspot's own platform, such as Arial, Tahoma or Times New Roman.
And since we are talking about responsive websites, another important point is the images. Try to insert high quality photos, but with a compressed file size, so your images won't take as long to load on a cell phone.
Use Hubspot's resources to upgrade your website!
Another great benefit of Hubspot is its various integrations, such as Canva and Google Search Console, with these plugins you can improve your page.
And speaking of upgrades, remember when we mentioned that Hubspot has numerous features? This is the most pure truth. Within the Software, you can add chatbots with artificial intelligence to personalize the customer experience and promote faster service within your own website.
Adaptive testing helps optimize conversions by rotating variations and favoring the best performer over time. Note it’s tied to specific plans, and variations need to include a form for the test to run.
Okay, after customizing your page and having a new responsive template made by Hubspot, it's time to put your website online. Visit our website and see more content on this topic.
Frequently asked questions about responsive websites and HubSpot
What is a responsive website?
A responsive website is one that adjusts to screen size on mobile, tablet, and notebook, keeping design, images, and text without distortion to provide the same experience across different devices.
What is the difference between a mobile site and a responsive site?
A mobile site has a layout built specifically for mobile devices and works as a second site with its own URL. A responsive site uses a single structure that automatically adapts to desktop and mobile, without creating a new site or domain.
Why invest in a responsive website?
Investing in responsiveness helps avoid losing attention, forms, and lead capture opportunities when the mobile experience fails. An adaptable site can bring more visitors, improve SEO, increase page speed, reduce bounce rate, and contribute to the customer experience.
How does Google treat websites regarding mobile?
Google prioritizes the mobile version for indexing and ranking, which can reduce visibility and conversion when a page is fine on desktop but poor on mobile.
What is HubSpot’s Content Hub and what is it for?
Content Hub is HubSpot’s solution for creating and managing content and pages, centralizing themes, modules, and visual editing to publish consistently across desktop and mobile.
How do you use responsive templates in HubSpot?
Use the themes Marketplace to choose ready made, responsive templates and customize elements such as logo, colors, and other components, while keeping the layout adaptable across devices.
How does drag-and-drop customization work in HubSpot?
Drag-and-drop customization lets you change color, typography, and spacing by dragging and dropping elements, without needing to be a coding specialist, with direct preview on the page.
What should you validate to finalize responsiveness safely?
To finalize responsiveness safely, validate mobile specific adjustments in the editor, monitor experience metrics, and run loading tests, reducing the risk of losing performance on mobile.
How do you adjust text and images for mobile without losing readability?
Text needs to support zoom without breaking the layout or hiding content, with special attention to forms and CTAs. For images, use high quality photos with compressed file size to avoid slow loading on mobile.
What additional HubSpot features can improve the site?
HubSpot offers integrations such as Canva and Google Search Console and allows adding AI powered chatbots. Adaptive testing helps optimize conversion by distributing variations and favoring the best performing one, with the condition that it is tied to specific plans and that variations must include a form.
Portugal