Portland ME Web Design and Development | Krafty Design and Development

Here's a great cheatsheet for pinpointing the exact breakpoints for the various flavors if iPhones and iPads.

http://stephen.io/mediaqueries/ Read more about Various Breakpoints for Devices

Here's a great page featuring a nice collection of animated hamburger menu buttons. The buttons are built in CSS/SCSS, and perform beautifully in modern browsers.

https://jonsuh.com/hamburgers/ Read more about Animated Hamburger Buttons

If you are using SASS/SCSS as a precompiler for CSS, here is a really useful cheatsheet to help remember all the wonderful functions.

https://sass-cheatsheet.brunoscopelliti.com/ Read more about SASS Cheatsheet

Alas and alack, MS Outlook 2016 continues the trend of of being awful at rendering CSS and HTML for emails. Here are some great tips for coding to (or around) 2016's particular set of rendering bugs Read more about Fun with Outlook 2016

Anyone who has had the "pleasure" of designing email has probably come to one very poignant conclusion: MS Outlook is terrible at rendering CSS and HTML for emails. The reason for this is that, starting with Outlook 2007, Microsoft thought it would be a reall great idea to stop rendering HTML email with the Internet Explorer engine, and instead render it with the MS Word rendering engine. Yes, you read that correctly: Word handles HTML and CSS for any emails in Outlook. Read more about Fun with Microsoft Outlook HTML Email

I love HTML5 and all its wonderful, new little attributes that make the life of the developer easier and more enjoyable. For example, the placholder attribute, which you can use on text input fields in forms. Why is it great? Because it allows you to place a label inside the form that automatically disappears when the user starts typing text in it. Before HTML5, everyone was doing this, yes, but you had to include javascript to make it work. Not so with HTML5! Now the placeholder attribute has all that UX goodness for you, right in the browser, no js necessary. Read more about jQuery Fallback for HTML5 Placeholder Attribute

Came across this great cheat sheet listing many of the special HTML characters (or glyphs) we, as web developers, come across from time to time. In addition to listing the the HTML code, the chart also lists the numeric code; a description of the character; the HEX code; the ISO in CSS content (for use with pseudo-selectors like :before and :after); and the Octal (I'll be honest, I've never had to use this one before). All in all, a super-handy reference sheet to have around. Read more about Cheat Sheet for Special HTML Entities

I ran into a task today that led me to wonder about the best approach to create and implement CSS background images for hi-resolution displays like those found on more and more mobile phones and tablets. Hi-res displays, like those phone on the iPhone, iPad, Kindle HD, and the latest Motorola Droid and Samsung Galaxy phones, are capable of rendering stunning, sharp images—but only if you supply them through your Website or app. Read more about CSS: Background Images for Hi-Resolution Displays (like Apple's Retina)

It has become increasingly important to make sure your layout doesn't break when viewing your Website on a phone. So what do you do when, in Android or Google Chrome, you notice that your layout is blowing out because of an especially long word (or line of unbroken text, like a URL)? Read more about Prevent Long URL's From Breaking Your Layout

Have you ever tried to print a web page from your browser and found some crucial piece of content is being cut in half at the page break? There's a very easy way to fix this using CSS for print. Read more about Print CSS: page-break-inside