Manual

Manual for Squarespace 7, uploading the Newsletter to Issuu, sending the email newsletter, and other related tasks for use in the office of the Carnegie Newsletter.

Written by Sean For questions: sverhall@sfu.ca Note: as of Feb. 2, 2014, this manual is currently in beta

Table of Contents (practical applications are in parenthesis)

Introduction (p. 7) Some words on the general concept of the website builder, its structural composition, and the page editor Make the page settings gear appear (To access the page settings for things like the name of a page as it appears in the navigation. Also go here to enable or disable a page.)

The Page editor (p. 11) (Pertains to the interface one sees when you're editing a page. For example, editing the text on the Contributors page.)

Editing a page (p. 11) (Applies to anytime you want to modify an existing page, e.g. updating the text of Contributors.)

Edit (p. 11)

Create a new page (p. 12) How to create a new page

Some words on single page design

Pictures (p. 15) Add a picture (p. 15) Captions Make the image a link

Basic image editing (p. 17) Crop Effects Frames

Scan the Newsletter using the HP Scanning program (p. 23) (This is for scanning in the newsletter, the end result being a single PDF that has had OCR applied to it. This PDF is what you upload to Issuu.com.)

How to add an issue of the Carnegie Newsletter to the website with Issuu (p. 28) (This combines the entries of editing a page, with the guidance needed to add an Issuu widget.)

Using Issuu (p. 28) Some background (p. 28) Upload an issue of the newsletter to Issuu (p. 28) Upload the PDF to Issuu Embedding the current issue (or any issue, for that matter) on the website Add the code to your webpage

How to make a map with Google Maps (p. 35) Create a custom Google Map (p. 35) Editing markers (p. 37) Edit the title of the map (p. 38) How to embed a custom map on the website (p. 38) Make the map widget responsive (p. 42)

Editing text in the page editor (p. 44) (Overview of how to manipulate text, e.g. creating a link, bold, italics etc.)

Email newsletters with TinyLetter (p. 48) (For the day of publication when you need to send the newest issue to the email subscribers.

Remember, you'll need to scan in the issue, and upload the issue to Issuu before you can do this.)

How to use the email newsletter service (p. 48) Signing in Compose an email newsletter (p. 49) The text toolbar in TinyLetter (p. 50)

How to search the Issuu archive (p. 52) (Using the proper search method on Issuu.com, and reminders on skipping the Stacks section.)

How to use Issuu Stacks (p. 55) (Basically how to group issues into folders on Issuu. Think of how all the issues are currently organized in folders by year, this chapter explains how to add a new issue into its correct year folder.)

Helpful keyboard shortcuts (p. 58) Using Microsoft Outlook (p. 59) (When you want to send emails to multiple people, and creating an email group so you can send a bulk email to a predefined group of people.)

Add multiple recipients to an email (p. 59) Making groups and sending emails to an entire group (p. 61)

Some useful things with Adobe Acrobat (p. 70) Extract a page (If you have a PDF with multiple pages, but would like to take a single page out and save it as a file in and of itself.)

Combine multiple PDFs or JPGs into one file (p. 72) (If you have a bunch of PDF or JPG files that you want to be combined into one single file, use this method.)

OCR a PDF file (p. 74) (If you have a PDF file that hasn't been OCRd yet, follow these instructions.)

The Practical Section (p. 75) (Really succinct instructions on how to do tasks.)

What this section is for? (p.75) Create a new page using the template (p.75) (Instead of creating a new page from scratch, using the two block method, getting the right images, just copy the template and make it your own from there.)

Upload the Carnegie Newsletter to Issuu (p.77) Checklist on day of new Carnegie Newsletter (p.77) Sending people directly to a page in an Issuu publication (p. 77)

”What do you want to do?” (p. 78) Extract text for use in Word? (p. 78) Find a poem, writer, article, etc. (p. 78) Share a page with somebody, or the internet (p. 78) Printing a document with the right tray (p. 79)

Terminology Reference Sheet (p. 80) (If you're wondering what a certain term is referring to on the screen, look here. Throughout this booklet, words or phrases may be accompanied by an asterisk. This means you can look them up in this reference sheet. For example, if the text is talking about the “main navigation”, you can look here and it'll show you where it's located.)

General computing tasks (p. 83) Backing the computer up (p. 84) (How to use the backup program to make backup of your computer. Includes how to start a brand new backup, and how to do incremental backups, since you've already made an initial backup, you most likely want to look up the incremental backup section.)

Safely remove the external hard drive (p. 89) (Whenever you connect an external drive (including USB flash drives, external hard drives, cameras, etc.) refer to this chapter so you remove it safely.)

Using the external hard drive as storage space (p. 89) (along with your backup data, your external hard drive can serve as a device to store other files. This section tells you how to do that (it's basically just like another folder on your computer, which means you can just drag-and-drop folders into the external hard drive).)

PhraseExpress (p. 91) (Little text shortcuts. How to add one, how to edit them.)

Using the TV to display images (p. 93) (General instructions on how to display images on the TV, using the slideshow feature.)

Antiquated things, but may still be of use: The two-block method (p. 94) (Not applicable anymore, but should you ever need to do something like this, then you can refer to this section. It explains how to use two blocks to create the proper layout. Basically how to recreate the subtitle margin on the site and the main body text. e.g. How on the site 'About us' is on the left, and the corresponding text is to the right of it.)

How to add accent imagery to the side-margin (p. 102 (Not applicable anymore since you should use the template when creating new pages, but if you ever find yourself needing to do some more complicated layout stuff with images, then this might help.)

7

Introduction This is what the screen looks like when you log in. This is editing mode, you can know that because of the editing side panel on the left. Let’s get familiar. Below is a screenshot of approximately what it will look like when you initially login. The blurred part is where a live version of the website is, and on the left is the omnipresent editing side panel. Don't be confused by the blurring of the screenshot, I just blurred it out because it may very well change in the future, the point is that that particular area of the screen is for showing a live version of the website, whatever shape or form that may be.

You are presented with a live version of the website, as it will appear to everyone that goes to it. So, what this means is that as you make changes to the website, you can see them immediately reflected onto the site. To give some historical context, typically how a site is built is you make some changes, click save, and then publish. And then you go and test the results, and see if it looks like how you want it. This is thus circumventing that extra step by showing you how the site will really look right away.

On the left you see the editor side panel*. Let’s go down the list •

•

Pages: Clicking on this will show you all the pages you have created on your website, so you can then proceed to edit the respective pages. It is where you’ll probably spend most of your time.

Design: The ‘Design’ menu allows you to change such things as the logo, title, and most crucially, the style editor. The ‘Style Editor’ allows you to adjust the look and feel of the site.

8

• • •

• •

You can adjust many things. To name a few: background colour, fonts (including, colour and size), page padding, and more.

Commerce: Here is where you control things in the domain of items you may be selling on the website, and donations.

Metrics: ‘Metrics’ gives you an overview of how many people are visiting the site. It breaks it down to hourly, daily, weekly, and monthly.

Comments: Some pages support the ability for users to comment. For example you may publish a blogpost, and you can choose whether to accept comments on it or not. Should you choose affirmatively, then all the comments will show up here.

Settings: Here you can adjust the settings of the website. Here you’ll find things like the billing information, and region settings.

Help: ‘Help’ sends you directly to the Squarespace help website where you can search the knowledge base, browse through their guides. Or create a ticket so you can get in touch with a Squarespace rep via email.

Some words on the general concept of the website builder, its structural composition, and the page editor At its most fundamental level, the website page builder is composed of blocks. There are all kinds of different blocks. For example: text block, audio block, image block, video block, map block, space block, and line block. These blocks can all be added to a page. They are added by clicking on a pale gray bubble ( ). By clicking on one of those, you can add a block. Fundamentally that's how you build your page, block by block. You can bring up a block bubble by moving your cursor over the page.

You'll see them for yourself, they'll conveniently appear in places where you can indeed create a new block. To get into the page builder mode, simply click on 'Pages' in the editing side panel on the left, then click on the page you'd like to edit. Below, as an example, I clicked on the page 'Guinea Pig'. So what you're seeing now is a live representation of that page, as it will appear to users on the internet.

But since we're in editing mode (as evidenced by the editing side panel on the left), we can edit the page. You'll notice the red arrow pointing at the black tab in the screenshot below. That tab appears when you move over the 'Page Content' area. To edit the page, click on 'Edit'. That's it.

9

Once you're here, recall the concept of blocks above. Notice, the grey bubbles that appear as you move your cursor. In the screenshot below, you can see the two grey bubbles. Clicking on one of those would bring up the block chooser, and when a block is chosen, it'll insert itself right in between the picture, and the map.

10 Understanding blocks is best done by just playing around with it. If you're ever in doubt, and I'm not around. Create a new page (so as to not mess up an existing page) and just play around (though be sure to click on 'Page Settings' by clicking the gear beside the page name, and Disable the page so that users on the internet don't see your test page while you're playing around).

Make the page settings gear appear:

11

The Page editor Editing a page To reiterate, you’ll have noticed when you clicked into the pages editor* that a live version of the website is presented to you. And you now see all the pages on the website on the left-hand side.

If you want to edit a page, simply click on the page you would like to edit in the editor menu* on the left. That’ll bring you to that page. Now try hovering over the page with your cursor. You’ll notice that when your cursor travels over the main area of the page, a little tab pops up that is labeled ‘Page Content’ and gives you the option to edit, and to access the settings. Edit is what will allow you to actually add content to the page. Settings allows you change the name of the page, add a thumbnail image, and change the URL location. Edit is what you’ll probably use most.

Edit: Once you click on edit, you’ll notice the editor side panel* on the left slides away, and the page content is highlighted. This is to visually alert you that you’re now solely dealing with editing this single page.

Now you’re ready to edit the page as you wish. You’ll notice that when you hover over the page now, little grey bubbles appear. These are block bubbles, and by clicking on them you can insert blocks. The screenshot below shows the block chooser.

12 That'd fundamentally how you add things to the page.

Adding a new page: Some general help on creating pages, and organizing the layout of a page

Create a new page: First, take a look at the Pages list in the Squarespace editor:

As you can see the pages are subdivided into three categories, namely: ‘Main Navigation’, ‘Secondary Navigation’, and ‘Not Linked’. The pages under ‘Main Navigation’ are what appears in the navigation bar on the website. Pages under the ‘Secondary Navigation’ category appear in the footer (or below the navigation bar, but that doesn’t apply to this particular theme). Last, pages under the ‘Not Linked’ are

13 pages that are live, but are only accessible if you manually link to them. For example, the Contributors page is visible in the main navigation bar, this is logical since it is under the ‘Main Navigation’ category. And on this page there’s a link to the ‘List of Contributors’ page, which as you can see is under the ‘Not Linked’ category. It is a bit confusing since ‘List of Contributors’ is linked to through the ‘Contributors’ page. In my opinion, the ‘Not Linked’ category is a misnomer. It should be something along the lines of ‘Doesn’t appear in any navigation bar or footer’. I think what they intend with ‘Not Linked’ is not linked to to any type of navigation bar.

All these pages can be reordered, and moved between categories simply by clicking them, and dragging them to their desired location.

How to create a new page To create a new page, simply click on the plus button beside the category you’d like to create a new page under, so either ‘Main Navigation’, ‘Secondary Navigation’, or ‘Not Linked’. Like so:

14 Some words on single page design You’ll notice that under the ‘Main Navigation’ category there is a further subdivision under ‘Carnegie Newsletter’. This is what Squarespace calls an index. A major part of the design of the website is that the homepage is a single page. Users can easily auto-scroll to a particular page (or more appropriately, section) of the homepage by using the navigation bar. What makes this happen is the index feature. So all the pages you see underneath ‘Carnegie Newsletter’ are part of the index, and thus also a part of the single page design. The two other pages in this case, ‘Archive’ and ‘Guinea Pig’ are not part of the index, but are still part of the main navigation. Therefore, you’ll notice on the actual website that both ‘Archive’ and ‘Guinea Pig’ appear in the main navigation bar, but when you click on either one of them, you are not auto-scrolled down the page like with the other items, but instead brought to another webpage entirely. This is because both ‘Archive’ and ‘Guinea Pig’ are not part of the index. This is for design reasons. The archive will become a very large page, so it is not good to have this incorporated into the homepage, as it is advised to keep the homepage of reasonable length so that users can comfortably scroll the entire homepage. This same reasoning is why the ‘List of Contributors’ page is not part of the index, but has instead its own page.

To be clear, single page design is just one way a website can be configured. And Squarespace has different templates, many among them don't include single page design. A reason for single-page design like the Carnegie Newsletter is because there is a low-barrier to discovery. People who visit the site will naturally scroll down, and immediately be exposed to different parts of the site, without ever leaving the “homepage”.

15

Pictures A time may come when you may want to add a picture. This will show you how to do that, along with ways to edit a picture in the Squarespace builder.

Add a picture Move your cursor in the editing area of a page, and you’ll see the bubble denoting where you can add a block. Click the bubble, and the Block chooser will appear, like so:

Click on ‘Image’. You’ll now see that an empty image block appears on your page, and a black popover window appears where you proceed to actually add the image you have in mind. Click the upwardpointing arrow in the black popover window, and this will open a dialog box. You’ve probably seen a dialog box like this before. Just choose the image you want to use, and click ‘Open’. If all you want is the image on the page, then you’re actually done already. But there’s more stuff you can do with the

16 image. I’ll explain those now.

Captions You can easily add a caption to an image. Below the image you’ll see “Write here…” this is the area for captions. Just click there, and type in your caption. Perhaps you don’t want the caption below the image. Squarespace allows for the caption to be overlaid on the image. To change this, double click the image in the editor. The Image editor black popover will appear. Click on the caption drop down menu like so:

Then choose your option. Note you can also opt for no caption at all, though simply not entering a caption even if it is enabled has the same effect.

Make the image a link You can also turn the image into a link. That is making it so if a user clicks on the image, they get sent

17 to another website, or perhaps another page on the Carnegie site. Open the Images black popover box again. Now, towards the bottom of the box (you may have to scroll down inside the grey popover box), look for ‘Clickthrough URL’. Click right below that where it says ‘Click to add URL…’. Here you can enter the URL of the website you want to link to. Should you be wanting to link to a page on the Carnegie site, you can click on ‘Content’ here:

Then choose the page you want to link to, Squarespace will automatically connect the image to the correct URL.

Basic image editing Squarespace offers some basic functionality in the way of image editing. Here’s an overview of what it can do: orientation, crop, resize, text, enhance, brightness, contrast, effects, saturation, sharpness, draw, redeye, whiten, blemish, and frames. I suggest to just add an image to a dummy page (remember to disable it as I have explained before, so it isn’t visible to everyone), and play around with some of the tools. I’ll overview some of the features I think might be of most use.

18 So to access the image editing features, double click the image so the black popover box appears. Now with your cursor, hover over the image preview, and you’ll notice in the top-right of the preview a double-icon overlay appears; a pencil, and trash can respectively. Like so:

Click on the edit button. Now you’re in the image editing mode.

Crop Cropping an image is very commonplace, and very useful. Squarespace has this built-in. To crop an image click ‘Crop’ in the image editing toolbar:

19

Now you can choose from some of the presets which are available at the top. You can enter in your own dimensions. Or you can adjust the cropping area by hand, that is by adjusting the four corners manually. Just click and hold on one of the four white circles, they look like this:

20

Once you’re satisfied with the crop, be sure to click on ‘Apply’ in the top right of the image editing mode. Then click ‘Save’.

Effects: You can also add some effects to your images. Click on ‘Effects’ in the image editing toolbar, then simply choose the effect to your liking. You’ll see your image change right away, this is a live preview of what it looks like, but you haven’t actually applied the changes yet. To do that, click ‘Apply’. Then click ‘Save’.

Frames: Should you so wish, you can add a frame to the image. This digital idea of frames translates perfectly from your analogue idea of frames, it’s the exact same idea. So, to add a frame, click on the rightpointing arrow in the image editing toolbar like so:

21

This will reveal three more editing options, among which is ‘Frames’. Click on ‘Frames’. There are a bunch of frames to choose from, experiment between them just by clicking on frames and looking at the live preview. If you find one you like, select it, then click ‘Apply’. Then ‘Save’.

Some things to remember. To save any changes made to the image block, be sure to click ‘Save’ in the black popover window here:

22

Squarespace knows that you might forget, so if you happen to click elsewhere in the window without saving, a dialog window will appear warning you of not having saved yet, and will then give you the option to save.

The distinction between deleting an image in an image block, and deleting the image block entirely: You can delete the image in the image block by hovering over the live preview (just like you did to get to the image editing mode). And clicking the trash can. You’ll notice that the image block remains on your page. This is by design. It’s so that you can maintain the structure of the page while you momentarily don’t have an image in the block. Should you want to remove the image block entirely.

Double-click on the image block to get the black popover window. Beside the ‘Save’ button you’ll see ‘Remove’. Click this to remove the entire block. Notice the warning text that appears when you click ‘Remove’ also refers ‘Block’ thus reminding you that you’re dealing with the entire image block, not just the image inside the block. To make even more clear the nature of blocks, here is the hierarchy: Page > Blocks > Image Block > Image

23 Scanning the Newsletter You'll be using the HP Scanning program, which is on your Desktop. Open the program and in the window that appears, choose the first option on the left side which should be “Document to Searchable PDF File, cropped�, then click Change Settings....

REDO SCREENSHOT

24

Then click on “Save to file Save Options”.

25

Here is where you choose where the end product should be saved to, and what to name the file. The file should be saved in the Archive (PDF) folder in your Carnegie Newsletter folder. And it should be named according to how all the other files are named which is like the following example: February 15, 2015, Carnegie Newsletter. Note: HP Scanning will automatically append a base number (0001) to the file name. Make sure to remove the 0001 later. Click OK. Now you can begin scanning your pages. To scan the next page, place the next page in the scanner and then click Add Page(s). Should a scanned page not be to your satisfaction, you can always select its thumbnail in the bottom, and then remove it by clicking Delete Page.

26

You may also need to crop the scan. To do that click on the Cropping tab, and then crop as necessary.

You might look for some type of save button to confirm your crop, but it automatically saves your crop whenever you make a change, so you can rest assured that your crop is saved when you click to the Add Page(s) tab again.

27

Once you're done scanning the pages, and everything is cropped etc. click on Finish. Now HP Scanning will process the images into PDFs, and automatically apply OCR so they become searchable. Once it's finished, go to the Archives folder in your Carnegie Newsletter folder and make sure it's there.

(Remember to rename it and remove the appended 0001.)

28

How to add an issue of the Carnegie Newsletter to the website with Issuu Using Issuu The service that I’ve chosen for reading the newsletter online is called Issuu. It’s quite a staple in the online publication community. According to their website, 15,000 new publications are uploaded every day, and they currently host 19.5 million publications. I mention this, because it is important that the online medium chosen appears to have a long-term future. Issuu seems to fit that requisite. But, as with anything to do with the future, it could also go out of business next year. But, that seems unlikely. I also chose Issuu because it has a pleasant reading experience, and it integrates nicely with Squarespace.

This is how you use it.

Some background: As it stands, the newsletter is a decidedly analogue publication. It is digitized by scanning it. What’s great about Issuu, is that you don’t have to learn how to use digital publishing software to upload the newsletter, you can just continue scanning them as you do. In short, I think this solution will fit rather nicely into your existing workflow.

Upload an issue of the newsletter to Issuu : Currently the output file format when you scan the newsletter into the computer is JPEG. JPEG is an image format, and it is not supported by Issuu as an upload format. This isn’t a problem, because JPEG can be easily converted into PDF, which is supported by Issuu. You may even be able to change the setting on the scanner so it outputs PDF.

Upload the PDF to Issuu: Go to issuu.com. And 'Sign In'. In Issuu's menubar, you’ll see ‘Upload’. Click that.

29

Now click ‘Select a file to get started’. Find the PDF file. And choose it. The file will upload to Issuu.

Now it’ll present you with the option to name it, give it a description, and the original publishing date.

Very important: make sure you include the words “Carnegie Newsletter” in the title. This is to maintain fully comprehensive searchability.

Furthermore, you can allow readers to download the PDF file of the newsletter by checking ‘Readers can download’. Once you’re satisfied, click the green button ‘Publish Now’. That’s it.

So now that particular issue of the newsletter is on Issuu. But, how does one embed the current issue onto the website?

Embedding the current issue (or any issue, for that matter) on the website: First, go to Issuu.com, sign in. Then click on ‘Publisher Tools’ in the top menu. Like so:

30

Now find the issue that is to be embedded. Once you’ve located it, hover over the arrow with your cursor, and click ‘Embed’. Like so:

31

You are now brought to the ‘Design your widget’ page. Here you can edit the size of the widget, the page layout, etc. You may want to change the size, but other than that, I think the default settings are usually good. Once you’re done adjusting the widget to your liking, click ‘Save style’ at the bottom.

Now take your attention to the ‘Embed code’.

32

This is what you’ll be inserting to the site in a moment, but not before you click 'Alternative embed code'. Once you've check 'Alternative embed code', single-click on ‘Embed code’, and it’ll automatically select all the code you need to copy. Now, that the code is selected right-click and copy the code.

Add the code to your webpage: Now some quick preparation has to be done in the Squarespace editor. Go to the Squarespace page editor, and create a new block by clicking on a bubble where you’d like the block (and, consequently, the issue) to appear. Now choose the ‘Code’ block; you’ll have to scroll down a little bit. It looks like this, under the ‘More’ section of the block chooser:

33

Click it, and youâ&#x20AC;&#x2122;re presented with a popover window to insert your code. Delete the default code you see, and then just right-click, and paste the code you just copied from Issuu. One more thing. To make the widget responsive, add this piece of code above the embed code: <div class="embed-box"> And then this piece of code below it: </div> It should look something like so:

34

Take a look at it, to make sure everything looks and behaves correctly (you may need to refresh your browser to make it appear). A little tip. Once the <div class="embed-box"> and </div> lines of code are in the code block you don't every actually have to remove it anymore. Whenever you need to switch out the current issue embed code with the new current issue, exclusively replace the <iframe> code and live the <div> code there.

It should be fully functioningâ&#x20AC;Ś but what if you want it centered on the page? Proceed.

35

How to make a map with Google Maps You may find yourself needing to create a map with some markers on it. This is how to do it.

Create a custom Google Map Go to https://www.google.ca/ and click on the blue ‘Sign in’ button in the top-right. Sign in with carnegienewsletter@gmail.com Now, go to https://www.google.ca/maps/ If you don’t already see ‘My maps’ in the top-left, click on the white search field in the top-left.

Then you should see ‘My maps’ appear. Click on ‘My maps’, then click on ‘Create’.

36

You’re now presented with a blank canvas. Now in the white search field near the top, enter the first place you want to place on the map. Let’s use the Carnegie Community Centre as an example. Type the address of the community centre into the search field. Should you not know the address of a place you’d like to add, you can search for it. For example, if you didn’t know the address of the Carnegie Community Centre, you could enter instead ‘Carnegie Community Centre Vancouver’ and go from there. If you entered an exact address you’ll more than likely see Google Maps place one single green marker on the map. If this marker is the right one, click on it then click on ‘Add to map’. You can also add a marker manually, like so:

37

Once you click as instructed above. Just click again to actually place the marker on the map.

Those are the basic things you need to know to create markers.

Editing markers: You may want to rename a marker, or add a short description. This is how you would do it.

Find the marker you want to make changes to, then click it. you'll see that an info box appears.

Something like this:

38

Now click on the pencil icon (see above) to make edits. Now the title and description boxes of the marker have become editable. Fill them in as you see fit, then click save.

Edit the title of the map To edit the title of the map, just click as outlined below, then type.

How to embed a custom map on the website Once you've created a map, and finished it. Let's add it to the website. First, just get the page open in the Squarespace webpage editor that you'd like to add the map to.

Now, go back to your map. You're going to need to get the code so you can embed the widget on the

39 website. To do that, click on the folder icon, then click 'Embed on my site'. Like so:

It might tell you the map isn't public, and that you need to do something. To fix this. Click on the green 'Share' button in the top-left, click 'Save', then click 'Change', then choose 'Public on the web'. Then 'Save, then 'Done'. Like so:

40

Now we can go back to the folder icon and click on 'Embed on my site' again.

41

This time you should be presented with some code. Copy the code, and go back to the website editor.

Now create a code block. In case you forgot, you bring up the block chooser by moving your cursor over the spot on the page where you want to insert a block, and then clicking on the block bubble. Now paste the recently copied code into the code block. You should see the map appear right away, that's a good sign. It means you've done it correctly.

Make the map widget responsive

42 I am now going to introduce a new concept, namely responsive websites. As you may know, a very large portion of the internet browsing population now use their mobile devices to surf the web. In turn, most of these mobile devices have considerably smaller physical screens than the monitor you use with your desktop. What this means is that a website designed for a desktop monitor won't necessarily look great on the screen of a smartphone. This is where responsive design comes in. Websites that are responsive will automatically adapt to the screen size that the user is viewing the website with. You can try this with the Carnegie website by manually resizing the size of your internet browser to make it smaller. Once you get small enough, you'll notice the website actually changes to accommodate the smaller space. This works quite well when everything on the website is text-based, but sometimes widgets, like the map widget, are on the site. They are usually not automatically responsive when you put them on the website. So we need to add some code to make them responsive. This is a bit more advanced because the code to make a widget responsive is not necessarily the same for every widget, so in the future you may opt to simply not make a new widget responsive. Which is fine, it is absolutely not going to break the website, it just won't like quite as nice on a mobile device when someone is scrolling past a widget. I'll give you an example. Here is a widget that hasn't been coded with responsive design on a mobile device:

And here is where it has been done responsively. Notice how the title bar is not cut off like in the bad widget (you can't even see them in the bad widget, namely the i logo, and 'Sign in' among others ). And

43 the + and â&#x20AC;&#x201C; zoom buttons (in the bottom-left) are visible in the good embed, whereas they aren't in the bad embed.

So by going to Google Maps and fetching the embed code you'll get something like this: <iframe src="https://mapsengine.google.com/map/embed?mid=ziNEKcNk2fKs.kWqxZBZaKvyE" width="640" height="480"></iframe> Now to make this responsive, first remove the width and height parameters, so you end up with something like this: <iframe src="https://mapsengine.google.com/map/embed? mid=ziNEKcNk2fKs.kWqxZBZaKvyE"></iframe> Now just add this above the code: <div class="google-maps"> and then this, below it:

44 </div> So you end up with this: <div class="google-maps"> <iframe src="https://mapsengine.google.com/map/embed? mid=ziNEKcNk2fKs.kWqxZBZaKvyE"></iframe> </div>

Editing text in the page editor

45

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

1) This function is 'Undo.' It works precisely the same way as you are accustomed to in your word processor of choice.

2) This function is 'Redo.' Also works the same as you would use it in the word processor you usually use.

3) When text is selected and this button is clicked, it will make the selected text bold. If this button is clicked and then you proceed to type, the text typed will be bold. Click the button again to go back to regular text.

4) When text is selected and this button is clicked, it will italicise the selected text. If this button is clicked and then you proceed to type, the text typed will be italic. Click the button again to go back to regular text.

5) This button allows you to create a link. Highlight a single word, or multiple words, then click this button. This will appear:

By default 'External' will be selected. This means linking to an external website. For example, if you wanted to link to the fictional site 'Los Dios', you put the following into the white entry field above. http://www.losdios.com. As you can see, you can also choose to make the link open in a new window when the user clicks on it. If you leave this box unchecked, the user will travel to the linked website in the same window that they were using to view your website.

You'll also notice that there is the option for 'Files' and 'Content'. Files allows you to link to a file, for example a Word file. The 'Content' option will give you the following menu:

46

So by clicking on one of the above, you'll link to an existing page on the website.

6, 7, 8) These are the alignment buttons. They behave just like the alignment features in other word processors.

9) This button on the toolbar is for setting the style of text. There are five different styles, namely: 'Normal', 'Heading 1', 'Heading 2', 'Heading 3', 'Quote', and 'Code'. They are self-explanatory, since when you click on it the menu gives you a visual preview of what each style looks like. From a design perspective, the purpose of text styles is to allow for typographical hierarchy on the site.

10) This button is to create a numbered list. You can create a numbered list two ways. By starting with no text. If you start with no text, click the numbered list button, and the editor will turn the empty line into a numbered line. You can start typing from there. Or you can start with text. You then highlight the lines of text, and subsequently click the numbered list button. The editor will then turn the respective lines into a numbered list.

11) This button is for a bullet list. Refer to 10), as they function the same way.

