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
How to work around the Mobile Safari image resource limit
10 weeks ago by sunpig
Because of the memory available on an iPad or iPhone, Mobile Safari has much stricter resource limits than most desktop browsers.
One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
safari
mobile
ios
ipad
iphone
webkit
resource
limit
image
size
html
webdev
frontend
constraint
One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
10 weeks ago by sunpig
Fashionably flexible responsive web design (full day workshop) // Speaker Deck
11 weeks ago by sunpig
So many good examples of responsive (& mobile in general) web design in this deck by @malarkey:
andyclarke
malarkey
responsive
adaptive
web
design
mobile
development
frontend
device
size
dimension
11 weeks ago 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
02008-02030 (22 years): On or before 8 June 2030, there will exist a computer language or programming system in which the prototypical first program, traditionally called "Hello, world!", will have an executable file whose size exceeds 1 gigabyte. - Long
october 2011 by sunpig
Getting there...
longnow
bet
prediction
file
size
gigabyte
framework
programming
long
now
october 2011 by sunpig
Rethinking the Mobile Web by Yiibu
september 2010 by sunpig
Bryan Rieger - "Rethinking the Mobile Web" :
mobile
web
bryanrieger
device
webdev
js
javascript
screen
size
proxy
phone
browser
september 2010 by sunpig
Gzip your @font-face files / phpied.com
october 2009 by sunpig
"Always send your font files gzipped, average 40% to be won, but could be 70% you never know."
stoyanstefanov
font
gzip
css
performance
optimization
font-face
web
speed
size
compression
typography
lh
october 2009 by sunpig
related tags
16px ⊕ 37signals ⊕ aarongustafson ⊕ accessibility ⊕ ad ⊕ adactio ⊕ adaptive ⊕ address ⊕ adjust ⊕ ads ⊕ advertising ⊕ advertisting ⊕ ala ⊕ alistapart ⊕ allenpike ⊕ alpha ⊕ android ⊕ andyclarke ⊕ anildash ⊕ any ⊕ app ⊕ apple ⊕ art ⊕ attitude ⊕ background ⊕ bandwidth ⊕ banner ⊕ bar ⊕ bazaar ⊕ behaviour ⊕ bennadel ⊕ bet ⊕ big ⊕ bing ⊕ blinkers ⊕ blowup ⊕ body ⊕ border ⊕ box ⊕ box-sizing ⊕ boxmodel ⊕ browser ⊕ bryanrieger ⊕ bug ⊕ business ⊕ byte ⊕ cache ⊕ capitalism ⊕ cathedral ⊕ chant ⊕ chrome ⊕ class ⊕ clickthrough ⊕ cloudfour ⊕ code ⊕ codinghorror ⊕ color ⊕ colour ⊕ compression ⊕ constraint ⊕ content ⊕ corner ⊕ corporate ⊕ css ⊕ css3 ⊕ ctr ⊕ data ⊕ database ⊕ debate ⊕ dennisforbes ⊕ design ⊕ desktop ⊕ detect ⊕ development ⊕ device ⊕ device-width ⊕ deviceatlas ⊕ devicewith ⊕ device_scale ⊕ dimension ⊕ dinosaur ⊕ display ⊕ download ⊕ draw ⊕ dummy ⊕ dynamic ⊕ economics ⊕ edge ⊕ efficiency ⊕ element ⊕ em ⊕ ems ⊕ ericmeyer ⊕ ericsink ⊕ etag ⊕ evil ⊕ evolution ⊕ example ⊕ expand ⊕ expire ⊕ farfuture ⊕ figure ⊕ file ⊕ filter ⊕ finance ⊕ financial ⊕ finesse ⊕ finger ⊕ fitts ⊕ fittslaw ⊕ flash ⊕ font ⊕ font-face ⊕ form ⊕ format ⊕ framework ⊕ frontend ⊕ frontent ⊕ full ⊕ fullscreen ⊕ gds ⊕ generator ⊕ gif ⊕ gigabyte ⊕ google ⊕ googledesktop ⊕ graphics ⊕ green ⊕ grid ⊕ gzip ⊕ h&fj ⊕ harryroberts ⊕ hci ⊕ heading ⊕ height ⊕ hide ⊕ holyshit ⊕ home ⊕ homescreen ⊕ html ⊕ http ⊕ icon ⊕ image ⊕ img ⊕ index ⊕ industry ⊕ infographic ⊕ insular ⊕ interactive ⊕ internet ⊕ ios ⊕ ipad ⊕ iphone ⊕ itdepends ⊕ jamespearce ⊕ javascript ⊕ jeffatwood ⊕ jeremykeith ⊕ jpeg ⊕ jpg ⊕ jqm ⊕ jquery ⊕ js ⊕ kerning ⊕ kevinhale ⊕ landscape ⊕ latency ⊕ layout ⊕ legibility ⊕ lh ⊕ library ⊕ limit ⊕ line-height ⊕ link ⊕ lion ⊕ lipsum ⊕ load ⊕ logging ⊕ long ⊕ longnow ⊕ loremipsum ⊕ loss ⊕ mac ⊕ malarkey ⊕ maps ⊕ margin ⊕ markboulton ⊕ market ⊕ marketing ⊕ maths ⊕ measure ⊕ media ⊕ mediaqueries ⊕ mediaquery ⊕ mega ⊕ memory ⊕ mersenne ⊕ meta ⊕ microjs ⊕ milli ⊕ mirror ⊕ misc ⊕ mmu ⊕ mobiforge ⊕ mobile ⊕ motorcontrol ⊕ mpu ⊕ mysql ⊕ myth ⊕ needs ⊕ nible ⊕ nicolesullivan ⊕ nimble ⊕ nosql ⊕ now ⊕ numbers ⊕ objectoriented ⊕ oocss ⊕ optimisation ⊕ optimization ⊕ os ⊕ osx ⊕ overlay ⊕ package ⊕ packet ⊕ padding ⊕ page ⊕ pageweight ⊕ paragraph ⊕ particletree ⊕ paulirish ⊕ pdf ⊕ percentage ⊕ performance ⊕ phone ⊕ photoshop ⊕ pixel ⊕ placeholder ⊕ plugin ⊕ png ⊕ portrait ⊕ ppk ⊕ prediction ⊕ prime ⊕ product ⊕ programming ⊕ prototype ⊕ proxy ⊕ psychology ⊕ px ⊕ quartz ⊕ query ⊕ rate ⊕ readability ⊕ reduction ⊕ refine ⊕ relational ⊕ relative ⊕ rem ⊕ resize ⊕ resolution ⊕ resource ⊕ responsive ⊕ retina ⊕ revenue ⊕ rogerjohansson ⊕ rows ⊕ rwd ⊕ safari ⊕ scalability ⊕ scale ⊕ scaling ⊕ screen ⊕ sencha ⊕ shrink ⊕ SI ⊕ size ⊖ skype ⊕ skyscraper ⊕ small ⊕ software ⊕ space ⊕ speed ⊕ sql ⊕ src ⊕ standalone ⊕ standard ⊕ statstics ⊕ stoyanstefanov ⊕ strategy ⊕ style ⊕ subtitles ⊕ svg ⊕ table ⊕ tables ⊕ tablet ⊕ tag ⊕ tcp ⊕ temp ⊕ temp1_ ⊕ testing ⊕ text ⊕ textarea ⊕ theme ⊕ thumb ⊕ tinysrc ⊕ touch ⊕ touchscreen ⊕ tracking ⊕ tutorial ⊕ type ⊕ typesetting ⊕ typography ⊕ ui ⊕ unit ⊕ url ⊕ usability ⊕ ux ⊕ value ⊕ vector ⊕ viewport ⊕ virtualmachine ⊕ virtualpc ⊕ virtualserver ⊕ visibility ⊕ vista ⊕ visual ⊕ visualization ⊕ vm ⊕ vpc ⊕ web ⊕ webbug ⊕ webcommerce ⊕ webdesign ⊕ webdev ⊕ webkit ⊕ webos ⊕ width ⊕ windows ⊕ winxp ⊕ wpo ⊕ wrapper ⊕ wurfl ⊕ yahoo ⊕ ydn ⊕ yui ⊕ zip ⊕ zoom ⊕Copy this bookmark: