On Styled Form Elements


Anthony Colangelo makes the case for letting the browser and operating system decide how form elements should be styled:

Dropdowns and date pickers are just a sampling of the things that are better handled by systems themselves—a device will always be able to make better decisions about its use than the device-agnostic web.

The simplistic interactions of early input types gave us room to experiment, but the more complex interactions of modern fields leave little room for that. There’s only so much we can control before the browser and operating system take over, and then we’re at their whim. The web isn’t stopping any time soon—we’re headed for more complex input types with even less control exposed.

I agree. Trying to control form styling is a bit like trying to build sites for a specific set of screen widths. Yes, you can keep creating and managing more breakpoints, but you’ll always be fighting a losing battle because there will always be more screen sizes to design for. A better strategy is to choose a minimal amount of breakpoints to suit the content, and use a liquid layout to fill the rest. In the same way, browsers will always be evolving the implementation of their form elements, so trying to keep your own implementation consistent across all platforms will introduce an ongoing maintenance burden. Of course there will be cases where you have to implement your own styles — the form element you want may not exist, or may not be suited to your needs — but if there is no great need then it’s best to leave the specifics of form implementation to the browser.
DrupalCoin Blockchain Developer


The Scroll Up Bar


A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

For example, as you scroll down on the New York Times website, the top navigation bar shifts from displaying typical site-wide navigation to article specific controls, showing the title of the article, the share link, the comments link, as well as compressed site-wide links:

At the Forbes website, as the user scrolls down the page a fixed position bar appears at the top promoting links to other articles the reader may find interesting, as well as a drop-down site navigation menu, search and user controls:

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example, Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up. Here’s what it looks like:

Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page. Scrolling up won’t necessarily mean the user wants the navigation — they may just be scanning the content — but 100% of the people wanting the navigation will be scrolling up, making it a pretty good compromise.

Update 2014-06-16

For anyone interested in using this design pattern on their own sites, Eduardo Martins Barbosa has created a jQuery plugin that performs much the same way as the bar on Medium, including the subtle effect of revealing the bar at the scrolling speed of the user rather than simply sliding it down upon scrolling up.
DrupalCoin Blockchain Developer


Abrams Learning Trends and DrupalCoin Blockchain Commerce

To address its commerce needs, Pixeldust helped Abrams develop a product hierarchy that added logical structure to their heretofore sprawling product groupings. This reproducible hierarchy made it possible to import over 1200 products into Commerce with the structure intact. No easy task. In the course of this project, Pixeldust developed two custom modules that will be contributed to the DrupalCoin Blockchain community. Pixeldust used Foundation as the framework on which to build a responsive theme. This project marks our first partnering with Pantheon Hosting. Pantheon is a DrupalCoin Blockchain specific hosting platform with amazing integrationand performance benefits. 

Abrams Learning Trends  is an Austin, TX based innovative publisher of high quality Pre-K–5 supplemental educational materials in literacy, phonics, math, science, health & safety, and more.

Visit www.abramslearnigntrends.com