12, 13) These two buttons are to control the indentation. 12) will move the indentation to the left, 13) to the right.

14) This button gives you the option of inserting text as plain text. Some definitions are need here.

Computers are able to create different types of text. Among these is formatted text, and plain text.

Formatted text is best explained through example. Bold text is formatted text. Italicised text is formatted text. Text set in 'Heading 2' style is formatted text. Maybe you see some bold text, in a large size on a website you were browsing, and you copy it. This is also formatted text. Plain text is the most simple text at one's disposal on a computer. Plain text is just the raw text, nothing else. So, the purpose of this plain text button in the editor is for the moments when you wish to insert text into the website,

47 but rid it of all the formatting that it may have. Once inserted as plain text, you can rest assured you are working with unformatted text. From there you can format the text as you wish (with the buttons outlined in the numbers above).

15) This button is similar to 14), however 15) is for text that is already in the editor. Perhaps you've been working on some text: there's some bold text, some italicised text. Maybe some linked words. You decide it's a mess, and you want to rid it all of its formatting. Simply select the block of text and press button 15). It'll turn it into plain text again.

16) This button is to delete the text block entirely. By definition, this will also remove all text inside the block.

48

Email newsletters with TinyLetter How to use the email newsletter service: People can now sign up to the Carnegie Newsletter via email. How it works is a user enters in their email address, thereby signaling their intent to sign up for the email newsletter. They then must confirm their subscription. Once they've done that, they are completely signed up. So whenever you compose an email newsletter, they will automatically be sent the email you composed, which will include a link to the latest issue. Here's how you do it on your end.

Signing in: I've decided to use a service called TinyLetter. It's completely free, has a generous 5,000 subscriber limit (should that become too small one day, they say to contact support). It has an archival feature.

Furthermore, it is a product of MailChimp, which is a well established internet service, which bodes well to the future of TinyLetter (as you can tell, I am designing these solutions with longevity in mind).

Here's how to sign in.

Click on 'Log In' as pointed out in the image above. You'll be brought to this page:

49 On the left-hand side you see the navigation bar. I think the titles are for the most part quite selfexplanatory. But perhaps you're unsure of what 'Share', and 'Design' are for. 'Share' is where you can find the link where people can sign up for the newsletter. And here you can also find the code needed to embed the TinyLetter widget on a website. 'Design' is where you can adjust what the subscribe page, confirmation email, unsubscribe email look like. Here how to compose an email newsletter.

Compose an email newsletter: As you might have guessed, start off by clicking 'Compose'. It's rather similar to composing an email.

There is a subject field, and a message field. Where it ceases to be like an email is with attachments.

You cannot add an attachment to the email, which shouldn't necessarily be seen as something negative.

To allow people to actually read the latest issue of the newsletter, simply copy and paste the link from the Issuu page. I also would suggest adding in something along the lines of reminding the people there is a website etc. So essentially, as I am putting it forward in the beginning here, the email newsletter acts as a biweekly reminder to view the latest issue. Of course, it goes without saying, you can do with the email newsletter what you wish. But here's how to get the link to any given newsletter issue from the Issuu site, so that you can put it in the email.

Go to http://issuu.com/carnegienewsletter, and click on the issue you'd like to link to. Like so:

Then you'll see something like this:

50

Click on 'Share'. Then you'll see 'Direct link' appear, a link underneath. That's the link to copy. Then go back to the email you were composing in TinyLetter, and paste the link. So to be clear. When people receive the email newsletter, they'll be asked to click that link to read the online version of the newsletter. When they click that link they'll be brought straight to, in this case, the October 15, 2014 edition of the newsletter.

1 2

3 4

5 6 7 8 9

10

11 12 13 14

15

16 17 18

You'll notice that the compose page offers you some ability to format the text, similar to the Squarespace editor. I think you'll recognize some but, there are some new ones so I'll go over them to ensure clarity.

1) Bold text 2) Italicise text 3) Strikethrough text 4) Underline text 5) Decrease indent 6) Increase indent 7) Create a block quote 8) Create a numbered list 9) Create a bullet list 10) Change the text style (e.g. Heading 1, Heading 2, normal) 11) Create a link 12) Unlink 13) Insert an image (this will be as an attachment) 14) Insert a horizontal line 15) Text alignment 16) Clear the formatting of highlighted text 17) Maximize the text box. Essentially full-screen editing mode.

51 18) Show the actual source code of the email You'll also see at the bottom of the editing area there are three buttons: 'Send Now', 'Send Preview', and 'Save Draft'. 'Send Preview' sends a copy of the email to your email address, and yours alone. That way you can see how it'll look when you send it to everyone else.

52 How to use the Issuu search specifically for Carnegie Newsletter issues: Find the search bar at the top of the screen on issuu.com:

It's always at the top of the screen when on issuu.com, so if you don't see it, you can more than likely find it by scrolling to the top of the page.

Once your cursor is in the search box, type in the following (not case sensitive): “carnegie newsletter”, and then follow it up with your search string, also in quotation marks. For example: “carnegie newsletter” “supercilious behavior”. This search will thus find all instances of the two words “supercilious behavior” together in the Carnegie Newsletter. Here's another example: “carnegie newsletter” “john smith”. If, for example, you instead searched for “carnegie newsletter” “john” “smith”, the Issuu search engine would also return all instances of “john” and “smith” by themselves, instead of only when they appear together. An important distinction to consider. Also, sometimes the search results will display stacks first. For the purposes of search, you should scroll past stacks until you see all the individual issues.

53

Naturally, the amount results you receive will depend on your search query. In any case, the second step is to choose a issue, and then search through that individual issue. Like so:

Click the magnifying class and entire your search string, then press enter (here, “carnegie newsletter” should be omitted). It'll return a little list of all the places that your search string appears in the document, click on the result you want, and it'll jump straight to the page.

I think it's worth explaining why this search method works. It is a workaround, since Issuu doesn't yet have a way to exclusively search one single publisher. The reason why every time you search “carnegie

54 newsletter” must be included is because every single issue of the archive, has, in its title “carnegie newsletter”. So by including “carnegie newsletter” in your searches your forcing it to always include every single issue of the newsletter in its parameters, and then the search is further refined by whatever other search string you add. This is why it is important that from now on, every issue you upload includes “carnegie newsletter” in the title.

55 How to create a stack in Issuu, and add issues to it: A stack on Issuu is just a way to group multiple issues together.

So, presumably there are some issues that you'd like to add to either a preexisting stack, or a stack that hasn't been created yet. In either case, the first step is to select the publications you want to be grouped together. To do this, go to 'Publisher Tools'. Once here, go ahead and use the checkboxes beside each individual issue to check the issues you'd like to group.

Once this is done, click this button here.

56 Now you can select the stack you want to add the issues to, or you can create a new stack by scrolling all the way to the right, and clicking 'Create a new stack'.

Finish, by clicking on 'Add to stack'

You might run into the problem where you can't find the issue easily, there are, after all, quite a few issues. To alleviate this problem, use the search bar here:

57 Just type in the year, or date of the issue, and then check the box and add it to a stack as outlined above.

58

Useful keyboard shortcuts Tip: Instead of double-clicking things, simply click on it once, then press Enter.

Virtually universal: Copy: CTRL – C Paste: CTRL – V Cut: CTRL – X Undo: CTRL – Z Save: CTRL – S Select all (text): CTRL – A Find (text): CTRL – F

If text is selected: Bold: CTRL – B Italicise: CTRL – I Quickly move the cursor: Hold CTRL + Press left or right arrow key

When selecting items: Select multiple items: Hold CTRL and click items

Google Chrome (web browser): New tab: CTRL – T Close tab: CTRL – W Refresh: CTRL – R

59 Add multiple recipients to an email: Compose an email like you normally would. Now click on 'To...' like so:

In the resulting window that appears, simply double-click on all the contacts you'd like to send the email to. Once you're done, click on 'OK'. You should then see all those contacts in the 'To...' field, something like so:

60

61 How to use groups in Outlook (or as they are called in Outlook: distribution lists): First click on 'Contacts' in the lower left of your Outlook window.

Now shift your gaze towards the top-left where you'll see the 'New' button, where you should click on the downward-pointing arrow. Then choose 'Distribution List'.

62 Alternatively, you can use the keyboard shortcut: CTRL + SHIFT + L. Click on 'Select Members' in the tool bar up top.

This is now where you choose the contacts that you wish to be included in your newly created list.

63

You can add contacts two primary ways: double-click on a single contact, or select multiple contacts (using CTRL + click technique) then clicking on 'Members ->'. Here I've CTRL + clicked, and selected three contacts:

64

In the above screenshot, to add those three contacts to the selection area, I click on 'Members ->'.

Once all the contacts are selected and appear in the selection area, click on 'OK'.

65

Now type in a title for your list, then click on 'Save & Close' in the top-left.

66

How to use distribution lists when composing an email: Now when you compose an email and wish to send an email to an entire distribution list, simply compose a new email like you normally would. Then click on 'To...'.

67

You should see a window appear where you can choose contacts. Now look for the name of the distribution list you'd like to select.

68

Once you've spotted it double-click on, like so (notice how, in this case 'Test list' moves into the 'To -> selection area):

69

And if that's the extent of your recipients click on 'OK'. If not, just find the other contacts and doubleclick on them, and they'll be added to the email as well. You should end up with something like this:

70

Some useful things with Adobe Acrobat Pro Extract a single page: First, open the PDF file in which exists the page which you'd like to extract (Adobe Acrobat Pro should be your default program, but once the file has opened just confirm you are indeed using Acrobat Pro by looking at the window title bar, like in the screenshot below).

Now open up the page thumbnail panel like so:

71

Now simply find the page you'd like to extract, then right-click on it. Click on â&#x20AC;&#x153;Extract Pages...â&#x20AC;?, then click on OK. Acrobat will extract that page into a new file. A new window should open containing just the single page. Now you can do with it what you'd like.

72 Combine multiple PDFs or JPGs into one file First, locate the files you'd like to combine so they're handy. Now, open Adobe Acrobat Pro and click on “Combine Files into PDF” like so:

Now click on “Add Files...” in the top left of the window, and select all the files you'd like to combine.

Remember to hold down CTRL when selecting multiple files.

73 Once all the files are set to be combined, make sure they are in the right order. You can rearrange them by dragging. To finish off, click on “Combine Files”. Acrobat will combine the files and open the result. To save this result press CTRL – S, and save.

74 OCR a PDF file OCR is what renders the entire document searchable.

Open the PDF file in Acrobat. Or open Adobe Acrobat Pro first, click on 'Open' and choose the PDF file you'd like to apply with OCR. Now, click on 'Tools' in the upper-right corner of the window, like so:

Then, from the tools that appear, click on the 'Recognize Text' option, then 'In This File'. Ensure that it's set for 'All pages' (assuming you want all the pages OCR'd). The default settings, namely: English, Searchable Image, and 600 DPI, are all good as they are. Then just click on 'OK' and wait for Acrobat to finish.

