<background>

One of the BEST things about Squarespace's framework is automatic, near-effortless RESPONSIVE Design.

'Responsive Design' means your website adjusts to whether someone is viewing on a desktop, tablet or mobile device.

The days of standard 4:3 monitor ratios are GONE ... most laptops and desktop monitors still conform to fairly standard ratios. But phones and tablets?! No way! There are probably hundreds of variations as engineering teams find ways to eek out another pixel or two for their devices.

That's OK news for people using the devices ... but a big problem for web designers because we can't possible adjust our websites for EVERY device out there.

Enter . . . responsive frameworks. They respond to a the display environment of whoever is viewing your site.

No responsive framework is going to be perfect, but Squarespace's is pretty good ... AND while you're working on a page you can EASILY get a good idea of how your page is going to look in mobile, tablet and desktop situations.


 

WAIT.

Aren't we talking about images and focal points?

YEP!

This is impt background. Hang tight.

 

How can you preview your site in mobile, tablet and desktop views?

Easy.

At the VERY TOP of your page editor . . .

In the center . . .

Find the short gray line . . .

squarespace-responsive-design-previews

Hover over it and it turns into a darker, downward carrot. Click that

[ v ]

and you'll see

squarespace-responsive-design-preview-mobile-tablet-desktop
 

Go ahead and play around with all three. You'll see the size of page's viewing pane change . . .

MOBILE

MOBILE

TABLET

TABLET

DESKTOP

DESKTOP

. . . as well as:

  • "Consultant" changes relative to width of the device
  • The banner image is portrait on mobile, landscape on tablet and widescreen on desktop
  • The body text is much larger and starts immediately under the picture on mobile; whereas tablet and desktop have whitespace in the margins
  • If you scrolled around, you'd see columns in Desktop that get switched to longer single stacks in mobile . . . and so on

 

Responsive Design is one of the TOP 10 reasons to build a website with Squarespace; RD is in every template.

I haven't made a 'Top 10' list but if I did I bet RD would make it.

 

And now, an illuminating question about those images. Scroll up and look again . . .

When Squarespace cropped the banner image in mobile to portrait dimensions, how did it decide which cut to show?

I thought you'd never ask.

Squarespace decided on the cut/crop by using . . .

 

{ this is the big reveal }

 

{ and it's also the end of the background }

 

</background>
 

Focal Points!

Open up the edit window for any image, hover over the image and you'll see a white circle:

squarespace-focal-point-white-circle

 

As explained by the Squarespace help box that appears:

squarespace-focal-point-tip
 

 

So click, hold and drag the focal point around your image. Sometimes you can see the cropping changing live in the background (usually just for thumbnails and images). Other times, you'll need to save the change, close the image editing box, (possibly refresh the page) and see how the image appears now.

And remember ... you can flip through Mobile, Tablet and Desktop preview to see what happens in each case.

 

Focal Point Guidelines

These aren't hard and fast rules. They are some basic considerations.

A little up, and a little right

Some images have vanishing and focal points that are dead center, and that works . . . when the image is all by itself.

But on your website, what's likely to be dead center on your banner images is the copy of your page's title or heading.

Overlapping the image focal point on the headline can be distracting and visual uncomfortable as two different ideas are competing over the same real estate.

Therefore, your image's focal point should probably be a little north and east (up and to the right) of the center of the page.

 

Separate horizon lines and headlines

As in the above case, it can be visually jarring to have a horizon line intersect with a line of text. Move your focal point around until the horizon line is above or below the headline.

 

For document thumbnails, favor the headline

If you're showing an 8.5x11" document cover in a square thumbnail space, aim to make as much of the headline visible as possible. If the headline starts in the upper left, you might drag your focal point all the way to the upper left.

 

If text is visible, give it to us 95% or less than 30%

If you're setting the focal point for an image with text, either give us 95% of the lettering so it's clearly legible, OR crop is to 30% of less of the lettering is visible. That's enough to say, "there are letters here" but not enough to frustrate your brain to try to guess what is missing.


 

Helpful?

Tap the

Still got Qs?

Leave a comment.

 

Comment