Category Archive for: webpage

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.


The Cost of JavaScript in 2018

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more. In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to “Time-to-Interactive” measurements and auditing your JavaScript bundles. Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget of < 170KB minified/compressed. Uncompressed this is still ~0.7MB of code. Budgets are critical to success, however, they can’t magically fix perf in isolation. Team culture, structure and enforcement matter. Building without a budget invites performance regressions and failure. Super specific and super practical! Surprisingly, Addy mentions that “the median webpage today currently ships about 350KB of minified and compressed JavaScript,” which seems like an awful lot lower than I’d…

Read More →

How to make a modern dashboard with NVD3.js

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations. For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post. Making a dashboard with NVD3.js for the first time is daunting, but after this tutorial, you should have the required knowledge to get your hands dirty and start building something awesome. Personally, I have a passion for visualizations on the web. They are both beautiful and meaningful at the same time. Real-world use case: A data dashboard Dashboards can be used for pretty much anything. As long as you’ve got data to analyze, you’re good…

Read More →

Museum of Websites

The team at Kapwing has collected a lot of images from the Internet Archive’s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It’s super interesting. I particularly love how Amazon has evolved from a super high information dense webpage that sort of looks like a blog to basically a giant carousel that takes over the whole screen. Direct Link to Article — PermalinkThe post Museum of Websites appeared first on CSS-Tricks. Source: CssTricks

9 Essential Types of Webpages Every SEO Needs to Know by @stoneyd

Every webpage needs to be optimized, but these pages often provide the most SEO value to businesses.The post 9 Essential Types of Webpages Every SEO Needs to Know by @stoneyd appeared first on Search Engine Journal. Source: https://www.searchenginejournal.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 →

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 →

Heavy images slowing down your site?

(This is a sponsored post.)Speed is an important piece of a website’s user experience. Since images account for an average of 70% or more of a webpage’s weight, optimizing them is crucial to creating a faster website. That’s why we created Page Weight, a tool that will diagnose your site’s most problematic images and prescribe solutions on how to optimize them. Simply enter your URL into Page Weight and we will prepare a custom report of your images performance and what you can do to improve them. Test your site for free! Direct Link to Article — Permalink Heavy images slowing down your site? is a post from CSS-Tricks Source: CssTricks

Grab The Attention of Your Site Visitors in 5 Seconds

You may have the skills of a mad (but extremely talented) web developer, but that’s meaningless if no one cares about your website. Every website owner’s goal is to pull in more followers to their pages, and that will only be possible if they can grab the attention of their target audience. Most people generally visit a website because they need information. Chances are, website links get clicked on the search engine results page (SERP) because they appear helpful for those who are looking for specific pieces of information. However, the critical part of website design is to know how to grab the attention and interest of casual page visitors. The web design strategies that you use will definitely play a significant role in maintaining the interest of your site visitors for them to stay and keep looking. In other words, although the quality of information on your site will…

Read More →

Grab The Attention of Your Site Visitors in 5 Seconds

You may have the skills of a mad (but extremely talented) web developer, but that’s meaningless if no one cares about your website. Every website owner’s goal is to pull in more followers to their pages, and that will only be possible if they can grab the attention of their target audience. Most people generally visit a website because they need information. Chances are, website links get clicked on the search engine results page (SERP) because they appear helpful for those who are looking for specific pieces of information. However, the critical part of website design is to know how to grab the attention and interest of casual page visitors. The web design strategies that you use will definitely play a significant role in maintaining the interest of your site visitors for them to stay and keep looking. In other words, although the quality of information on your site will…

Read More →

5 Useful Tips when Designing for Users Short Attention Spans

