Previewing how your serial novel website looks on various devices

It’s been a while since we’ve talked about design . I know several several folks have already put out their opinions on how to design navigation for a blog-based webfiction/ serial novel so I won’t revisit that topic.  However, I haven’t seen many blogs among the veterans regarding pointing out the need to design for multiple platforms.

Over the past few years, Google Analytics data for my website shows that a steady increase in people reading my stories from mobile devices — including tablets and smartphones.  The “real estate” for your words on a screen can vary significantly among visitors to your serial novel.

While my site does have a mobile view  that defaults to text without no images (and only menus) — there’s no guarantee that is what a person surfing in will see.   As I acquired an iOS table for reading stuff and surfing, I started to find my old header aggravating.   I noticed that the header on the tablet was eating up a lot of screen space. Because it’s bad form to have content fall too far below the first screen, I decided to try to slim down my existing header.  So far, okay with the results but I’m still muddling with the layout.

If you’d like to test how your site looks, you might like to surf over to the following two links and look at how this experience translates across different screen-widths.

Studiopress

This site allows you to preview what your site looks like at different widths (i.e., for those readers who may be viewing on tablets and phones).  A sample using my website is shown below. You have two phone widths on the left and two common tablet views on the right.

studiopress

Screenfly

If you need more advanced/specific capability (as in selecting out the actual device, i.e., iPhone 5) you can also try Screenfly at http://quirktools.com/screenfly/ and it’ll allow you to pick specific devices under various categories including tablets, mobile phones, television/monitors and offers a custom size selection tool in case your option isn’t identified.   In other words, you can have the same functionality as the above link but with more options. 

quick

The good news is for those of you who are using WordPress.com/org  systems, I think these platforms have built-in mobile capability and are tolerable on many devices.   I’d be curious to talk to you on BLogger sites about how it’s working for you!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s