Designing for eBooks

By Jake | December 30, 2011

Designing for eBooks
Jake recently designed a series of academic textbooks for Westview Press and it got us thinking… what would it take to convert the printed books into an eBook format? This post touches on the basics of creating eBooks, specifically modifying cover designs to the required specifications.

Overview


Electronic books were originally designed to display text with minimal images. For that reason, children’s books, cookbooks, comics, etc. do not translate well and often have trouble displaying correctly across platforms. A good rule of thumb is that eBooks work best for text-heavy novels and long, narrative articles (think best seller lists and The New Yorker). That being said, readers are constantly evolving and expected to soon support graphic-heavy books. In fact, Apple’s iOS devices already support fixed-layouts, so it is safe to assume other readers will soon do the same. Either way, eBooks still require a strong cover design to attract interest in the book.

eBook Formats


Any electronic book is considered an eBook, but over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes & Noble Nook using these formats:

  • EPUB: This is an open standard adopted by Apple (iOS), Barnes & Noble (Nook) and many other makers of eBook readers (such as Sony).
  • Kindle: This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.
  • PDF: PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format.

Making Your eBook


There are multiple ways to create your eBook. Some of the most popular methods are:

  • Amazon’s Kindle Direct Publishing (kdp.amazon.com): KDP is a fast, easy self-publishing tool that lets you publish your digital text content for the Amazon Kindle.
  • Kindle Plugin for Adobe InDesign: Create Kindle books in-house using a free Kindle Plugin that converts your file to a Kindle format. You can download the plug-in at www.amazon.com/kindlepublishing.
  • Outsourcing: Services such as Lulu and Smashwords will translate your Word document into an eBook format. In addition to creating your book, they will also submit it to Apple and Amazon bookstores for a small fee.
  • Hand Coding: More on this in a future JakeIntel post.

eBook Covers Formats


Since eBooks are used on various platforms and purchased online, they require a few different cover formats:

  • Embedded eBook Cover: The cover embedded inside your eBook that displays as the first page. This can and should be separately sized to each store’s specifications.
  • Catalog Cover: The cover that shows up in the eBook store on Amazon, B&N, ect. Generally uploaded separately, and also used at a thumbnail size when displaying search results.
  • Publicity Cover: This cover is used on your website, ads and other marketing materials. Size vary based on the application.

Cover Specifications


In addition to the various cover formats outlined above, each reader has slightly different size requirements. You can reference the chart below when creating your covers:

  Format Size in px Resolution File Size
Kindle CC JPG, TIFF min 500px max 1280px 72 dpi n/s
Kindle EC JPG 600 x 800 167ppi – 300dpi 127kb
B&N/Nook CC JPG, GIF, PNG 600 x 730 n/s n/s
B&N/Nook EC JPG, GIF, PNG 600 x 1024 170 ppi 300kb
iPad EC JPG, GIF, PNG 600 x 860 132 ppi 200kb

If you are unable to produce multiple covers, your best bet is to create a 600×800 JPG. This isn’t the optimal cover size for each reader, but it should cover all your bases. In addition to the sizes noted above, remember to convert all graphics to RGB. Any files submitted as CMYK will be rejected.

Designing Your Cover


In most cases you can simply resize your printed cover to fit the required specs, but occasionally a redesign is needed since not all covers translate well on screen or at smaller sizes. For example, a cover that uses gold leaf or embossing will not display well on screen. When redesigning your cover, it is best to stick with simple, but bold graphics and strong type treatments. Jake’s design for Supreme Decisions: Great Constitutional Cases and Their Impact is a perfect example of strong graphics and type that convert well to the Amazon Kindle and other e-reading devices:

eBook Covers

Comments Off

CSS3 Media Queries and Responsive Web Design

By Jake | November 22, 2011

CSS3 Media Queries

CSS Media Queries are not new, but CSS3 is making them considerably more practical for every web developer, and designer to know. They are new ways to serve CSS styles to the browser, with a particular emphasis on targeting mobile devices.

For the Non-Developers


CSS or “Cascading Style Sheets” are what make a website look the way it does. They can control the size of everything on the page from images to text. They control colors, fonts and the overall layout of a site. What Media Queries do, is let us specify change those settings under certain conditions. These changes can be as simple as changing the color of a link, to changing the whole layout.

Now and Then


The most common use for Media Queries up to this point has been the creation of a Print Stylesheet. A Print Stylesheet allows developers to specify how a page should look when it is printed, such as to remove a background color from the page. There are other uses, including ways to create styles for Braille printers, audio devices, handheld devices and even projectors and TVs. The CSS3 guidelines expand on the options that are already available to us, allowing developers to target devices based on the following criteria:

Width The width of the browser window min/max
Height The height of the browser window min/max
Device-Width The maximum pixel width of the device min/max
Device-Height The maximum pixel height of the device min/max
Orientation Portrait or landscape, for devices with accelerometers
Aspect-ratio The aspect ratio of the browser min/max

The CSS3 specification includes a few extra new options, but those will be the most useful for developers and designers right now.

What It Means


All of these things can be combined to create different layouts depending on how the user is viewing the site. Obviously we can’t afford to make a website for every device, but we can use the above properties to change the site layout in stages. For instance, the iPad has a width of 768 in portrait mode. We can call a media query that will execute for all devices with a width of 768 and a width of 480, which will get used on any device that is not as wide as an iPad.

Why It Matters


The web doesn’t just live on computers anymore. People access websites from their phones, tablets, and TVs. Sadly the web doesn’t always look the same on different devices. A site that looks great on your laptop, might be too hard navigate on your phone.

People love the iPad, and the tablet market is exploding. Windows 8 is expected to be launched in 2012, and Microsoft is trying to make its mark with the first operating system that will be available on both tablets and desktop computers. It is no longer good enough to have your website display well in the latest browsers, it needs to look good on the latest devices.

Good coding can take care of most of that. If your website is coded properly, it should display more or less as intended on most devices. Media Queries come in to expand on that. Looking at a website on a 23” monitor and a 4” phone are not the same thing, and the design should reflect that.

A Level of Support


All of the latest versions of Chrome, Opera, Safari, Firefox and even Internet Explorer support media queries. The Android and iPhone browsers have supported them from the beginning. Unfortunately, the Windows Phone 7 browser was built around IE8, and therefore does not support them. But never fear, if you have a mobile stylesheet that is separate from your main stylesheet, the WP7 developers have graciously added a conditional comment that will only be registered by the Windows Phone browser.

How to Use It


There are a few ways to integrate media queries into your website. The first is to include the query in the media attribute of a link tag.

<link rel=”stylesheet” media=”(max-device-width: 600px)” href=”small.css” />

The other main way is to include a media query in your CSS file itself. This can be done by wrapping the styles in a @media call.