Recent research shows that the average attention span of an internet user is 8 seconds. This is why designing for users short attention spans is crucial. Failure to do this, will ensure users won’t stick around a particular website long enough to accomplish a given task, whether it is buying something or simply reading articles. So, what can web designers do about this? There are several ways you can optimize a website to appeal to users with a short attention span. 1. Fast Loading Speed First and foremost, ensure that the website loads as fast as possible. In this situation, time is critical. The longer it takes for a website to load, the more the user becomes impatient. You can be sure that they won’t stick around to wait for it to fully load. One of the ways to improve website speed is by removing any unnecessary features. This includes images, text,…

Read More →

Annotation is Now a Web Standard

This sure is exciting news: the various groups that make up the W3C have agreed upon a set of rules by which we’ll be able to annotate, highlight and make comments to a webpage without the need of a third party script or framework. Dan Whaley describes why this could be a big deal: The W3C standards are a key milestone towards a future in which all pages could support rich layers of conversation without requiring any action by their publishers—because that capability can be built into the browser itself and be available as a native feature, just like like web search. The shared vision is that conversations will be able happen anywhere on the Web, or even on documents in native apps, and inline instead of below-the fold, in a federated, standards-based way. Direct Link to Article — Permalink Annotation is Now a Web Standard is a post from…

Read More →

Responsive Images in WordPress with Cloudinary, Part 2

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides. Article Series: An Intro to Responsive Images and WordPress A WordPress Plugin integrating Cloudinary and Responsive Images (you are here!) In this installment, I go into more detail about how image resizing in WordPress works. I explain how I used built-in WordPress hooks along with Cloudinary’s application programming interface (API)—and its PHP integration library—to create a WordPress plug‑in that offloads responsive image resizing and optimization to Cloudinary.…

Read More →

Are you looking for an answer or are you asking about impact?

The question has everything to do with the answer“What’s one thing you love about Basecamp?”“What’s the one thing you like least about Basecamp?”“If you could change one thing about Basecamp, what would it be?”“Would you recommend Basecamp to a friend or colleague?”We’ve asked these questions before. They’re ok, but ultimately they’re pretty self-serving. We wanted people to talk about us. What are we doing well, poorly, etc. We were getting answers. That’s what most companies are after when they ask questions — they’re looking for answers about themselves.But answers are easy to come by. What’s more interesting is impact and outcomes. What kind of impact is Basecamp having on people’s lives? What’s changing for the better at companies that run on Basecamp 3? That’s what I really wanted to know.So on our latest survey we shifted the question outward. If you want to get people talking, ask them about themselves.So we asked “What’s changed for…

Read More →

4 Metrics CEOs Use to Grow Their Companies

CEOs have the responsibility of growing a company. With mountains of available data, they use metrics to focus on the greatest sources of successes and opportunities. Metrics are objective data points that provide insight about the status of a company. There are many types of metrics: financial metrics, sales metrics, engagement metrics, production metrics, cost metrics, retention metrics, and on and on. But which ones does a CEO focused on growth focus on? Greg Lisiewski, CEO of Blispay, a fintech startup offering a mobile-centric credit card, said, “As a founder of a rapidly growing startup sitting on top of a mound of data that’s flowing constantly, I pay close attention to our acquisition funnels such as traffic and conversion. I track the acquisition / usage metrics daily, sometimes hourly. This allows me to keep a pulse on the business while trusting that various teams are analyzing data more targeted at…

Read More →

The Annoying Mobile Double-Tap Link Issue

We had a question come up the other day on ShopTalk about regular ol’ anchor links on iOS, and some weird situation where you couldn’t just tap them once to go to the link, it required tapping the link twice. I’ve experienced this myself and have been pretty confounded. My first thought was there was some kind of bizarre unexpected JavaScript happening. Perhaps a click handler with preventDefault() on that first click and then getting removed. I couldn’t find anything like that happening though. I’m sure I tried a few more things, but ultimately gave up and used FastClick to make sure those link clicks worked. FastClick wasn’t meant to solve this problem, it’s more to solve the 300ms delay for tapping links that some mobile browsers impart so they can wait to see if you’re doing a double tap (note: not as much of a problem as it once…

Read More →

Back to Top