https://www.amherst.edu/ en https://www.amherst.edu/users/H/dhamilton/demos/2012_responsivedesigndemo/node/427172 <span class="field field--name-title field--type-string field--label-hidden">Mobile and responsive design</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/user/33229" class="username">David L. Hamilton</a></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2012-08-14T13:49:00-04:00" title="Tuesday, August 14, 2012, at 1:49 PM" class="datetime">Tuesday, 8/14/2012, at 1:49 PM</time> </span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>How many folks in this room have a smartphone?</p> <h3>Some quick facts:</h3> <ul> <li>Most of our students now have a smartphone/device (1400+ smarthphones or ipods registered by students last semester)</li> <li>Mobile devices are projected to become peoples' primary internet access device. This is already happening in the developing world and in the the lower socioeconomic rungs</li> <li>Mobile access to the college website is growing exponentially - ~5% of visits last year this time, &gt;10% of visits today</li> </ul> <h3>Three things we're doing about this:</h3> <ol> <li><a href="m.amherst.edu">m.amherst.edu</a></li> <li>a mobile app, in time for homecoming, mostly targeting alumni but with features all users will like (directory for example)</li> <li>website redesign using responsive design principles.</li> </ol> <h3>Quick show of hands, who knows what responsive design is?</h3> <p><strong>Example</strong>:<br><a href="http://foodsense.is/">http://foodsense.is/</a><br><br><strong>Things to take note of:</strong></p> <ul> <li>Navigation changes based on the device</li> <li>Images are automagically scaled</li> <li>Sometimes, functionality and even sections of content are removed as you scale down.</li> </ul> <p><br><strong>Why is this approach becoming a best practice?</strong></p> <ul> <li>most cost effective/efficient way to make content available to the most devices/users</li> </ul> <p><strong>Another example:</strong></p> <ul> <li><a href="http://nd.edu/">http://nd.edu/</a></li> </ul> <h3>What else and what comes next?</h3> <ul> <li>working on use of analytics to inform college's approach to content development and design</li> <li>We'll use what we learn to inform what 1, 2 and 3 look like next year. All bets are probably off - will we have all three of these? Will they look the same? Will we have one mobile app, or 5? I'll place my bet that at least one of these will see dramatic change.</li> <li>Stop using tables. <strong>Just</strong>. <strong>Stop</strong>. <strong>Using</strong>. <strong>Tables!</strong> (<em>unless you have tabular data you want to display</em>).</li> <li>When you think images, think big - you want to provide the largest image for display, not the smallest. The cms will take care of scaling that down appropriately for devices with smaller screens.</li> <li>mobile first is a strategy increasingly being adopted by content producers. We think we need to get the college there. We're not ready yet, but we're talking about it.</li> </ul> <p><strong>A quick teaser if time permits:</strong></p> <p><a href="https://wsgdev3.amherst.edu/dru6-themedev/campuslife">https://wsgdev3.amherst.edu/dru6-themedev/campuslife</a></p></div> Tue, 14 Aug 2012 17:49:00 +0000 dhamilton 427172 at https://www.amherst.edu