ReView. The Responsive Viewport. Installation Include ReView.js in the head of your HTML document, just after your viewport meta tag. Note the lack of initial-scale in the viewport meta tag. This often allows for a cleaner viewport switch. ReView works without a meta tag, but providing one is recommended. Usage Any link(s) with the class ‘reView’ will automatically switch the viewport. Links are only made visible if viewport switching is possible. <a class='reView' href=' Ensure that the links are hidden via CSS to ensure that users with JavaScript disabled do not see them. Anchor Text Updates When a viewport is successfully set all ReView anchors on the page are updated. By default the text is updated with ‘Core View’ and ‘Default View’ as appropriate. Custom anchor text can be supplied via the data-attributes data-defaultText and data-coreText <a class='reView' data-defaultText='Mobile View' data-coreText='Desktop View' href=' Supported Devices
Creating a Mobile-First Responsive Web Design Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size. View the demo Structure Style Less JS
Designing for Retina Display The devices on which the web can be displayed increases everyday. Rather recently Apple released its new set of Macbook Pros with retina display, so called because at a normal viewing distance users wont be able to see any pixels. Designing for such a high resolution however, can become a little more tricky than you would expect. Over the years the resolution of your average monitor has gotten bigger and bigger. If you’ve upgraded your monitor to a larger resolution but with the same physical monitor size you will probably notice that the elements (windows, icons, etc) will have reduced in size. The sizing of elements on a retina display is adjusted for usability purposes Now this may seem like not that big of a deal, but the pixels on the new Macbook Pros are so small that a window that is 180 pixels across will take up a really tiny amount of space. The object on the left takes up twice as many physical pixels Images Step 1: use icon fonts where possible When possible, use an icon font.
Foundation Icons Fonts - ZURB Playground - ZURB.com settings heart star plus minus checkmark remove mail calendar page tools globe cloud error right-arrow left-arrow up-arrow down-arrow trash add-doc edit lock unlock refresh paper-clip video photo graph idea mic cart address-book compass flag location clock folder inbox website smiley search phone General Enclosed Set Social Set thumb-up thumb-down facebook twitter pinterest github path linkedin dribbble stumble-upon behance reddit google-plus youtube vimeo clickr slideshare picassa skype instagram foursquare delicious chat torso tumblr video-chat digg wordpress Accessibility Set wheelchair speaker fontsize eject view-mode eyeball asl person question adult child glasses cc blind braille iphone-home w3c css key hearing-impaired male female network guidedog universal-access elevator How These Were Built Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. How to Use Them We've made it super easy for you to get going with these icons! Merge in the Styles
Maintaining Image Hierarchy And Aspect Ratio In Responsive Design For the last few weeks we’ve been talking about images in the context of responsive design. We looked at how to serve different images to different devices and then a couple of potential ways to replace bitmap images with icon fonts and SVG. While collecting resources for those posts I came across a few more image related issues and thought I’d combine them in a single post and present them here. Maintaining Image Hierarchy The first step in having your images be flexible is to set max-width to 100% and let the height of the image adjust. But because of this banner image’s wider aspect ratio, when it’s squeezed down to fit a narrow column it loses its position in the visual hierarchy of the page. Because adaptability is based on width, horizontal images need to scale more than vertical images. Check Andy’s post for a good example where this happens on a site and also an example where the hierarchy is preserved. Controlling Aspect Ratio with object-fit Making Image Maps Responsive Summary
How to Build a Responsive Thumbnail Gallery Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works. One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. Sneak Peek Before we get started, take a quick look at what we’re building. Demo: Click here to launch the demo. Initial HTML Let’s jump into this project with some basic HTML. To add items to the gallery, simply copy and paste the galleryItem div (our example will use ten of these). Container Styles To begin our CSS, let’s set a width to the container and center it on the page. Notice that I’ve set the width with a percent. Basic Gallery Styles Now let’s attack the galleryItem class basic styles. I also added some image styling here. Flowing the Columns Where It Gets Ugly
How to Use Responsive Web Design to Support Old Browsers In my previous article, Is Internet Explorer Development Really a Waste of Time?, I hinted that it’s possible to support older browsers without significant development effort. In this tutorial, we’re going to create a simple web page which works in all modern browsers as well as IE8, IE7, IE6 and possibly earlier versions. Before we start, please note that we’re not aiming for pixel perfection or identical functionality. That will never be possible, so don’t even bother. The Objective This is the design we’ll attempt to create in modern browsers: click any thumbnail to view the full-sized screenshot… It’ll never win any awards, but contains typical components such as a header, footer, content, sidebar and drop-down CSS menu. Assume we coded this page using standard HTML5 and CSS. While we’ve all encountered worse issues, the site is fundamentally broken. IE7 fares better but its weird margin handling causes the titles to be cropped. IE8 is acceptable. Responding to the Problem The Solution
Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .