Basic Elements of Responsive Web Design Jason Bengtson, MLIS, AHIP Emerging Technologies/R&D Librarian UNM Health Sciences Library and Informatics Center

What Is Responsive Web Design? One site for mobile and desktop users Adjusts layout and content dynamically based on screen size Can be scaled for many screen sizes or even device characteristics

Should I Use Responsive Web Design? Does It Make Sense For My Project? Is My Site Intended For Desktop AND Mobile Audiences? Am I Prepared To Invest The Extra Time?

Things To Consider Is this a new project or am I retrofitting something? How do I detect different screen sizes? Is it only layout or will content need to change? How can I reduce loading time?

What Does It Look Like? On a desktop On a tablet On a smartphone

How Do I Do It? The easiest way: use Twitter’s Bootstrap framework There is a mild learning curve Provides additional plugins for other useful features Grid based layout May be overkill for some projects

Do It Yourself Can work well for smaller sites/projects Allows you unlimited customization Requires more knowledge than using Bootstrap Potentially less overhead Allows for some simpler models

Fluid Grid Based Layout Offers standard layout based on percentage values Easy to set up in Bootstrap using baked-in classes Sections resize/move/turn off in predictable ways

How Do I DIY? Plan new projects from a “mobile first” perspective Decide what screen sizes to build around Use floating divs Use CSS to turn elements and divs on and off Use media queries to load specific CSS

Sizing Things You may not always need a fluid grid, but if you do: Use percentage widths for divs Use percentage based widths for flexible screen and (min-width: 900px) { #mymug { margin-right: %; width: %; }

Media Queries Also used by Bootstrap Won’t work with some older browsers (use conditional comments for IE8 and earlier) Don't directly interact with Javascript Use mobile for your base CSS:

Floating DIVs The proper way to format HTML Okay to start out with an invisible table Use float:left and float:right along with setting div widths Add a div styled clear:both to end floating column divs

Turning Things Off and On Assign classes for divs that you want off or on depending on screen size Use display:none instead of visibility:hidden Browsers may still load the hidden content (often won’t reduce image overhead)

Use jQuery to change the destination of selected links based on screen size ( Bengtson, Jason. "Scaling Into the Future with Smart Links." Journal of Hospital Librarianship 12.4 (2012) ) Click Here $(document).ready(function(){ $("a.mobilev").click(function(e){ e.preventDefault(); var linkit=$(this).attr("rel"); var reglink=$(this).attr("href"); mobileswitch(linkit, reglink); }); function mobileswitch(linkit, reglink) { if ((screen.width <= 799)||(navigator.userAgent.indexOf('Mobile') != -1)) { window.location = linkit; } else { window.location = reglink; } } }); Change Link Destinations

Improving mobile performance Reduce external file calls Dynamically set image sources Convert images to base 64

Reducing File Calls Combine multiple Javascript and CSS into single script and style files Use internal Javascript/CSS Use internal CSS media queries, instead of multiple style all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { body { background-image:url('ultimate.png'); }

Dynamically Sourcing Images And Other Content Images can only be done in CSS by setting background image on a div Can be done using Javascript/jQuery: if ($(window).width() > 800){$(".desktop").html(' ');}

Setting Images As base64 Allows you to avoid external image calls Tends to be ignored by firewalls Many free tools available for conversion Makes for ugly source code

base 64 in CSS #main h2 {margin: 5px 0;padding: 5px;border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font-size: 16px;font-weight: bold; background: #CCCCCC url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9 KAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAA GYktHRAD+AP4A/usY1IIAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAJdnBBZwAAAA4 AAAAeAPuZ46YAAADESURBVDjLnVRJEsMwCAOP//9k6IkpyGwtlzgMiiQDYRFRGoKZS TWWnQlERA+oBGaFmLtZ0Qa8kppFybgCZrdGFG8Tz6fyg3k8p4yVgiCViEhEHiZmDkz4 setBVuwBKNFqbuWp8mvPg8mKqZycDIQX5m0FoPfYtSYAJ48Y5ax2HlX12w7fN+sZKgh 9rBim+Hs7Vh5TRhF5VmYF7Px14NsV4NB7ZXcz2Nn7sX5thtvXhLXChe58p1I7+ebz5/9q WOTMw9THD2rHEYZoL8zAAAAAAElFTkSuQmCC') repeat-x scroll 0 0; }

base 64 in HTML

Additional Reading responsive-web-design responsive-web-design

Questions ?