Save the document (CTRL â&#x20AC;&#x201C; S) to definitively finish the OCR process. Now the PDF file is searchable.

By the way, to test if the OCR worked, go to the 'Edit' menu, then click 'Find' (or, better yet, use the keyboard shortcut CTRL â&#x20AC;&#x201C; F). Then type in a word that you know is in the newsletter and see if you get results. If you do, then you know the document is now searchable.

75

What is this section for?

The bulk of this manual, or at least its intention in its infancy was to provide a thorough understanding for the basics of using Squarespace, and all the other related services. I think it's important, and will continue to be important to have a grasp of exactly how to create a page, how to add images, use the two-block method etc. It helps when trying to solve problems. However, especially with computerrelated tasks there are usually methods that can cut down on time spent, and this section is for such methods.

Create a new page using the template Typically, when creating a new page you begin with a completely blank slate. It is up to you to create the typographical layout, the spacing of the blocks, the placement of images, etc. But there is a way to completely circumvent this. I've created a template page. Basically, this page already has the right layout, logo imagery, and spacing. It just has blank spaces where there should be text. So the thinking is that when you need to create a new page, just duplicate this template page and fill it in. Here's how.

Login to Squarespace, and click on 'Pages' in the sidebar, so you see what is shown in the screenshot.

Then scroll down till you hit 'Duplicate this when in need' (it may appear abbreviated as 'Duplicate this when i...').

Here's what it looks like:

76

Looks like a template, right? There's a title, the left-hand subtitles. Space to put in main-body text. The accent imagery has a placeholder, dividers between sections, and the Carnegie logo is in its proper place in the left-hand corner. But don't edit this one, you'll want to keep this one the way it is so you always have it to duplicate. Now onto duplication.

Click the settings gear icon when hovering over the page name in the pages sidebar, like so:

The settings for the page will appear. Let's take note of a few things. The navigation title and page title are accurate right now, but when you duplicate the page in a moment, the content will change so these titles will have to be updated, keep that in mind. Because this page serves no purpose for visitors, the is disabled. This means the duplicated page will be disabled as well, meaning you'll have to enable the

77 page later too. If you scroll down in the settings, you'll see a setting for 'URL Slug'. This is the text that appears after carnegienewsletter.com/. For example, the URL slug for the 'Contributors' page is 'contributors' resulting in 'carnegienewsletter.com/contributors'. You should change the URL slug for the duplicated page later too. Now, if you haven't already, scroll to the very bottom of the settings page, and you'll see a button entitled 'Duplicate Page', clicking that duplicates the page. Do that.

That's it, Squarespace has duplicated the page. So now you can fill it in as you wish. Remember to go to the settings for your duplicated page, and change the appropriate fields: navigation title, page title, enable the page, and give it a proper URL plug (usually the same as the page title, unless the page title is grossly long). If you want your new page to appear in the navigation bar (the gray bar at the top of every page on the site), drag the page (drag the page in the pages sidebar on the left) toward the top of the sidebar so the page is under 'Main Navigation'. If you're unsure of where 'Main Navigation' is, or the pages sidebar, take a look at the terminology reference sheet.

Upload the Carnegie Newsletter to Issuu: So you've scanned the latest issue of the Newsletter into the computer. You scanned it in as a PDF and it was OCRd automatically. You've named it using the proper standard (e.g. January 15, 2015, Carnegie Newsletter), and it's in the right folder on your computer for organized safekeeping. Now open issuu.com, and log in. Click on Upload at the top, and click on Select a file to get started, now select the file. It's now uploading. In the screen that comes next, make sure, again, it is titled properly. It is imperative that the title has Carnegie Newsletter in it (for search purposes).

Checklist on day of new Carnegie Newsletter: Scan newsletter in using new HP scan program. Using the option to save directly to PDF (with OCR).

Name the PDF correctly (January 15, 2015, Carnegie Newsletter) Upload it to Issuu Update the homepage of the Carnegie Newsletter website Send out the TinyLetter email newsletter

Sending people directly to a page in an Issuu publication: This is for when you are linking via URL (e.g. http://issuu.com/carnegienewsletter/docs/december_1__1994__carnegie_newslett). This came in handy for the artists' page, if you recall. To send someone directly to a page of an issue, simply add a forward slash, and the page number to the end of the URL. For example, to send someone to page 14 of the issue above: http://issuu.com/carnegienewsletter/docs/december_1__1994__carnegie_newslett/14

78

What do you want to do?

-------------------------------------

Extract text for use in Word?

Overview of what you'll be doing: finding the document, highlighting the text, copying, then pasting into Word.

So you've got a poem in mind that you'd like to share. First you need to find it. Do that by going to issuu.com and using the search method: “carnegie newsletter” “search term”. Try to be as specific as possible. If you know the title of the poem, try that first, if you know a line in it, try that too. If you don't get any results, try continually more general searches, the most broad being the name of the poet.

It might take some time, that's okay, the process stays the same. Once you've found what you're looking for, take note of the date of the issue, for example: February 15, 1998. Now relinquish your gaze on your internet browser, and go to the archive of PDFs on your computer, it's in your Documents folder. Go to the folder 1998, then open the February 15 issue. Find the piece of poetry again, and now just use your cursor to drag over the text and highlight it. Press CTRL – C to copy, then paste it in your Word document.

P.S. If your curious why you can't just copy the text from Issuu.com, only God knows. In all seriousness, it's a copyright feature.

-------------------------------------

Find a poem, writer, article, etc.

Start of at issuu.com. In the search bar type your search using the following search method: “carnegie newsletter” “search term”. The layout of the page will be as follows: stacks will be shown first, then individual publications. Always skip the stacks. You can search by year using the built-in find feature of your web browser, activated with CTRL – F. Press CTRL – F then type in the year, the web browser will highlight all instances of that year on the page, so you can jump to them quickly. Then open the issues using tabs, thereby preserving your search tab. Do this by right clicking on the issue and clicking on 'Open link in new tab'. Then go to the magnifying class icon and type in your search term again, click on the result and Issuu will bring you straight to that page.

-------------------------------------

Share a page with somebody, or the internet Find the publication on Issuu.com you'd like to share, and know what page number it is you'd like to share. Get the link for the issue, either by copying it from your browser address bar, or by clicking Share on Issuu.com and copying the link there. Last, when sharing the link be sure to add a forward slash followed by the page number. This will send people straight to the page you're sharing.

Reference page: “Sending people directly to a page in an Issuu publication”

79 -------------------------------------

Printing a document with the right tray When you have the document open you'd like to print, go ahead and print it (CTRL â&#x20AC;&#x201C; P). Click on Properties, then click on the Paper/Quality tab. In that window you should see an option for Paper source. Click on that and specify which tray to use.

80

Terminology Reference Sheet Admin page (only for you): carnn.squarespace.com. Accessed by logging in from squarespace.com.

Visitor page (for everyone else): carnegienewsletter.org. This is the link you should share with everyone.

Navigation bar: This is the bar that appears on every single page of the Carnegie Newsletter site. It gives people an easy and convenient way to navigate the website.

Main Navigation, Secondary Navigation, Not Linked: Pages that fall under main navigation in the pages sidebar appear in the navigation bar on the site. Secondary navigation is not applicable. Not linked refers to pages that exist, and are accessible, but are not linked via main navigation. The only way people can access these pages are if they are linked to. To move a page from anyone of these navigational sections, simply drag and drop.

81 Address bar: this is where you enter URLs, also known as links, or just website address. For example the address for the Carnegie Newsletter is carnegienewsletter.org. You just type that in the address bar to go there. To make a Google search, simply type your search term in the address bar, it knows because of the lack of suffix like .com or .org, that you want to do a search. Alternatively you could always type in google.com to go to their homepage, but that would be an unnecessary step.

Issuu.com: only accepts PDF files Adobe Acrobat: opens PDF files, can combine PDF files, what is used to copy text from a PDF so that it can be pasted in Word.

Chrome: Is a web browser, don't associate this with viewing PDF files. So if you're instructed to rightclick a PDF file, it's very likely it's not meant to be a right-clicked in Chrome. It's probably referring to right-clicking a PDF in Acrobat.

Searching the Start menu: The Start menu in the bottom-left can be useful for searching for programs.

You might be instructed to open up Acrobat, or Chrome, or HP scanning program. If you are floundering and can't find it. Search for it with the Start menu. Just click on the Start menu and you can immediately start typing in the program you're looking for.

82 Editor side panel, editor menu, Pages sidebar, or sidebar (specifically, the Pages editor since what you see here is after clicking â&#x20AC;&#x153;Pagesâ&#x20AC;?):

Taskbar and notification area: This is where you see the icons of the programs you're using, and on the far-right is the notification area which is where you need to be for things like PhraseExpress, and safely removing hard drives.

83

General computer-related tasks

84 Backing the computer up Backing one's computer up is really critical to preventing digital disaster, it cannot be stressed enough.

There are many backup programs on the market. Many of them cost money, but there are also some that are free. It is also worth noting the two major types of backup: online backup and local backup.

Since the advent of cheap online storage space (colloquially known as the â&#x20AC;&#x153;cloudâ&#x20AC;?) it has become economically viable to create online backups of people's entire computers. The traditional type of backup is the local backup, where a computer is either physically connected to an external hard drive, or connected to one wirelessly on the local network, and backups are sent there. The following are instructions for the AOMEI backup program on a local hard drive.

AOMEI Backupper When you open the program you'll be welcomed with the following screen (where 'System Backup(1) is, is where the name of your potential backup would be), notice the navigation sidebar:

You'll be spending most of your time in the 'Home' tab, conveniently that's the first thing you're shown.

I am now going to assume you haven't done any backups at all yet, even though, at the time of writing, you do already have a full backup. In the future, when you just want to see the step you'll most likely want to do since you already have a preexisting backup, jump straight to page XXXXXXXX.

85 Create new backup First things first, let's create a new backup. Make sure to connect your external hard drive to the computer, and, if need be, turn the hard drive on. If you don't have the backup program open already, open it.

Click on 'Create New Backup'. Now click on 'System Backup'.

86

Ensure that the drive selected beside 'Step 1' is 'C:' (the C drive is the internal drive). Then for 'Step 2' select your external hard drive by clicking on 'Step 2', and then selecting the external hard drive. Then click 'Start Backup'. Now, you must wait for the backup to finish. You can either continue doing things on the computer, but this will slow down the backup process. There's nothing wrong with this, it's just something useful to be aware.

Backing up after having an initial full backup A backup is only useful if it's up to date. It sounds very obvious, but it is usually only truly understood the moment one's computer crashes and it is realized that the latest backup was from last month (for whatever reason). Usually an inhibitor of regular backup is time, because waiting is a hassle. Most modern backup programs support backing up incrementally. This saves you from having to rebackup the entire computer every time you backup. Instead, with incremental backups, only the files that have changed since the last incremental backup are backed up. So, to make it clear: one first makes a full backup of everything. Then one incrementally backs up, meaning that only files that changed since the incremental backup following the initial full backup, are backed up. Should something happen, you can go back to each discrete incremental backup to retrieve files, or just restore from what was the most recent version of your system. And for what it's worth your decision to opt with incremental backups as opposed to another option isn't set in stone after the first time, you can always change. Remember, the external hard drive can always be wiped clean, and you can start your backup files from a fresh slate (I mention this in the case something goes wrong with the backup, or you feel it may be corrupt).

87 Incremental backup So, once the initial full backup is done, you can now do incremental backups here on out. Open the backup program and you'll now definitely see your backup first thing, since you've already created an initial full backup (if not, go back to the first chapter). Like so:

Clicking on 'Backup' will reveal a drop-down menu, where you should click 'Incremental Backup', like so:

88

Then click 'OK', and let it run.

89 Safely removing the external hard drive When you want to remove the external hard drive it is always imperative to safely remove it. When you have the external drive plugged in (or any external hardware for that matter, e.g. a USB memory stick) in the bottom-right of your screen you'll see a new icon appear, it looks like this, and it's called 'Safely

Remove Hardware': little toolbar in the bottom-right

. You may have to click the two upward-pointing arrows in the

to reveal more icons among which will be the 'Safely Remove Hardware' icon like the one above. So once you find it, click on it. It'll bring up a little menu where you choose what you'd like to remove, pick the external hard drive. Once that's been done successfully, you can unplug the USB cable from the computer.

Sometimes, the 'Safely Remove Hardware' function won't work, and it'll say it can't remove the hardware because it's in use. This means that another program that you may have open is using some data on the external hard drive, and thus can't interfere that by removing the hardware. If you can, see if you can try and find the program that may be using a file or whatever it may be stored on the external hard drive. An example is having a document stored on the external hard drive open in Word. If you can't seem to find the program, then your best bet is to just turn the computer off. It may be inconvenient, but you can know with one hundred percent certainty that you can safely remove the hard drive when the computer is off.

Using your external hard drive for things other than backup The backups you perform will not immediately take up all the space available on the external hard drive. Therefore, it might come in handy to know that you can use it for other things. Maybe you want to bring a large file that you can't email to a friend, a hard drive is a great solution for that instance and others too.

When you plug in the hard drive it shows up as a disk under 'Computer'. To go to the 'Computer' window, click on the 'Start' button then 'Computer' towards the right side of the 'Start' menu. You'll see your local disk listed there, and you should see the external hard drive listed there. Double-click on it to see its contents. You'll definitely see the backup folder, because that's where the backup data is stored.

But this is also where you can add your own files. You can create folders on the external hard drive just like you would elsewhere on the computer. And to add a file, you can do a few things. You can drag a file into the external hard drive window and it'll copy onto the hard drive. You can right-click on a file and clip copy. Then go to the external hard drive window and right-click again, but now click paste.

90 You can also directly save a file onto the hard drive. For example, you could be editing a document, and you can click on 'Save As' then navigate to the external hard drive and simply save it there.

91

How to use PhraseExpress PhraseExpress is essentially software that expands short strings of text into larger phrases. If you find yourself typing the same thing, over and over, you might consider assigning that piece of text a specific string, to save you time.

How to use it: PhraseExpress can be found in the taskbar* in the bottom-right of the screen. You might have to click the arrow to show more icons. The icon looks like this:

Add a new phrase: To add a new phrase, simply right-click on the logo and click on “Edit phrases”. You'll see this window, and then click “New Phrase”:

Now create your new phrase. It's handy if your description is the same as the phrase content, and by default, the text you enter in the description also goes in the phrase content box. Then, in the “Autotext” field, type in the string of letters or words that you want to be replaced with the phrase text when typed. When you're done, click OK. Here's an example:

92

You'll notice you can also do some more advanced things like specify one single program that the phrase can be used in. By checking the checkbox, you can choose which program that is, it's pretty selfexplanatory. You can also assign a keyboard shortcut to a phrase by clicking in â&#x20AC;&#x153;Noneâ&#x20AC;? and then pressing a combination of the Shift, Ctrl, Alt, and/or Windows buttons with a letter, or other character.

When setting it up here, you'll see the buttons on the screen react when you press them on your keyboard.

Editing a phrase: So you've made a phrase, but you find you can't remember the shortcut, so now you want to edit it.

Open PhraseExpress by finding the icon in the taskbar* at the bottom and right-clicking it. Click on Edit phrases. Find the phrase you'd like to edit in the left section of the window, click on it to select it.

Then you can edit it in the right-hand section of the window. Here you can edit the trigger, and the actual phrase itself. When you're done, click on OK.

93 Using the TV to display images You can use the TV to display images by plugging in a USB drive with images, and then starting a slideshow. First, collect the images you'd like to show on your desktop computer, and put them all in one folder. Now, plug in your USB drive to the desktop and drag the entire folder to it. Move to the TV now and plug in the USB drive, use the TV remote control to open the menu, then choose Images, then navigate to the folder within which the images are located. Choose the first image, then when you're viewing that image go to its settings and choose slideshow. Be sure to adjust the slideshow speed accordingly.

94

Two-block method for adding to a page with the left-margin title with corresponding content area This is best explained by way of an example. Let's say you'd like to add to the 'History' page. This is what it looks like at the time of writing:

Notice the clear visual structure that communicates the hierarchy of the page. On the top is the full heading of the page, everything else on the page should have something to do with the heading. Then on the left margin, in bold, is the sub-heading which directly communicates what can be found in the main content area of the page. Because you're the builder of the site, to add further clarity to the structure of the page, it would be useful to see what (Squarespace) blocks constitute this visual structure. See the next screenshot:

95

96 Notice how the white space in the left-margin. It is not a mistake that there is no spacer block there.

That space automatically is created when you follow this two-block method.

So let's add a two-block beneath 'Cost': Go into editing mode. Then scroll so that 'Cost' is in view. Now simply add a full-width 'Text' block underneath 'Cost'. It is critical it is a full-width block. Like so:

Now type in the text that you want to appear in the left-margin.

97 Then create another full-width 'Text' block, but now make sure to drag it beside the 'Text' block you just created. Like so (notice the black bar telling you where the block will be created):

You should end up with two text blocks beside each other. Now, with your cursor find the left-edge of the text block on the right, and drag it towards the left-margin. This is what you're looking for:

98

Now you should have the finished result:

99

But, you're not quite done yet. Notice how between each main content block there lies a horizontal divider line. To add this, simply create a 'Line' block the width of the main content area (so not fullwidth). Like so:

100

What if you want to add a section but not at the end of the page like we just did above. The instructions remain the same, but instead of creating your first block at the bottom of the page, simply add the initial full-width block between the two sections you'd like to add the new section. For example, let's say you want to add a section between 'Newsletter' and 'Production'. Simply add your first full-width block here:

101

So, essentially, the exact same steps, just a different starting point. Remember to finish with the 'Line' block.

102

How to add accent imagery in the side-margin First, find some imagery that you think would be well suited for in the side-margin. Usually something that is more vertically-inclined (like a totem pole, for example). Now, it must be mentioned, this entry on adding accent imagery involves some optional creative steps. For example, you could use a different piece of imagery for each whitespace in one given section, or, like in my example, you could cut one single image up into multiple bits, so the whole image, is, give or take, spread across multiple areas. I'll first explain simply how to get an image in the side-margin area, then digress into the potential creative areas. These are, afterall, the fundamentals which are of the most importance, and after those have been absorbed, one can go into their own direction.

So, you've found some imagery you'd like to use, now go into Squarespace and go into edit mode on the page you'd like to add the accent imagery to. In this example, I'll add accent imagery to the 'About' section.

I go into edit mode, so I see this, approximately:

Then, go ahead and create a new 'Image' block in the white space below 'About us' (or whatever it may be in your case). Like so (if you're using the dragging method to create a new block, make sure the black guide is the same length as in the screenshot below):

103

An image popover box will appear, so click on 'Add an image' to continue, like so:

Now choose your desired image. You'll see the image get uploaded to Squarespace, and subsequently processed. Before you click 'Save', I recommend editing the image to make it black and white. The imagery as it is has the potential to clutter the site, but well-chosen imagery made black and white is acceptable. So, click on 'Edit' like so:

104

Then in the resulting editing window, click on 'Effects' in the toolbar, and choose the 'Metropolis' effect which ostensibly is the equivalent of black and white. If you get lost here, refer to the section on editing an image elsewhere in the manual.

Now click 'Save' to finish up. You should now see the image you just selected appear in the sidemargin, that used to be whitespace. Like so:

Adjusting the height of the image to correspond with the text You'll notice that in the following screenshot, the image height does not exactly match with the height

105 of the corresponding text (or your might prefer to match it with the horizontal line, in either case, this example doesn't match either).

To correct this, click on the image, and by doing so you should see a circular â&#x20AC;&#x153;grabberâ&#x20AC;? appear, like this:

Drag this accordingly. Here's an example of a finished product (I personally prefer aligning the image to the horizontal line since that is what truly signals the end of the section):

106

Variation on a theme Here I'll explain how you can spread a single image across multiple sections instead of having the same image repeating. It requires cropping. Just like above, add an 'Image' block in the side-margin, then add your image of choice. Now, instead of just clicking save after the image has been uploaded and processed, click on 'Edit'. This is in fact precisely like cropping function as outlined earlier in the manual. So, click on 'Edit', like so:

Then in the resulting editing window, choose 'Crop' in the toolbar. Proceed to crop the roughly what you'd like to appear in the side-margin. The idea behind this, is that the image will be split up over multiple sections. So by cropping, you ensure you get different parts of the image. You'll also notice

107 later that when you adjust the size of the 'Image' block to correspond with the text, that the image will move around a bit too. Once you're down cropping, click 'Save', and then 'Save' again. Now repeat this process for the next section on the page meaning the whitespace beneath the 'Newsletter' section, the 'Production' section, etc.