Recent Trends In Storytelling And New Business Models For Publishers
It is clear that the ongoing dramatic transformation of the media industry in all its formats (audio, video and text) leaves the door open for a complete reinvention of the publishing business. This transition has opened up opportunities for experimentation, and many players are trying to define the future of media in general, and journalism in particular.
In this article, we will discuss several recent such experiments, with special focus on new forms of storytelling, as well as new business models for publishers — a fascinating recent trend called “subcompact publishing” will be our main reference.
“The publishing ecosystem is now primed for complete disruption.” – Craig Mod
The Media Industry As We Knew It Is Gone
The traditional music industry is on the verge of disappearing because iTunes, and then Spotify, contributed to a radical shift in audiences’ music consumption habits: from physical packages to digital-only ownership to cloud-based subscriptions.
In terms of movies and television shows, Kevin Spacey, who starred in Netflix’s own hit series “House of Cards,” spoke recently at a broadcasters summit in the UK about how the movie studios and cable TV channels are having the rug pulled from underneath them by online streaming services and audiences’ increasing preference for ongoing, complex character development.
Due to a multiplicity of financial and societal factors, deep character development falls beyond what Hollywood is willing to provide these days (and, to be fair, perhaps even beyond what a feature-length movie is able to deliver). TV series are best suited for that kind of storytelling, to speak nothing of the new behavior conditioned by the “anywhere, anytime” character of Internet services such as Amazon Instant Video and Netflix: We now binge on series, not wanting to wait for the following week to see what happens next.
Newspapers (and, to a lesser extent, magazines) have been struck the hardest by the ubiquitous availability of news and analysis on the Web. Their circulation figures have been plummeting for decades; but in the past few years, newspapers have suffered a vertiginous advertising decline that is affecting their quality of coverage and their adoption among young audiences.
Backing up this troubling diagnosis with research and figures no longer seems necessary, but here are three data points from “The State of the News Media,” published by The Pew Research Center’s Project for Excellence in Journalism (2012 numbers):
- “[Newspaper] print advertising revenue is now just 45% of what it was in 2006. The growth in online ad revenue has been slow.”
- “More than three-quarters of print classified revenue has been lost since 2000.”
- “[Magazine] newsstand sales continued to decline for a fifth consecutive year. Single copies dropped about 8% compared to the same period last year.”
The recent and surprising purchase of the historic Washington Post newspaper by Amazon founder Jeff Bezos caused in the industry both deep nostalgic lamentations and earnest (if uneasy) hope, at a time when audiences have grown accustomed to getting their news from somewhere else.
The Washington Post. (Large view)
In a recent interview, Bezos declared his belief in an upcoming “golden era” at the Washington Post. He knows the quality of the product and is ready to experiment to find out the best and most viable way forward for the journalistic enterprise. However, his optimism is not Pollyannish:
“The Post is famous for its investigative journalism. It pours energy and investment and sweat and dollars into uncovering important stories. And then a bunch of Web sites summarize that [work] in about four minutes and readers can access that news for free.
One question is, how do you make a living in that kind of environment? If you can’t, it’s difficult to put the right resources behind it.… Even behind a paywall [digital subscription], Web sites can summarize your work and make it available for free. From a reader point of view, the reader has to ask, “Why should I pay you for all that journalistic effort when I can get it for free” from another site?”
The Rise Of Native Digital Journalism And Subcompact Publishing
Media companies that are native to the Web, such as The Huffington Post, The Daily Beast, Gawker and Buzzfeed, to name a few, seem to have been able to thrive in the current news-as-a-commodity world, despite all odds. The Huffington Post even won a Pulitzer Prize for its extended national reporting, at a time when these new media companies are criticized for being long on commentary and short on reporting.
Innovation is sorely needed in newsrooms worldwide. And innovation is what industry outsiders tend to be good at, because they look at existing problems with fresh eyes and no preconceptions or baggage. Their natural mode of operation is to start from scratch, which is what seems to be called for with newspapers and magazines.
The way stories are told and sold is, therefore, in the process of being expanded, if not reinvented, by many different players who are armed with digital technologies, from startups to individuals to established media companies. One such example of innovation is a relatively new trend known as subcompact publishing. Started by a few seminal articles written by former Flipboard designer Craig Mod, subcompact publishing is a cri de coeur for simple, delightful reading experiences delivered at a good price. It’s that simple — but then there’s so much more to it.
Subcompact publishing has been defined as a method of digitally publishing focused HTML-based content targeted at carefully identified audiences, primarily via mobile devices, in small, weekly (or so), mainly text-based issues, adhering to simple user-interface and navigation principles. Each issue may be free or may demand a small payment. Monetization happens via Apple’s Newsstand, Amazon’s Kindle platform and more.
Based on this definition, calling this trend “fresh” may seem unjustified. What’s the big deal? After all, advocating for simple navigation and standards-based coding is nothing new. But this collection of attributes represents nothing less than an entirely new mentality, birthing a new experience and, in the end, a new business model to support it, a business model centered on digital-only publishing (selective even to the point of using just iOS or Android), with low overhead and operational costs.
The reading experience is built on long-form content, delivered to the right audience — a public thirsty for it — primarily via mobile devices and wrapped in a delightfully uncomplicated user experience. It represents the minimal viable product, an experience that’s satisfying precisely because it’s both tailored and trimmed, a product that includes no extraneous or dubiously useful features. It fits its context and purpose naturally, like a glove.
At this point in the evolution of digital experiences, people are wary of flashy websites and apps. They just want something that works, that delivers the content and functionality they need without frills, anywhere and anytime they want it. Users are no longer amused by excessive navigational flights of fancy. They appreciate design for what design is good at: solving problems smartly, elegantly and beautifully, without excess or complication.
This pragmatic philosophy of design contrasts starkly with the majority of magazines currently available for tablets, whose issues can take a long time to download because of their heavy graphics and excessively dense contents. Publishing only once a month — a print-based schedule of production — requires that these magazines include a lot of articles in each issue. In essence, they are glorified PDFs — print layouts crammed into a very different platform and experience and, thus, unsuccessful in their attempts at attracting an audience.
Examples Of Subcompact Publications
Are there any examples of this minimal viable product, these subcompact publications? Craig Mod often mentions Marco Arment’s “The Magazine” (Arment is famous for having cofounded Tumblr and creating Instapaper) and Matter, a Kickstarter-funded publication that sells individual, high-quality, long-form stories at $0.99 each, for consumption on any device, alongside extras such as participation in the publication’s community and even access to authors.
The Magazine’s introductory description. (Large view)
The digital-only publication Quartz, whose publisher is the venerable Atlantic Media Company, seems to fit the idea of subcompact publishing quite well, too. Launched a little over a year ago, it has already gathered a reputation for solid content in a fresh package. Its HTML5 interface is optimized for tablets, and it shows: Its designers have dispensed with traditional global navigation and static taxonomies. Instead, the website features its contents using just a couple of templates that don’t significantly morph from desktop to tablet. Quartz’s smartphone experience is very minimal and effective for browsing and discovering content as well.
Quartz’s home page jumps right into an article. There are no section fronts. (Large view)
Another new and interesting media experiment in subcompact publishing is exemplified by Epic, a magazine founded by two former magazine writers with Hollywood experience, Joshuah Bearman and Joshua Davis. Epic aims to provide a platform for Hollywood studios to find great true stories, like the one on which the Oscar-winning movie Argo was based (whose script was written by Bearman). The publication also helps writers showcase their work and gain access to studios.
Epic’s article page. (Large view)
The Elements Of Subcompact Publications
The user interfaces of all of these subcompact publications have some commonalities — a few imperatives, if you will.
1. Flat Hierarchy
These publications avoid layering content, in favor of as flat a hierarchy as possible. Bring the audience directly into the story that you are highlighting, rather than ask people to “shop around” to find something they might be interested in reading and then have to click on successive levels of detail before getting to the heart of the matter.
The Magazine’s home page is the first story of each issue. (Large view)
2. Scrolling
Scrolling is favored over pagination to move users through content. And multi-column layouts are avoided. Layouts with vertical scrolling and single columns are easier for audiences to use on smartphone and even tablets, and they are certainly easier to design.
The Magazine’s single-column vertical-scrolling layout. (Large view)
3. Minimalism
The navigation is very minimalist: a simple table of contents per issue, with at most a link to previous issues, all tucked away in the now ubiquitous hamburger menu. This menu does not even need to be persistent, because the navigation drawer can be invoked by a familiar touch gesture (in this case, a swipe to the right). Trusting the user’s command of their own device’s interface means respecting the user enough not to burden them with excessive visual cues.
The Magazine’s drawer navigation. (Large view)
4. 7-Inch Tablets
Craig Mod notes that 7-inch tablets are the ideal form factor for consuming long-form content. Utility-based apps might have a different optimal size and shape but would ultimately also benefit from the “minimal viable product” mentality of subcompact publications.
The Magazine’s portrait layout on tablets is the same single column as on smartphones. Simplicity is paramount. (Large view)
5. Typography
Beautiful custom typography is quickly becoming the norm across digital experiences. Featuring it on the Web has been difficult for years, but no more. Subcompact publications that rely on HTML5 embrace the best that the typographic tradition has to offer — myriad typefaces to choose from and optimized tracking and leading, line widths, contrast, sizing, ligatures, old-style figures and more. In fact, The Magazine considers text to be its main design element, recognizing its essential role as a vehicle of narrative and also a pillar of all Web content.
The Renaissance Of Long-Form And Multimedia Journalism
As we’ve seen, subcompact publishing is a good vehicle for another new trend in online media: the renaissance of long-form storytelling, as exemplified by Web platforms such as Medium and Longform. While the visual Web (think Instagram, Tumblr, Vine, data visualization and infographics) is in ascendancy, an almost contrary — or at least complementary — text-focused way of creating and consuming media is also on the rise.
Subcompact and long-form publications don’t shun photography or illustration, but they clearly favor written pieces over photo essays and videos. These long-form articles may be original or culled from in-depth journalistic and literary writing found online.
Medium’s home page. (Large view)
The popularity of long-form pieces on the Web flies in the face of research by Chartbeat. Technology writer Farhad Manjoo recently summarized the research’s conclusions for Slate. In essence, half of the people who visit a Web page tend to leave (or bounce) without engaging with it at all. Of the remaining users, only about 25% read past the mid-point of a typical 2,000 pixel-tall Web article. Slate was the subject in this particular study, but the results reflect reading patterns elsewhere on the Web. Given the coverage and interest that long-form journalism is getting these days, the audience for it must be large enough to support it, despite what this research suggests.
A different but equally interesting publishing experiment is Cowbird, a beautiful and inspiring collection of story units. Each of these units — or sagas, as the website calls them — comprises one or more photos plus brief essays to form a self-contained, deeply personal narrative that can be delightfully navigated via almost infinite horizontal scrolling. It’s a refreshing format, built on an economical yet impactful combination of photos and text. It speaks to the increasingly common yearning for a less overwhelming Web (a “slower” Web), one where discovery is serendipitous, not algorithmically powered, and where content is carefully curated, rather than firehosed. The website is fully supported by the donations of members of its online community.
Cowbird’s home page. (Large view)
As of late, we have also witnessed the revival of an old trope: multimedia storytelling. Since the ancient time of the CD-ROM, the dream of a digital format that mixes modes of expression — text, photos, video, audio — has been pursued by publishers, including the famed Voyager Company. The time then was too early, and the technology never caught up with the vision. Or perhaps it never took off because it was an instance of additive (rather than innovative) thinking, trying to arrive at a wholly new medium by mixing together all previous media formats.
The New York Times rekindled that old multimedia flame when it published “Snow Fall,” an impressive multimedia experience that mixes words, photo galleries, infographics, audio and video, and laid out in tall single-page sections with parallax background effects. It took online publishing circles by storm. Twitter was buzzing with panegyrics, and some observers intimated that we might be witnessing the future of online storytelling. Since then, we have seen similar examples from ESPN and others. The New York Times itself followed up with another feature, titled “The Jockey.”
The New York Times’ “Snow Fall”. (Large view)
ESPN’s sports feature package. (Large view)
The New York Times’ pieces were impressive feats of narration, design and engineering, to be sure, but I feel a little overwhelmed by stories that present such a plethora of diversions from the main narrative trunk. Furthermore, in an era when most publishing enterprises are increasingly templated and automated by content management systems, pieces such as “Snow Fall” likely require a significant amount of manual design and coding. Publishing them regularly might be too expensive for most publications.
For instance, ESPN’s feature packages appear to be templated, and it shows. As beautifully designed as they are, they aren’t quite as rich, fluid and organic as their New York Times counterparts. This is all speculation, because I don’t know how the Times and ESPN approached their productions. However, on the occasion of Slate’s recent redesign, editor David Plotz compared its own plans for long-form content to the Times’ “Snow Fall”:
“We’re not a site that is going to invest six months of someone’s time to create a single beautifully designed story. I don’t think that is a sensible way to allocate resources at a spare and efficient magazine like ourselves.”
On a separate note, to touch on the purely pecuniary, let’s next examine an ingenious new take on an old and perilous business model: donations. Flattr offers a way for users to support individuals whose content they enjoy, all in a seamless experience and paying per item according to a monthly budget that they set up when signing up for a Flattr account. When a user likes, favorites or stars an item in Instagram, YouTube, SoundCloud or another digital content platform, Flattr automatically credits the author of the piece.
Flattr recognizes that audiences are as or more loyal to particular writers and filmmakers than to the outlets through which their work is featured. Those outlets lend authors their credibility, but Twitter has contributed to the popularization of individual creators, and now audiences have developed an affinity for that level of personal brand. They literally follow them.
The problem with a model like Flattr’s is that, at the end of the day, it relies on a certain philanthropic impulse in the audience. Only a small proportion of people normally feel inclined to pay for stuff they can get for free.
Subcompact Publications In The Marketplace
Returning to our theme and to conclude, subcompact publications are not ubiquitous yet, particularly on platforms such as Apple’s Newsstand. The trend is less than a year old, but I would have guessed that many publishers would have by now adopted this smart and economical way to feature stories and to deliver issues automatically in the background to subscribers.
Part of the reason, perhaps, is that Apple’s Newsstand remains an underexploited digital ecosystem. TypeEngine is a company that is trying to facilitate the monetization of content on Newsstand. And there are others. In a way, it’s never been easier to start publishing long-form pieces and to charge for them. If the quality of the content is high and the publication is properly positioned for the given audience, authors can greatly benefit from direct access to their audiences.
The Future Of Journalism
While these business models and narrative experiments are encouraging and very much needed, the jury is still out on whether quality journalism, particularly the kind of expensive investigative reporting that made newspapers such as the Philadelphia Inquirer famous, will be commercially viable in a future of even more fragmentation of channels and audiences and of even more commoditization of the news.
Will investigative reporting and expensive foreign coverage find a new home in these all-digital subcompact publications? Can these activities be supported by these new publishing models? They might be in some cases, but will those be enough for a thriving civic society?
The democratization of amazing publishing avenues such as Newsstand is leading to increased competition and noise in the marketplace. Will what happened to blogs (extreme proliferation to the point of triviality) happen to subcompact publishing when almost anyone can start a publication and charge for content?
In sum, is journalism a viable business in an era of extreme audience fragmentation and dilution of advertising dollars? Or will it have to be subsidized by governments and other institutions to be viable in this new digital world? And will journalism be less or more independent if it has to be backed by patrons in order to sustain itself?
Here’s another twist: In the current gold rush to creating and disseminating content, major brands have an opportunity to become publishers, now that some traditional media outlets are on the wane and leaving gaps to be exploited. Here, the question of objectivity pops up again. But if brands are up front about the provenance of their content, offer accurate and valuable information, and tell engaging stories that capture the attention of their audiences, then their publishing efforts could end up significantly enriching our culture.
(al, il)
© Jose Martinez Salmeron for Smashing Magazine, 2013.
]]>
It is clear that the ongoing dramatic transformation of the media industry in all its formats (audio, video and text) leaves the door open for a complete reinvention of the publishing...
http://www.smashingmagazine.com/2013/10/28/recent-trends-in-storytelling-and-new-business-models-for-publishers/
https://my3.my.umbc.edu/api/v0/pixel/news/37556/guest@my.umbc.edu/64ecfb357f6410481de4919973cc29c5/api/pixel
css
design
development
html
javascript
mysql
opinion-column
php
sql
web
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Mon, 28 Oct 2013 04:32:57 -0400
How to create a theme for Ghost
The blogging platform Ghost has been getting a lot of attention recently due to its recent move from beta to public release (if you somehow haven’t heard of it yet, head over here and read up).
Like other platforms, Ghost supports third party ‘themes’. In this article we’ll design a simple, responsive and content-driven blog. Then code it into a fully-functional theme for Ghost.
The design
The default theme for Ghost, ‘Casper’, is very clean looking. They put content first, showing off the typography with a modern color palette, so that the focus is on the writing.
We’re going to follow that lead, so our design process needs to start by understanding how Ghost works and what’s available to the user in the back-end. There are 4 main elements that we’ll be able to draw upon from the back-end while designing the theme (apart from the articles/posts themselves obviously) which are:
- Blog title
- Blog description
- Blog logo
- Blog cover
All of which can be set in the Settings tab in Ghost. These point the design in an obvious direction of some sort of banner at the top of the page, which contains the title, logo and description and a cover picture as a background.
The home page
So we really only have to design 2 pages, that is the home page, which shows all of the latest posts, and the individual post page. As the design is relatively simple, I’ll show the finished page first, then go over the details again. So here is the “home” page which displays the latest posts:
So as you can see, colourful highlights, along with basic and clean design. Let’s run over the details again. So we’ve got the header, that contains the logo (here I’ve made a little sheet costume for a ghost), the name of the blog and the description.
So if the user chooses a cover photo we’ll put it in as a full-width background image here. If not we’ll go for a solid blue color that’ll be our highlight color as above.
Then we’ve got some content boxes in which we’ll show all the information about each post (title, published date, author, tags) and the excerpt.
Finally we make a simple pagination link and a footer. In the article share box, the footer and all throughout the site we’re using a custom icon font made at Fontello and the font Open Sans from Google Web Fonts. Which we’ll see how to implement later.
The individual post page
This design is very similar to the home page. Except the block in which we enclosed the excerpt before will now stretch full-height and show all the content. Plus we’ll add an author box at the bottom.
So everything the same, apart from some inline text styling which we’ll go over in the development stage. And here’s the new author box:
The development
Okay, so now the design has been looked over (and obviously customize it to your own preferences). It’s time to start on the development. First of all, if you haven’t already done so, take a second and read the official Ghost documentation on theme creation. They are very clear and concise about what’s needed and file structure and so on. Basically for this tutorial, we can split the development into two stages. Content and style. Like a basic relationship between HTML and CSS, we’ll make the theme work, then make it look like our design.
The file structure
To begin you’ll need to have Ghost installed locally on your machine. This is relatively straight forward to do, and there are now even automatic installers (like this one). Once it’s installed and running, you’ll need to find the ghost folder which is named ‘ghost-version.number’ (at the time of writing it is ‘ghost-0.3.2′). Once located, navigate to ‘content/themes’, there you’ll want to create a new folder that has the name of your theme. So in this case we’ll call it ‘sheet’. Inside that folder, we’re going to make 2 files that are essential to a Ghost theme. That’s ‘index.hbs’ and ‘post.hbs’, if you’ve read the Ghost documentation (or have used Handlebars elsewhere) you’ll recognise the file format ‘.hbs’ which means we can use the so called ‘handlebars’: {{}} in our template.
After that, we’ll add another file called ‘default.hbs’ and a folder structure for our assets and partial files. Follow this file structure:
At ‘assets/css/fonts’ we’ll place our icon font files for the @font-face implementation. For this design I’ve only chosen 6 icons: Facebook, Twitter, Google, RSS, Tags, Calendar.
Apart from that the rest of the files are pretty self-explanatory. Now let’s get into the code. We’ll look first at the two essential files in the theme.
“index.hbs” & “post.hbs”
As for the designs, I’ll give the whole contents of the file first, then we’ll break up the important bits. First of all the ‘index.hbs’ file:
{{!< default}}
{{> header}}
<main id="main" role="main">
{{#foreach posts}}
<article role="article" id="article-container">
<header>
<h1><a href="{{{url}}}">{{title}}</a></h1>
<p>by <a href="{{author.website}}" target="_blank">{{author}}</a></p>
<time datetime="{{date format="DD MMM YYYY"}}">
<span></span>
{{date format='DD MMM YYYY'}}
</time>
</header>
<div>
<p>{{excerpt words="100"}} … <a href="{{{url}}}">Read More</a></p>
</div>
</article>
<footer>
{{#if tags}}
<div>
<span></span> Tags: {{tags separator=" . "}}
</div>
{{/if}}
<div>
<p>Share:</p>
<a href="http://www.facebook.com/sharer.php?u={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="http://twitter.com/share?text={{title}}&url={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="https://plus.google.com/share?url={{url absolute="true"}}" target="_blank"><span></span></a>
</div>
</footer>
{{/foreach}}
{{#if pagination}}
<div>
{{{pagination}}}
</div>
{{/if}}
</main>
{{> footer}} So to explain what’s happening, the very first line
{{!< default}} is essential to the theme and tell us that this file will be inserted into the content area into the default file. The second line
{{> header}} then inserts our header. Instead of putting it into this file we’ll create a partial file later in the ‘partials’ directory. HBS files are just like HTML files in which you can include normal HTML elements. So the next element in the file is a <main> which will hold all of our main content. Then inside of the
{{#foreach posts}} repeater we’ll put our article element that will contain the post. Inside each <article> there will be a <header> with the title and the meta data of the article (author and publish date). After that the actual excerpt. Then a <footer> that has our post’s tags (in between an ‘if’ statement) and the share links, with some span’s calling in our icon font. Finally we have some pagination, and we eventually call in the
{{> footer}} which works like the header. So as you can see it’s relatively simple code. Obviously any class or ID names are optional for CSS styling.
Next up comes the ‘post.hbs’ file. Which is mostly similar, but with a few additions and modifications.
{{!< default}}
{{> header}}
<main id="main" role="main">
{{#post}}
<a href="/">← Go Back</a>
<article role="article" id="article-container">
<header>
<h1><a href="{{{url}}}">{{title}}</a></h1>
<p>by <a href="{{author.website}}" target="_blank">{{author}}</a></p>
<time datetime="{{date format="DD MMM YYYY"}}">
<span></span>
{{date format='DD MMM YYYY'}}
</time>
</header>
<div>
{{content}}
</div>
{{#if tags}}
<div>
<span></span> Tags: {{tags separator=" . "}}
</div>
{{/if}}
<div>
<p>Share:
<a href="http://www.facebook.com/sharer.php?u={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="http://twitter.com/share?text={{title}}&url={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="https://plus.google.com/share?url={{url absolute="true"}}" target="_blank"><span></span></a>
</p>
</div>
</article>
{{#if author}}
<footer>
<h4>About the Author</h4>
<div>
{{#if author.image}}
<div><img src="{{author.image}}" /></div>
{{/if}}
<h4>{{author.name}}</h4>
{{#if author.website}}
<div><a href="{{author.website}}" target="_blank">{{author.website}}</a></div>
{{/if}}
<div>
<p>{{author.bio}}</p>
</div>
</div>
</footer>
{{/if}}
{{/post}}
</main>
{{> footer}} Once again we have the
{{!< default}} and
{{> header}} handlebars. And our <main> element. But this time the wrapping handlebar is
{{#post}} Then we call in the
{{content}} (Not excerpt, because this is the individual page we want to show all of the content in the post.) Another difference here is the ‘if’ statement which is verifying if there’s an author for the post. If there is we’ll show a box with the author’s image, name, URL and bio. All of these elements are editable in the back-end by the user, and will either show up or not depending on whether they exist.
‘default.hbs’ and the partial files
Now we’re going to look at the default.hbs file. So if you haven’t made it yet, create a new file. In that file we’re going to put all the default things that are needed for our page to display correctly in a browser, mainly the doctype and the <html>, <head> and<body> tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{{ghost_head}}
</head>
<body>
<div>
{{{body}}}
</div>
{{ghost_foot}}
</body>
</html>
So looks like a normal HTML document. In the <head> we’re pulling in the title and the description from the blog. We’re linking to our stylesheet in our assets folder, as well as linking to our Google web fonts. We’re adding the viewport meta to make sure the site will be responsive on all devices, and finally the HTML5 shiv for IE. Note also the {{ghost_head}} tag at the end. These are essential to the ghost theme’s functionality, like the wp_head() in WordPress. (The ‘{{ghost_foot}} before the closing body tag does the same thing).
Then inside our body and wrapper divs we simply add the
{{{body}}} handlebar which then inserts either the ‘index.hbs’ file contents, or the ‘post.hbs’ file contents according to where we are on the site.
Now for the partial documents files. Inside our ‘partials’ directory, we have two files. ‘header.hbs’ and ‘footer.hbs’. Thet are both relatively simple as you’ll see. Here they are, first the header:
<div role='banner' class="main-header" {{#if @blog.cover}}style="background: url({{@blog.cover}});"{{/if}}>
{{#if @blog.logo}}<div class="logo-container"><a class="logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a></div>{{/if}}
<h1 class="blogtitle"><a title="{{@blog.title}}" href='{{@blog.url}}'>{{{@blog.title}}}</a></h1>
<h2 class="blogdescription">{{@blog.description}}</h2>
</div> And now the footer:
<footer>
<div>
<a href="http://www.facebook.com/sharer.php?u={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="http://twitter.com/share?text={{@blog.title}}&url={{url absolute="true"}}" target="_blank"><span></span></a>
<a href="https://plus.google.com/share?url={{url absolute="true"}}" target="_blank"><span></span></a>
<a target="_blank" href="{{@blog.url}}/rss/"><span><span></span></span></a>
</div>
<p>© {{date format='YYYY'}} <a href="{{@blog.url}}">{{@blog.title}}</a> - All Rights Reserved.</p>
<p>Powered by <a href="http://ghost.org" target="_blank">Ghost</a></p>
</footer>
Both of these are relatively simple. In the header, we’re first of all checking if the user has added a cover photo for their blog, if so, then it’s added as the background-image on the header div. Then if there’s a logo, we’ll put that there. Then the title, and finally the description. All things that are modifiable by the user. Then in the footer, We have the same social link structure as we do in the ‘share’ section of the article container. Then some copyright text with the current year, and the blog’s title. Then a link to Ghost.
So that’s it for the theme functionality! If you now restart your Ghost server, the theme will appear in the Settings window and you can activate it. Then if you re-load your blog. It’ll look something like this:
The styles
Now it’s time to jump into the CSS and make it look like our design.I’m going to give all of the css first so you can copy directly or use as you wish. Then run over the most important aspects, as a lot of the styling is very simple and doesn’t really need explaining.
@import "reset.css";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */ }
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */ }
.cf:after {
clear: both; }
@font-face {
font-family: 'sheet';
src: url('fonts/sheet.eot?85866638');
src: url('fonts/sheet.eot?85866638#iefix') format('embedded-opentype'),
url('fonts/sheet.woff?85866638') format('woff'),
url('fonts/sheet.ttf?85866638') format('truetype'),
url('fonts/sheet.svg?85866638#sheet') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "sheet";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
}
.icon-tags:before { content: '\54'; } /* 'T' */
.icon-calendar:before { content: '\63'; } /* 'c' */
.icon-google:before { content: '\67'; } /* 'g' */
.icon-rss:before { content: '\72'; } /* 'r' */
.icon-twitter:before { content: '\74'; } /* 't' */
.icon-facebook:before { content: '\66'; } /* 'f' */
/* General Styles */
body {
background: #f4f4f4;
color: #4e4e4e;
font-family: 'Open Sans', sans-serif; }
.main-header {
position: relative;
overflow: hidden;
padding: 50px 0 80px 0;
background-size: cover !important;
background-color: #2bcbc8; }
@media (max-width: 650px) {
.main-header {
padding: 25px 0 30px 0; } }
.main-header .logo-container {
display: block;
width: 100%;
text-align: center; }
.main-header a.logo {
display: inline-block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.main-header a.logo:hover {
opacity: 0.8;
}
.main-header .blogtitle {
text-align: center;
width: 100%;
display: block; }
.main-header .blogtitle a {
display: inline-block;
color: white;
margin: 10px 0;
padding: 5px;
font-size: 65px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid white;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.main-header .blogtitle a:hover {
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.8);
}
@media (max-width: 650px) {
.main-header .blogtitle a {
font-size: 0.8em;
border: 5px solid white; } }
.main-header h2.blogdescription {
text-align: center;
width: 100%;
display: block;
color: #fff;
margin: 0;
padding: 5px;
font-size: 36px;
font-family: 'Droid Serif', serif;
text-decoration: none; }
@media (max-width: 1000px) {
.main-header h2.blogdescription {
font-size: 1.5em; } }
@media (max-width: 650px) {
.main-header h2.blogdescription {
font-size: 1em; } }
a {
color: #2bcbc8;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a:hover {
color: #124140;
}
#main {
max-width: 1000px;
margin: 0 auto 40px auto;
padding: 30px 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
@media (max-width: 650px) {
#main {
padding: 20px 10px; } }
#main #article-container {
margin: 0 0 0 0;
padding: 30px 45px;
background: #fff;
border: 1px solid #D4DBDB;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
@media (max-width: 650px) {
#main #article-container {
padding: 20px; } }
#main footer {
background: #4f4f4f;
margin-bottom: 50px;
padding: 20px;
color: white;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.posttags {
font-weight: 600;
font-size: 13px;
font-style: italic;
float: left;
margin-top: 5px;
}
.index-post-share {
float: right;
font-weight: 600;
font-size: 13px;
}
@media (max-width: 650px) {
.index-post-share {
width: 100%; margin: 15px 0 0 0;
float: none;
display: inline-block;
}
}
.index-post-share p {
margin-right: 10px;
display: inline-block;
}
.index-post-share a {
font-size: 11px;
color: #4f4f4f;
background: #f4f4f4;
display: inline-block;
padding: 5px;
max-width: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.index-post-share a:hover {
background-color: #2bcbc8;
}
.post-template .article {
border-bottom: none; }
.posttitle {
font-size: 60px;
font-weight: bold;
line-height: 70px;
margin-bottom: 10px; }
@media (max-width: 650px) {
.posttitle {
font-size: 30px;
line-height: 35px; } }
.postauthor {
margin-top: -10px;
}
.postheader {
margin: 0 0 25px 0;
color: #a9a9a9;
}
.postheader h1 a {
text-decoration: none; }
@media (max-width: 650px) {
.postheader h1 a {
font-size: 25px;
}
}
.postauthor, .postdate {
font-weight: 600;
font-size: 13px;
margin-bottom: 3px;
}
.postexcerpt {
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
.pagination {
text-align: center;
font-weight: 600;
font-size: 13px;
}
.older-posts, .newer-posts {
margin: 0 10px;
}
.go-back {
display: inline-block;
margin: 0 0 15px 0;
}
.main-footer {
background: #4f4f4f;
color: white;
width: 100%;
padding: 30px 0 20px 0;
text-align: center;
}
.main-footer .footertext {
font-weight: 600;
font-size: 11px;
margin: 10px 0;
}
.main-footer a:hover {
color: #34fdfd;
}
.main-footer .social-links a {
font-size: 18px;
color: #4f4f4f;
background: #f4f4f4;
display: inline-block;
padding: 5px;
max-width: 30px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-footer .social-links a:hover {
background: #34fdfd;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-top: 25px;
margin-bottom: 5px;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em; }
h3 {
font-size: 2em; }
h4 {
font-size: 1.5em; }
h5 {
font-size: 1em; }
h6 {
font-size: 0.8em; }
.postcontent {
margin: 0 0 70px 0;
}
.postcontent p {
margin-top: 5px;
font-size: 14px;
line-height: 24px;
}
.postcontent ul {
list-style: disc;
}
.postcontent ul ul {
list-style: circle;
}
.postcontent ol {
list-style: decimal;
}
.postcontent ol li {
margin: 5px 0;
}
.postcontent ul li, .postcontent ul ul li {
margin: 5px 0;
}
.postcontent ul, .postcontent ol {
margin: 0 0 20px 25px; }
.postcontent ul ul, .postcontent ul ol, .postcontent ol ul, .postcontent ol ol {
margin: 5px 0 5px 25px; }
.postcontent blockquote {
display: block;
border-left: 5px solid #02c9c9;
padding-left: 25px;
margin: 10px 0;
font-style: italic; }
.postcontent pre {
background: #4f4f4f;
border: 1px solid #b3b3b3;
padding: 20px;
color: white;
line-height: 20px;
margin-bot-tom: 20px; }
.postcontent pre code {
border: none; }
.postcontent input {
padding: 5px; }
.postcontent p code {
background: #4f4f4f;
}
.postcontent code {
color: white;
border: 1px solid #b3b3b3; }
.postcontent hr {
border: none;
border-bottom: 1px solid #D4DBDB;
margin: 20px auto;
}
.postcontent p em, .postcontent p i {
font-style: italic;
}
.postcontent p b, .postcontent p strong {
font-weight: bold;
}
.icon-feed {
font-size: 30px; }
.sharepost {
margin: 0 auto 20px auto;
width: 220px;
text-align: center;
padding: 15px; }
.sharepost .share {
font-size: 30px; }
.post-template #main footer {
padding: 20px 50px;
margin-bottom: 0;
}
@media (max-width: 650px) {
.post-template #main footer {
padding: 20px 25px; }
}
.authorbox h4:first-child {
margin-top: 0;
margin-bottom: 20px;
font-size: 24px;
}
.authorbox a:hover {
color: #34fdfd;
}
.authorbox .authorimage {
max-width: 110px;
float: left;
margin-right: 20px;
}
.authorbox .authorbio {
margin-top: 10px;
line-height: 24px;
font-size: 14px;
font-weight: 600;
}
Okay, so first things first, I’m importing the css reset from here which is also in our ‘css’ folder, to start from a clean base. After that are some general styles we set up that are site-wide and useful for responsive design. As well a clearfix by pseudo element solution applied to the class name ‘cf’.
Then we have the @font-face and icon-* settings, which sets up our icon font for us.
(This code is actually coming out of a SASS document which I haven’t included here for the sake of simplicity.)
After that all the other styles are very self-explanatory, we’re just using the class-names that we specified during the theming of the .hbs files. And applying basic styles to them.
And now if we go back to our Ghost server and that ugly blank HTML content page we’ll see something quite different:
That’s it! We now have a fully functional Ghost theme. Jump over to the back end and make a few dummy posts to test how pagination works etc. And then you’re ready to get blogging or even design and sell your own themes!
Have you started using Ghost? Are you planning to theme it yourself? Let us know in the comments.
Source
]]>
The blogging platform Ghost has been getting a lot of attention recently due to its recent move from beta to public release (if you somehow haven’t heard of it yet, head over here and read up)....
http://rss.feedsportal.com/c/35285/f/661066/s/32fe37fe/sc/4/l/0L0Swebdesignerdepot0N0C20A130C10A0Chow0Eto0Ecreate0Ea0Etheme0Efor0Eghost0C/story01.htm
https://my3.my.umbc.edu/api/v0/pixel/news/37557/guest@my.umbc.edu/f97ed53e947733cbc7506a18daf9a93d/api/pixel
art
css
design
development
html
html5
illustrator
javascript
mysql
oracle
photoshop
php
sql
web-design
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Mon, 28 Oct 2013 04:15:01 -0400
Mon, 28 Oct 2013 04:15:01 -0400
Check out fellow MCSer Marissa Piegols' blog post about her summer internship experience with the Office of External Relations within the Office of the Inspector General at Social Security Administration. Here's a quote from the post:
The goal of responsive web design is to seamlessly adapt the look and UX of a website to different platforms. The technique is still very young and in many areas outstrips the available technology.