@media screen and (min-width:900px) {
     .class { background: #666; }
}

Lastly, to render on Windows Phone 7 devices, you will need to use a separate stylesheet, and link it in an IEMobile comment.

<!--[if IEMobile]>
<link rel="stylesheet" media="(device-width: 600px)" href="mobile.css" />
<![endif]-->

Benefits and Drawbacks


The primary benefit of this is that we can display our content in a mobile friendly way without having to deal with the hassles of a mobile site. We can easily create better looking experiences on both large and small screen devices with as little or as much effort as is needed.

On the other hand, unlike a full mobile site you can’t change the structure of the page. You can only change the design. We can still hide or minimize some elements of the page, and even change the order in which they appear, but we can’t add something just for the mobile site. In many cases you can use a different stylesheet to serve up smaller images to mobile users, improving load time. Even an image that is not controlled by the CSS, can be hidden by the stylesheet. You won’t receive the performance boost, but it can help make a more streamlined design.

Comments Off

Cloud Computing

By Jake | September 15, 2011

Cloud Computing

In the simplest technical sense, cloud computing refers to the use of a network to provide on demand access to data and data processing applications. But this definition differs little if at all from the concept of the World Wide Web as it has existed for almost two decades. Indeed, the websites, email, and online database interfaces that we use every day all qualify as cloud computing in this sense.

Much like ‘blogging’ or ‘Web 2.0’, ‘cloud computing’ is a buzzword that is more indicative of an evolving approach to how the Internet is used rather than a technology unto itself. What defines the cloud computing trend is the migration of data storage and application services that have traditionally resided on end-user hardware to the Internet. From an end-user perspective, this represents an evolution of the Internet from a ‘dumb network’ simply linking user to user, to a highly configurable and ubiquitous source of data and services.

With this in mind, the National Institute of Standards and Technology provides this definition:

Cloud computing is a model for enabling convenient, on-demand network access to a shared pool of configurable computing resources (e.g., networks, servers, storage, applications, and services) that can be rapidly provisioned and released with minimal management effort or service provider interaction.”

This trend will have powerful ramifications for many industries, including hardware manufacturers, software developers, data security and privacy providers, IT consultants, online communications professionals, and others.

What do people mean when they refer to the cloud?


The concept of the “cloud” originated in the telephone industry and was used to distinguish the line between the responsibility of telecommunication provider and that of the customer.

With respect to computing, “the cloud” really has no different specific technical definition but ostensibly, it may be used to describe the entirety of data, applications and other resources available throughout a particular network. It is also increasingly being used as a marketing term when referring to advanced services.

The “Intercloud” extends the concept of cloud computing globally. This refers to a “cloud of clouds” sharing data, applications and resources, similar to the Internet as a “network of networks.”

How does this differ from the traditional concept of the Internet?


Cloud Computing

How does cloud computing work?


Cloud computing structure has two major components, the front-end and the back-end, which correspond with the end user and network-based service providers.

Front End

  • Computer terminals: Hardware devices need not possess the processing power or range software packages that they have in the past, because they’ll be getting these from the network. Netbooks and smartphones are examples of devices that are cloud-oriented.
  • Access software: Software to access the data, applications and other services provided through the cloud. Web browsers, email clients, and phone apps are examples of such software. A fully-cloud enabled device would theoretically use just one web browser to access all online services.

Back End

  • Servers and data storage devices: Hardware within the cloud that provides access to data, applications and processing power. A website server is a very basic example of a back end resource, however in most cases cloud computing will be utilizing a network of devices each playing a particular function.
  • Administrative servers and protocols: Communication between network elements must still be organized as it has been on the Internet through a network of servers that handle traffic management according to IP protocols.

Devices and the Cloud


Cloud Computing and Devices

Examples of cloud-based services


Applications provided in a cloud-based environment are also know as Software as a Service (SaaS). Some examples are:

  • Google Apps: Word processing, spreadsheet and other productivity applications.
  • Amazon Cloud Drive: Online file storage, including for media files purchased through the Amazon store, thus creating a cloud-based music collection that can be played through Amazon Cloud Player.
  • Mint: A personal money-management service that integrates daily budget data with bank accounts, investments and other financial information.
  • Facebook: Personal networking program which provides data and media storage and distribution as well as applications.
  • Microsoft Sharepoint: Online work collaboration system.
  • Salesforce: Cloud-based customer relationship management (CRM) software.
  • Carbonite: Online automatic file-backup system.

Cloud Computing Costs and Benefits


The move towards cloud computing has at least in part been driven the pursuit of more efficient hardware implementations by larger operators such as Amazon, Microsoft and AT&T, as well as by product innovation by end-user providers such as Google. Combined, some of the perceived benefits of cloud computing include:

  • Potentially ubiquitous access to data and applications regardless of location of user;
  • Potentially reduced costs for both consumers and providers, including hardware, software and IT services;
  • Opportunity for device innovation due to reduced need for onboard computing power;
  • Opportunity for innovation in end-user applications (e.g., mobile application markets);
  • Shared-processing power/grid computing system processing power.

But cloud computing is not without its potential drawbacks, which may include:

  • Threat of major security breaches due to consolidation of data and services;
  • Risk of widespread application outages;
  • Reduced ability for end users to maintain privacy;
  • Increased reliance on network connectivity for productivity;

Unanswered Questions


In addition, the evolution of cloud computing raises some as yet unanswered questions:

  • Who owns the data in a cloud system, the end user or the service provider?
  • Is there a need for standardization in order to facilitate integration of data and apps, and if so, how will that come about?
  • Increased centralization of data and software is a move away from the original philosophy of the World Wide Web. Will this move ultimately limit the de facto ability of end users to participate as more than consumers? What long term effects on innovation and security will this have?

Resources


http://en.wikipedia.org/wiki/Cloud_computing
http://computer.howstuffworks.com/cloud-computing.htm
http://www.pcmag.com/article2/0,2817,2372163,00.asp
http://www.google.com/apps/intl/en/business/index.html
https://www.mint.com/
http://www.facebook.com
https://www.amazon.com/clouddrive/learnmore
http://sharepoint.microsoft.com/en-us/Pages/default.aspx
http://www.infoworld.com/d/cloud-computing/what-cloud-computing-really-means-031?page=0,0
http://cloudtimes.org/top-7-cloud-based-service-offerings/

Comments Off

The Google Display Network

The Jake Group recently produced a series of rich media ads for placement on TalkingPointsMemo.com, one of the millions of websites that are members of Google’s Display Network.

The Google Display Network is the non-search-related portion of Google’s AdWords advertising platform. The Display Network is comprised of millions of websites, blogs, and email newsletters and has a total reach of about 80% of all internet users. Read More …

Comments Off

Google Analytics - Using Advanced Segments

For an introduction to Google Analytics, see my earlier post. In this entry I will focus on an advanced feature of Google Analytics: Advanced Segments.

What are segments?


Segments are non-destructive filters that you can apply to your data for advanced analyses. Segments are non-destructive in that they do not affect the actual process of recording data from your website. Actual filters applied to a particular website profile, on the other hand, permanently affect the data that is recorded. For example, if I want to know statistics related to visitors from South America, I can create a segment that will display only information for these visitors. Data from all visitors in all countries is still recorded. By creating a filter for the same purpose, I could also see information related only to South American visitors, however Analytics wouldn’t record the data for any visitors outside of South America. In short, segments are filters that are applied after all the data has already been collected. Both segments and filters are valuable for particular applications, however this post will focus solely on segments.

How are segments used?


Segments are extremely powerful for running comparative analyses. Segments allow you to split up your Analytics data into different groups, and you can in turn compare these groups with each other. Google Analytics includes several basic segments like New and Returning Visitors. Your segments can be accessed and applied by clicking the “Advanced Segments” box in the upper right hand corner of the screen. By splitting your data between visitors that have previously been to your site and those who haven’t, you can discover important behavioral differences.

Example:

Our website OnlineStore.com just redesigned the checkout process. Without segments applied, the data looks good. The number of visitors exiting the site after adding items to their cart has dropped… good news? When we split our data into new vs returning segments, we find that the number of new visitors exiting from the cart page has dropped a fair amount, but the number of returning visitors exiting from the cart has risen dramatically. Our changes to the checkout system have clearly alienated our returning customers. Further analysis shows us that our returning customers’ purchases are about twice as large as purchases made by new customers. While a basic analysis would suggest that our changes were positive, analysis with segments has shown us that our cart redesign needs further consideration.

Google Analytics also features the following preset segments:

  • Paid Search Traffic
  • Non-paid Search Traffic
  • Search Traffic
  • Direct Traffic
  • Referral Traffic
  • Visits with Conversions
  • Mobile Traffic
  • Non-bounce Visits

The “Visits with Conversions” segment is an important tool that allows you to track usage statistics for your most valuable visitors.

Custom Segments


Google Analytics’ preset segments are valuable and easy to use, however custom segments are necessary for more complex analyses. To create a custom segment, click on the advanced segments box in the upper right hand corner of the screen and click on “Create a new advanced segment”. The following page lets you choose any dimension or metric as the basis for the segment. If you are unfamiliar with metrics and dimensions, see my post on custom reporting in Google Analytics. Your custom segment isn’t limited to one metric or dimension; you can create segments combining two or more different criteria for specialized data analysis.

Example:

OnlineStore.com has gone global. We need to know how our customers in Japan are finding our website. We create a custom segment with the dimension “Country” “matches exactly” “Japan”. We then add an “AND” statement, and include the metric “Goal1 Completions” as “Greater than or equal to 1″. We’re done. When applied, our segment will now show us all statistics related to Japanese visitors who convert Goal1, which in this case would indicate a purchase.

There’s no limit to what custom segments can show you. Test out the many available metrics and dimensions to gain a fuller understanding of how your analyses can be improved using custom segments.

Comments Off