Web Creation on Squarespace: Moorheart Site Transfer | Part 6

17 Dec

In part 6 of our Squarespace design journey, we're focusing on perfecting the mobile experience for the 'About' page and kickstarting the design of an engaging Services page. We'll explore a handy trick for mobile optimization and delve into creative ways to showcase your services.

Styling the About Page for Mobile: Clarity Meets Aesthetics

With mobile browsing dominating the web, ensuring your 'About' page is mobile-friendly is crucial. Here's how we achieve this:

Optimizing Readability: I use a shape which is the same colour as the background which is not visible on desktop, but on mobile I expand to make it take up the whole section so the content is still visible. If your background image doesnt have a simple colour to match then you can hide it with css

This simple media query hides the background for screens smaller than 640 pixels, typically covering mobile devices.

@media only screen and (max-width: 640px) {
    #section-id { // use the chrome plugin to get the section id
        background: white;
    }
}

Services Page: A Blend of Simplicity and Style

Moving on to the Services page, the original website design has boxes with a box around it for a highlighting effect, firstly in the video I use the css content generation technique, but realise its simplier using a css box shadow, on the Squarespace shape element. I have to play around a little bit with the css selectors I use due to the ordering of the layout and wanting the elements to overlap into other sections below it.

// Box Border
section[data-section-id="65329257c6408833cb22376e"], 
{
  z-index: 99;
 padding: 0 20px;
}
section[data-section-id="65329257c6408833cb22376e"] .sqs-shape, 
    box-shadow: rgb(249, 226, 125) 15px 20px;
}

Wrapping Up

In this session, we've tackled key aspects of responsive web design and creative content presentation. By focusing on mobile-first principles for the 'About' page and embracing simplicity with style for the Services page, we're ensuring that your Squarespace site is not just beautiful but also functional and user-friendly.

For a full demonstration of these techniques and more insights, watch the video