サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
filamentgroup.com
Throughout the short history of the web, declarations of browser support have gone through a number of popular phases. Early approaches were often defined by exclusion, a la “best viewed in Netscape 4.” Thankfully, more inclusive ways to define browser support (like Yahoo’s Graded Browser Support, detailed below) helped move the web beyond a focus on individual browsers towards a broader cross-bro
The number of devices with high resolution screens is rising, and with it the need for a simple way to deliver crisp, resolution-independent graphics that don’t waste bandwidth. Vector-based graphics, which are compact and scalable, are a great solution. Icon fonts deliver vector illustrations in an easy format, and there are huge variety of pre-made icon sets to choose from. So, problem solved? N
The ARIA role main is intended to serve as an alternative to a “skip to main content” link, something especially helpful to users accessing a site by way of assistive tech or navigating by keyboard alone. It provides the browser (or the users’ assistive software) with a predictable landmark for the page’s primary content so that “skip to main content” functionality can be built into the browsing s
Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement A while ago, we came up with a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. This technique provides a simple way to generate charts, but more impo
In our responsive client work, we frequently find ourselves in need of a carousel component that is lightweight, fluid in layout, usable with different input modes (mouse, keyboard, touch), and extensible to the particulars of each implementation. We’ve found that most third-party carousels available online fall short of these requirements in one way or another, so we built our own, and recently m
How we learned to leave default font-size alone and embrace the em Building with em units in CSS brings benefits in flexibility to users and developers alike, but working with ems can be tedious for a number of reasons. Most famously, the value of 1em only vaguely correlates to pixel-based design; the inconvenience of translating fixed design comps into flexible CSS units has long driven web desig
A Responsive Design Approach for Navigation, Part 1 As we create responsive websites, we must consider a number of factors to make sure both the design and code are as bullet-proof as possible: the design must scale across a wide range of screen sizes from mobile to tablet to desktop; and the code must start with a mobile-first approach, work well for screen readers or with JavaScript disabled, an
People enjoy the ability to pinch and zoom websites on their iPhones, iPads, and iPod Touch devices. Unfortunately, a nasty usability bug exists on iOS that causes a user-zoomable page to scale beyond the width of the viewport when the device’s orientation changes from portrait to landscape. As a result, the page ends up cropped by the viewport, and users have to manually zoom the page back out ag
A Responsive Design Approach for Complex, Multicolumn Data Tables In responsive web design, one of the toughest design problems to solve is how format complex tabular data for display on smaller screens. In this post, we’ll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen
It’s been a little while since we’ve released any code examples here in the FG Lab, so today we’re happy to present a new jQuery Mobile plugin called Pagination: a jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard! The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link toge
Responsive Images: Experimenting with Context-Aware Image Sizing Responsive Web Design has been a very hot topic this year, inspiring developers who long for a “one codebase serves all” future. But critics of the technique have pointed out several issues that need to be addressed before it can scale perfectly from handheld to desktop — specifically, while HTML, CSS and JavaScript can be light enou
jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement As websites expand content-sharing and collaboration features, users are electing to upload more and more files—photos, videos, documents, even secure data—via web applications to store them in “cloud”-based systems rather than locally on their computers. The HTML input element with a type="file" attribute gives
このページを最初にブックマークしてみませんか?
『Filament Group, Inc. | User Interface Design & Responsive, Accessible, Resili...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く