Note App and Using LayoutEngine

All right, everybody. Welcome to Squarespace's Google+ Hangouts. Thanks, everybody, for coming. Today I'm joined by Chris Cox. He's our resident iOS developer. He does everything from our Squarespace apps, and then we've got a new app that we're going to talk about today, Squarespace's Note app. It's a really cool, very simple app, but quite powerful. used for a lot of great things. So we're going to go ahead and give a demo of that app and kind of show you how it works, and Chris is going to talk about that, and then we'll also talk a little bit more about what's in store for the Squarespace app and just find out a little bit more about you, Chris.

Sounds good.

Let's go ahead and fire up the iOS simulator here so everybody can see that. And then I'm just going to hand it over to Chris, and he's going to kind of talk us through the iOS simulator.

Okay. So the main objective of this app, the Squarespace Note app, is to easily fire off notes to a bunch of services that you're connected to. And the most simplest way to do it is when you fire the Note app up, you can just simply create a quick note that will be saved as a draft. So this is a draft. Okay, so I haven't done anything. I haven't connected any services at this point. And when you push up, you'll basically send a little note. Now what we can do is I can go over here and I can look at that note and I could see, you know, the content of it, the date that it was sent. Now if I wanted to send that note, let's say I wanted to connect to my email account. So I'll do this one time at the very initial setup. I'll set up my email.

Sorry.

And from this point, it has some settings that I can say that I want it to be default, so it'll always be on. And I could send the location, which would find out my GPS coordinates. And I could change the— Subject line. Now I have this dotted here, so it tells me that this is where it's going to be sent. Now this is a new message. Now when I send this, we're going to fire this off to my email. The nice thing about this is we can set up these various services. And it's kind of like a one-stop shop where you can quickly jot yourself a note, have it go to your Squarespace account, your email, your Twitter, your Facebook, and you can have those default settings so that you don't have to reset them up every time you drop yourself a note. You can go back to the notes here, see the notes that you've sent, and if you felt like you wanted to send it again, like this particular message only went to my email account, but it didn't go to my Squarespace account. I can just click on that and quickly send it off again.

So when you send a note over to Squarespace, your Squarespace account, obviously you have to have an account for that. But of course anybody can sign up and get the Note app and not actually have a Squarespace account. So this can be a completely standalone app, which is pretty cool.

Yeah, this is kind of a complete departure from the way we've typically been doing things. This app doesn't require a Squarespace account. I have a Squarespace account set up here. You can go through it and we can click on it and see the settings for it. Like you said, you don't have to have a Squarespace account. We can remove this and the app will work just fine.

Sweet. When we send that to our Squarespace account for— I'm sure most of the people that are watching today have a Squarespace account. Where does that go?

Depending on the settings that you set it up with, You can determine what blog you're going to send it to and whether you want it in draft mode or publish mode. So if I click on this one and I look at the settings that we have here, right now we have it set up to go to your blog. And we can see that we're publishing to your journal.

Perfect.

And we're publishing it as a draft.

Awesome. So you could really use a— you could create a completely separate journal on your Squarespace account And not have it public even, and you could even just simply use that as kind of a storage for a bunch of your quick notes for on the go.

Yeah, absolutely. I mean, one of the main driving forces for this app was to quickly fire off notes and gather your thoughts, which will help you become a better blogger, whether using Squarespace or one of these other services. Quickly put all your thoughts in one spot, and then maybe at a later time gather them and develop a nice blog post or Facebook post or something that you wanted to post out there. Sweet.

So one of the things that I've noticed kind of playing around with the app is that we can actually add additional services to this list. So maybe if we don't have a Dropbox, or we're not wanting to post to Dropbox or anything, but we can actually add our own other service. How do we do that?

Yeah, so what you'll do is you'll come to the services settings, which is on the right side here. You'll pull down and you can edit the services. And if you go to the very bottom here, there's an add a service. And here you'll create your service like, you know, let's say a task app. We'll call it whatever we want. And the main reason you would use one of these custom services is let's say you have a task manager app that allows you to create a task by emailing it. So you can plug in the credentials here of the service, and those particular apps sometimes require the email to come from a specific user or specific email and specific settings.

Oh, okay.

So you can set that up here and then that allows you to post to like If This Then That. There's all these different website services that allow you to do that. So the different types of settings here are you can customize the from email. So right now it defaults to notes@squarespacemobi. However, each app has its own unique Okay, great. Which we can set it up as. Then we can also say whether you want the note to be in the subject. Right now we have it set up as the note is the subject or we can have it as an excerpt. There's a few more settings there. We can also change the body of the email, whether we want the note in the body or to ignore it because some of these services that you connect to Sure. So we kind of mimic that here. Awesome.

So that's a really— I mean, I just found this actually today playing with it. That's a really expandable way to really add in your own service. I mean, I'm thinking like, I want to say like salesforce.com. They're kind of— I forget what actual app they have, but something rings a bell like they will be able to accept like an email to set up a lead or Or something along those lines, and this would be handy for that.

Yeah, absolutely. And one of the other things that some users aren't quite aware of is that there are some settings in here. If you go to the settings account, your general settings, and you pull up the note app, here you can customize. You can replay the tutorial.

Oh, sweet.

The dark theme, I'll show you what that is. And then you can also change whether you push up, you pull down, or you do both, or all 3, or it'll even show a button in order to send them. The dark theme is pretty cool. So what that does is, if I go back to here, if you shake the app, and I'm going to simulate a shake here. Let's go to shake. It'll go into a dark mode. It'll give you the message the very first time, and then from that point on, anytime you shake the app, it's in a nice dark mode.

Okay.

Let's say you're creating notes at the movie theater, you know, you don't want the big bright light, you can just quickly jot off a note. And then I turned on those 3 settings, so now I can write a note. Let's see, I can pull it, or I can push it, or I can even hit this little button here to jot off a note.

Nice.

And you can change all those settings in the general settings of the app.

That's really cool. I didn't know about that either. That's really sweet. Awesome. Well, thanks for giving us a little overview of the Note app. Why don't you tell us, you know, obviously we've got our Squarespace apps. We've got some updates coming, is that correct?

Yeah, absolutely. The main Squarespace app, we have a major update coming soon. And the Squarespace iPad app just had a recent update, and we have another update that just got approved by Apple which will be coming out in the next few days. This Note app that you just saw, we have some more updates coming from that pretty soon, as well as the iPad version. Sweet.

Oh, all right.

So yeah, we got a lot of exciting things coming down the road.

Awesome. All right, so we'll just round things up with you before we let you go. Why don't you tell us about, you know, how long have you been at Squarespace?

Let's see, I started with Squarespace about 4 years ago as a remote contractor working from California, and I worked for about a year working on some mobile stuff, and then about 3 years ago I moved to New York here, And I've been in the office here for 3 years ever since.

Awesome.

Full-time.

And obviously you didn't start doing iOS stuff. What were you doing for the company before you really got into doing the iOS stuff?

Yeah, well, actually initially that's how I started. I did start working on the first generation of the mobile.

Oh, you did? So way back then?

When I was in California.

Oh, that's awesome.

Yeah, and then I came here full-time to do that. And then about a year into it, I changed and worked on the v5 team before v6 was—

Oh, sure.

—was still being developed. And I worked on v5 for about 2 years, working on the front end, the back end, a lot of the JavaScript, and a lot of the back end stuff that we do on the server. And then probably recently, about middle of this year, I transitioned back to the mobile team. And I worked on the Node app that we just showed. As well as some of the other stuff that we've got coming up.

Sweet. So what do you do outside of Squarespace? What do you enjoy? Sports or—

Yeah, I'm a big sports fan. I'm a big boxing fan, as you know. And most of the time I spend with my family. I have my daughter who's 6 and a half. She's almost 7 in December. And so yeah, we've been in New York for a couple years now and we still play tours a lot.

Yeah, I can do that.

And we get to see the exciting city.

Sweet. So one thing that you and I do actually outside of Squarespace is we like to watch UFC.

Yes.

So we've got a fight coming up on the 8th, I believe?

Yes, that's right.

Benson Henderson and Nick Diaz. Is it Nate?

I don't know if it's Nate or Nick, but one of the Diaz brothers, yeah.

Yes. So who you got?

I have to take Henderson. I'm a big Henderson fan, and although Diaz is— both the brothers are really good fighters, but I'm going to have to go with Henderson.

Yeah, it's going to be a great fight, so I'm looking forward to it. All right, well, thanks so much for hanging out with us today, Chris, and I hope everybody learned a little bit more about the Node app. So go download the Node app, check it out. It's free. Obviously, we've got it— even though we don't have the iPad version yet, you can still actually run it on your iPad.

Yeah.

All right.

Okay.

Thanks a lot, Chris. Have a good one.

Take care.

All right. So we're going to move in now to actually using— talking a little bit about Squarespace layout engine, our page builder system, which is super robust, especially for things that we might have not seen in other platforms. Very drag-and-drop friendly, and there's a lot of great things that we can do with it. So I've set up a site and One thing that I also want to— I'm going to double-check here too before we move into that. We are asking if you have any questions, that sort of thing. We had a couple sent in through Twitter, and so I'm going to check up on those. So if you do have any questions, you can either post directly on the Google+ Squarespace page. Let us know if you have any questions that I can help answer. Otherwise, we'll just go ahead and get started into the layout engine demo. Let me go ahead and give these a quick check here. Some of these sent through Twitter. SQSP Hangouts. We're going to try to do these, you know, like once a week to see if anybody— to talk about different things, have different people on, and get to know the company a little bit more. So it looks like we did have a couple of questions come through. Let me take a look at these real quick. Okay, so how do I edit the way pics appear on the mobile version of my site? It's not transferring well. So there is an option actually in your settings, and we can kind of demonstrate this here in a minute, to turn off the mobile view if you don't like the way that they're displayed. You know, one of the things that we've done with the mobile displays, we really wanted to make your pictures, you know, nice and large to fill the screen, so you're going to see them fill up that screen and then you can scroll up vertically. So it's not gonna actually mimic the same layout that you've set up, but rather make it easy to see those images on your screen. So hopefully that answers your question. But again, if you don't like how that displays, obviously Squarespace sites are built using standard web methods. And so even if you turn off the mobile view, people can still be able to see your entire site in the format that you've laid out. If that's what you would prefer them to see. Obviously things like the iPhone and things can handle those types of modern techniques that we're using. And we got a question, are there any plans to add the v5 forum module in Squarespace 6? We don't, obviously we don't have that yet, but Squarespace 6 is something that is growing big time. I mean, I haven't Since I've been working with the company, which is almost 3 years now, I've seen Squarespace 6 move faster than v5 ever has. So we're obviously taking everybody's suggestions and finding out what people really want. If you haven't, the best way to suggest or request a new feature for Squarespace 6 is to contact our support team. So they are available. You can email them 24 hours a day and say, hey, you know what? I really like this feature from Squarespace 5. It was called the discussion module. I'd really like to see that make an appearance in Squarespace 6. We're happy to pass along all those suggestions to our developers. And that's, you know, and it really is kind of like a crowdsourced type thing. So if you get, you know, we get like 400 people that say, hey, I want that discussion module, then, you know, that's something that's going to be moved quite a bit higher up on the list right away. So if you've got friends that use Squarespace and they're also interested in Have them send over an email to our support team. Let them know that you really want the discussion module. Okay, so let's take a look at Squarespace 6 site. And we're going to talk just a little bit about using the page builder layout engine and some of the things that you can do. Now one of the first things I'm going to talk about real quick is that we can actually, and some people don't know this right off the bat, is that we have some editable regions on various templates that will allow you to add content to maybe a footer or a sidebar if your template has that sidebar. And you can edit those and add content to those by clicking on the pencil icon. So this— while you're in preview mode. So obviously we're taking a look at the site, we're in preview mode, we've got our account palette down here. I clicked on the pencil icon and now we can see that we've got some additional kind of buttons showing up on the site. And so we can scroll down. What we're looking for is the plus button. So down the bottom right here, we've got a plus button, and I can click on that to bring up all of my blocks that I'm going to use for Squarespace. So again, this is, you know, for adding content to our footer or sidebar. We're going to see these exact same blocks available to us in the page builder once we actually add a brand new page, which is pretty much how you're going to set up your Squarespace site. So let's go ahead and go back to our page so we can kind of take a look at that. And I'm going to also kind of explain some things that could sometimes cause some folks to trip up and maybe not quite understand how our system works. So I'm going to add a brand new page here. And for those of you who might be wondering, I'm using the Dovetail template for this particular site. Okay, so we'll just add a new page here and maybe we call this page Services. Obviously, if anybody has taken our Creating a Business Site workshop, you've probably even seen this particular site. So with our layout engine and our page builder, so I just created a regular page here. We always start off a brand new page with a text block. So the very kind of base foundation of layout engine is the blocks that we're gonna use. And obviously we've got a text block added here. And then the grid that it's on. So each page has a 12-grid layout, 12— excuse me, 12-column layout for their grid. So you'll be able to customize each block to be in a column of a grid. And each block by default is also going to fill the column that it's in. So since this particular page right now with the text that we have on here, which add some text in here for us to see. It's only one column, so it's gonna spread across that whole column. Now if we wanted to add an additional column with an additional block, we're gonna of course need to add a new block. So click on the Add Block button, and let's just go ahead and add another text block. Now here's another thing that a lot of people might not know right off the bat. You're gonna obviously be very tempted to just simply click on each of the different blocks that we offer here. Of course, we have the structure blocks, the social blocks, but in order to add additional blocks, we can click on them and then it will simply just add the block to the bottom of the page. But what I personally like to do, and I think really one of the most powerful things about our layout engine, is that we can actually click and drag the block right off this palette and place it on the page before we even add any content to it. So I'm gonna grab the text block here and click and hold down my mouse button. And I can drag this and position it now on the page where I want it to appear. So let's add it to a new column just to the right here, and we'll automatically split that page in half. Now we've got 2 columns, and of course each text block is respectively filling its own column. So we can continue on with this if we wanted to add another 3rd column. But obviously since we have other blocks to work with, we can of course add additional types of blocks. And again, each column— each block is going to fill the column that it's in. So we could grab an image block, and if we wanted to add an image to this column, it would only fill that column. Now if we wanted to have this image span all the way across the top of all these columns, I'm going to add it as a new row. So a new row will basically clear the columns for that particular block. And add a new row with its own column. Let me go ahead and grab that again. Okay, so we'll add that to the top of the page. Let me grab an image to add here. So I'm going to simply click and drag my image file right from my desktop folder. Onto my Squarespace upload and we add it to the site. So we've got our image here and as you can see, since it's in its own row and it's in its own column, it's going to span across the entire column. Now one of the things that, that I show on this, the business workshop, is if we take a look at the About page down here. One of the things that a lot of our customers will end up doing is they'll end up adding an image that is too small to fit within the column. So if we're taking this image here, unfortunately we're not going to be able to expand that image to fit the entire width of that column because it's just— that would distort the image, it would look really bad. So we're simply going to leave the original resolution that you've uploaded as centered within the the site there. So it's in its own row. The block, as you can see, does in fact fill up the full column. But kind of what we do here to kind of resolve that in this About page is, well, we kind of mask that smaller size by decreasing the width of the column that it's in. And so we can do that by increasing the size of the text column and by clicking and dragging in between those columns. So now I'm Obviously, if we shrink the image, you can see how it fits in the column perfectly and looks a lot more uniform. So that's another kind of common thing that you might end up seeing. We do really recommend that when you upload images that you upload them up to 1,500 pixels wide. And I usually, if at all possible, try and have all of your images at 1,500 pixels wide. That way, if you want it to appear in its own row, you can certainly do that. If you'd like to shrink it, we can do that too. Again, Squarespace handles that image processing for you. We create 6 different versions of that image size, so no matter if you're using it small or large or in a gallery, we're going to automatically choose the best image file from those 6 to load quickly and display in a clean way. Okay, so let's go back to our page that we're setting up here. So next thing that we wanna do is very similar to our columns here, and a column is really— text blocks are really another great example of exactly how you would set up 3 images or a couple of images to appear in the same row. We simply just add another text block and instead of repositioning our image, instead we'll actually use another image block and add it as a new column next to that image. You can always take a look at the guidelines here. The guides will tell you exactly how far this image goes down. So you can see that this is going to be added into its, its own column. But it's only gonna extend down to the bottom of this particular row. So we add our second image here, choose another image to set up here, and we'll save our changes. So you can see we've got our 2 images now side by side, and again, we even resize this image automatically for you to fit within that area. Now, the last caveat thing that I'm going to mention here is it's a really fantastic idea, a really great idea to click on the view page after you've kind of set things up here. So our editor really gives you kind of a roundabout way to see how your content is going to appear. So we try— and think of it as kind of like a percentage here. So obviously we're using 12 columns, and the content on this page is obviously wider than what was in our editor. So if we go back to our editor, obviously it's only about, I wanna wager, 700, 800 pixels wide here, maybe a little bit smaller than that. But our homepage width or our site width for our content is quite a bit larger than that. So again, kinda think that as a scale. So we're gonna see some text reflowing. Obviously these columns of text are not as long due to the width being here. So it's a really good idea to go back and forth between your building mode and your preview mode just to make sure you're getting the layout that you're wanting to. So this is going to give you a really good general idea of how your layout is going to appear. Now one of the other things that is kind of underutilized in the page builder is the space block. And the space block is really just a blank block but allows you to position elements. So one of the things that you might want to do is obviously we have an image here, it's going to take up its entire column width, and we could use these resize handles but it's really not the cleanest way to set up an image, but instead we're going to use a space block. So if we add the space block as a new column to this row, now we can choose exactly how that image appears without having to worry about those resize handles and maybe it distorting our image or giving us unexpected results. So that is how you would add a block on its own line but not take up the entire width of the block. So that space block will come in really handy for that. Of course, the other thing space block is good for is certainly adding vertical height. So if we want to gain a little bit of space between elements here, we can add a space block here as a new row and then maybe add that horizontal rule to kind of just give it a little bit more breathing room. Okay. So those are some of the ideas behind the blocks. Obviously, we have lots of other different types of blocks to choose from. In the structure setting, the structure area, you're going to find things that are related to the content of your site. So searching for different pages of your site, so an internal site search. Collection link will simply make a very simple link to another page on your site. And then from the calendar block all the way down to the month index, these are the blocks that are going to be directly related to displaying content from your blog. So typically most of our templates come with a sidebar, but they only display on the blog. And if that's the case and you simply want to add in some of your own content there, that's a good reason to go to View Blog and then switch over to that edit mode. And as you can see here, I've got a search block here for my sidebar. I've also got a tag cloud here, but we could add a calendar as well. And the calendar, of course, is directly tied to the blog page so we can show a list of events, or excuse me, a list of posts. You could certainly use this for kind of an events calendar if you were to set up another blog page to act as that event calendar. So any dates that are, that we've got posted here will show up in a bold format, and we might need to refresh it here for that to show properly. So here we've got a bold, and of course here are the 2 posts that we made, or the post that we made on the 28th, and of course we can click on that to view the entire post. So it's a great way to again display your posts by date and allow folks to scroll through the calendar to kind of see what was happening on that day. So that is the layout engine, and again, just before we round off the workshop here, I'm going to go back to the Twitter feed and the Google Google+ page, double-check to make sure that we've got some questions answered. And of course, this video is being recorded, so we'll have that up on YouTube pretty quickly as soon as this is done. Of course, everybody that is watching live on our Google+ page will be able to see this in real time too, so pretty cool. So let me—

