a web thing


Tag: website

Creating “Letters”

I’ve been thinking about starting up another podcast (I had four of them in back in College) and after setting a personal deadline of the end of January, I finally got it together!

You can learn more about the podcast from visiting the site or listening to the introductory episode, but basically it will have a different topic in each episode and feature opinions, perspectives, and thoughts from other people.

Since all the podcast stuff has its own home online, I’d like to briefly share my process for getting everything set up here:

1. Site & Hosting

This was the easiest step for me, because I already have hosting (thanks Dreamhost!) and a domain name set up. I might buy a unique domain name for the podcast, but that’s a bit premature right now. For the time being I set up a sub-domain (anything prefixing the main domain) as letters.robrogan.com.

If you don’t have any of the above, you’ll want to shop around for some affordable hosting and a domain name. Both of these should be super easy to find with Google and I don’t feel like writing a tutorial. ;)

2. Setting up the CMS

A CMS is yet another tech acronym for Content Management System. You’ll have lots of content—blogs, podcasts, etc.—and you’ll want to manage it. WordPress is by far the easiest to set up in my opinion so I’m using that.

With WordPress, you can quickly get it set up to distribute your podcast with a single plugin. There are a few to choose from but so far I recommend: Seriously Simple Podcast. What a godsend. Literally all I had to do was fill in the title of my show, author, description, and a few other pieces of info and it was good-to-go.

There are a few other details that I put into my WordPress, but you should set it up however you like. I’m trying to find a balance between practical, low-maintenance customization with just a dash of unique design. Using the plugin Easy Google Fonts I changed the typeface to a much softer sans-serif called Nunito. Note: I would not recommend using more than one or two web fonts as each font file increases the loading time for your site.

3. Making the Podcast

Well this point could be all sorts of things, but let’s just say that at some point you’ll have to sit down and record some audio, then edit the track, save it as a reasonably sized *.mp3 and upload it to your blog’s “Media” (if using WordPress).

In my case, I have a USB microphone (even a cheap one is a lot better than the built-in source) and I recorded with Adobe Audition. If you don’t have Adobe then Audacity is 100% free and gets the job done. Podcast editing a pretty big topic that is covered elsewhere better than I could here, so I’m not going to go into detail.

4. Album Art, Finishing Touches

People can agonize for hours—nay, days—trying to create the perfect artwork for their show. Right from the start I told myself that it will never be perfect, and it’s not going to ooze symbolism either. Erring on the side of simplicity, I just typed up the podcast name in a few fonts and colors and went from there.

I ended up using a strong serif font for the base, and then I masked-out most of an ornamented font, retaining just a few interesting characteristics, and overlayed that in a bright color. I think it has an interesting effect, so that’s good enough for me! Lastly, I needed something else to give it a bit of weight and not feel like a word just floating in the middle of a square. In addition to adding the two lines (reminiscent of lined paper), I added a thick border so that the light background didn’t get lost in the mix of a white web design or podcast app.

Letters podcast artwork

5. Now It Really Begins

So, setting up all of this was a bit of a chore, but in reality it’s just the beginning. I think the interesting challenge remains in creating each episode, especially if I require the participation of other people. I hope it turns into something great, but if not, it’s been a fun design and build process.

Redesigning the Map of the Web

Leverage what information representation can be

It may seem like old news to some, but I very recently got around to reading Frank Chimero’s treatise about the essence of a pixel medium in What Screens Wantand found myself musing about a potential Web that doesn’t conform to our assumptions of what sites and pages are supposed to be made of. I also found myself explaining the whole article to a couple of developer friends that didn’t want to read it themselves.

One key point

The article leverages some historical references with materials in product design, but most convincingly compares the state of the Web as we know it to our centuries-old use of maps.

In the way that a map is a representation of territory, which is likely skewed for one purpose or another, we can use a new one that suits our needs and changing the map doesn’t mean changing the territory. In that same breath, using a different map doesn’t imply the territory was “bad.” The lesson for technology and the Internet here is that we have long since built off of one convenient representation of data, information, and the nature of its exchange. Our concept of a web page is just one map upon the territory of computers and the protocols to connect them.

Chimero quotes Ted Nelson to reiterate our position in the digital world:

