New Author Webpages are coming in Responsive Web Design

Over the last couple of months I have been blogging about the steps Outskirts Press is taking to transition all our web properties and email communications to RWD (responsive web design), which allows for an aesthetic and functional user-experience that is seamlessly branded regardless of the type of device being used by our clients.

Those milestones were:

  1. Landings Pages
  2. Email Communication
  3. Newsletters
  4. Author Webpages
  5. Outskirts Press External
  6. Outskirts Press Internal

Previous postings have discussed milestones 1-3. That brings us to the new RWD author webpages, which are going to become available soon for our authors.

Our current author webpages have not been updated since I programmed them way back in 2002. That’s a millennium in Internet-time! To say they desperately needed an update is an understatement.

And boy, did they get one!

new-authorpage-desk

The new RWD author webpages look great regardless of the device being used.  It won’t matter if our authors’ customers are viewing them on a desktop (above), or a tablet…

new-authorpage-tab

… or a smartphone:

new-authorpage-phone

In addition to the “RWD-ness” of the new author webpages comes other commonplace conventions in this day and age, namely social media buttons, multiple format choices for paperbacks (hardbacks, when available) and Kindle, Nook, and iPad editions (when the author has published those versions).

As you can see from the examples above, I’ve linked my author webpage for Sell Your Book on Amazon to my Facebook account and my Twitter account, and as a result, those two links automatically appear on my author webpage in the upper right-hand corner on the desktop and tablet view, respectively. This social media functionality is reserved for our Ruby, Diamond, and Pearl authors (over 80% of our clients) and will also include availability for YouTube, Pinterest, Instagram, and Linked-In if authors have a presence on those social media sites.

Of course, linking each author’s webpage to his/her personal social media channels requires acquiring that information from each of our authors, and that’s the process we’ll talk about next time.

Self-Publishing Newsletters in Responsive Web Design (RWD)

Over the past several weeks I’ve been discussing the milestones involved in migrating the Outskirts Press web presence and email communication to RWD (responsive web design), which I defined here.

page-2_img01-1Those milestones were:

  1. Landings Pages
  2. Email Communication
  3. Newsletters
  4. Author Webpages
  5. Outskirts Press External
  6. Outskirts Press Internal

We’ve already discussed the new RWD landing pages and the on-going process of migrating our various forms of email communication with our client-authors.  October 15 marked the first newsletter to be formatted online and distributed via email in RWD, and it was a great success. Today was the second such distribution (seeing how today is the closest business day to the first of the month).

The distribution of the newsletter is a three step process.  An email version gets sent out via email to the client-authors who have subscribed to it.  In the past, this email would contain the entirety of the newsletter content, and in HTML tables that were pretty rigid (non “liquid”) irregardless of device.  The result on a desktop monitor was fine, and even on most tablets it looked pretty good.  But if you were receiving our emailed newsletter on your smartphone (as more and more people are doing), it was challenging to read because the HTML tables forced the whole design (and therefore the fonts) to be too small for easy viewing.

So step one was to design a new RWD version of the emailed newsletter.  And, in doing so, we also truncated the sections so they were shorter (no one likes scrolling forever and ever on their phone), which encourages more click-thrus to our online website version to “read the full story.”

The second step, therefore, was creating that online website version of the newsletter, also in RWD.  And you can see that version by clicking here.  If you take your mouse and “grab” the corner of your browser window and “slide” it larger or smaller or wider or narrower, you can see how the RWD reacts dynamically to the size of your browser.

The third step is distributing the newsletter content through our various social media channels, which begins with posting it on the Outskirts Press blog, where it is picked up via RSS syndication for distribution to our Twitter and Facebook pages.

Done and done.

And that brings us to the fourth milestone in our full migration to RWD — the author webpages.  And I’ll start that (larger) subject next time.

Email communication in RWD

Over the last few posts I have been talking about the migration steps Outskirts Press is currently involved in to transition our web presence to RWD (responsive web design). Last week I talked about the first milestone, landing pages.

Email communication is the second milestone, and this is such a large undertaking that it is on-going even as we proceed to the third milestone, newsletters, which I will discuss next time.

There are many ways we communicate with our clients via email, so transitioning our email communication to RWD is a big project.  The main way we communicate via email is also the most common — when one of our authors writes us an email and we respond (or vice versa).  Since this form of communication rarely includes graphics, and is almost universally in text-format, this type of email communication does not require a migration to RWD.  Simple emails already look fine across all forms of devices.

The next type of email communication we have with our clients are “front-end” communications. These are a combination of automatic and “human” emails that communicate with our non-published authors. While the majority of these emails do not contain graphics, either, a migration process is necessary because many of them were previously formatted in HTML to “make them look nicer.”  Well, they looked great on computer monitors and tablets, but were often too small to read on phones.  Hence the necessity to migrate them to RWD, so they look great regardless of the device our authors read them on.

