Beyond Squarspace #1
Custom Screen Sizes
Squarespace provides its users with easy-to-use tools to create great websites that meet their personal needs. The built-in functionality is flexible and can be used to create visually appealing and responsive websites. However, there are limitations to what can be done with Squarespace’s built in features.
Custom code can be used to create almost any design imaginable and allows the website developer better control of website responsiveness. Squarespace allows users to design their website for two screen sizes. These are the desktop screen and the mobile screen size. The issue is that the appearance of the website can look stretched and squashed when on a screen size that is in between these two screen sizes.
There are two ways of working around this issue; modify the design using the current screen options or create custom screen size with code.
A redesign can be achieved by modifying the layout, images and copy(text) to look great no matter what the screen size. Unfortunately, this is not always possible as the copy may be required as is, the design of a new layout can cost more and there may be no perfect solution when using only a desktop and mobile design.
Creating a custom screen size can allow the designer to only create a new design where there are problems with the layout. In our project for First Value Partners , we used custom code in their “What we do” section to create a tablet/small laptop screen size design. The issue was that there were four elements that did not fit comfortably on small screens. The solution was to use the original four elements in a row for desktop; As the screen size shrinks the four elements snap onto two rows and when the screen size reaches mobile size all four elements are in a column. This allows for clean design no matter the screen size.
A Hands-on Approach
Our experts have experience managing complex situations through the resolution and turnaround process. Experts can be appointed at any stage of the process to assist with the whole project or specific tasks within the project.
Triage
- Manage liquidity
- Evaluate threats
- Manage stakeholders
Stabalise
- improve liquidity
- Protect assets
- Appoint/
manage advisors
Plan
- Strategic review
- Evaluating resources
- Business planning
Execute
- Build/
manage resource - Financing
- Monitoring/
reporting
Finessing the design
Small changes to a design can have a huge impact on the overall design. Custom code can be used to modify the design that would otherwise be impossible. First Value Partners’ website design required several design modifications.
The client requested that the landing pages header have a custom design. Squarespace does not have a built-in feature to allow for different logo images on web pages. Code was used to change the logo image, background color and text color when on the landing page.
Headings were also coded to change from left aligned headings on desktop to center aligned on mobile. It is possible to edit the positioning of elements on the mobile version without affecting the desktop positioning. However styling options like alignment, font size and color can only be assigned once to an element.
The images needed gradients added on top of them to soften them and make it easier to read the text on top of the image. Squarespace has a built-in feature to add an opaque colored overlay, but not a gradient.
The shape and color of Bulleted lists was changed to make the lists look more appealing and coherent with the design of the whole page. There are no design options for bulleted lists on Squarespace besides the use of bullets or numbers and changing the color of both the text and bullet point.
Padding was also added to the left of the lists to align them to the heading. By default, the bullet points do not change the position of the text. This is not always an issue, however for the design it was essential that the bullet points be aligned with the heading.
There was an issue with words wrapping onto two lines on mobile screens. The issue was that two words were separated by a “/” and the browser could not tell where to break the words apart. A custom word breakpoint was added after the slashes to indicate to the browser where to break the words apart when there is not enough space for both words.
To see First Value Partners website in action visit firsvaluepartners.com
Whether you require complete web design or already have a design and need help developing your website. At Third Eye Web Studio we offer comprehensive solutions to meet your needs. See our pricing options or even better contact us to see if we can help you create eye opening websites that keep your users engaged.
