TheOverAnalyzed

Forward ¶

When I launched TheOverAnalyzed last year, I knew nothing about HTML, CSS, JavaScript, or web design in general. Now, a year later, I still know nothing relatively nothing about the aforementioned topics. But, I know a whole lot more than I did.

History ¶

Squarespace is the all-in-one^[1] made building a website insanely easy. Everything everyone has said about it has been pretty accurate in my experience. Typically, the biggest barrier to creating something is the lack of knowledge surrounding the framework upon which you might build. For making websites, that translates to the biggest barrier being a lack of knowledge regarding HTML, CSS, JavaScript, and Web Design.^[2] Squarespace takes care of all that. With all of that out the way, I was able to focus on content, which, at the end of the day, is all that matters.

From The Beginning, I Was A Tinkerer ¶

I started with the Native template, which was, like most templates, insanely sparse and clean-looking. It had a centered main content format, and by default, the top navigation was placed underneath the logo image, which was so much more pleasing than on the top right, which was the format of some of the other templates.

Here’s the Native demo page:

Eventually, I noticed that the way Native implemented blockquotes was kind of wonky. After some initial hesitation,^[3] I decided to switch to the Avenue template, which was a lot like Native, but had blockquotes like I wanted.

Here’s the Avenue demo page:

And here’s a screenshot^[4] of my site from just a couple of weeks ago, before the first big design change:

Things Got Hairy ¶

I had been wanting to make a few changes to the way my posts behaved. For instance, I wanted an arrow → to follow the title on Linked posts, and I also wanted a permalink ∞ to follow the the Linked post’s date. There didn’t seem to be a way to do that from within the Configuration section. I looked around for some ideas, and found a post discussing the {.passthrough} string. That post offered a great solution, but the author noted that the string was only exposed to Squarespace users with the Developer Platform turned on.

Huh. I had heard on a podcast^[5] that Squarespace had a Developer Platform. Interesting. I wondered what that was all about, so I visited the developer landing page. It seemed pretty straightforward?

That is, until I got to the part that mentioned [Git][13] “Wikipedia: Git”) and [SFTP][14].

Uh, no thanks.

I had used GitHub a bit last year when I was [contributing][15] to a [repository][16] that contained jailbreak icon themes. I would find the BundleID for the app that needed theming, as well as the filenames of the icon sources. I would then find the iTunes Artwork using this [site][17],^[6] and then parse all that information into a new Issue for the designer to make the icons for the theme. Finally, I would use AFC to transfer to my iOS device, via USB, the themed icon sources to their respective folders in the app bundle and insure that they were showing up properly.But the idea of using Git or SFTP seemed to require much more nerd knowledge than I had at the time.So what did I do?I forgot about it, and just settled on not having Linked posts behave like I wanted.

Are You Kidding Me? ¶

Of Course I Didn’t Settle.

I did what have always done when it comes to nerdery: I took the plunge. I turned on the Developer Platform.

Now What Do I Do? ¶

I wasn’t sure whether Git or SFTP was the way to go, so I started with Git (due to my previous experience with GitHub). Turns Out™ that using Git involved using Terminal to push changes to the server, which seemed a little too [John Siracusa][18] [Mac OS 9][19] for me.

So SFTP it was.

Interestingly, I wasn’t sure how to use SFTP (or [FTP][20]) either. So I checked in with the great teacher of our time, YouTube, and found a real [gem][21]. This guy basically spelled out how to use Espresso to manipulate my site in any way I wanted.

How cool.

Trying Some Things ¶

The first changes I made, like most ‘first times,’ were disastrous. I completely broke the site. I accidentally made changes to global.less without realizing what I had done. Unsure how to fix things, I turned off Developer mode in Squarespace, which reverted the site back to how it was before turning Developer mode on. Whew. Everything was fixed. Then I turned Developer mode back on, and tried again.

I quickly familiarized myself with blog.list and blog.item and was able to make the arrow and [permalink][22] changes like I wanted (and much [more][23]).

Here’s a screenshot of Permalinks Version 1.0:^[7]

![Permalinks Version 1.0][24]

Another Template Change ¶

Things were looking [how I wanted][25]. Still, I wasn’t quite satisfied.

One [stretch goal][26] I have had since the beginning is to be sponsored by [The Deck][27]. I have seen their ads on [Daring Fireball][28], [Marco.org][29], [Six Colors][30], and [The Loop][31]. These are the blogs I aspire towards, so of course I wanted to be like them.

And while I realized that this was so far off, I wanted to be ready.

Being ready meant being able to implement the ads as soon as Jim Coudal knocks on my door.^[8]

