» The real conflict behind <picture> and @srcset Cloud Four Blog
6 days ago by dogwonder
How do we reconcile a pre-parser that wants to know what size image to download ahead of time with an image technique that wants to respond to its environment once the page layout has been calculated?
css
design
images
rwd
responsivedesign
responsive
6 days ago by dogwonder
Quick Tip: Conditionally Including JS and CSS With get_current_screen | Wptuts+
14 days ago by dogwonder
As many stated before me: “A good WordPress citizen only loads their files where they’re needed”. This principle applies both to front-end and back-end (admin). There’s no justification for loading CSS and JS files on every admin page when you only need them on one single page you created. Thankfully doing things the right way is only one function call away.
wordpress
javascript
css
14 days ago by dogwonder
(404) http://t.co/Fbl
4 weeks ago by dogwonder
RT @GoogleWebTeam: Consistent, quality code makes web developers happy. The Google #HTML/#CSS style guide is now public: ...
HTML
CSS
from twitter
4 weeks ago by dogwonder
Progressive And Responsive Navigation | Smashing Coding
6 weeks ago by dogwonder
Below is the HTML structure of a navigation menu created by WordPress. This unordered list is pretty common for content management systems and hand-coded websites alike. This will be the basis for our work.
css
css3
design
navigation
responsive
6 weeks ago by dogwonder
Convert a Menu to a Dropdown for Small Screens | CSS-Tricks
6 weeks ago by dogwonder
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.
responsive
css
jquery
navigation
6 weeks ago by dogwonder
A Comprehensive Introduction to LESS - SitePoint
6 weeks ago by dogwonder
If you’re reading this, you’ll already know that CSS is an easy to learn, and use, stylesheet language, which makes our websites shine. With the new CSS3 features being introduced, the possibilities are even greater. In this article I will cover the basics of LESS. Next Tuesday, we take a deep dive into it, covering Mixins, functions and even more!
css
less
6 weeks ago by dogwonder
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
6 weeks ago by dogwonder
It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1.
css
css3
design
webdesign
6 weeks ago by dogwonder
Create a Responsive Web Design with Media Queries
6 weeks ago by dogwonder
If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.
css
css3
layout
responsive
webdesign
6 weeks ago by dogwonder
Menu Notification Badges Using HTML5 Data-Attributes | Webdesigntuts+
6 weeks ago by dogwonder
Today we’re going to take Orman Clark’s Menu Notification Badges design and build it using HTML and CSS. We’ll look at a couple of ways to achieve the effect, including the use of HTML5 data attributes which you may be unfamiliar with. Let’s dive in!
css
css3
design
html5
webdesign
6 weeks ago by dogwonder
Responsive News - Responsive CSS that scales
8 weeks ago by dogwonder
CSS for a big site is different to CSS for a small, or even medium sized-site. The way CSS was intended, when you create a new piece of functionality for your website you simply write some new CSS to style it - easy.
css
css3
responsive
less
8 weeks ago by dogwonder
Responsive News - Colophon
8 weeks ago by dogwonder
Here’s the technical stack we’ve used to build responsive news.
Nb. BBC is a large(ish) organisation so we’ve already got a fully operational platform upon which to write applications, so I’ve not listed every last thing, just the tools and technology that we’ve selected to create our project.
bbc
css
design
javascript
responsive
Nb. BBC is a large(ish) organisation so we’ve already got a fully operational platform upon which to write applications, so I’ve not listed every last thing, just the tools and technology that we’ve selected to create our project.
8 weeks ago by dogwonder
Sass and Media Queries: What You Can and Can’t Do | Design Shack
10 weeks ago by dogwonder
RT @TimothyWhalin: Sass and Media Queries: What You Can and Can’t Do
css
development
responsive
from twitter
10 weeks ago by dogwonder
Responsive Navigation Patterns | Brad Frost Web
february 2012 by dogwonder
Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.
css
mobile
navigation
responsive
web
february 2012 by dogwonder
A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need
january 2012 by dogwonder
RT @boxdeluxe: Responsive Images: How they Almost Worked and What We Need:
css
html
images
responsive
january 2012 by dogwonder
Responsive Design Test Bookmarklet
january 2012 by dogwonder
This was inspired by, and based on @lensco's excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original post, I thought I'd expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you're interested in.
css
responsive
test
webdesign
from twitter
january 2012 by dogwonder
Original Hover Effects with CSS3
november 2011 by dogwonder
with CSS3 Transitions and Animations
animation
css
css3
design
november 2011 by dogwonder
Golden grid system
august 2011 by dogwonder
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
grids
css
html5
html
august 2011 by dogwonder
Object-Oriented JavaScript Follow-Up Part 1: Method - Nefarious Designs
may 2011 by dogwonder
Graceful degradation vs Progressive enhancement
javascript
progressiveenhancement
gracefuldegradation
css
webdevelopment
frontend
may 2011 by dogwonder
Web Standards Trifle | And all that Malarkey
may 2011 by dogwonder
Before we start, remember that in a trifle the ingredients are in 'layers'. That is why they are mostly served in clear glass bowls. You can see how the ingredients are separated when you look in from the side.
css
standards
web
webdevelopment
webstandards
may 2011 by dogwonder
Sniff my browser: The Modernizr inadequacy - Nefarious Designs
may 2011 by dogwonder
So, in summary then, I absolutely cannot recommend implementing Modernizr as a best practice for front end development. It attempts to solve a problem from the wrong direction, and introduces a new potential point of failure. What’s more it breaks the fundamental ethic of web standards; the separation of concerns.
css
design
javascript
may 2011 by dogwonder
Adactio: Journal—Ethan Marcotte: The Responsive Designer’s Workflow
may 2011 by dogwonder
RT @adactio: Liveblogging a very exciting unveiling from @beep at @AnEventApart.
css
mobile
web-design
ux
may 2011 by dogwonder
Font sizing with rem - Snook.ca
may 2011 by dogwonder
css3 introduces root font sizing 'rem' - now questioning 5 years of using em via @whatterz @snookca #css
css
css3
font
fonts
typography
may 2011 by dogwonder
Media Queries
april 2011 by dogwonder
RT @Folletto: Excellent examples of CSS media queries:
/via @adactio
responsive
design
webdesign
mobile
css
/via @adactio
april 2011 by dogwonder
A List Apart: Articles: Responsive Web Design
april 2011 by dogwonder
@thetalldesigner it was Ethan Marcotte or @beep
css
css3
design
mobile
webdesign
april 2011 by dogwonder
The Bright (Near) Future of CSS - Smashing Magazine
february 2011 by dogwonder
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.
css
css3
html5
webdesign
columns
dogwonder
february 2011 by dogwonder
Type study: An example of Lettering.js « The Typekit Blog
january 2011 by dogwonder
RT @typekit: Type study: Using Lettering,js for kerning and other radical web typography
css
javascript
jquery
typography
webdesign
from twitter
january 2011 by dogwonder
Carrer Blog: The Golden Grid
february 2009 by dogwonder
Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.
css
webdesign
grid
framework
february 2009 by dogwonder
the-golden-grid - Google Code
february 2009 by dogwonder
The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.
design
css
webdesign
layout
grid
framework
february 2009 by dogwonder
LegiStyles™
february 2009 by dogwonder
LegiStyles™ are a series of custom styles for the award-winning RSS reader NetNewsWire. Much attention has been paid to the design and typography of the styles to improve legibility and readability, and to enhance the overall reading experience.
design
css
mac
rss
typography
netnewswire
february 2009 by dogwonder
Graphics.com: The Problem with CSS
december 2008 by dogwonder
The Problem with CSS
css
webdesign
webdevelopment
december 2008 by dogwonder
satzansatz -- PNG alpha transparency: AlphaImageLoader filter flaws in IE6
august 2008 by dogwonder
Links don't work above transparent filter hack
webdesign
css
hack
ie6
web
august 2008 by dogwonder
iui - Google Code
july 2008 by dogwonder
* Create Navigational Menus and iPhone interfaces from standard HTML
* Use or knowledge of JavaScript is not required to create basic iPhone pages
* Ability to handle phone orientation changes
* Provide a more "iPhone-like" experience to Web apps
mobilewebdesign
applications
css
code
developer
programming
javascript
* Use or knowledge of JavaScript is not required to create basic iPhone pages
* Ability to handle phone orientation changes
* Provide a more "iPhone-like" experience to Web apps
july 2008 by dogwonder
Styling File Inputs with CSS and the DOM // ShaunInman.com
may 2008 by dogwonder
.SI-FILES-STYLIZED
css
javascript
forms
webdesign
may 2008 by dogwonder
related tags
accessibility ⊕ aggregator ⊕ ajax ⊕ animation ⊕ api ⊕ apple ⊕ application ⊕ applications ⊕ Art ⊕ article ⊕ articles ⊕ bbc ⊕ blog ⊕ blogs ⊕ browser ⊕ button ⊕ buttons ⊕ code ⊕ color ⊕ columns ⊕ comments ⊕ community ⊕ conversion ⊕ cool ⊕ creative ⊕ creativity ⊕ css ⊖ css3 ⊕ current ⊕ daily ⊕ data ⊕ design ⊕ developer ⊕ development ⊕ dogwonder ⊕ effect ⊕ elastic ⊕ em ⊕ email ⊕ fixes ⊕ font ⊕ fonts ⊕ form ⊕ forms ⊕ framework ⊕ frontend ⊕ fun ⊕ gallery ⊕ generation ⊕ goldenratio ⊕ gracefuldegradation ⊕ gradients ⊕ graphics ⊕ grid ⊕ grids ⊕ hack ⊕ hacks ⊕ highlighting ⊕ howto ⊕ html ⊕ html5 ⊕ htmlemail ⊕ icons ⊕ ie ⊕ ie6 ⊕ ie9 ⊕ images ⊕ input ⊕ inspiration ⊕ interesting ⊕ internet ⊕ iphone ⊕ IxD ⊕ javascript ⊕ jquery ⊕ js ⊕ layout ⊕ less ⊕ mac ⊕ minimal ⊕ mobile ⊕ mobilewebdesign ⊕ myspace ⊕ navigation ⊕ netnewswire ⊕ news ⊕ opensource ⊕ page ⊕ photoshop ⊕ php ⊕ plugin ⊕ pngfix ⊕ programming ⊕ progressiveenhancement ⊕ rails ⊕ reference ⊕ reset ⊕ resources ⊕ responsive ⊕ responsivedesign ⊕ rss ⊕ rubyonrails ⊕ rwd ⊕ simple ⊕ sitemaps ⊕ standards ⊕ style ⊕ tables ⊕ technology ⊕ templates ⊕ test ⊕ tips ⊕ tools ⊕ tutorial ⊕ tutorials ⊕ tweaks ⊕ typography ⊕ ui ⊕ usability ⊕ ux ⊕ video ⊕ visualization ⊕ wallpaper ⊕ web ⊕ web-design ⊕ web2.0 ⊕ webdesign ⊕ webdev ⊕ webdevelopment ⊕ websites ⊕ webstandards ⊕ widget ⊕ wordpress ⊕ xhtml ⊕ zoom ⊕Copy this bookmark: