Category Archive for: Drupal Development

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this: html { font-family: Lato, “Lucida Grande”, Tahoma, Sans-Serif; } What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is: I’d like to use the Lato font here, please. If you don’t have that, try “Lucida Grande” next. If you don’t have that, try Tahoma. All else fails, use whatever you’ve got for the generic keyword Sans-Serif So in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web…

Read More →

Your Sketch library is not a design system redux

I really like this post by Brad Frost about what is and isn’t a design system, particularly when he de-emphasizes the importance of tools when it comes to that sort of work : …components living inside static design tools like Sketch isn’t itself a design system. Pardon my clickbait. Perhaps a better title would have been “Your Sketch library is not a(n entire) design system.” No doubt tools like Sketch are super valuable, and having a set of reusable components inside them helps design teams establish thoughtful and consistent UIs. However, a Sketch library is just one piece of the design system puzzle. A design system also can include other puzzle pieces like: Design principles UX guidelines Development guidelines Coded UI components Component guidelines, usage, and details Page templates User flows Design tools Dev tooling Code repositories Voice and tone guidelines Implementation guides Contribution processes Team structure Resources (internal and…

Read More →

CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase. Links in HTML even look different from regular text without any CSS styling at all. See the Pen Default Link by CSS-Tricks (@css-tricks) on CodePen. They are blue (purple if visited). They are underlined. That’s a link in it’s purest form. But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the <a> element in our stylesheet. Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not? a { color: red; text-decoration:…

Read More →

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both: body { background-color: red; background-image: url(pattern.png); } Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL. See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen. That’s just a single image there, repeated, but we can actually set multiple background images if we want. We do that by separating the values with commas. body { background-image: url(image-one.jpg), url(image-two.jpg); } If we leave it like that, image-one.jpg will repeat and entirely cover image-two.jpg. But we can control them individually as well, with other background properties. body { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, /* this positions the first image…

Read More →

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets. While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet. The Sheet Contains the Styles The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the “sheet” of CSS is the digital file where styles are coded. If we were to illustrate this, the relationship between the three sort of forms a cascade: The sheet holds the styles. There can be multiple…

Read More →


Observable launched a couple of weeks ago. As far as I understand, it’s sort of like a mix between CodePen and Medium where you create “notebooks” for exploring data, making nifty visualizations. Check out this collection of visualizations using map integrations as an example. The entries are not only nice demos of the libraries or technology being used (i.e. D3, Google Maps, Leaflet, etc.), but also make for some interesting infographics in themselves. In a note about this interesting new format, founder Mike Bostock describes a notebook as “an interactive, editable document defined by code. It’s a computer program, but one that’s designed to be easier to read and write by humans.” All of this stuff riffs on a lot of Mike’s previous work which is definitely worth exploring further if you’re a fan of complex visualizations on the web. Direct Link to Article — Permalink Observable is a post…

Read More →

CSS Grid Layout Module Level 2

The second iteration of CSS Grid is already in the works and the public editor’s draft was released last week! While it is by no means the final W3C recommendation, this draft is the start of discussions around big concepts many of us have been wanting to see since the first level was released, including subgrids: In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align. The currently defined characters of subgrid items are particularly interesting because they illustrate the differences between a subgrid and its parent…

Read More →

Common Connected Hardware Blunders

Over the last few years we’ve worked with a number of startups who have engaged with Viget for help designing or engineering some aspect of their connected product. Every product is unique, but it may surprise you how similar their challenges are. What is perhaps less surprising is the number of inventive ways we’ve seen solo-entrepreneurs, young startups, and even internal business units with firm foundations go about solving those challenges. I’ll take a moment to reflect on some of those challenges and specifically call attention to the missteps and follies we commonly see early-on in engagements. Building the wrong prototype Viget builds primarily two different kinds of product prototypes. A stakeholder prototype, which focuses on delivering desired functionality by leveraging as many pre-existing solutions as possible. And a functional prototype, which focuses on exploring production options by honing in on core mechanics and functionality. Both prototypes serve specific needs which…

Read More →

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance: .header { background-color: white; color: white; } Which could lead to text that’s there, but invisible. This is … very bad. You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color is transparent, so without setting any background the background of an element is probably white. More commonly, you’re using a background-image that makes the background a different color, and you’re setting white text on top of that. header { background-image: url(plants.jpg); color: white; } Under perfect circumstances, this is all good: But let’s take a look at what it looks like while the website is loading over a very common “Slow…

Read More →

Conflicts are rarely just about the cards on the table

Most disagreements aren’t just about the cards on the table. They’re just as much about who’s at the table. What time the game is being played. The last fifty games before this one. And about all the other people the current participants ever played with as well.So it’s no wonder the game ends up making little sense to folks who think everything they need to know to make the winning argument is reading the cards facing up.One good way to tell how much a conflict is about those cards, or about something else, is to gauge the temperature of the tone. If it’s unreasonably, disproportionately hot, then it’s probably not just about the current specifics. There are very few specific situations and details that’ll make people hit the red zone on the account of those alone.People get worked up by compounding circumstances and repeating dynamics. Like, why does he always have to say…

Read More →

New in Basecamp: Improved Schedule Cards

A more complete picture of what’s coming upThis was a classic case of “How hard could it be?” that started as a series of customer requests and bug reports. People wanted to see their events AND their dated to-dos on their Basecamp 3 Schedule cards. Totally reasonable, right? Like anything involving dates, timezones, and computers, it took more than a little wrangling… But now you can!Let There Be To-dosHere’s a great example from our Ops Team. Before, we only showed upcoming schedule events. That triggered a misleading message that said “Nothing’s coming up!”Nothing’s coming up! Maybe?Why is this misleading? If you click through to the Schedule itself, you’ll see there’s actually a to-do due tomorrow:Surpise!You wouldn’t have known that glancing at the Schedule card. With the changes we just added, you’ll now see something like this when you’ve got upcoming to-dos:Voila! Just like the full ScheduleWho and When?Another thing was missing from the previous design: It…

Read More →

Cultivating an Inclusive Culture

The honest introspection and continuous work for a better teamReconsider DiversityThe typical approach to diversity in corporate environments can usually be summed up in two ways: lazy and superficial.To be fair, diversity is a difficult word to put into action. Most attempts to do so will probably end up feeling superficial. For example, companies often ironically state that they’re “committed to diversity” when the word itself is pretty noncommittal. The ambiguous nature of diversity means it can be interpreted in a number of different ways.That laxity is an allowance for laziness. Initiatives based on diversity are notorious for having vague, or non-existent, standards and accountability. Diversity has become a clichéd ideal versus an agent for change.Diversity is a difficult word to put into action.Attempts to execute diversity in a more specific way can also be problematic. Companies confronted with unfavorable demographic numbers and public pressure to do better find it easy to reach…

Read More →

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work. First, so we have the terminology down: A CSS ruleset consists of a selector and delcaration(s) wrapped in curly braces. Important: Braces All CSS rulesets must have opening and closing curly braces: braces.header { padding: 20px;}.header padding: 20px;}.header { padding: 20px;}.header padding: 20px; If you miss the opening brace, CSS will keep reading as if the next bit of text is still part of the selector. Then it’s likely to find a character…

Read More →


A modest JavaScript framework for the HTML you already have. This will appeal to anyone who is apprehensive about JavaScript being required to generate HTML, yet wants a modern framework to help with modern problems, like state management. I wonder if this would be a good answer for things like WordPress or CraftCMS themes that are designed to be server side but, like any site, could benefit from client-side JavaScript enhancements. Stimulus isn’t really built to handle SPAs, but instead pair with Turbolinks. That way, you’re still changing out page content with JavaScript, but all the routing and HTML generation is server side. Kinda old school meets new school. Direct Link to Article — Permalink Stimulus is a post from CSS-Tricks Source: CssTricks

Article Performance Leaderboard

A clever idea from Michael Donohoe: pit websites against each other in a performance battle! Donohoe is a long-time newsroom guy, so this is specifically about article pages for major publications. Lets state the obvious, this is an imperfect and evolving measure and the goal is to foster discussion and rivalry in making our pages better, faster, and lighter. Bear in mind this was built as an internal tool at Hearst Newspapers to track changes as we rollout our new Article template on mobile for SFGate and eventually all sites (SF Chronicle, Houston Chronicle, Times Union, etc). Developers, designers, and product need to talk more on how to achieve this. A 1,700 word article might weigh 10KB but by the time you load HTML, JS, CSS, images, 3rd-parties, and ads, it can range between 2MB to 8MB depending on the web site. Bear in mind, the first Harry Potter ebook…

Read More →

Web Design Advice

I have a segment on my YouTube channel, where people send me the things they’re working on and I give them random advice. 🙂 If you want your work featured on my YouTube channel and elsewhere please send your ideas along ([email protected]). And I’ll give constructive, fair advice that I hope won’t leave you sorry you asked.Brandon Wu sent me this awesome site called Markd. He’s received nice organic traction with it so far because it ranked well on Product Hunt.Brandon, you’ve gotten a ton further than a lot of people do by getting an idea out there into the world. Clearly people are using it and it fits a need people have. So a huge congratulations!These are just some things that I’d experiment with if it were my project.Social ProofOne of the first things that stands out to me about the site is “Where are the Testimonials!?” There are a bunch of people…

Read More →


Forever I’ve used the macOS Command-Shift-4 screenshot utility to measure things. Pressing it gets you a little crosshairs cursor which you can click-and-drag to take a screenshot but, crucially, has little numbers that tell you the width/height of the selection in pixels. It’s crude, but ever so useful. See those teeny-tiny numbers in the bottom-right? So useful, even if they are tough to read. PixelSnap is one of those apps that, once you see it, you’re like OMG that’s the best idea ever. It’s the same kind of interaction (key command, then mouse around), but it’s drawing lines between obvious measurement points in any window at all. Plus it has this drag around and area and snap to edges thing that’s just as brilliant. Instant purchase for me. The Product Hunt newsletter said: Two teenage makers launched PixelSnap, a powerful design tool to measure every pixel on your screen. Hit…

Read More →

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here. Noel Delagado See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen. The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction: var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX – obj.offsetLeft – (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY – obj.offsetTop – (h / 2) * (h > w ? (w…

Read More →

A Lifetime of Nerdery (Video)

I converted my slides into an article for this talk not too long ago. The video is up now, if that’s more your speed: A Lifetime of Nerdery (Video) is a post from CSS-Tricks Source: CssTricks

Back to Top