Problem was that I couldn’t seem to envision a place for the ads on my current site. Avenue, just like Native before it, featured centered content. Where would[ The Deck][32] ads go? Unlike almost every other terrible banner ad, The Deck ads are confined to a relatively small, square block. I couldn’t place them at the very top of the site, because they would take a way from the logo. I also didn’t think it would be fair, traffic-wise, to place them at the bottom of the site, say, above the ©.

Most of the other sites sponsored by The Deck had a sidebar.

Naturally, I needed a sidebar.

I noticed [Above Avalon][33] a few weeks ago, and loved the non-scrolling (position: absolute) sidebar. I also loved that the site was built on Squarespace. This meant I could easily implement a sidebar on my own site.

Here is Neil Cybart’s Stratechery-esche Above Avalon:

![Above Avalon’s homepage][34]

![Look at that .main-content scroll][35]

Sidebar Time ¶

I looked around the templates and discovered that Cybart had implemented a relatively unchanged version of [Wells][36]. Wells is a great template for photographers or graphic designers, as it really makes content like pictures or graphics or videos the star of the web view.

Here is the Wells demo:

![Wells template][37]

![And here is TheOverAnalyezd with Wells (Version 1.0 of the site)][38]

Note that the content was pushed all the way to the left of the window. This wasn’t terrible, but it also wasn’t [ideal][39]. I wanted the content to be basically centered, regardless of how big the window was.

After consulting with the [Squarespace Answers Forum][40], I was able to move the content over to the center, more or less:

![Sorta-centered][41]

But this led to a terrible design on mobile:

![Mobile, pre-‘custom.less’][42]

So That’s What This Does ¶

In trying to fix the padding of the site on Desktop, I was making changes to global.less, which is a stylesheet that makes changes to all implementations of the site—desktop/tablet/phone.

What I should have been doing was using the @media query to insure that the changes made to the desktop/tablet versions of the site did not^[9] effect the phone-sized versions of the site.Now, any sane person would have probably just traced back every change made to global.less and reverted it back to the default. But I’m not sane. I’m figuring things out as I go. So what did I do?

Starting Over ¶

Yeah, I started over. I turned off Developer mode, and then turned it back on. This reverted my site to the default Wells configuration.

Doing It The Right Way ¶

Here is how I decided to re-style the site, using .less slash .css stuffs:

• I created a custom.css, which would allow me to make changes to the style of the site without being unable to ‘revert’ back to the default global.less and/or mobile.less configurations.

• I then modified template.conf at the string "stylesheets" such that custom.css was loaded after mobile.less, which was, wonderfully, loaded after global.less by default^[10]

  • The output should look like this, at least for the Wells template:

    "stylesheets" : [ "tweak.less", "global.less", "mobile.less", "bigfoot-number.css", "custom.css" ]
    

• I wanted to ensure that the mobile version of the site extended all the way to iPad in portrait mode, but, for iPad in landscape mode, I wanted the site to load in Desktop-mode.

  • In custom.css, I used an @media only screen and (min-width:769px) modifier, which basically calls for implementing parts of custom.css only when the width of the display window is 769px or greater.^[11]

  • For kicks, here is the content of that @media query:

    @media only screen and (min-width: 769px) { /* This so the custom CSS only applies for certain devices. The format above should work to only apply the rules for browser widths of _size here_px and upwards. */
    	body {
    		a:hover {
    			background-color: #dbdbdb;
    			border-color: #dbdbdb;
    		}
    	}
    	
    	.main-nav {
    		a:hover {
    			background-color: @siteBackground; 
    			border-color:  @siteBackground; 
    		}
    	}
    	
    	#canvasWrapper {
    		margin: auto;
    		min-width: 200px;
    		max-width: 450px;
    		padding-right: 350px;
    	}
    	
    	#pageWrapper {
    		padding-top: 15px;
    	}
    	
    	#headerWrapper {
    		left: auto !important;
    	}
    	
    	.logo.image img {
    		margin: 20px;
    		margin-left: -5px;
    		margin-bottom: 0;
    		width:@logoSize;
    	}
    	
    	.logo-subtitle {
    		.subtitle-font;
    		font-size: @subtitleSize;
    		color: @subtitleColor;
    		margin-top: -10px;
    		margin-right: 61px;
    	}
    	
    	#canvas {
    		padding: @outerPadding;
    		min-width: 700px;
    	}
    	
    	#headerWrapper {
    		position: relative; 
    		z-index: 2;
    	}
    	
    	#header, #page, #footer {
    		padding: 0;
    	}
    	
    	#topNav {
    		margin-bottom: 20px;
    	}
    	
    	.sidebar-text-alignment-center #headerWrapper {
    		text-align: center;
    	}
    	
    	.sidebar-text-alignment-right #headerWrapper {
    		text-align: right;
    	}
    }
    

  • That worked great, but my design broke down when I zoomed in on the iPad when in landscape mode.

  • I had to do some sidebar hackery such that the #headerWrapper for .sidebar-position-left was position: absolute !important

  • Here is the @media query I used to target iPads in landscape orientation:

    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    	body.sidebar-fixed {
    		&.sidebar-position-left {
    			#headerWrapper {
    				position: absolute !important;
    			}
    		}
    	}
    }
    

One More Thing ¶

The final piece left in the puzzle was the logo.When I started the site, I was lazy. Heck, I still am lazy. But I was even lazier a year ago. I wanted my logo to contain some reference to my faithful companion animal, [Smokey][43].

Squarespace had just rolled out their [logo designer tool][44].^[12] I used it to combine a stock Getty-ish graphic of a dog with a relatively boring sans serif font for the site title’s text.I think it was actually a pretty nice logo considering it took me about 5 minutes to put together:

![Logo Version 1.0][45]

But from the beginning, the plan was always to someday create my own.

And that takes us to the present, conveniently serving to book-end this post.

The Logo ¶

Pixelmator ¶

I started with [Pixelmator][46]. Hands-down, the team at Pixelmator have designed an amazing Photoshop alternative for Cocoa / OS X lovers like myself. I’m no photographer, but from what I gather, Pixelmator features about 90% of what Photoshop or Lightroom offer. That was more than enough to win me over.

When they launched version 2.2 a couple of years ago, I remember hearing about [Vectormator][47]. When I originally caught wind of that addition, I made a mental note to myself that if I ever needed to create a graphic, I was going to use Pixelmator.

But as I quickly found out, Pixelmator’s (Vectormator’s) vector graphic support was rather limited. I actually created a graphic using Pixelmator, but was unable to export it as a scalable vector graphic (SVG) file. I tried but just couldn’t find a way to do so. I contacted their team, hoping I was just overlooking something trivial.

Alas, no:

@ToniWonKanobi Vector file formats? No, they are not supported.

— Pixelmator Team (@pixelmator) February 10, 2015

There was no way to properly export an SVG from Pixelmator. Instead of being an all-out graphic design fork from Pixelmator, Vectormator merely enhanced photos for Pixelmator.

If At First You Don’t Succeed ¶

I needed a program that was easy to use like Pixelmator, but allowed easy exportation of a vector file. Interestingly enough, through my previous contact with the Pixelmator team, [Sketch was suggested to me][48].

Sketch ¶

Sketch is on its [third major version][49] now, and while its true power lies in its excellent suite of mobile design utilities, the app is great for just run-of-the-mill website stuff, like logos.

I started with a photo of Smokey:

![Original picture of Smokey][50]

Then I reduced the opacity to 50%, to make vectorizing the image easier:

![Opacity reduced][51]

And here’s the vector, minus some smoothing:

![Original vector][52]

And here’s the circle logo:

![Circle logo][53]

Next, the logo with text. I chose Futura Condensed ExtraBold. I like the weight, and I especially like Futura because of its versatility. It’s not as trendy or readable as Proxima Nova (body-font-font-family), sure. But it conveys a certain amount of gravitas, without seeming too formal. It’s almost comical, but only slightly so. I think that suits the site well:

![Logo with text][54]

Finally, the full logo with the subtitle. I included the subtitle because I originally had trouble aligning the subtitle text on the different target displays. Making it part of the logo made things easier for me:

![Finished logo with subtitle][55]

I also used the Circle Logo to make the browser favicon:

![Favicon][56]

---

I spent a fair amount of time trying to use my (Logo.svg) in place of the static image Squarespace uses for the logo. This was important to me because I wanted everything about my site to look good on Retina displays. And, even though most humans wouldn’t zoom in to this level:

![Broken on mobile][57]

… I wanted to be ready in case they did.

I ended up having to edit the site.region file that Squarespace uses as the site template, more or less.

Finally ¶

Finally. [It was finished][58]. I was able to get things looking how I want.^[13]Desktop:![Sidebar. Desktop. Yes.][59]

iPad (Portrait):

![iPad, portrait][60]

iPad (Landscape):

![iPad, landscape][61]

iPhone:

![iPhone, portrait][62]

---

Conclusion ¶

As far as I can tell, I have reached the limits of what one man can do for a given Squarespace template. I recently listened to an old [episode][63] of [Build and Analyze][64], in which Marco talked about [Second Crack][65]. I then scoured over Casey Liss’s blog to find this [post][66] discussing Camel, his blogging engine similar to Second Crack.

I want the dual RSS feeds of Camel, and the easy bookmarklets that Second Crack offers.

Maybe I’ll just have to ‘fork’ those both together into one amazing blogging engine.

We’ll see.

Until then, maybe I can get back to writing.

