Posts Tagged:responsive design

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.


“Old Guard”

Someone asked Chris Ferdinandi what his biggest challenge is as a web developer: … the thing I struggle the most with right now is determining when something new is going to change the way our industry works for the better, and when it’s just a fad that will fade away in a year or three. I try to avoid jumping from fad to fad, but I also don’t want to be that old guy who misses out on something that’s an important leap forward for us. He goes on explain a situation where, as a young buck developer, he was very progressive and even turned down a job where they weren’t hip to responsive design. But now worries that might happen to him: I’ll never forget that moment, though. Because it was obvious to me that there was an old guard of developers who didn’t get it and couldn’t see…

Read More →

The State of Web Animation: Part 1

We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit: Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next? I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m…

Read More →

Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year. Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C: Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. In my own words, CSS Grid is a mesh of invisible horizontal and vertical lines. We arrange elements in the spaces between those lines to create a desired layout. An easier, stable, and standardized way to structure contents in a web…

Read More →

People Writing About Style Guides

Are you thinking about style guides lately? It seems to me it couldn’t be a hotter topic these days. I’m delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it’s threefold why style guides and design systems have taken off: Component-based front-end architectures becoming very popular Styling philosophies that scope styles becoming very popular A shift in community attitude that style guides work That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies. Anyway, in my typical Coffee-and-RSS mornings, I’ve come across quite a few recently written articles on style guides, so I figured I’d round them up for your enjoyment. How to Build a Design System with a Small Team by Naema Baskanderi: As…

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 →

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up: Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of their applications. There are also semantic changes to HTMl elements that are worth noting: Clarifications and bug fixes bring the HTML Recommendation closer to what has been deployed recently. The definition for the main element has been updated to support…

Read More →

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior. We’re able to do that using just one line of CSS — the one-liner that reminds me of when Dumbledore just waved his wand in Horace’s apartment and “the furniture flew back to its original places; ornaments reformed in midair, feathers zoomed into their cushions; torn books repaired themselves as they landed upon their shelves…”. This magical, media-query-less responsiveness…

Read More →

The Changing Face of Web Design in 2018

Inspired Magazine Inspired Magazine – creativity & inspiration daily One of the interesting recent developments in web design trends is actually the trend away from trends… or in other word what is happening is a kind of regression to simpler ways, at least from those in the know. On the other side of the coin, there’s a big shift happening in certain types of corporate sites, especially some British and American media sites, where there’s a tendency to overload pages with so much extraneous content that it can severely impact on the ability of the user to see the content they actually arrived to see. If the first two paragraphs sound hopeless tangled, well that’s a very succinct allegory for the state of web development in 2018… tangled. It’s a problem we need to sort out, because it won’t be good for anyone if web standards continue to slip. We’ll…

Read More →

Accessible Web Apps with React, TypeScript, and AllyJS

Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but ultimately these pursuits are done with the user’s device in mind, not the user themselves and their potential disabilities or restrictions. A responsive app should be one that delivers its content based on the needs of the user, not only their device. Luckily, there are tools to help alleviate the learning curve of accessibility-minded development. For example, GitHub recently released their accessibility error scanner, AccessibilityJS and Deque has aXe. This article will focus on a different one: Ally.js, a library simplifying certain accessibility features, functions, and behaviors. One of the most common pain points regarding accessibility is dialog windows. There’re a lot of considerations to take in terms of…

Read More →

Benefits of Sliders and How To Use Them Correctly in Web Design

In web design, sliders have become effective tools for inserting slideshows on pages. To make a page look more organized – especially those with a large number of photos – sliders can continuously run or play the series of photos without the need to click anything on the part of the site visitor. This website design tool helps to create an organized and more interactive page. This early, let’s get one thing clear: sliders are not recommended for all types of websites. The best types of websites that sliders can be applied to are those that would like to show specific locations or features of an area – say, a real estate business, a hotel, or a vacation hotspot. It’s also amazing to see in websites that need to show variants of a given product, especially if you want to show different colors and sizes of a given design. Since…

Read More →

A Book Apart

(This is a sponsored post.)You know A Book Apart! They’ve published all kinds of iconic books in our field. They are short and to the point. The kind of book you can read in a single flight. I wrote on not so long ago called Practical SVG. Fortunately for us both, SVG isn’t the most fast-moving technology out there, so reading this book now and using what you learn is just as useful now as it ever was. More interested in JavaScript, they got it. HTML? CSS? Typography? Responsive Design? All covered. In fact, you should probably just browse the library yourself, or get them all. Better still, now is the time to do it, because 15% of all sales will directly benefit those affected by Hurrican Harvey. Direct Link to Article — Permalink A Book Apart is a post from CSS-Tricks Source: CssTricks

(An Interview About) imgix Page Weight

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting. We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to me to have tools for specifically analyzing and demonstrating how we could have done better with images specifically. That’s what this Page Weight tool is. Clearly this is a marketing tool for them. You put in a URL, and it tells you how you could have done better, and specifically how imgix can help do that. I’m generally a fan of that. Tools with businesses behind them have the resources and…

Read More →

Template Doesn’t Mean Cookie Cutter

The Challenge The mere mention of website templates makes some clients bristle. Nobody likes being told they have to conform to a set of rules they feel weren’t written with them in mind. They also believe that their site will look like everyone else’s and not meet their unique needs. Developers and designers also get concerned with templates, unsure if content editors will put the correct types of content in pre-built components. Sites that the development and design team spent a lot of time building can end up looking unprofessional if the templates aren’t used properly. No one wins in this scenario. The Solution Let’s first dispel the myth that using templates means your site will look like everyone else’s. When we talk about templates, we aren’t talking about simple differences in colors and fonts. Our Lectronimo website solution takes advantage of Drupal’s modularity and Panelizer to deliver different frameworks…

Read More →

Back to Top