HTML5 and CSS3 Without Guilt Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age. Prologue HTML5 Semantic Elements The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements -- even in browsers which don't officially support them. IE Conditional Comments Implementing many of the solutions in this tutorial involves including some JavaScript for specific Internet Explorer releases. Here are some quick examples: Checks if the browser is Internet Explorer 6. Checks for a version of Internet Explorer greater than 6. Tool 1: HTML5 Shiv In anything IE, excluding the most recent version (IE9), you cannot apply styles to elements that the browser does not recognize. At this point, they can be styled normally. Tool 2: Modernizr Usage Tool 3: IE 6 Universal CSS DOMAssisant
CSS-only: Load images on demand - Pavel Podlipensky Published on June 5, 2013 by podlipensky The brain is a muscle, and as all muscles, it needs regular exercise to keep sharp. Thats why I decided to take very old (but efficient) web optimization technique and implement it in new crazy way. You most likely heard about loading images (and other resources) on demand – which is not only a common sense, but also a good way to speedup initial page load. Usually it is implemented via JavaScript, but today I’ll share with you how you can achieve the same effect by using pure CSS. Few more words about the problem: we have a set of images to show to a user, but only some of them will be visible to the person after initial page load. First problem we need to solve is how to prevent browser from loading all the images from start? Next let’s think about what styles or CSS selectors are changes whiles user scrolls? Then I’ve noted that user’s cursor hover different elements while scrolling the page.
MetaExtensions This page lists the allowed extension values for the name="" attribute of the <meta> element in HTML5. You may add your own values to this list, which makes them legal HTML5 metadata names. We ask that you: avoid redundancy - if someone has already defined a name that does roughly what you want, please reuse it. be sure to include all the items required by the spec including a link to a specification that specifies the keyword as an HTML meta keyword. Note that URL-valued properties must not be registered as meta names but should be registered as rel keywords instead. Also note that changes to this registry will not be reflected in validators in real time. Registered Extensions Proposals that don't meet the requirements for a registration Note that these proposals can be moved back to the registry table if the problems listed in the rightmost column of this table are addressed. Failed Proposals Process
How to make users scroll down your page In split tests, long pages often beat shorter pages. But for a long page to be effective, readers must be aware that it’s long. If users don’t scroll—because they don’t want to or because they aren’t aware that the page is long—then all of your hard work has gone to waste. Our consultants recently discussed ways of getting users to scroll down a page. Why you should be testing long pages As a rule of thumb, your page should contain at least as many words as you’d use when selling your product or service face to face. Some marketers are wary of long pages, associating them with aggressive sales techniques. Sometimes your sales copy needs to be bigger than a man: Amazon’s Kindle page is three Hasselhoffs high. Where is the fold? In web marketing, the term “above the fold” refers to the area of a page that users can see without scrolling. An illustration of the fold on Amazon’s homepage. The growing usage of mobile-phone browsers throws yet another monkey wrench into the fold machinery. 1. 2.
Flexible CSS typographic scale | The Happy Bit When designing using text, no matter if it’s for print or the Web, one vital thing to do is to ensure that the design stays harmonious in every aspect. The best way to do so is quite possibly using a so called typographic scale, which means giving text portions precise, regular and linear dimensions, based on the hierarchical relationships they hold with other text elements. This has been long known, of course, and we’re not bringing anything new to the cause. But being the Web one of our domains, we felt like managing the typographic scale in CSS could be done better, and in an easier, sort of automatic, way. Our goal was to create a base-level CSS that could set a well thought series of values for the typographic scale, hence establishing a vertical rhythm, with absolutely no reference to pixels. Proportions are then extracted keeping the value of 14 pixels as the smallest value (paragraph); the biggest value, on the contrary, is 48 pixels, used for the primary level heading.
ResponsiveSlides.js · Responsive jQuery Slider & Slideshow CodeAndMore @font-face made simple tool Stuff you can do with the "Checkbox Hack" The "Checkbox Hack" is where you use a connected label and checkbox input and usually some other element you are trying to control, like this: <label for="toggle-1">Do Something</label><input type="checkbox" id="toggle-1"><div>Control me</div> Then with CSS, you hide the checkbox entirely. Probably by kicking it off the page with absolute positioning or setting its opacity to zero. But just because the checkbox is hidden, clicking the <label> still toggles its value on and off. View Demo So you can style an element completely differently depending on the state of that checkbox, which you don't even see. Disclaimer: Some of this stuff crosses the line of what you "should" do with CSS and introduces some bad semantics. Custom Designed Radio Buttons and Checkboxes Hide the default UI of a radio button or checkbox, and display a custom version right on top of it. File system like "tree menu" Tabbed Areas Dropdown Menus Push Toggles FAQ Answer Revealing View Demo More A couple demos by Gene Locklin:
Designing Style Guidelines For Brands And Websites Advertisement A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide. Edward Tufte once said: “Great design is not democratic; it comes from great designers. Why Create A Style Guide? You’ll have an easy guide to refer to when handing over the project.Makes you look professional. Branding Guidelines: What To Include? Strategic Brand Overview This should be short and sweet. 1See Kew’s branding guidelines2. Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Logos For print and Web, most brands revolve around the logo. 3See Cunard’s branding guidelines4. Cunard provides many variations on its minimum sizes. 5See Think Brick’s branding guidelines6. Provide logos with different colors, and specify which colours are allowed. Spacing Colors Fonts Layouts and Grids (al)
Life Below 600px | Paddy Donnelly Some people would have you believe that you aren't reading this. Why? Because it's not 'above the fold'. Above the fold - a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. But you are reading it, aren't you? Even if it goes even further down the page, way below the fold. You're still reading. Pretty crazy, huh? I think I've made my point. Many web designers, after presenting a site design, hear the client worriedly ask 'But, where is the fold?!' And there goes any sense of white space, readability and story telling you had planned for their site • The fold is one of those guidelines that has been thrown about so much that it's now become a 'rule' of web design (or maybe more appropriately a 'ball and chain' of web design) with web designers blindly obeying without question. Web design adopted this idea, basing their integration of the concept upon the most common browser sizes.
Where's the fold? FFmpeg Fluid Width Video IN A WORLD of responsive and fluid layouts on the web ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self hosting the video and presenting it via the HTML5 <video> tag. <video width="400" height="300" ... <iframe width="400" height="300" ... <object width="400" height="300" ... Guess what. So can't we just do this? <video width="100%" ... Well, yep, you can. <iframe> Video (YouTube, Vimeo, etc.) Our little 100% width trick isn't going to help us when dealing with video that is delivered via iframe. Fortunately there are a couple of possible solutions here. But, but... aspect ratios, legacy content, non-tech users, etc. The above technique is awesome, but it has several possible limitations: It requires wrapper element, so just straight up copy-and-pasting code from YouTube is out. If either of these limitations apply to you, you might consider a JavaScript solution. Adding Vimeo View Demo
Vanilla JS