“The world is not yet finished, but everyone is behaving as if everything was known. This is not true. In fact, the computer world as we know it is based upon one tradition that has been waddling along for the last fifty years, growing in size and ungainliness, and is essentially defining the way we do everything. My view is that today’s computer world is based on techie misunderstandings of human thought and human life. And the imposition of inappropriate structures throughout the computer is the imposition of inappropriate structures on the things we want to do in the human world.”
— Ted Nelson, creator of hypertext

For more context, I recommend that everyone visits — or revisits — the site. The grand takeaway is that we can and should build something greater/better than than web pages. Not only can information be represented differently, but I think we are just barely touching on how flexibly it can respond to, and be interact with users. Laying back in a metaphorical Summer meadow with arms behind your head and eyes tracing the clouds, I could come up with wilder takes on a new Web, but it may be practical to focus on some softer, more accessible points.

Soft Revisions

Web content should branch off into more applications. While this already happens in mobile environments (perhaps too much so), the trend is inverted on desktop. As a service reaches a critical mass of content+popularity, or if the interaction is constrained by browsers, then it should live in more software than just a handful of browsers. Facebook is a great example of this thinking. Most people are using the app on mobile, but there is only a web interface on desktop. In the early days of twitter, I used the website and SMS to send tweets, but as soon as a desktop application appeared, that became my primary interface with the service. In that respect, it’s almost crazy that Facebook is just a website.

I’m not advocating for a fragmentation of the Internet into hundreds of desktop applications — that would be disastrous on many levels. When user adoption is no longer a huge issue, it could make sense for some sites tomature into internet-based software. Specifically to Facebook, as many people use it so frequently and often for long periods of time, it deserves an option to break out of the browser.

I think there’s a big opportunity for Finance; not necessarily a single bank, but perhaps a broader service (yes, MS Money tried that but I don’t see newanswers). I’m hesitant to list other recommendations, and can already see the counter-arguments, but I prefer to see that as a point of discussion.

Medium Revisions

No pun intended, but…

It’s already apparent that some sites are innovating how we share and interact — Medium.com being one of my favorites, for the side-line commenting that other sites are starting to adopt.

Hyper-specific sharing

I’m putting this in the bucket of “medium” revisions to the Web because it would require a bit more work than what already exists. With this idea I’m taking a note from two existing functions:

  • With Medium’s comment system, you can highlight a string of text, write a comment, and any user that reads the comment also see the same text highlighted again. This is the digital equivalent of pointing your finger to a point on the page that you’re referring to in a detailed discussion, or a well-loved book borrowed from a friend that shows underlines of passages that directly affected your friend.
  • Anchor links are a classic HTML tag that is seeing interesting use in contemporary websites. Long scrolling pages will use anchor link navigation to push users down to a segment in their single page site. Articles will reference specific explanations in a foot note. A List Aparttakes a subtle, but very useful approach by segmenting their articles so that an HTML literate user can share a specific section of the page to someone else. If you visit an article (example), and hover your mouse on a section title, it will display gray #anchor text that you can’t click but — with an experimental mindset — can append to the article URL as a bookmark you’re referencing when shared (example).

Combining the two features above would be a very interesting, and more personal method of sharing. Posting an article link on your social media account might interest a portion of your friends/followers, but it’s open-ended; a suggestion that “hey, you might be interested in this topic.” If you can highlight a paragraph or sentence, and have the page generate a dynamic anchor link to share with someone, that’s direct and suggests more intention. Akin to reading a book across from a friend, and handing it across the table so they can read just that one pithy paragraph, dynamic anchor linking and highlighting the referenced text is an excellent way to rekindle the human connections that seem to be fading away in our “social” media culture lately.

Hard Revisions

This the domain of true revolutionaries

Having been invited — so to speak — to think about an internet that doesn’t run on HTML, PHP, CSS, or any of these languages it has been raised on, I am starting to dream in abstractions. There must be alternative representations of our information-rich landscape, and most of us can only iterate or improve upon the existing system. These scrolling pages with various media buckets — usually requiring some kind of chrome/framework — that fit inside of a screen (if: responsive web design) are our current maps, representations of information.

What about the integration of more user info? Contextual browsing, listing, etc.? This implies some things that exist (foursquare), some things that don’t (the local paper where you’re online), and might be horrible ideas (who wants to read the local paper), but a very thin slice of that implication might be the turning point of something new and amazing.

