background preloader

Responsive Design bookmarklet

Responsive Design bookmarklet
This was inspired by, and based on @lensco‘s excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original script, I thought I’d expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you’re interested in. A big thanks to Alaska Airlines for the delayed flight that made this possible, and the really boring project that I know I should be working on, but can’t find the motivation. Urgh.

http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

Related:  Responsive + Fluiduseful sites for web designresponsive

Replacing Respond JS with Sass So you’re building some really cutting/bleeding edge web sites. You’re using HTML5, CSS3, and media quieries to serve your users some fast, repsonsive, and beautiful code/websites. Your life is great, and you love the work you’re producing… Then you have to make sure your code is working in legacy browsers like IE7 and 8… So you throw some polyfils like Modernizr at these legacy browsers… and now they understand HTML5. You used progressive enhancement from the beginning, so the CSS3 you’re using looks fine in browsers that don’t understand it. And finally, you fired up some virtual machines and checked to make sure everything is working fine.

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 IETester is free.To support the projectyou can make a donation : or you can translate it. IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of IE11, IE10, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the installed IE in the same process. This is an alpha release, so feel free to post comments/bugs on the IETester forum. Requirement : Windows 8 desktop, Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7) Note for IE10 : IE10 is not available on IETester if it is not the default IE version installed on the system. So IE10 is only available on Windows 8 machines.

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. Nonetheless! 20 Incredibly Useful Tools & Resources for Web Designers When it comes to Web design, the tools you use play an integral part in your results. Of course, we’re big fans of getting down to the basics, like putting pencil to paper, but sometimes finding new apps and resources can help you get those creative juices flowing. Check out our list of 25 incredibly useful tools and resources for designers and developers below. Then, be sure to let us know your favorites (or if we missed your favorite) in the comments!

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.

Using jPanelMenu with jRespond Using jRespond with jPanelMenu Responsive design is an amazing revolution in our industry. It’s changing every part of our process — definition, planning, design, development, and beyond. But, as we all know, design is only one part of the equation. Free Screenshot App Marketing Tool & Templates How do I record my iOS app? Please click here for instructions on how to record your iOS app. How do I record my Android app? Please click here for instructions on how to record your Android app. I've installed Recordit but it keeps asking me to install Recordit If you're on a Mac, you'll want to check to see if you have your notifications on "Do Not Disturb".

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!

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. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries.

Related: