Posts Tagged “HTML”

RWD Techniques

Posted on May 15th, 2013 by webninjataylor

box-sizing: border-box; will take padding into account so 100% width doesn’t spill off the page and 100px item with 10px padding stays at 100px instead of 120px…  The padding is counted inside the width… [NOTE: May need vendor prefixes and IE hack] % values for widths… target(px)/context(px) = result%) Media queries Resources http://www.youtube.com/watch?feature=player_embedded&v=wDdrI7N-mWM

HTML5 + CSS3: Figure Numbering

Posted on May 15th, 2013 by webninjataylor

<figure> <img alt=”” src=”path/to/your/image.jpg” /> <figcaption>Here is the legend for your image</figcaption> </figure> counter-reset which is used to initialize and reset one or several counters counter-increment which is used to increment one or several counters counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display […]

Tags: ,
Posted in Web ShotsComments Off on HTML5 + CSS3: Figure Numbering

Responsive Menu Layout

Posted on May 14th, 2013 by webninjataylor

Define CSS breakpoints with media queries (ie. button for small width vs. full menu for wider) Hide button for wider, thus… The JS can react when the button is visible or not for appropriate device behaviors Resources Behavioral Breakpoints

Multi-device Web

Posted on May 14th, 2013 by webninjataylor

Things to consider when developing in today’s web landscape: Screen size Input types (keyboard, mouse, touch) Common postures/modes of use (ie. phone users mostly use just their thumb which warrants larger touch areas and single-column layout) Consider having content on sides of screen for tablets instead of the traditional middle of the screen for laptops and […]

HTML5 Local Storage via JavaScript

Posted on May 7th, 2013 by webninjataylor

Save to local storage via .setItem() with a key/value pair localStorage.setItem(‘my_key’, ‘array,string,whatever’); Pull from local storage via .getItem() using the key localStorage.getItem(‘my_key’);

IE8 HTML5 Shiv

Posted on April 17th, 2013 by webninjataylor

If you’re not using Modernizr to pull in the shiv, just add a call to the shiv directly in the head of the HTML… <!–[if lt IE 9]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>