A "New!" Page

in

Creating a new home page for Sketchbook B

I’ve had Sketchbook B since 2008. And for the entire life of the site, it’s been pretty much the same structure — the home* page is the main blog page. During the summer, I started experimenting with a new page design that could replace the home page. I wanted to figure out a way to quickly highlight everything that is on Sketchbook B, not just the blog.

The site has been hosted on Squarespace for the last 8 years and has migrated from version 4 through version 7. As a result, I’ve never completely taken advantage of some of the newer, more powerful options that are available.

Squarespace lets you easily pull in and format content from other pages on your site. So I was able to create a page with summary blocks for blog posts, recurring series, my typeface designs and social content like Instagram. 

It took me a little while to figure out exactly what I wanted and make sure the new page rendered the way I wanted it to on mobile. Squarespace does a great job of building a responsive site, but some of the individual summary blocks didn’t always behave in mobile or tablet views the way I expected.

As a result of the tinkering, I started playing with custom CSS in Squarespace. I had forgotten how customizable everything is and I can’t wait to experiment with it some more.

A “New!” page is now in the navigation.** I'm going to continue to work on it, but I like it enough to make it the first thing a visitor sees when they type in sketchbookb.com. The blog page remains at the same address: sketchbookb.com/journal. If you prefer the other view, just bookmark it and it will be like nothing has changed.

* I hate the term home page. It seems so old to me. When I first started playing on the internet in the late 90s, “webmasters” built and maintained “homepages.” But alas, I don’t have a better term. Maybe landing page?

** Yes, the "New!" includes an exclamation point. I don't normally use exclamation points, but I liked it here...

Bob Wertz writes about design, technology and pop culture at Sketchbook B. Bob is a Columbia, South Carolina-based designer, creative director, college instructor, husband and dad. He’s particularly obsessed with typography, the creative process and the tools we use to create. In his spare time, he tinkers with the site design of Sketchbook B. Follow Bob on Twitter and Instagram.

Little plug for Squarespace (and a friend's book)

in

Squarespace is everywhere these days. I hear their ads on Sirius XM. And tonight, I just saw their television ad on the Super Bowl.

I've hosted Sketchbook B on Squarespace since I started the blog in 2007. It's crazy to see how much they've grown and their product has gotten significantly better over time. I wrote a brief review of Squarespace 6 last year. They've added a bunch of features since that review.

If you've spent any time with a content management system like Wordpress, you should be able to figure out Squarespace quickly. It's pretty intuitive. But if you know some CSS, you'll be able to get even more out of it.

If you are the type of person that learns better from a book, Columbia designer Kris Black actually wrote the book on Squarespace. He's a illustrator, former Squarespace-tech-support employee and all-around good guy. His book, Squarespace 6 for Dummies, is available through Amazon, on Kindle and Apple's iBooks store. I have a copy of it and Kris really does a good job of summarizing the basics. So if you have decided to start a Squarespace site and want a good introductory book, pick it up.

Overhauling...

So it’s been exactly one month since my last update… I’m going to be starting the blog back up shortly… and I have some new projects and typefaces to unveil. 

In the meantime, I’m overhauling this site over the next couple days. I’ve learned a lot about what Squarespace can do since I’ve started the site. And some of the sections, I really need to rebuild completely. So if something looks unfinished, it probably is.

Adding Twitter status to Squarespace

in

I wanted to add my Twitter updates to my Squarespace site. It’s really simple, but I didn’t find much on how to modify it. So I figured I’d post details on adding Twitter to a Squarespace site and customizing the appearance. Some of this may be helpful for adding Twitter to other sites, but I’ve written this specifically to apply to Squarespace.

Adding the HTML

I went to Twitter and copied the HTML “badge” code removing a few elements that I didn’t need. (I’m not fond of the Flash versions…) I created a new HTML widget in the sidebar and pasted the following code…

<div id=”twitter_div”>
    <ul id=”twitter_update_list”></ul>
</div>

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/USERID.json?callback=twitterCallback2&amp;count=1”></script>

Two things to note in the final version that you will use. USERID will be replaced with your Twitter ID. And the last line says “count=1.” This is the number of Tweets posted to your site. I wanted a single update posted so mine says “count=1.” You may want 3 or more and you set that number here.

Adding the CSS

The next step is to style it to match your site design. I added four lines to the Custom CSS section under the Style Editing tab:

#twitter_div { text-align: right; color: #727277; font-size: 18 px; }
#twitter_div a:link { color: #727277; }
#twitter_div a:hover { color: #f97c00; }
#twitter_div span { display: block; margin-bottom: 10px; }

I used #twitter_div to modify the general properties, including the post itself and the time stamp below it. (By default, font size of the time stamp is set to be 80% of the post size.)

The #twitter_div a:link and #twitter_div a:hover are used to modify the appearence of the links.

The #twitter_div span section modifies the properties of the tweet. Inserting “display: block” separates the post from the time stamp. (Note: I found some tips online that added “display: block” to #twitter_div a:link. That works sometimes, but causes problems when you include a link, reply or mention in your post.) “Margin-bottom” adds space between the post and the time stamp. You could use “margin-top” here to add space between posts if you decide show more than one post.

And obviously, you can insert your own CSS here to match the design of your site. Have fun playing around with it.

Changes to the site...

in

I’m going to be making some modifications to the site over the next few days. Trying to change around some of the structure. Since I first started the site, I’ve learned a lot about what I can do in Squarespace so I’m going to attempt change a few things around.

So if you see something that looks unfinished, it’s probably because it is.