Adaptive Images in HTML
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! What is Overthrow? Overthrow is a conservative attempt at filling the gaps in overflow support, with an emphasis on letting native implementations do their thing, and in touch-supporting browsers, providing a very minimal polyfill in browsers where native support is not available. First and foremost, Overthrow is designed to simply enable native CSS overflow in browsers it deems to have native support, but it includes a touch-scrolling polyfill too! A few example pages That's about it. Form elements
Navigation Menu Solution for Small Screens with jQuery Plugin | Tutorials
Nowadays, websites are not only being accessed from desktop. We can access websites from tablet or mobile devices anytime and anywhere. Therefore, a front-end web developer must create website that is compatible to all screen resolutions, from desktop to mobile devices. Here comes Responsive Web Design. When converting theme to support responsive layout, I always find a problem: how to fit the long menu into a small screen? We can dynamically create the dropdown menu from the original using some help from jQuery. With the help of jQuery when the user is on a small screen and clicks the dropdown menu, they will get an interface to select an option that is nice and easy to choose. I created a jQuery plugin for this script and you can download it at GitHub. About Author Arif Widipratomo Arif is our Front-End Web Developer.
Designing for a Responsive Web
The web as we know it is changing. In the past, designers and developers only had to concern themselves with one medium: the computer screen. In recent years, however, a plethora of fully internet-enabled devices with scores of different shapes and capabilities have cropped up, meaning that we now have to design our websites to fit comfortably in as many screen sizes, shapes, and resolutions as you can possibly think of. Our old fixed-width layout approach is out of the question now. What is Responsive Web Design? The idea of Responsive Web Design, a term coined by Ethan Marcotte, is that our websites should adapt their layout and design to fit any device that chooses to display it. In his book, the aptly titled "Responsive Web Design" he outlines the three parts to a responsive website: A fluid gridFluid imagesMedia queries However, it is important for you, as a designer, to understand the basic concepts of RWD so as to better design websites that will become responsive when coded.
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 src.sencha.io 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 $('#container').doubletake(); Config You can configure the breakpoints, the regular expression pattern to match on the src attribute and whether to update just on $(document).ready() or on $(window).resize() as well. 'breakpoints': [320,480,640,960,1024], 'pattern': '/slir/w([0-9]+)', 'watchresize': true breakpoints An array representing the sizes of images you want to use. pattern A regular expression used to replace the value of the src attribute. watchresize Browser support
Fluid CSS3 Slideshow with Parallax Effect
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. View demo Download source In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect. The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit). Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. The Markup We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. The CSS
TinyNav.js · Convert navigation to a select dropdown on small screen
RWD