[13]: https://en.wikipedia.org/wiki/Git_(software [14]: https://en.wikipedia.org/wiki/SFTP “Wikipedia: SFTP” [15]: https://github.com/andreaslarsen/habesha/issues?q=is%3Aissue+is%3Aclosed “Issue on Habesha GitHub project page” [16]: https://github.com/andreaslarsen/habesha “Habesha project page on GitHub” [17]: http://bendodson.com/code/itunes-artwork-finder/index.html “iTunes Artwork Finder by Ben Dodson” [18]: http://hypercritical.co “John Siracusa’s blog, Hypercritical.co” [19]: https://en.wikipedia.org/wiki/Mac_OS_9 “Wikipedia: Mac OS 9” [20]: https://en.wikipedia.org/wiki/File_Transfer_Protocol “Wikipedia: FTP” [21]: https://www.youtube.com/watch?v=HzravxTgTe4 “YouTube: Setting Up Squarespace 7 Developer Platform with Espresso2 and LiveReload” [22]: /2015/2/1/permalinks-in-squarespace “My post outlining how I added permalinks to my linked posts” [23]: /2015/1/31/bigfoot-footnotes-in-squarespace “My post about incorporating Bigfoot footnotes into Squarespace” [24]: https://d.pr/i/1lSZU+ “Permalinks Version 1” [25]: https://d.pr/i/1cvPC+ “Getting closer” [26]: http://www.forbes.com/sites/stevedenning/2012/04/23/in-praise-of-stretch-goals/ “Forbes: ‘In Praise Of Stretch Goals’” [27]: http://decknetwork.net/ “Jim Coudal’s ad network, The DECK” [28]: http://www.daringfireball.net “John Gruber’s blog, Daring Fireball” [29]: http://www.marco.org “Marco Arment’s blog, Marco.org” [30]: http://www.sixcolors.com “Jason Snell’s blog, Six Colors” [31]: http://www.loopinsight.com “Jim Dalrymple’s blog, The Loop” [32]: http://decknetwork.net/ “Jim Coudal’s ad network, The DECK” [33]: http://aboveavalon.com “Above Avalon” [34]: https://d.pr/i/11RRa+ “Above Avalon” [35]: https://d.pr/i/19QPN+ “Scrolling Above Avalon” [36]: http://wells-demo.squarespace.com/ “‘Wells’ template on Squarespace” [37]: https://d.pr/i/12IAy+ “‘Wells’ template on Squarespace” [38]: https://d.pr/i/Q7z1+ “TheOverAnalyzed with ‘Wells’ template” [39]: https://d.pr/i/14BaR+ “This is the centering I was going for” [40]: https://answers.squarespace.com/questions/68749/wells-how-can-i-center-my-main-content “Wells: How can I center my main content?” [41]: https://d.pr/i/EfZ+ “Sorta-centered” [42]: https://d.pr/i/1l1L9+ “Mobile” [43]: https://d.pr/i/1h4fZ+ “Picture of Smokey” [44]: http://squarespace.com/logo “Squrespace’s logo-creation page” [45]: https://d.pr/i/1b8Ss+ “Logo, v1” [46]: http://www.pixelmator.com/ “Pixelmator’s website” [47]: http://www.pixelmator.com/blog/2013/05/14/introducing-vectormator/ “Pixelmator’s blog post introducing ‘Vectormator’” [48]: https://twitter.com/pixelmator/status/565182862128082946 “Pixelmator suggesting Sketch” [49]: http://bohemiancoding.com/sketch/whats-new/ “What’s new in the newest version of Sketch” [50]: https://d.pr/i/19uo2+ “Original picture of Smokey” [51]: https://d.pr/i/19gqG+ “Opacity reduced” [52]: https://d.pr/i/9MUF+ “Original vector” [53]: https://d.pr/i/dOCb+ “Circle logo” [54]: https://d.pr/i/19wtr+ “Logo with text” [55]: https://d.pr/i/qW89+ “Finished logo with subtitle” [56]: https://d.pr/i/13py7+ “Favicon” [57]: https://d.pr/i/1hJo2+ “Site broken on mobile” [58]: http://biblehub.com/john/19-30.htm “‘It is finished’ quote” [59]: https://d.pr/i/1bVv2+ “Sidebar on desktop version of website” [60]: https://d.pr/i/OgsK+ “iPad, portrait” [61]: https://d.pr/i/pAIQ+ “iPad, landscape” [62]: https://d.pr/i/1fcI8+ “iPhone, portrait” [63]: http://5by5.tv/buildanalyze/18 “Build and Analyze, episode 18” [64]: http://5by5.tv/buildanalyze “Build and Analyze podcast” [65]: https://github.com/marcoarment/secondcrack “Marco’s static blogging engine” [66]: http://www.caseyliss.com/2014/5/2/camel-open-sourced “Casey Liss’s blog post about open-sourcing ‘Camel’”