Pinboard: bookmarks for sunpig tagged 'responsive'

select: none ‧ this page no items selected

mark as read ‧ unread ‧ private ‧ public ‧ add stars ‧ remove stars ‧ delete

THIS IS BOILERPLATE confirm ‧ cancel

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

In order to lazy load nonessential content on BostonGlobe.com without introducing access barriers, we developed a simple, markup-driven “Ajax-include” pattern that enhanced certain links on a page by including a fragment of content from a URL related to their linked resource. For example, the header of BostonGlobe.com contained a link to the Weather section of the website, and that same link is also used as a marker for including a fragment of content from that section that is used to create a weather widget.

ajax javascript jquery mobile responsive lazyload filamentgroup bostonglobe pattern quickconcat concatenate http modular
14 hours ago by sunpig

copy to mine

A List Apart: Articles: Responsive Images and Web Standards at the Turning Point

Recently, all of the ongoing discussion around responsive images just got real: a solution is currently being discussed with the WHATWG. And we're in the thick of it now: we're throwing around references to picture and img set; making vague references to polyfills and hinting at “use cases” as though developers everywhere are following every missive on the topic. That's a lot to parse through, especially if you're only tuning in now—during the final seconds of the game.

ala alistapart matmarquis wilto responsive images rwd whatwg w3c browser developer html5 standard
17 days ago by sunpig

copy to mine

Future Friendly Style Guides // Speaker Deck
styleguide slide presentation lukebrooker responsive webdev frontend
5 weeks ago by sunpig

copy to mine

Opera Developer News - How media queries allow you to optimize SVG icons for several sizes

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

copy to mine

Performance Implications of Mobile Design
presentation slides guypod akamai resize image mobile phone performance responsive redirect waterfall
5 weeks ago by sunpig

copy to mine

Responsive viewport units - destroy/dstorey

Introducing vh, vw, and vmin

The vh unit stands for viewport height, vw for Volkswagen viewport width, and vmin represents whichever of vh or vw is the shortest length.

css viewport unit responsive height width proportion grid design webdev frontend
6 weeks ago by sunpig

copy to mine

Media Query & Asset Downloading Results | TimKadlec.com

If you’re going to hide a content image, you’re not going to be able to do it by setting display:none. I recommend using a Javascript or server-side based approach instead.

If you want to hide a background image, your best bet is to hide the parent element. If you can’t do that, then use a cascade override (like test five above) and set the background-image to none when you want it hidden.

For swapping background images, define them both inside of media queries.

timkadlec mediaquery screen image responsive css html frontend optimization
7 weeks ago by sunpig

copy to mine

Responsive CSS3 Drop-Down to Accordion
csscience css css3 dropdown accordeon html webdev frontend responsive
8 weeks ago by sunpig

copy to mine

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog

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

copy to mine

Testing For Dummies | Testing

When testing the devices, there are 4 main areas to cover, feature phones, smart phones with low level support, smart phones and tablets. The primary tablet market will be 7-inch devices up to 720x1280 pixels with the lowest smart phone being 240x360 pixels.
Currently, we are only approaching devices that are not conforming to desktops, so smart TV’s, games consoles and other exotic devices are test, desktops are not.

bbc responsive news webdev frontend testing device browser ios android apple iphone ipad tablet phone from twitter
9 weeks ago by sunpig

copy to mine

Responsive News - Colophon
bbc colophon responsive library ender js javascript css stack framework software
10 weeks ago by sunpig

copy to mine

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

"Stop solving problems you don't have" by @rachelandrew

rachelandrew html webdev frontend boilerplate polyfill framework responsive bloat
10 weeks ago by sunpig

copy to mine

[css4-images] The image-set() function (for responsive images) from Edward O'Connor on 2012-02-22 (www-style@w3.org from February 2012)
css image image-set responsive resolution mediaquery apple proposal
11 weeks ago by sunpig

copy to mine

LukeW | Multi-Device Layout Patterns

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

copy to mine

Server-side device detection used by 82% of Alexa top 100 sites | mobiForge
server detection device site website top10 alexa mobiforge google ress responsive mobile browser
11 weeks ago by sunpig

copy to mine

Mobile First Design: Why It’s Great and Why It Sucks | Design Shack

The reality of the situation is a little more complex though. When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Does this happen with every project? Perhaps not, but the story is likely far more common than you’d like to believe.