background preloader

Convert a Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you're on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose. That sure makes it easier to pick a place to go than a tiny link. Yeah, it's two taps instead of one, but that's arguable since you'd probably have to zoom in to tap the right link otherwise. The HTML The HTML for these two menus is different. Let's go with that for now. The CSS By default we'll hide the select menu with display: none;. Then using media queries, we'll do the switcheroo at some specific width. But now you gotta maintain two menus? Well yeah, that's one concern. Using jQuery, we can do that with just a few lines of code: Then to make the dropdown menu actually work... But aren't dropdown menus kinda obtrusive? Kinda.

Related:  responsive designresponsive web design

Responsive Data Table Roundup There has been a bunch of takes on responsive data tables since I first published about it. The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. Responsive Design’s Dirty Little Secret The truth is that fluid grids are broken. Well… perhaps just cracked a bit. Responsive Web design, as Ethan Marcotte defines it, is simply a fluid grid, fluid images and media queries. But fluid grids have a dirty little secret: rounding errors.

Having Fun With CSS3: Spinning Newspapers Martin Angelov Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice. What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way. Doubletake - Lab - Graham Bird Doubletake dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary. I'm using a couple of tools to help me resize the images on this page - a local copy of SLIR and the web service. If you aren't comfortable resizing images on the fly, you could simply host multiple copies and then set the Doubletake breakpoints to the sizes you have created. Basic usage

Overthrow A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. Disable Overthrow What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. Many popular mobile browsers treat overflow: auto the same as overflow: hidden, cropping overflow content from view, and leaving users no way to access it. But wait - many browsers actually support overflow very well!

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column Guidelines For Mobile Web Development This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to design and development for mobile devices and published here over all the years. Why We Shouldn’t Make Separate Mobile Websites There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites.

Hoverizr - A responsive jQuery Image manipulation and overlay plugin Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.

Related:  PluginswebdesignResponsiveTutorials