General Notes
Images
Color Mode: RGB
Color Profile: sRGB
File Type: jpg
72 dpi
All images should be roughly 500 KB or less
Index Page Image Width: 750 px
Slideshow Image Width: 1500 px
(If only a smaller image size is available, be sure to check how it shows up on multiple devices).Note that when you upload an image, Squarespace automatically makes seven copies of that image at various sizes. To maximize control over the image quality, images should be exported with a width of 100, 300, 500, 750, 1500 or 2500 px.
Process all images in Photoshop.
Text Formatting and Editing
Text should be written in the third person.
Sentence and Title Case is used throughout the website.
Headings are typically ‘Heading 3’.
Body text is typically ‘Paragraph 2’.
Credits are typically ‘Paragraph 3’.
For a soft return, hit Shift+Enter.
For a hard return, hit Enter.
Links to pages outside of robhutcharch.com should open in a new tab (this can be done via the link’s settings).
Narrative
The website consists of the following page types:
Landing Page (Grid of 15 Images)
Index Pages (‘Buildings’, ‘Interventions’ etc.)
Project Pages
About Page
All project pages must be manually linked to an image on the index page and/or the Landing page.
Formatting is done through a mixture of the built in Squarespace tools as well as Custom CSS, site-wide and page specific Header/Footer Code Injections.
Different types of Gallery Sections are used on different page types, in order to make them easily editable via CSS. A ‘Gallery Grid’ is used on the Landing Page, a ‘Masonry Grid’ is used on the Index Pages, and a ‘Simple Slideshow’ is used on the Project Pages.
The only site-wide Header Code Injection is for allowing the smooth scroll down when you click on the down arrows on project pages.
How to Make a Project Page
Narrative
Project pages are fairly simple once you are familiar with the Squarespace interface. Formatting the images is important for ensuring that the images load quickly. There is a template ready that should be copied and used as a starting point for all project pages.
How to Format Images
Target File Size: 500 KB per image
Target Page Size: ~5 MB of images per page
Images must
Recommended Settings:
1500 px wide (height flexible)
Image Quality: 9 for photos
Image Quality: 12 for linework
How to Format Images for Index Page
Recommended Settings:
750 px wide (height flexible)
Image Quality: 9
Video
If the project has a video, insert a video block beneath the Focal Text. Link to vimeo.
How to Make the Page and Upload Images
Duplicate the ‘_PROJECT PAGE TEMPLATE’
Name the Project Page with the name as you’d like it to appear. Confirm that the ‘Page Settings’ are correct (see notes here).
Edit the Slideshow Settings (‘pencil’ icon in the top right corner)
Slideshow Width should be 80
Turn Captions on
Upload Images to the Gallery (‘gallery’ icon in the top right corner)
Upload the images by clicking the 'plus’ icon in the gallery menu.
Add the project title to the ‘Description’ of the first image in the slideshow.
Note that if an image thumbnail doesn’t appear after uploading, that thumbnail will never appear but the slideshow should not be impacted.
Update Text and Credits. Link to all collaborators.
Set up links to the page on the relevant Index and/or Landing pages (see below)
How to Add the Link to the Index Page
The index is a Gallery (Masonry Gallery), where the images are set up to be links.
Click on the ‘gallery’ icon in the upper right corner.
Upload the images by clicking the ‘plus’ icon in the gallery menu.
Add the project title to the image’s ‘Description’
To make the link, click the ‘gear’ icon under the image description. Go to the ‘Page’ tab and search for the relevant project page.
Formatting Notes
Focal Text is ‘Header 2’
Body Text is ‘Paragraph 2’, use hard returns between paragraphs.
Links in the body text are bold
Project Credits are ‘Paragraph 3’, use soft returns (Shift+Enter)
Arrows & Code Blocks: Do not touch/edit arrows. The side arrows are part of the default Squarespace formatting. The down arrow is an image with a link that RHA created. The link can be found in the image settings in the ‘Design’ tab, and should point to #info. There is a code block on the page that must not be deleted.
Spacer Blocks: Do not delete/modify spacer blocks or code blocks, other than the one at the bottom of the page. If the text is long, that bottom spacer block can be delet
Page Settings
Page Settings can be accessed via the ‘gear’ icon next to the project name in the sidebar.
General Settings: Page & Navigation Titles should be the same. The url slug will be a hyphenated version of this, that should only be shortened for long project names.
Toggle the ‘Enable Page’ icon to make the page visible/searchable.
SEO: Update the SEO text. This should be in phrases or that make sense (not loose keywords).
Social Image: Upload a landscape format image.
Advanced: No action necessary for project pages.
How to Make an Index Page
Narrative
Index pages are a simple page with a Masonry Gallery. Simply copy and enable the ‘_INDEX PAGE TEMPLATE’. Update the gallery with images and give them a description/caption. This description will become the text that shows up when you hover over the image. In the gallery, set up the link to the relevant page by clicking on the ‘gear’ icon near the word ‘link’.
Lastly, inject the code provied here to the Advanced Page Settings
(Page Settings via Gear Icon > Advanced)
How to Format Images for Index Page
Recommended Settings:
750 px wide (height flexible)
Image Quality: 9
Misc Settings
Make sure that Captions are turned on in the Gallery Settings (‘pencil’ icon).
Code Injection (CSS inserted into the Page Settings > Advanced)
////ADD THIS TO ADVANCED PAGE SETTINGS//// <div class="centered-content"> <h4 class="highlight">Research & Publications</h4> </div> <style> #page article section:first-child { padding-top: 1vmin !important; } </style>
How to Edit the Landing Page.
Narrative
Save a small jpg of both the pre- and post-hover image.
Upload the pre-hover image to the landing page gallery. Provide a Description and a link to the relevant project page.
Upload and find the link for the post-hover image.
Go to the hidden ‘_LINK MANAGER’ page.
Create a new button, and click the gear icon for the link.
Select ‘File’ and upload the post-hover image.
Select that this should open in a new window.
Save out of edit mode
Click on the button. A new webpage should open. Copy the url of the image.
Edit the code in this section.
Copy the ‘Code Injection’ in these instructions into the Notepad app
Replace the url with the post-hover url you just copied (https: yadayada)
Replace the page link (/page-name) with the linked page (both the first and second occurrence in the code)
Copy this revised code
Insert this code into the page.
Home> gear icon> Page Settings > Advanced
Find the project’s code you’re replacing
Paste revised code in its place
Note that the code is currently arranged so that it reads properly, left to right, top to bottom. Try to insert the revised code in the correct location.
Notes
Images are edited in Illustrator. Opened and saved as jpgs (1000 px wide) in Photoshop.
Section Cut Lineweight: 4 pt
Section Cut lines are cropped in from the edge of the media pre-hover, and expand to the edge of the artboard post-hover.
Try to use a real scale, but scale the image so that it looks good. Almost all sections on the landing are currently a real scale.
Code Injection (CSS inserted into the Page Settings > Advanced)
a[href="/house-for-locomotives"]:after {
background: url(https://static1.squarespace.com/static/5e9f52c7f9679f3aa6f9e9e1/t/5ef51d7ecb4a5e5db1f6fcc9/1593122174991/House+for+Locomotives+Section_rendered.jpg?format=300w);
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
opacity: 0;
transition: opacity 0.3s;
}
a[href="/house-for-locomotives"]:hover:after {
opacity: 1;
}