<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style><head>
<style></style>
<table class="backgroundTable" cellpadding="0" cellspacing="0"
bgcolor="#ffffff" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 255); text-align:
center;" align="center"><span style="font-size:
10px; color: rgb(96, 96, 96); line-height: 200%;
font-family: verdana; text-decoration: none;">Email
not
displaying correctly? <a
href="http://www.oplin.org/4cast/"
style="font-size: 10px; color: rgb(0, 0, 255);
line-height: 200%; font-family: verdana;
text-decoration: none;">View
it in your browser.</a></span></td>
</tr>
<tr>
<td style="border-top: 0px solid rgb(51, 51, 51);
border-bottom: 0px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 255);">
<center><a href=""><img id="editableImg1"
src="cid:part2.06070500.07080902@oplin.org"
title="OPLIN" alt="OPLIN 4Cast" align="middle"
border="0"></a></center>
</td>
</tr>
</tbody>
</table>
<table style="width: 763px; height: 877px;" cellpadding="20"
cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td style="font-size: 12px; color: rgb(0, 0, 0);
line-height: 150%; font-family: trebuchet ms;"
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickbgwide.jpg"
bgcolor="#ffffff" valign="top">
<p><!-- Make sure you modify the 4Cast title in this section -->
<span style="font-size: 20px; font-weight: bold;
color: rgb(0, 0, 0); font-family: arial;
line-height: 110%;">OPLIN 4cast #392: Designing
for mobile</span><br>
<!-- Make sure you modify the date of the 4Cast in this section -->
<span style="font-size: 11px; font-weight: normal;
color: rgb(102, 102, 102); font-style: italic;
font-family: arial;">July 2nd, 2014</span></p>
<!-- Begin copy of Web Source here -->
<p style="text-align: justify;font-size: 16px;
font-family: arial; line-height: 110%;"><img
src="cid:part4.05030200.00020909@oplin.org"
alt="Converse shoes" align="left" height="90"
width="120">How many times have we told you guys
that mobile computing is important? (Looks like
about <a
href="http://www.oplin.org/4cast/?tag=mobile-computing">one
out of every ten</a> <em>4cast</em>s.) So, if
you have a website - and every library does -
what's the best way to design a mobile version of
your site? At the moment, there seems to be three
leading contenders for the right answer to this
question. The oldest way is to build a separate
mobile website tailored for smartphones, usually
with the letter "m" prefixed to the URL (e.g.,
m.oplin.org). These days you hear a lot about
responsive web design, in which the website is
designed to automatically respond to the mobile
device by rearranging the elements of the website
to best advantage. And sometimes you hear a third
possibility mentioned, usually called "adaptive"
or "dynamic," in which the website server detects
the device and serves up a ready-made page for the
correct screen size. Which is best? Responsive
design currently seems to have the edge, but the
decision is not unanimous.
</p>
<div> </div>
<ul style="text-align: left;">
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://searchenginewatch.com/article/2351176/How-Responsive-Design-Increases-the-Results-of-Your-Online-Marketing">How
responsive design increases the results of
your online marketing</a> (Search Engine Watch
| Kristi Hines) "Responsive design allows users
on any device - desktop, smartphone, or tablet -
to have the same experience. Some businesses
choose to go with a mobile-only and desktop-only
experience, but the trouble with this is the
lack of consistency between the two. People who
make a purchase on the desktop site will have a
completely different purchasing experience on
their mobile. And the most troublesome issue is
generally how a mobile-only design will not
include every page that a visitor will want to
see."</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://www.business2community.com/mobile-apps/responsive-web-design-cornerstone-mobile-strategy-0900512">Why
responsive web design is the cornerstone to
any mobile strategy</a> (Business 2 Community
| George Glover) "Google has advocated for
responsive web design and recommends it for
mobile configuration with its application (app).
The company further states that responsive web
design is in fact the industry best practice. So
why does Google advocate so insistently for
responsive web design? It's because these types
of sites have only one URL and the same HTML,
neither of which change regardless of the device
being used."</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://searchengineland.com/report-bad-mobile-decisions-result-68-pct-traffic-loss-194944">Report:
Mobile "configuration" errors cause 68 pct.
traffic loss</a> (Search Engine Land | Greg
Sterling) "By 'mobile configuration' the company
means responsive design, dynamic serving or
dedicated mobile sites (separate URLs).
BrightEdge found no significant general ranking
difference among the three approaches.... Yet
improperly configured mobile sites showed a much
worse outcome: 'an incorrectly implemented site
resulted in a drop in smartphone rank by almost
two positions (1.82 on average).' That lower
position translated into a 68 percent decline in
traffic. In terms of configuration errors,
BrightEdge said responsive had none (which makes
sense). Dynamic serving saw a 30 percent error
rate. But separate URLs (dedicated mobile sites)
saw a massive 72 percent configuration error
rate."</li>
<li style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;"><a
href="http://www.imediaconnection.com/content/36697.asp#singleview">Responsive
design vs. mobile websites: And the winner
is...</a> (iMedia Connection | Brandt Dainow)
"Responsive design rarely provides a
best-of-breed solution for the mobile user,
while mobile websites make sharing elements
difficult. It seems to me the solution to this
is to use 'adaptive design.' Under an adaptive
design system, the server works out what type of
device is connecting and serves a combination of
shared and unique elements. For example, it
might use the same content for all devices, but
use different artwork for smaller screens."</li>
</ul>
<div style="text-align: left;"> </div>
<p style="text-align: left; font-size: 20px;
font-family: arial; line-height: 110%;"><small><strong><em>Articles
from <a href="http://ohioweblibrary.org">Ohio
Web Library</a>:</em></strong></small><br>
</p>
<div style="text-align: justify; font-size: 16px;
font-family: arial; line-height: 110%;">
<ul>
<li><a
href="http://web.a.ebscohost.com.proxy.oplin.org/ehost/detail?sid=02d8a911-d844-4a0a-b4d0-d7575042b730%40sessionmgr4001&vid=1&hid=4204&bdata=JnNpdGU9ZWhvc3QtbGl2ZQ%3d%3d#db=aph&AN=90405356">Responsive
web design, discoverability, and mobile
challenge</a>. (<em>Library Technology
Reports</em>, Aug/Sep 2013, p29-39 | Bohyun
Kim)</li>
<li><a
href="http://web.a.ebscohost.com.proxy.oplin.org/ehost/detail?sid=8600bcf7-0bc5-4798-892b-d0fd4453a541%40sessionmgr4004&vid=1&hid=4204&bdata=JnNpdGU9ZWhvc3QtbGl2ZQ%3d%3d#db=aph&AN=93378674">That
was then, this is now: Replacing the
mobile-optimized site with responsive design</a>.
(<em>Information Technology and Libraries</em>,
Dec 2013, p8-24 | Hannah Gascho Rempel and
Laurie Bridges)</li>
<li><a
href="http://web.b.ebscohost.com.proxy.oplin.org/chc/detail?sid=22ab3ee5-9d07-4155-b962-de4996e1eb89%40sessionmgr111&vid=4&hid=112&bdata=JnNpdGU9Y2hjLWxpdmU%3d#db=cmh&AN=96354061">Flat
design travels to library websites</a>. (<em>Online
Searcher</em>, May/June 2014, p28-31 |
Darlene Fichter and Jeff Wisniewski)</li>
</ul>
</div>
<div style="text-align: left;"> </div>
<!-- End paste of web source here --> </td>
</tr>
<tr>
<td style="" solid="" background-color:="" rgb(255,=""
255,="" 255);="" >=""
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickbgwide.jpg"
valign="top" width="760"><span style="font-size:
10px; color: rgb(96, 96, 96); line-height: 100%;
font-family: verdana;">
<hr><!-- Begin standard subscription verbiage -->
<div style="text-align: justify;">The <strong><em>OPLIN
4cast</em></strong>
is a weekly compilation of
recent headlines, topics, and trends that could
impact public
libraries. You can subscribe to it in a variety
of ways, such as: <br>
</div>
<div style="text-align: left;"> </div>
<ul>
<li style="text-align: justify;"><strong>RSS
feed.</strong>
You
can receive the OPLIN 4cast
via RSS feed by subscribing to the following
URL:
<a class="moz-txt-link-freetext" href="http://www.oplin.org/4cast/index.php/?feed=rss2">http://www.oplin.org/4cast/index.php/?feed=rss2</a>.
</li>
<li style="text-align: justify;"><strong>Live
Bookmark.</strong>
If you're using the Firefox
web browser, you can go to the 4cast website
(<a class="moz-txt-link-freetext" href="http://www.oplin.org/4cast/">http://www.oplin.org/4cast/</a>) and click on the
orange "radio wave" icon
on the right side of the address bar. In
Internet Explorer 7, click on
the same icon to view or subscribe to the
4cast RSS feed. </li>
<li style="text-align: justify;"><strong>E-mail.</strong>
You
can have the OPLIN 4cast
delivered via e-mail (a'la OPLINlist and
OPLINtech) by subscribing to
the 4cast mailing list at
<a class="moz-txt-link-freetext" href="http://mail.oplin.org/mailman/listinfo/OPLIN4cast">http://mail.oplin.org/mailman/listinfo/OPLIN4cast</a>.
</li>
</ul>
</span> </td>
</tr>
<tr>
<td style="border-top: 0px solid rgb(255, 255, 255);
background-color: rgb(255, 255, 204);"
background="http://www.oplin.org/4cast/wp-content/themes/4cast/images/kubrickfooter.jpg"
valign="top" width="760"> <br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<title>OPLIN 4Cast</title>
<style>
.headerTop { background-color:#FFFFFF; border-top:0px solid #000000; border-bottom:1px solid #FFFFFF; text-align:center; }
.adminText { font-size:16px; color:#0000FF; line-height:200%; font-family:verdana; text-decoration:none; }
.headerBar { background-color:#FFFFFF; border-top:0px solid #333333; border-bottom:0px solid #FFFFFF; }
.title { font-size:20px; font-weight:bold; color:#000000; font-family:arial; line-height:110%; }
.subTitle { font-size:11px; font-weight:normal; color:#000000; font-style:italic; font-family:arial; }
.defaultText { font-size:12px; color:#000000; line-height:150%; font-family:trebuchet ms; }
.footerRow { background-color:#FFFFCC; border-top:0px solid #FFFFFF; }
.footerText { font-size:10px; color:#996600; line-height:100%; font-family:verdana; }
a { color:#0000FF; color:#0000FF; color:#0000FF; }
</style>
</body>
</html>