<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Adobe Garamond Pro Bold";
panose-1:2 2 7 2 6 5 6 2 4 3;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1027" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p style="margin:0in;margin-bottom:.0001pt"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter" />
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0" />
<v:f eqn="sum @0 1 0" />
<v:f eqn="sum 0 0 @1" />
<v:f eqn="prod @2 1 2" />
<v:f eqn="prod @3 21600 pixelWidth" />
<v:f eqn="prod @3 21600 pixelHeight" />
<v:f eqn="sum @0 0 1" />
<v:f eqn="prod @6 1 2" />
<v:f eqn="prod @7 21600 pixelWidth" />
<v:f eqn="sum @8 21600 0" />
<v:f eqn="prod @7 21600 pixelHeight" />
<v:f eqn="sum @10 21600 0" />
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
<o:lock v:ext="edit" aspectratio="t" />
</v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_s1026" type="#_x0000_t75" style='position:absolute;margin-left:0;margin-top:.05pt;width:81.35pt;height:56.4pt;z-index:251658240;visibility:visible;mso-wrap-style:square;mso-width-percent:0;mso-height-percent:0;mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;mso-width-relative:page;mso-height-relative:page'>
<v:imagedata src="cid:image001.png@01D47753.DDFEEF10" o:title="" />
<w:wrap type="square"/>
</v:shape><![endif]--><![if !vml]><img width="109" height="75" style="width:1.1333in;height:.7833in" src="cid:image003.png@01D47753.F1B41990" align="left" hspace="12" v:shapes="Picture_x0020_1"><![endif]>The
new MeL not only contains new eResources but also looks very different: that was our goal! In this week's MeL Minute we address state-of-the-art web design and how we modernized MeL.org's look and functionality on October 1.
<o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">MeL hired a new firm for this design: Gravity Works in Lansing's Old Town. They built a website that works on all different types of devices and layouts: a mobile phone in portrait mode, a full-size laptop with a
touchscreen interface, a standard desktop computer, or even a Windows user who has snapped the browser to half of their screen. This gives us a large range of width and height considerations, so there is no true "above the fold" anymore. <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">The goal in most web designs is to make sure that each section of the page directs the user toward a specific item or set of related items. We also use negative space, or "white space" to help differentiate these
sections. This leads to a natural flow where each section is clearly differentiated but also does increase the total length of the page. If our goal were to reduce scrolling, though, we'd end up with a very cluttered, tight website where users would actually
have more trouble identifying the item they need. Without the photography, it’d also be difficult to tell the story or get the message across, as graphics aren’t as genuine (nor accessible). <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">Take a look at <a href="https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.apple.com%2Fiphone%2F&data=02%7C01%7CNorrisS2%40michigan.gov%7Cff90cb3bccb84bd28bd008d644c51091%7Cd5fb7087377742ad966a892ef47225d1%7C0%7C0%7C636772010508963507&sdata=8hecFw%2BWSV%2FlFZLaHRptLkCIACon2I7UD8HXKeNvdaY%3D&reserved=0">Apple's
iPhone page</a>, for example. Lots of scrolling and large, authentic imagery (not graphics). The <a href="https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.metmuseum.org%2F&data=02%7C01%7CNorrisS2%40michigan.gov%7Cff90cb3bccb84bd28bd008d644c51091%7Cd5fb7087377742ad966a892ef47225d1%7C0%7C0%7C636772010508973516&sdata=6GbKfAeRsZUhS%2FtPkwarqbHJiuUxRJr52isacevE77M%3D&reserved=0">Metropolitan
Museum of Art</a> is another good example: it doesn't scroll a lot on desktop, but on mobile, it's quite long. Even <a href="https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmsu.edu%2F&data=02%7C01%7CNorrisS2%40michigan.gov%7Cff90cb3bccb84bd28bd008d644c51091%7Cd5fb7087377742ad966a892ef47225d1%7C0%7C0%7C636772010508973516&sdata=H%2BfUrM0kx2N00rQC1w%2FHDIC2y%2BAxrBXKKcc2%2FeL3HRk%3D&reserved=0">MSU's
new website</a> has much more scrolling than its previous iteration. <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">Here's a <a href="https://www.washington.edu/accessit/webdesign/student/unit4/module1/Guidelines_for_web_graphics.htm">
good article about using graphics in web design</a>, and here's another about the
<a href="https://www.tone.co.uk/official-website-users-scroll-fold/">continual scroll debate</a>.
<o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">We've also added a Contact Us form to the site that garnered hundreds of responses from the public as well as library and school staff in the site's first five weeks: and we've answered every one of those queries.
MeL team members at the Midwest Collaborative for Library Services (MCLS) and the Library of Michigan are more accessible to you than ever.
<o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">MeL is fresh, contemporary, and we're glad to say that we're keeping up with modern standards of functionality, user expectation, and design.<o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="color:black;background:white">Brought to you by Kelly Staudinger of Gravity Works Design and Sonya Schryer Norris of the MeL Team.</span><span style="color:black"><o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt">Supporting Michigan Libraries by Putting You First.<o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="color:black"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="color:black;background:white">Want more information on MeL? Stay tuned for the next MeL Minute available on many Michigan library listservs, visit </span><a href="http://mel.org/"><span style="background:white">http://mel.org</span></a><span style="color:black;background:white">,
or sign up for the MeL Minute and other Library of Michigan e-mail lists via </span>
<a href="https://public.govdelivery.com/accounts/MILOM/subscriber/new"><span style="color:black;background:white">GovDelivery</span></a><span style="color:black;background:white">. We encourage you to share MeL Minutes with your colleagues and networks.</span><o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"> <o:p></o:p></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="color:black;background:white">MeL databases are available to Michigan residents or via Michigan library or school access only.</span><span style="color:black"><o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt"><span style="color:black"> <o:p></o:p></span></p>
<p style="margin:0in;margin-bottom:.0001pt">#IMLSGrant<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Sonya Schryer Norris<o:p></o:p></p>
<p class="MsoNormal">Library Consultant<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Library of Michigan<o:p></o:p></p>
<p class="MsoNormal">702 W. Kalamazoo St.<o:p></o:p></p>
<p class="MsoNormal">Lansing, MI 48909<o:p></o:p></p>
<p class="MsoNormal">517-335-1498<o:p></o:p></p>
<p class="MsoNormal"><span style="font-family:"Adobe Garamond Pro Bold",serif;color:#385623"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:red">MY NUMBER HAS CHANGED TO 517-335-1498<o:p></o:p></span></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><a href="https://michigan.gov/libraryofmichigan"><span style="color:#0563C1">https://michigan.gov/libraryofmichigan</span></a><o:p></o:p></p>
<p class="MsoNormal"><a href="http://mel.org/"><span style="color:#0563C1">http://mel.org</span></a><o:p></o:p></p>
<p class="MsoNormal"><a href="http://michlibrary.org/"><span style="color:#0563C1">http://michlibrary.org</span></a><o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>