A "New!" Page

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.

All of my fonts in one place...

I just completely overhauled the fonts* section of Sketchbook B. You can now see everything I've released over the last 7 years** in one place. I've created bigger previews and a more interesting layout.

A few notes:

  • I had forgotten about some of my older Fontstruct designs. I really need to dust some of them off and finish working on them in Glyphs. Woodrow and Grande, I'm looking at you.
  • Also, I completely need to do something with my dingbots. Maybe a t-shirt? Coffee cup?
  • The pro fonts are available through Creative Market and/or MyFonts. Free fonts can be downloaded directly. And Fontstruct designs can be downloaded from Fontstruct after you sign up for a free account.
  • Squarespace really does make the process of creating these pages easy. I've had a Squarespace site since 2008 and it just keeps getting better.

The fine print: * I really prefer the term "typeface" over "font," but I fear that is a losing battle. And a much longer blog post. ** Well, everything that I've released with the exception of a couple of designs I took off the site until I can update them...

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

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.

A few of my favorite things

sbb_post_favorite_things.png

I often get questions about what software and services I use for my Sketchbook B projects. (Especially for type design.) Below is a list that covers pretty much everything I'm currently using.

I've also added a My Gear page to the About section. My plan is to keep updating the page as I discover new tools.

Software

Creative Cloud / Adobe – I should probably put this under services, but I have a subscription primarily for InDesign, Illustrator, Photoshop and Acrobat. Plus a whole lot of apps and type to play around with.

Glyphs / Mac – My primary type design app. Powerful and delightful to use. If the full version is too much for you, there is a Glyphs Mini that is significantly cheaper.

Byword / Mac / iOS – I've tried a few Markdown writing apps. Byword is my favorite. Works great on the Mac, iPhone and iPad.

Scrivener / Mac – I've been working on some long format writing. Scrivener is an amazingly powerful app and well worth the investment. And maybe someday, I'll finish the book...

Flare / Mac– Kind of like Instagram for the Mac. Let's you massively customize effects, filters, textures and more. I like to use it to add texture to my illustrations.

Reeder / iOS – My mobile preference for digging through all the RSS feeds that I subscribe to. Supports Feedly, which is what I use now that Google Reader is gone. I can't wait for the new Mac version.

Services

Dropbox – How did we get anything done without Dropbox? Online storage made really, really easy.

Evernote - I'm addicted to Evernote for stashing all of my ideas, notes, stories, articles and other random stuff that I want to be able to find later.

Wunderlist - I've tried lots of to-do list programs and services, but Wunderlist is my favorite. And did I mention it's free? And Wunderlist has web, Mac and iOS versions. Love it.

Feedly - I was a little panicked when Google Reader was discontinued. But Feedly is a really great service with a lot of potential.

Squarespace - Sketchbook B is hosted on Squarespace and has been for a long time. It keeps getting better. The latest version is really, really impressive.

Tumblr - I use Tumblr for Wanted in Columbia. A nice option if you want to host a simple blog for free.

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

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...

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.