Being Freed logo

Website responsiveness

Website responsiveness is how well a web page adjusts its appearance on different screen shapes and sizes: desktops, tablets, and phones.
Website Responsive design

When designing a web page, you want it to function properly no matter which device your audience uses.  Screens use different proportions of height to width, so your design needs to “respond” flexibly to those constraints. 

Sometimes you pull up a site on your phone but it feels cramped, so you turn the phone sideways, right?  You’re changing your screen proportions, and the site responds by adjusting the way its elements conform to your screen.  This is website responsiveness, and a good website is, well, responsive.

A break point is a screen width at which the page changes the way it handles content.

Elementor, the page builder I use, automatically gives me two break points.  These break points build three versions of my sites: desktop, tablet, and mobile.  This tool allows me to optimize responsiveness for most devices.  My normal break points are 1225px and 769px.  That is, any screen over 1225px behaves like a desktop.  Between 1225px and 769px, it behaves like a tablet.  Under 769px it behaves like a mobile device. 

While I’m building sites I can see how pages look at different widths within their ranges.  In the video below I’m in tablet mode, and you can see how the page changes as I increase and decrease the screen width.

Using my home page as an example…

Here’s my home page on desktop and mobile views. The same information is presented on both, but they’re laid out differently.  This is something Elementor helps me do, but sometimes I need to make adjustments to get the look I want. 

Aside from layout I can customize font size, spacing, and other elements for website responsiveness.  Notice that the menu on desktop mode has words while the mobile layout has a hamburger menu.  Hamburger menus take up less space, making them better for smaller screens.  With attention to details like this, sites look and work better across platforms. 

Being Freed home page on mobile

Like my posts? Toss me a tip!

digital nomad hiker drysuit diver queer woman sober ukulele player scorpio Tough Mudder goofball

Freed with her ukulele while scuba diving

All content © by Freed

Want to know more about what I do?  When I have a new post?  Where I’ve been lately?  (I do get around.)  Sign up for my mailing list below.  I promise to not fill your inbox with junk.

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification