Category Archive for: user

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.


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 →

Guide to Choosing the Best Messaging App to Boost Your Business

Messaging apps started out as an alternative to text messaging, and they have evolved into multifunctional apps that can satisfy every possible digital need. Now you can share content, play games, watch movies, send your exact location, and even order food via chat. A report from BI Intelligence shows that the combined user base of Read more Source: https://adespresso.com/feed/

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 →

Facebook to Begin Measuring Post Reach Based on Actual Views by @MattGSouthern

Facebook is making two updates to Page Insights, one of which will affect the way organic reach is calculated. Traditionally, reach for page posts has been calculated based on how many times a post has been loaded in the news feed. If a post was delivered in the news feed it would count as a view, even if the user didn’t actually scroll down to see the post. Starting on February 12, Facebook will begin to calculate reach based on how many times a post enters a person’s screen. This will make organic reach of Pages more consistent with the […]The post Facebook to Begin Measuring Post Reach Based on Actual Views by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell. Not all browsers support this so, to do a fallback, the <picture> element is ready. Bruce Lawson shows how easy it can be: <picture> <source type=”video/mp4″ srcset=”adorable-cat.mp4″> <!– perhaps even an animated WebP fallback here as well –> <img src=”adorable-cat.gif” alt=”adorable cat tears throat out of owner and eats his eyeballs”> </picture> Šime Vidas notes you get wider browser support by using the <video> tag: <video src=”https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4″ muted autoplay loop playsinline></video> But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, <video> it is for now,…

Read More →

The Best UX is No User Interface at All

I have been obsessed with User Interfaces (UI) for as long as I can remember. I remember marveling at the beauty that was Compaq TabWorks while I played “The Incredible Machine” and listened to “Tears For Fears—Greatest Hits” on the family computer. Don’t judge me—I was listening to “Mad World” way before Donny Darko and that creepy rabbit. If none of those references landed with you, it’s probably because I’m super old. In the words of George Castanza, “It’s not you, it’s me.” That’s another super old reference you might not get. You know what—forget all that, let’s move on. I really got into UI when I bought my own computer. I had joined the Coast Guard and saved a bunch of money during boot camp (when you can’t go shopping—you know—because of push-ups and stuff). I wanted to buy a Chevy Cavalier (sadly, that’s not a joke), but my…

Read More →

Design Systems: The Parts

In our last article, we explored why you might seek help getting started on your Design System and where to begin. Now, we’ll explore what goes into one. What goes into a Design System? There are some differing opinions on exactly what goes into a Design System and how best to structure the inventory. From what I’ve seen, the differences from one system to another are mostly about nomenclature and how best to organize things. For us, we’ve largely defined Design Systems as “a digital library of guidelines and resources.”  Guidelines Simply put, these are the documented standards—a place to go to see examples and written descriptions to better understand usages patterns. We break them up into two primary categories: Style Guidelines and UI Guidelines. Style Guidelines These are the perceptual patterns that are core to the brand, from principles to voice and tone guidance. Examples: PrinciplesColorsTypographyVoice & ToneLogos &…

Read More →

Set Up AWS CLI and Download Your S3 Files From the Command Line

The other day I needed to download the contents of a large S3 folder. That is a tedious task in the browser: log into the AWS console, find the right bucket, find the right folder, open the first file, click download, maybe click download a few more times until something happens, go back, open the next file, over and over. Happily, Amazon provides <span <the=”” other=”” day=”” i=”” needed=”” to=”” download=”” the=”” contents=”” of=”” a=”” large=”” s3=”” folder.=”” that=”” is=”” tedious=”” task=”” in=”” browser:=”” log=”” into=”” aws=”” console,=”” find=”” right=”” bucket,=”” folder,=”” open=”” first=”” file,=”” click=”” download,=”” maybe=”” few=”” more=”” times=”” until=”” something=”” happens,=”” go=”” back,=”” next=”” over=”” and=”” over.=”” happily,=”” amazon=”” provides=”” AWS CLI, a command line tool for interacting with AWS. With AWS CLI, that entire process took less than three seconds: $ aws s3 sync s3://<bucket>/<path> </local/path> Getting set up with AWS CLI is simple, but the documentation…

Read More →

Tools for Thinking and Tools for Systems

I’ve been obsessed with design tools the past two years, with apps like as Sketch, Figma and Photoshop perhaps being the most prolific of the bunch. We use these tools to make high fidelity mockups and ensure high quality user experiences. These tools (and others) are awesome and are generally upping our game as designers and developers, but I believe that the way they’ve changed the way we produce work and define UX will soon produce yet another new wave of tools. In the future, I predict two separate categories of design applications: tools for thinking and tools for systems. Let me explain. Tools for Thinking A short while ago Oliver Reichenstein described why we like distractions and how, in order to make great things, we need dedicated moments of focus, discipline, and concentration: Starting and finishing need courage. There is no app or tool that will give you courage.…

Read More →

The Wix Code Database and Data Modeling

(This is a sponsored post.)I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some new and very powerful new features of Wix right up that alley. One of the cool features of Wix Code is the ability to separate your site’s design and layout from its content. This means you can create and maintain your…

Read More →

The Wix Code Database and Data Modeling

I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise. But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some new and very powerful new features of Wix right up that alley. One of the cool features of Wix Code is the ability to separate your site’s design and layout from its content. This means you can create and maintain your information in a database…

Read More →

How to Style a Form With Tailwind CSS

If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, “Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.” In practice, this means using a variety of classes that closely map to underlying CSS properties. For example, applying a class like .text-center to an element means that we’re setting its text-align property to center. Simple enough, right? Using utility classes like this allows us to spend more time iterating through designs and avoiding premature abstraction of our CSS. Then, once we’re happy with our designs, Tailwind makes it easy to extract our utilities into component classes. Now, I’m sure you know that even mentioning a utility framework is an open invitation for a certain amount of brouhaha. Before we start yelling at me on Twitter or the comments…

Read More →

Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component

This is the fourth post in a four-part series. In Part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. The third part covered Stripe Elements in Vue. This last post shows how to configure the checkout component and make the shopping cart fully functional. Article Series: Setup and Testing Stripe Function and Hosting Application and Checkout Component Configure the Checkout Component (This Post) As a reminder, here’s where we are in our application at this point: Configuring the Checkout Component We have to do a few things to adjust the component in order for it to meet our needs: Make sure the form is only displaying if we haven’t submitted it—we’ll deal with the logic for this in our pay method in a moment Allow the form to take a customer’s email address in case something is wrong…

Read More →

Acquia Headless Lightning and Content API

Acquia Headless Lightning provides an API-first back-end content repository that allows for easy ingestion by front-end applications. Front-end developers requiring a headless or decoupled CMS have immediate access to a cloud-hosted content repository service for development, delivering, and production. Headless Lighting builds on the Acquia Lightning distribution and configures the basic tool set provided by the contrib modules selected and implemented in Lightning’s Content API. Acquia Headless Lightning advantages for front-end developers: It makes the user environment more intuitive for non-Drupalists, and more logical for all developers using Drupal primarily as a content repository. It is more opinionated about and examples of how an external / front-end application should authenticate against and consume the Content API. Features: JSON Content Module Presentation layer that hides or redirects users from content rendered by the Drupal application. User Environment Configures user interface opinions on the administrative back-end, making it intuitive to create and…

Read More →

Acquia's Lightning for Headless CMS

Acquia Headless Lightning provides an API-first back-end content repository that allows for easy ingestion by front-end applications. Front-end developers requiring a headless CMS or decoupled CMS have immediate access to a cloud-hosted content repository service for development, delivering, and production. Headless Lighting builds on the Acquia Lightning distribution and configures the basic tool set provided by the contrib modules selected and implemented in Lightning’s Content API. Acquia Headless Lightning advantages for front-end developers: It makes the user environment more intuitive for non-Drupalists, and more logical for all developers using Drupal primarily as a content repository. It is more opinionated about and examples of how an external / front-end application should authenticate against and consume the Content API. Features: JSON Content Module Presentation layer that hides or redirects users from content rendered by the Drupal application. User Environment Configures user interface opinions on the administrative back-end, making it intuitive to create and…

Read More →

How People Search: Classifying & Understanding User Intent by @TaylorDanRW

Optimizing for search intent is critical. Here’s how search engines understand intent and how this impacts the content you create.The post How People Search: Classifying & Understanding User Intent by @TaylorDanRW appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Third-Party Scripts

Trent Walton: My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts. I recently had a conversation with a friend working on quite a high profile e-commerce site. They were hired to develop the site, but particularly with performance in mind. They were going the PWA route, but were immediately hamstrung by third-party scripts. One of them, apparently unavoidably, couldn’t be HTTPS, meaning the site was immediately disqualified from being a PWA. They could still do a good job in many other areas, but right and left their great performance work was slaughtered by third-party scripts. I don’t envy being in that position. It’s…

Read More →

Back to Top