サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
www.filamentgroup.com
The Simplest Way to Load CSS Asynchronously Posted by Scott Jehl 07/19/2019 One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays. O
Styling a Select Like It's 2019 Posted by Scott Jehl 12/18/2018 Update 12/19 The select now has totally consistent appearance in Internet Explorer 11 and 10, thanks to a nice tip from Jelmer de Maat The select element has long been difficult to style consistently across browsers. To avoid its shortcomings in the past, we have used workarounds like styling a parent element, adding pseudo-elements,
Should I Use JavaScript to Load My Web Fonts? Posted by Zach Leatherman 11/29/2018 When they were first introduced, web fonts were primarily a CSS feature, and for many web developers they’ve always loaded them using CSS (and nothing more). But in the last decade, default web font loading behavior in many browsers made CSS-only methods a gamble with our page’s text render, and thoughtful developer
Inlining or Caching? Both Please! Posted by Scott Jehl 11/13/2018 Last week, I was finishing a section of my slides for a presentation at the Performance.Now() conference. In it, I was exploring patterns that enable the browser to render a page as fast as possible by including code alongside the initial HTML so that the browser has everything it needs to start rendering the page, without making ad
Swapping Images with the Sizes Attribute Posted by Scott Jehl 03/09/2018 Over the years we’ve designed components that enable users to magnify, swipe, and pan around images in a wide variety of ways. Early on, it was tricky to build these components in ways that used image sizes responsibly, and we’d sometimes end up delivering larger images than we’d prefer–ensuring that the image would at least
Accessible Links Re:visited Posted by Maggie Wachs 12/06/2017 We and our clients often tend toward simple and understated style, but sometimes that simplicity doesn’t serve all audiences as well as we would like. Recently we helped develop a site for a client who wanted a clean aesthetic that was not too busy. When the site went live, they conducted an accessibility audit, and we noticed an unfort
Modern Asynchronous CSS Loading Posted by Scott Jehl 11/30/2017 The simplest way to load a CSS file in an HTML document is to use a link element with rel="stylesheet": <link rel="stylesheet" href="mycssfile.css"> Referencing CSS this way works great, but it comes with a downside: it’s synchronous. In other words, with a typical stylesheet link like this, the browser stops rendering subsequent port
Presentation: Accessibility in a Responsive World, A11Y Days 2017 Posted by Scott Jehl 05/16/2017 This April, I was thrilled to be given the opportunity to present at Funka’s annual Accessibility Days Conference in Stockholm. The following is a transcript and slides from my presentation, Accessibility in a Responsive World. Good afternoon, everyone! It’s such an honor for me to be here in Stockhol
Maintaining Accessibility in a Responsive World Posted by Scott Jehl 02/02/2017 At Filament Group, our primary concern has long been to build sites that are accessible to as many people as possible. In that aim, being “accessible” means many things. It means that a page must load quickly—even in slow and spotty mobile networks. After loading, the page should be usable and feel appropriate and intu
I Wanted To Type a Number Posted by Zach Leatherman 07/13/2016 Forms are the bedrock upon which users interact with the web. For a long time, forms controls were stagnant and reliable. HTML5 brought us updates, specifying new <input> types linked with new interface controls, progressively enhancing from the vanilla text inputs of yesteryear. The battle tested truth of new web features and standard
More Weight Doesn't Mean More Wait Posted by Scott Jehl 04/17/2015 When I talk about web performance, I like to use the phrase, “weight does not need to increase wait.” To be clear, that’s not because the weight of a webpage doesn’t matter—it most definitely does—but rather because we can often (usually, even) deliver a usable representation of a web page’s content very quickly, even if that page
How We Load Web Fonts Progressively Posted by Scott Jehl 02/16/2015 Note: This article’s title was updated for clarity. It was formerly called “Font Loading Revisited with Font Events.” Last month we wrote about an approach we’d been using to load web fonts in a more responsible manner than browsers tend to do by default. The purpose of the approach was to avoid a typically undesirable browser beh
Researching the Performance costs of JavaScript MVC Frameworks Posted by John Bender 12/12/2014 At Filament Group, we’ve been very focused on website performance. We’ve long been curious about the performance of popular JavaScript MVC frameworks such as Angular, Backbone, and Ember, primarily because they offer elegant solutions to complex problems and we want to be able to use them in our own cli
How we learned to leave default font-size alone and embrace the em Posted by FG 07/18/2012 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Building with em units in CSS brings benefits in flexibility to users and developers a
How we make RWD sites load fast as heck Posted by Scott Jehl 07/30/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. There has been a lot of discussion about optimizing responsive layouts for performance lately, and I thin
Load CSS or JS Files Simply & Asynchronously Posted by Scott Jehl 07/14/2014 Ever wonder about the simplest, fastest way to load a CSS file or a JavaScript file asynchronously? Well, we happen to think about these things a lot, and over the years we’ve been using and improving a couple of basic functions, which we call loadCSS and loadJS, that do just that. Here’s how they work, in brief. loadCSS
Tappy: A custom tap event handler Posted by Scott Jehl 07/14/2014 Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more. Tappy allows you to bind to a tap event like you would with other events like click. The advantage of using Tappy’s tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the brief but notice
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
Our (archived) open-source code We're no longer maintaining the 100+ projects we've published, but will keep them online as archived Github repositories. Responsive images & media Grunticon A grunt-based tool to make it easy to use SVG graphics with fallbacks for older browsers. Demo Code Article Issues Grumpicon Grunticon in the browser, for those not comfortable with command line. Project site C
SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach Leatherman 11/26/2012 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. You’re minding your own business, casually browsing around on th
Update: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support We dusted off our original sliding doors button to give it a much needed update. The button now works with image sprites thanks to the CSS contributions of Louis Walch, and also works with a single block of CSS (we’ve removed the now unnecessary conditional comments for IE) in all major browsers inc
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
Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement As we discuss in our new book, Designing with Progressive Enhancement, and in previous articles and presentations, building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic
jQuery UI Slider from a Select Element - now with ARIA Support We’ve updated our popular jQuery UI selectToUISlider plugin with ARIA support, making the jQuery UI slider widget more accessible to users on assistive devices. The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual user
Hey there, time traveller! You've landed on a link to a past coding example that we no longer recommend. Please check out our blog for more updated articles and techniques.
jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas Posted by Scott on 07/02/2009 Topics: accessibilitycanvasjavascriptjQueryprogressive enhancementui designusabilityvisual designweb standards Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing
次のページ
このページを最初にブックマークしてみませんか?
『Filament Group, Inc. | User Interface Design & Responsive, Accessible, Resili...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く