Splash Vector Graphics on your Responsive Site - HTML5 Rocks Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact. Vector graphics are a great way to deliver stunning visual results using minimal bandwidth. Many people think of canvas as the only way to draw a mixture of vectors and rasters on the web, but there are alternatives that have some advantages. A great way to achieve vector drawing is through the use of Scalable Vector Graphics (SVG) which is a key part of HTML5. We all know responsive design is a big part of handling varying screen sizes, and SVG is ideal for handling different size screens with ease. SVG is a great way to present vector based line drawings and is a great complement to bitmaps, the latter being better suited for continuous tone images.
Creating a Responsive WordPress Site Your Mobile Users Will Love As more and more people get online using a variety of mobile devices and screen sizes, it’s essential that your WordPress site is responsive and device-agnostic. Heck, you may even be reading this article on your phone right now. (How does our site look? Okay? Good.) In this post I’ll cover everything you need to know to give your site a responsive layout, but also ensure it gives your visitors the best possible experience on everything from 27-inch UHD desktop displays to 4-inch iPhone 5s screens. Responsive Web Design Sketch Sheets I’ve made some printable sheets for wireframing for responsive layouts, with corresponding Photoshop templates. Download .zip 1.2MB The Responsive Sketch Sheet Problem There are several well argued articles that champion the browser as the only place where the behaviour of adaptive/responsive layouts can be accurately described. This may well be true, but I would still advocate starting the whole design process with sketches on paper. Put simply, using a pencil to think visually has an immediacy that is clouded once software interfaces and html/css are introduced – these should come later, after the initial design concept has been formed.
Alaska Airlines drives app engagement with Passbook integration, push messaging The Alaska Airlines mobile application for iOS users has been updated to enable users to add their boarding pass to Passbook, helping the airline improve customer experiences and increasing engagement. The airline has offered electronic boarding passes through its native apps for some time but this is the first time they will be supported by Apple Passbook. The updated app also now includes push messaging to alert users to gate and seat changes, time changes and other travel updates that can be served in real-time. “Passbook has really been growing in popularity and Alaska’s customers were asking for this functionality,” said Joe Beninato, general manager of digital wallet for Urban Airship, Portland. “Their new Passbook boarding passes go beyond the electronic boarding passes Alaska already had in its app to automatically pop-up on home screens as customers arrive at the airport, and also automatically update if something like a flight time or gate change occurs,” he said.
Original Foursquare Investor Pitch Deck 2009 Foursquare is one of the biggest, buzziest startups in New York. Scratch that -- anywhere. The local check-in startup raised $50 million this past summer from Andreessen Horowitz and Spark Capital. Detecting and Responding to iPad Orientation Change in Adobe Edge Animate With the help of Simon Widjaja and friends’ Edge Commons Dirty Little Helpers library I have extended the Flexible Layouts Using Adobe Edge Animate and the Edge Commons Library tutorial to work on an iPad. Simon’s tutorial/demo works well on a browser when resizing and this demo takes that one stage further and uses the ‘window.orientation‘ event to trigger the resize code uses a simple <meta content> tag to ensure the device as it 100% and recognises the change in dimensions. You can still trigger the resize code in your desktop browser but this is designed to detect your iPad’s orientation too. I’ll write it up fully later with a walk-through of the functionality but for now you can just play around with it and look at the (fairly simple) code – also I thought it would be a nice start to the week!
50 fantastic tools for responsive web design As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment).
Media Query Snippets - list of media queries Landscape @media (max-device-width: 1024px) and (orientation: landscape) { } Portrait @media (max-device-width: 600px) and (orientation: portrait) { } @media (max-device-width: 1280px) and (orientation: landscape) { } @media (max-device-width: 800px) and (orientation: portrait) { }
Designing for Mobile, Part 1: Information Architecture Around 1993, my dad brought home a large, brick-shaped mobile phone. We were all incredibly excited by the new technology, even though none of us thought it would have a massive impact on our lives. I actually still thought of it as a gimmick, a few years later, when some of my friends decided to purchase them. Today there are six-billion mobile subscribers in the world – meaning if there were one mobile per owner then 87% of the world’s population would have one. And considering that fewer than three billion people use a desktop computer, that’s quite a big difference. Mobile devices are clearly here to stay, and along with them come a whole host of new constraints (and opportunities) for our designs.