Drag, Drop, Insert and Row

If you're moving content around in Squarespace 6, you may get a little confused/frustrated. We've probably all been there, and here's one tip that will probably help you.

I will go into greater detail on the Content Editor soon, because there's actually some important milestones (AHA-MOMENTS) to learn before arriving at this one.

But here you go— here's the short video:

I was a guest on the MediaDrift podcast and all I got was this t-shirt.

Thanks to Anton Peck for letting me share what it's like to live in a barn, to design Squarespace sites and to dream about someday getting to start any of the hundreds of projects on my back-burner.

I had a blast prattling-on so.

Listen over at MediaDrift.com

Using a Squarespace Menu Block for FAQ's

I've used the V6 Menu Block quite frequently when building restaurant sites, and found it fairly easy to style (using custom CSS) and quite easy for the end-user to manage the restaurant menu's content.

See Squarespace Support's documentation on USING THE MENU BLOCK.

It occured to me today that an inline menu system would be beneficial for FAQ's— a way for a visitor to quickly navigate to particular content without leaving the page (or getting lost). This is certainly typical to what I've used out in the world.

Offsite design-pattern examples: [1 2 3]

So, it's quite simple to add a (restaurant) menu block, and just add your Categories, Questions and Answers.

Using the built-in formatting options is quite simple. It's all documented within the block component as well.

With a little code-inspection and some quick custom CSS, you can make the menu appear the way you want it to. In this example, I've only changed the navigation text into "buttons":

/* FAQ */

.menu-selector {
  text-align: left !important;
}

#navbuttontop {
  background-image: none !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-transform: uppercase;
  color: #fff;
  background-color: #000 !important;
  padding: 6px 20px;
  color: #fff !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 6px;
}

(screenshot)

Applying a little custom styling to taste. (YES, A RESTAURANT MENU PUN)

Researching Real Estate Listing Options

In most instances, Real Estate sites will subscribe to a listing/search service, and the service will allow them the ability to add the code to their site. There are probably two ways this is done. 

Embedded Javascript
- this is the preferred method because most developers will allow the site owner to customize the look & placement of the code. 

Iframe Solution
- this is probably the most common that we will run into out in the real estate world. Because basically, anyone can add an I-frame to a website. The biggest problem with using I-frames, is the fact that we cannot customize the look/design of the entire frame. This is why all many real estate sites will see that the listing engine page doesn't match the rest of the site. It looks like there is a hole punched to view the site beneath, and that is precisely what is happening.

In the BiffWard example below, you will see the top left portion is actually on bifward.com, and the center – content area is served up by an external service, or other creative workarounds to bring in Iframes.

On the following example, I added the ability for the cleaners customers to log into an external site, and using some special code we customized that Iframe to be a better experience. (Click on LogIn or Create Account) http://www.klinkecleaners.com/online-account/ 

However, the added drawback to using Iframes, is the fact that they are not responsive-friendly. In-fact, Iframes are responsive-nasty.

Their size doesn't adapt to the screen-width, so mobile/tablet visitors would need to have something else to view. We can detect these visitors and the screen size and offer a different component for those screen sizes, but it's usually a better solution to find a JavaScript component that is either mobile-ready, or something we can smack into place with a code-hammer.

You could Google to find software vendors that real estate agents are using… or you could just snoop-around a bit (STEPS BELOW)

 1. Visit the site and look/search for properties. 

2. Right-click on the search results area and VIEW FRAME SOURCE. At least in chrome, you have the ability to view the Iframe's frame :)

 

3. looking at the code, you should see references to the software that's being used. Especially in the I-frame examples, the end-user doesn't have the ability to take any of those references out. So the software vendor will obviously want to keep selling their product by listing their name/app/platform within the code.

 If the code that you see is a JavaScript solution, then the end-user is probably still obligated to keep references to their code within the site. (Additionally, companies will pay a premium fee to remove logos and links to the tech-provider's site.)

4. In this example, I would bet that Tucker has a national account with Sierra Interactive, and probably many Tucker agents can use Sierra? I'm not sure how these local/regional/national accounts work exactly, but I plan to get to the bottom of it. 

Update on Wednesday, July 17, 2013 by Alan Houser

I'm finding lots of useful "real estate software" articles on 1000watt.net [ I Googled ]

Re-living Squarespace Designs in the Wayback Machine™

As I'm finally (I know!) working on re-designing my own site on Squarespace6, I thought I would take a break to walk back through Squarespace's site Designs and giggle a little. 

These are screenshots archived between 2004-2006 at Archive.org's Wayback Machine— a place that's fun for some and embarrasing for others. (trust me)

I would love to keep building this collection, so please contribute what you find. 

12345

Update on Tuesday, July 2, 2013 by Alan Houser

Funny: if you dig even deeper on Squarespace.com, you might even find a Pizza Company who was using the domain name. :)