Opera Developer News - How media queries allow you to optimize SVG icons for several sizes
5 weeks ago by sunpig
One thing that seems to come up from time to time when talking about SVG is the apparent lack of a mechanism to make certain size specific adjustments. Typical use case is icon design, where you want to make sure the outline of the icon you're creating is always 1px, regardless of the icon being 16, 32 or 64 pixels in size. While at the SVG Open conference last week, I investigated how this problem could be solved, and found out that you can do this by using media queries inside the SVG file. Different widths set on the img tag pointing to the SVG file then will trigger different max-width/min-width media queries to be triggered. I've presented my findings during the lightning talks session at SVG Open, and have turned the talk into a YouTube video, which you can watch below.
andreasbovens
opera
svg
mediaquery
media
query
design
responsive
layout
mobile
5 weeks ago by sunpig
ESPI at work: The power of Keynote | Edenspiekermann
7 weeks ago by sunpig
I should start by saying I am by no means a Keynote ‘pro’ compared with many of our web team who could use it in their sleep. In fact, when I first started working at ESPI last July, I was very surprised to find out that designers were using Keynote for laying out presentations. My surprise turned to alarm when I found out that they were also using it as a design tool to build UI designs for websites and apps. It turns out that I was absolutely wrong. Keynote is an incredibly powerful design tool. Less then one year later, I now rarely (if ever) use InDesign to layout presentations, and I have started using Keynote almost exclusively for any web layouts I do. And not just UX wireframes, but full UI designs. On a recent project, I also used it for poster mock ups, banner designs and a bunch of other formats.
keynote
apple
presentation
design
layout
wireframe
prototype
tool
osx
graphic
7 weeks ago by sunpig
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
9 weeks ago by sunpig
RT @lyzadanger: Oops. I just blogged on @cloudfour again, this time about em-based media queries:
lyzagardner
mobile
em
media
query
mediaquery
responsive
width
layout
zoom
css
design
frontend
webdev
cloudfour
9 weeks ago by sunpig
Measuring and sizing UIs, 2011-style — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
9 weeks ago by sunpig
For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.
These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid.
harryroberts
css
font
size
style
border
layout
line-height
rem
em
pixel
percentage
design
grid
visual
measure
These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid.
9 weeks ago by sunpig
LukeW | Multi-Device Layout Patterns
11 weeks ago by sunpig
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.
lukew
responsive
adaptive
layout
linear
column
navigation
design
css
mediaquery
pattern
from twitter
11 weeks ago by sunpig
Responsive News - Cutting the mustard
12 weeks ago by sunpig
RT @brad_frost: Absolutely fantastic read about responsive web design and devices support: Related: ...
bbc
news
design
webdev
frontend
mustard
responsive
adaptive
layout
speed
js
javascript
amd
module
detect
browser
support
12 weeks ago by sunpig
Announcing jQuery Mobile 1.1.0 RC1 | jQuery Mobile
february 2012 by sunpig
Fixed position toolbars in jQuery Mobile 1.1 -- doing it right
jquery
mobile
jqm
js
javascript
webdev
frontend
layout
fixed
position
library
february 2012 by sunpig
Height matters! – Anders M. Andersen
february 2012 by sunpig
Show some love to the vertical; consider "max-height" as part of your media queries: (Especially for landscape mode!)
mediaqueries
media
query
vertical
horizontal
maxheight
max-height
height
width
landscape
portrait
tall
responsive
adaptive
design
layout
february 2012 by sunpig
Designing for touch | Feature | .net magazine
february 2012 by sunpig
RT @brad_frost: Designing for Touch: by @globalmoxie, the touchiest of touch-masters.
joshclark
mobile
touch
ui
ux
design
tap
target
screen
layout
top
bottom
android
ios
from twitter
february 2012 by sunpig
Redefined | Trent Walton
february 2012 by sunpig
RT @brad_frost: "The largest and most exciting part of the design process now happens in the browser" great read by ...
trentwalton
responsive
adaptive
design
pixel
proportion
layout
mediaquery
webdev
html
css
from twitter
february 2012 by sunpig
Responsive Advertising| Mark Boulton
november 2011 by sunpig
@krijnhoetmer @ppk @stephenhay It would be awesome if you could get someone from the Ad industry to speak at Mobilism:
markboulton
responsive
advertising
ad
industry
layout
adaptive
mpu
mmu
unit
size
web
webdev
webcommerce
financial
revenue
package
november 2011 by sunpig
Pragmatic responsive design
november 2011 by sunpig
Wholly awesome, Batman! "Pragmatic Responsive Design" presentation by @yiibu MUST READ for mobile.
pragmatic
responsive
design
adaptive
layout
width
media
query
server
yiibu
bryanrieger
stephanierieger
css
breakpoint
webdev
mobile
november 2011 by sunpig
Crap! It doesn't look quite right, or, how I learned to stop worryi...
november 2011 by sunpig
"Crap! It doesn't look quite right, or, how I learned to stop worrying and set my mobile web sites free" by @lyzadanger
lyza
responsive
web
design
fluid
control
webdev
layout
html
content
mobile
devie
november 2011 by sunpig
Fixed Positioning in Mobile Browsers | Brad Frost Web
november 2011 by sunpig
"Take a step back and understand why you need fixed positioning in the first place." YES @brad_frost
bradfrost
fixed
positioning
overflow
scroll
webdev
design
layout
adaptive
november 2011 by sunpig
Responsive IMGs Part 3 — Future of the IMG Tag « Cloud Four
october 2011 by sunpig
RT @grigs: New blog post: Responsive IMGs Part 3 — Future of the IMG Tag
image
responsive
adaptive
resolution
density
layout
html
img
design
mobile
jasongrigsby
grigs
cloudfour
from twitter
october 2011 by sunpig
Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four
october 2011 by sunpig
"Responsive IMGs Part 2 — In-depth Look at Techniques" Great article by @grigs
image
responsive
adaptive
resolution
density
layout
html
img
design
mobile
jasongrigsby
grigs
cloudfour
from twitter
october 2011 by sunpig
Adactio: Journal—Clarification
march 2011 by sunpig
Jeremy Keith on web, mobile, devices, context, design: (MUST READ)
context
responsive
webdesign
webdev
jeremykeith
adactio
mobile
web
layout
march 2011 by sunpig
Adactio: Journal—Context
march 2011 by sunpig
Jeremy Keith on web, mobile, devices, context, design: (MUST READ)
context
responsive
webdesign
webdev
jeremykeith
adactio
mobile
web
layout
march 2011 by sunpig
YUI 3 Grids are Dead Simple - goer.org
october 2010 by sunpig
"YUI 3 Grids are Dead Simple" by @evangoer: (I ♥ YUI)
yui
yui3
grid
layout
positioning
library
css
html
frontend
webdev
october 2010 by sunpig
A List Apart: Articles: Prefix or Posthack
july 2010 by sunpig
RT @meyerweb: A new ALA article by yours truly, "Prefix or Posthack":
ericmeyer
css
vendor
browser
prefix
hack
boxmodel
layout
experimental
implementation
compatibility
xbrowser
web
technology
july 2010 by sunpig
Advanced CSS Styling and the CannyBill redesign project | For A Beautiful Web
october 2009 by sunpig
"It’s not everyday that I get to work with a client that completely gets why it’s important to push the progressive enrichment boundaries by using HTML5 and the kind of advanced CSS styling that I teach at my workshops. Luckily, the CannyBill team do more than get it. I’d like to share a little of the HTML5 and CSS that I’m using for this project."
andyclarke
html
css
style
advanced
web
design
layout
semantics
forabeautifulweb
html5
october 2009 by sunpig
Prices and plans design patterns | For A Beautiful Web
october 2009 by sunpig
"Although like many designers, I am often driven by the desire to create something different and to avoid following what others have created, I have begun to realise that in some situations, following a tried and tested pattern or convention can benefit a person's experience of a design and therefore help the company I am designing for achieve their goals. Conventions can be used as a starting point for design and a platform for innovation. 37Signals and in particular their Basecamp product site and sign-up process are what I consider to be the benchmark in this area. Their pricing and sign up page has become the standard that others have followed, as you'll see if you look at the examples featured by Györay Fekete."
andyclarke
forabeautifulweb
pattern
price
plan
pricing
choice
design
layout
abtest
html
redesign
cannybill
basecamp
example
october 2009 by sunpig
zomigi.com » Why browser zoom shouldn’t kill flexible layouts
june 2009 by sunpig
"Now that all the major browsers include the ability to zoom the entire page layout, rather than just increase text size, are liquid and elastic layouts obsolete? Can’t we just use fixed-width layouts and let the user zoom them if needed? The answer to that question depends on whether browser zoom solves all of the same problems than liquid and elastic layouts solve, and I don’t think it does."
zoemickleygillenwater
browser
zoom
layout
css
flexible
elastic
line
readability
usability
june 2009 by sunpig
related tags
16px ⊕ 24ways ⊕ aarongustafson ⊕ aaronrussell ⊕ absolute ⊕ abtest ⊕ accessibility ⊕ ad ⊕ adactio ⊕ adaptive ⊕ adjust ⊕ advanced ⊕ advertising ⊕ after ⊕ ala ⊕ alanpearce ⊕ alexrussell ⊕ alignment ⊕ alistapart ⊕ all ⊕ amd ⊕ andreasbovens ⊕ android ⊕ andyclarke ⊕ animation ⊕ apple ⊕ application ⊕ aria ⊕ article ⊕ awesome ⊕ background ⊕ balance ⊕ basecamp ⊕ baseline ⊕ bbc ⊕ before ⊕ block ⊕ boag ⊕ body ⊕ boilerplate ⊕ book ⊕ bookmarklet ⊕ border ⊕ bostonglobe ⊕ bottom ⊕ box ⊕ box-sizing ⊕ boxmodel ⊕ bradfrost ⊕ break ⊕ breakpoint ⊕ browser ⊕ bryanrieger ⊕ button ⊕ calendar ⊕ cannybill ⊕ capability ⊕ cappuccino ⊕ cell ⊕ cheatsheet ⊕ checkbox ⊕ choice ⊕ choreography ⊕ chriscoyier ⊕ chrismills ⊕ chrome ⊕ chromeframe ⊕ clagnut ⊕ cloudfour ⊕ cms ⊕ code ⊕ colspan ⊕ column ⊕ columns ⊕ comp ⊕ compatibility ⊕ content ⊕ context ⊕ control ⊕ conversion ⊕ css ⊕ css3 ⊕ csstricks ⊕ cursor ⊕ danietkennett ⊕ data ⊕ daveshea ⊕ density ⊕ design ⊕ designer ⊕ desing ⊕ detect ⊕ detection ⊕ develeopment ⊕ developer ⊕ development ⊕ developmnt ⊕ devie ⊕ different ⊕ digitalweb ⊕ dimension ⊕ disappear ⊕ display ⊕ div ⊕ double ⊕ dougbowman ⊕ download ⊕ drupal ⊕ dyn ⊕ dynamic ⊕ editorial ⊕ effect ⊕ elastic ⊕ element ⊕ em ⊕ emmajane ⊕ emmajanehogbin ⊕ emotionaldesign ⊕ ems ⊕ enhancement ⊕ ericmeyer ⊕ ethanmarcotte ⊕ example ⊕ expand ⊕ experimental ⊕ fast ⊕ faux ⊕ feature ⊕ field ⊕ figure ⊕ filament ⊕ financial ⊕ firefox ⊕ fireworks ⊕ fittest ⊕ fitts ⊕ fix ⊕ fixed ⊕ flexbox ⊕ flexible ⊕ float ⊕ fluid ⊕ font ⊕ footer ⊕ forabeautifulweb ⊕ form ⊕ format ⊕ formatting ⊕ formfactor ⊕ forms ⊕ framework ⊕ free ⊕ frontend ⊕ frontent ⊕ gameboy ⊕ garrettdimon ⊕ generated ⊕ globe ⊕ gmail ⊕ golden ⊕ google ⊕ gradient ⊕ graphic ⊕ graphics ⊕ grid ⊕ grigs ⊕ group ⊕ guidelines ⊕ hack ⊕ handheld ⊕ harryroberts ⊕ hbox ⊕ hci ⊕ header ⊕ height ⊕ help ⊕ hide ⊕ horizontal ⊕ hover ⊕ howto ⊕ html ⊕ html5 ⊕ hypenation ⊕ hyphen ⊕ ie ⊕ ie6 ⊕ ie7 ⊕ image ⊕ images ⊕ img ⊕ implementation ⊕ import ⊕ industry ⊕ inherit ⊕ inline ⊕ inline-block ⊕ input ⊕ international ⊕ internetexplorer ⊕ ios ⊕ ipad ⊕ item ⊕ jasongrigsby ⊕ javascript ⊕ jeremykeith ⊕ joshclark ⊕ jqm ⊕ jquery ⊕ js ⊕ justification ⊕ key ⊕ keyboard ⊕ keynote ⊕ label ⊕ landmark ⊕ landscape ⊕ layout ⊖ leading ⊕ letter ⊕ lettering ⊕ library ⊕ line ⊕ line-height ⊕ linear ⊕ liquid ⊕ list ⊕ llegible ⊕ lousilverstein ⊕ lukew ⊕ lukewroblewski ⊕ lyza ⊕ lyzagardner ⊕ magazine ⊕ malarkey ⊕ map ⊕ margin ⊕ markboulton ⊕ markup ⊕ matthewlevine ⊕ max-height ⊕ maxheight ⊕ measure ⊕ media ⊕ mediaqueries ⊕ mediaquery ⊕ mezzoblue ⊕ microsoft ⊕ mirror ⊕ mmu ⊕ mobiforge ⊕ mobile ⊕ mobilefirst ⊕ mobileweb ⊕ modular ⊕ module ⊕ mouse ⊕ mpu ⊕ msklc ⊕ multicolumn ⊕ mustard ⊕ nathanford ⊕ navigation ⊕ news ⊕ newspaper ⊕ nicolasgallagher ⊕ number ⊕ nvda ⊕ nytimes ⊕ opera ⊕ osx ⊕ overflow ⊕ package ⊕ padding ⊕ page ⊕ pattern ⊕ paulboag ⊕ paulirish ⊕ pause ⊕ pdf ⊕ percentage ⊕ phi ⊕ photoshop ⊕ pie ⊕ pixel ⊕ pixels ⊕ plan ⊕ portrait ⊕ position ⊕ positioning ⊕ positioniseverything ⊕ postpc ⊕ pragmatic ⊕ prefix ⊕ presentation ⊕ price ⊕ pricing ⊕ problem ⊕ progressive ⊕ property ⊕ proportion ⊕ proportional ⊕ prototype ⊕ pseudo ⊕ pseudo-element ⊕ px ⊕ query ⊕ quotes ⊕ range ⊕ ratio ⊕ readability ⊕ rearrange ⊕ redesign ⊕ reeder ⊕ reference ⊕ relative ⊕ rem ⊕ remap ⊕ remysharp ⊕ reset ⊕ resize ⊕ resolution ⊕ resources ⊕ responsive ⊕ revenue ⊕ richardfink ⊕ richardrutter ⊕ rogerblack ⊕ role ⊕ row ⊕ rss ⊕ russweakley ⊕ rwd ⊕ sb ⊕ scale ⊕ scan ⊕ screen ⊕ script ⊕ scroll ⊕ selector ⊕ semantic ⊕ semantics ⊕ server ⊕ shadow ⊕ shape ⊕ show ⊕ site ⊕ size ⊕ slot ⊕ smashing ⊕ soft ⊕ space ⊕ span ⊕ speed ⊕ standard ⊕ statstics ⊕ stephanierieger ⊕ stephenhay ⊕ sticky ⊕ story ⊕ strategy ⊕ structure ⊕ stuffandnonsense ⊕ style ⊕ styling ⊕ support ⊕ svg ⊕ table ⊕ table-layout ⊕ tables ⊕ tablet ⊕ tall ⊕ tap ⊕ target ⊕ technology ⊕ template ⊕ templaye ⊕ testing ⊕ text ⊕ textarea ⊕ theme ⊕ theming ⊕ timbrown ⊕ toggle ⊕ tool ⊕ tools ⊕ top ⊕ touch ⊕ trentwalton ⊕ tufte ⊕ tutorial ⊕ type ⊕ typekot ⊕ typesetting ⊕ typography ⊕ ui ⊕ uie ⊕ uk ⊕ unit ⊕ unstoppablerobotninja ⊕ upstatement ⊕ us ⊕ usability ⊕ userexperience ⊕ users ⊕ ux ⊕ vanish ⊕ vbox ⊕ veerle ⊕ vendor ⊕ vertical ⊕ viewport ⊕ visual ⊕ visuallanguage ⊕ wai ⊕ web ⊕ webcommerce ⊕ webdesign ⊕ webdev ⊕ webkit ⊕ website ⊕ webstandards ⊕ width ⊕ windows ⊕ wireframe ⊕ xbrowser ⊕ xhtml ⊕ xml ⊕ yahoo ⊕ yaml ⊕ yiibu ⊕ yui ⊕ yui3 ⊕ zero-width ⊕ zoemickleygillenwater ⊕ zomigi ⊕ zone ⊕ zoom ⊕Copy this bookmark: