Being Freed
Being Freed
Being Freed

Website responsiveness

Website responsiveness is how well a web page adjusts its appearance on different screen shapes and sizes: desktops, tablets, and phones.
An illustration of a computer monitor, two tablets, a mobile phone and a laptop, all showing versions of the the same web design, adjusted to fit the screen.

What is responsiveness?

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.

When page loading speed is fast and sites look good on all devices, people stay on them, which increases engagement and conversions.

Break Points

A break point is a screen width at which the page changes the way it formats 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. 
Screens wider than 1225 pixels use the desktop layout Screens between 11225 and 769 pixels use the tablet layout. Screens narrower than 769 pixels use the mobile layout. These measurements are not universal - they're just mine right now.

While I’m building sites I can see how pages look at different widths within their ranges. 

An example of break points in action

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 manual adjustments to get the look I want. 

A screenshot of Being Freed Services page in desktop mode

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 on all devices. 

Vocabulary

Break point – a screen width at which a page changes the way it formats content

Hamburger menu – a menu that is represented by an icon, usually with three horizontal lines.  It’s often used in mobile layouts to save space.

Responsiveness – how well a web page adjusts its appearance on different screen shapes and sizes like desktops, tablets, and phones

Want more vocabulary?  Check out my glossary here.

Like my posts? Toss me a tip!

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

Freed scuba diving with her ukulele

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.