Yeah.

Head back to our questions here and see if we've got any What are the plans for the Android app? Any focus on Nexus tablets? I don't have any information as far as where we're going with Android. Obviously, Chris handles the iOS apps. Maybe that would be another great Hangout. We can maybe get Edison on the show and maybe see if we can get his input onto where that's going. But of course, we announce things like our updates to apps and new apps and that sort of thing on our blog. So if you head over to blog.squarespace.com, you'll be able to get the latest information directly from us. I mean, sometimes, to be honest with you, I don't find out things until they actually post them on the blog too. So that's kind of how things occasionally work around here. And so if you head over to blog.squarespace.com, I'll make sure that everybody can see that. So it's really your— the blog is again the front lines of our new announcements and things like that, and certainly any Android or iOS or any announcements like that are going to be posted there. And okay, so that was from the Google Hangouts. Let me double-check our Twitter feed here. Again, if you were sending questions to us via Twitter, make sure you use the hashtag #SQSPHangouts. Another question, due to Hurricane Sandy, how is Squarespace HQ doing aside from the servers and how is the workload like for the Great question. Thanks for asking. You know, we we did extremely well considering the circumstances that we were in. You know, if anybody had been following along with the updates, it was crazy. It was and it was a very kind of surreal time for us too. You know, we were really concerned obviously about. potentially having our customer sites shut down and obviously didn't want that to happen. It literally came down to hauling buckets of fuel up 17 flights to the roof of this building on Wall Street and then dumping that gallon bucket into the generator just to keep things going. We had a huge crew of people from the office Engineers, designers, I mean, everybody pitched in. It was crazy. So, but I mean, aside from that, which was obviously a crazy experience, we're doing fantastic. We obviously didn't have any— no damage to the office itself. We didn't have any issues here at the office other than there was no power during that week directly to the office. So people that— especially our support team— We're still giving support all throughout the storm. We never stopped giving email support, so we were there 24 hours. A lot of them work remotely from home, and luckily we had several people that were able to work remotely and did not lose power or internet or anything like that, so they really kept us going. On behalf of the support team, I want to thank everybody for their well wishes too. That was really nice to get from our customers as we were kind of not sure what was going to happen there. So definitely a crazy experience, and everything is good here though. We're basically back to normal at the office now. You know, we're certainly still very concerned about the people that don't have power or a place to stay, and so we've even put up a couple of donations and things from within our office. So great questions. And let me check Twitter one more time to see if anything else floated in. Okay, well, that really looks like the questions that we're able to answer at this point. Again, I definitely want to thank everybody for Um, hanging out with us today, and hopefully we will be able to see you folks, uh, at the next Hangout. Again, hopefully we'll have one next week, um, and we haven't rounded up any guests for that yet, but if you have any, um, topics you'd like to see covered or suggestions, general feedback, send us an email. Let us know, hangouts@squarespace.com. We'd certainly like to hear from you, maybe what you would like to What you'd like to see come from our Hangout time. We're certainly open to any and all suggestions. So again, I definitely want to thank everybody for hanging out with us again today, and happy Squarespace-ing. Thank you.