Break the rules. If you can!

Link Drop (5)

Web Design +

— Use Font Icons (not images)
The Era of Symbol Fonts
We Love Icon Fonts
CSS-Tricks: The Big List of Flat Icons & Icon Fonts
– Web Fonts
FontSquirrel – Free fonts! All kinds
Google Web Fonts
Adobe Typekit

Art +

Taylor McCormick FlickrTaylor McCormick, Photographer
Catrina Dulay data-recalc-dims=Catrina Dulay, Graphic Designer
Brooklyn Soap CompanyBrooklyn Soap Team, Illustration*

*The rest of their site is nice too.

Might Be Cool I’m Not Sure +

Google Street View World – Crazy street view images

Spacing effect explained in 2 minutes — from: Memrise.com/Blog

Sometimes I repurpose entire articles on my website as a method of sharing. I just want to take yet another quick moment to explain that this is done all over social media (Facebook, Twitter Link sharing; Tumblr ‘reblogging’, and other new services ‘re-sharing’). For some reason, it feels plagiaristic to copy text from someone onto my site, so I make every effort to point to my sources. In fact, one of the links in the original article was broken, and this duplication has the correct link (to: “why do we forget?”).

I want to share this blog article with you because it directly relates to my experiences of learning language, and more specifically, I’ve found Memrise to be very useful (and when it works so well, it’s fun too). Memrise, as I’ve blogged about before, leverages current understanding of learning from cognitive psychology and language education; one of the most special ingredients to Memrise getting you to learn a lot of information (that sticks) in a relatively short period of time, is imposing spaced repetition. They explain it better than I do, so without further ado…

memrise blog

Spacing effect explained in 2 minutes

by benwhately on 6 August 2012original article

The spacing effect is one of many bits of science that Memrise uses to make learning as effortless as possible.

Here’s a quick explanation of what it is.

What is the spacing effect? Let’s compare two ways of learning. The first, massed repetition, is when you are repeatedly presented with an item to learn, in a short space of time. The second, spaced repetition, is when you are repeatedly presented with an item, but the repetitions are spaced out. As it turns out, spaced repetition leads to significantly better learning than massed repetition. This is called the spacing effect. The point is that the timing of your reviews makes a substantial difference to the payoff that you get from each review. Spaced out is better than massed.

How was it discovered? This effect was originally discovered by the German psychologist Hermann Ebbinghaus (1850 – 1909). Ebbinghaus created 2300 nonsense syllables and spent six years memorising random strings of them. He diligently tracked all aspects of his learning, and the spacing effect was one of the things that he discovered. The effect has since been replicated a number of times across a number of domains.

Why is the spacing effect the case? That the spacing effect is true is well established, but explaining why it is the case is still an open question.

One proposed explanation is that you are more likely to pay attention in spaced repetition than in massed repetition. If you are shown an item that you saw very recently (massed repetition), you are more likely to see it as familiar, redundant and boring, and so you’re not likely to give it your full attention. On the other hand, if you are shown an item that you last saw a while ago (spaced repetition), your memory of it will be weaker, and so your interest will likely be higher and you’re more likely to pay attention. Given that failure to pay attention is one of the main causes of forgetting, this seems like a plausible explanation of why spaced repetition is more effective than massed repetition.

A second proposed explanation of the spacing effect has to do with context. When talking about memories, context is the huge number of external and internal factors which are present when you form and when you subsequently review a memory. For example, your location when you review an item, the last time you ate, how anxious you feel — these are all part of your context. It’s been found that when you try to remember something, it is easier if your context is similar to what it was when you learned or reviewed it.

Now there is likely to be more fluctuation in context across reviews in spaced repetition than in massed repetition. This means that by using spaced repetition you associate more contexts with a memory and thus create more pathways from which to subsequently access it. The memory becomes robust because it is not tied to a particular context and so you can access it more easily.

Summary The spacing effect is the finding that spaced repetition generally leads to stronger memories than massed repetition. One explanation of this effect is that we pay more attention to material that we haven’t seen for some time, and a second explanation is that spaced repetition embeds an item in our minds across a larger number of contexts. The spacing effect is just one small part of the science behind how Memrise tries to make learning as easy as possible!

For a thorough literature review on the spacing effect and related issues see here.
Memrise logo