Another type of email communication is our trademarked Marketing COACH, which consistently provides creative, online assistance, coaching, and help to our published authors for literally years after publication. No other publisher offers anything like it.  Most of these emails contain graphics and links (especially to our author community pages on Facebook, Twitter, YouTube, Instagram, Pinterest, and Google+) and therefore the migration to RWD was very important.   Needless to say, changing years and years of marketing emails is a daunting undertaking, and this is a process that is currently on-going, even as the next stages are also being worked on.  Here’s an example of a new Marketing COACH email in RWD as it appears on desktop monitors and tablets vs. smart phones.

blog-compare-coach

The final type of email communication is our newsletter, which is distributed via email and also available on our website.  We distribute two newsletters a month, at the beginning and middle of each month.  Tomorrow’s newsletter will be our first newsletter in RWD, and one more milestone we’ve completed.  More about the RWD newsletter next time…

Migrating to Responsive Web Design (RWD)

In my last post I mentioned the 6 milestones Outskirts Press has identified in the course of migrating our web presence to RWD (responsive web design, which I defined previously). Those milestones are:

  1. Landings Pages
  2. Email Communication
  3. Newsletters
  4. Author Webpages
  5. Outskirts Press External
  6. Outskirts Press Internal

Let’s talk about the first milestone, landing pages, which is a milestone we have already met.  Outskirts Press does a fair amount of search engine marketing, and when someone clicks on one of those SEM links, they arrive on a “landing page” which is designed to educate the author about our self-publishing services. We have different landing pages based upon the advertising we are doing. If someone is interested in publishing a children’s book with us, for example, they arrive upon a different landing page than if they’re interested in writing a thriller, or a self-help book. We’ve gone through a number of landing pages over the years, and up until the RWD-redesigns, the last landing pages had been with us for a long time.

So it was time for new landing pages anyway.  Like any RWD redesign, the trick is to make the page look great regardless of whether you are looking at it on a wide-screen monitor or a smartphone in portrait orientation. Add to that the multiple objectives of a landing page in general, which is to acknowledge the wording of the SEM advertisement, inform the client of our available services, and motivate them to either contact us or provide their contact information, usually through the use of a free whitepaper or e-book or some other giveaway.

Since updating our landing pages to RWD, our engagement rate on those pages has improved by 50%. I’d say it was a milestone worth reaching.  Next time we’ll talk about the Email Communication milestone. In the meantime, here are screen shots of the new landing page on two different devices, so you can see how they look the same, and yet different, based upon the device being used by our clients.

screensplp-desktopscreensplp-phone

The steps to migrating toward RWD (responsive web design)

In the last post, I provided a general description of what RWD is, along with some of its benefits.  In brief, RWD websites look (approximately) the same on a variety of devices ranging from desktops to tablets to laptops to smart phones while functioning great on any device. I also mentioned that Outskirts Press is in the process of migrating its web presence to RWD.

The good news is, many of the websites where authors can learn about Outskirts Press are already in RWD, and these include all the social media sites that make up our Author Community — sites like:

Look at any of these links on a desktop, tablet, or phone and they’re going to look and work great. Our challenge then, is to migrate the rest of our web presence, namely our own pages, into RWD, too.  That’s the goal of our RWD Migration in a nutshell, and that is the process we’re currently involved in. Like all major projects, it has a couple of major milestones that increase in difficulty (and development time).

  1. Landings Pages
  2. Email Communication
  3. Newsletters
  4. Author Webpages
  5. Outskirts Press External
  6. Outskirts Press Internal

I’ll discuss each of these in turn, beginning with the Landing Pages next time.

What is Responsive Web Design (RWD)?

According to Wikipedia, responsive web design (RWD) is: “an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

Typically a site designed with RWD adapts to the layout of the device being used (including the orientation of how it is being held—either horizontally or vertically) by using fluid, proportion-based grids (think Windows 8-10), dynamically-proportioned images, and CSS3 media queries. As RWD layouts becomes more sophisticated, the “grids” of earlier iterations of RWD are becoming more and more “invisible” and what is left is an enhanced user experience that looks fantastic, and acts the same, across any type of device.

Naturally there are some design challenges, considering that a desktop monitor can be over 2000 pixels wide while a mobile phone in portrait orientation is as little as 200.  This is very apparent on sites NOT designed with RWD in mind, since smart phones will typically shrink the entire website proportionally, often rendering the text too difficult to read.

So significant was/is this problem that most websites have “mobile versions” solely for the purpose of looking good on smartphones and/or tablets.  Of course, the challenges of designing something to look equally good at 2000 pixels as 200 often means the mobile versions look significantly different from the “normal” versions.  Good-bye branding.

page-2_img01-1An RWD website offers the solution to this issue by ensuring that the website looks as similar as possible across all devices.  It also eschews the need for an entirely different “mobile version”, which can save on development and on-going maintenance costs over the long haul. Developing and maintaining one RWD website is more efficient than developing and maintaining both “normal” and “mobile” versions of a website.  Additionally, Google “rewards” mobile-friendly (and particularly RWD-enhanced) websites by improving their organic search result rankings.

So what does any of this have to do with self publishing with Outskirts Press?  We are deep in the process of migrating our website to RWD to further enhance the publishing experience for our clients; so you could say it is on the top of my mind.  Over the next several posts, I’ll get into more details about that migration.