Creating an effective color palette is a vital part of designing a website that works. But how do we get there? For some projects, you already have one or two colors picked out – maybe they’re your logo, or brand colors, and you’re working within those limitations when you create your site. For others, you’re starting from scratch. And some projects just need tweaking – minor adjustments to the color palette to make it more beautiful or usable. Whether you’re a seasoned pro looking to outsource some of the spadework of design, or you’re building a website for the first…
Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal blog. That’s just the tip of the iceberg — it’s capable of so much more!
In this article, we’ll take on the role of a web developer building a website for a fictional law firm. WordPress is an obvious choice for a website like this, but is it the only tool we should consider? Let’s look at a completely different way of building a website, using Jekyll.
Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive image breakpoints? A year later, he had an answer: Ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size.”
Cloudinary built a tool that implements this idea, and the response from the community was universal: “Great! Now, what else can it do?” Today, we have an answer: art direction!
Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.
Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters.
It’s been almost five years since Photoshop Etiquette launched, which officially makes it a relic on the web. A lot can happen on the web in a few years, and these past five have illustrated that better than most.
In 2011, everyone was just getting their feet wet with responsive web design. The traditional comp-to-HTML workflow was only beginning to be critiqued, and since then, we’ve seen a myriad of alternatives.
In times where Facebook announces to track all web users whenever it can, it feels weird to work on disaster management tools. You may now ask why, but if you consider what data you work with in such a project, you’re likely to be monitored because of a lot of keywords in there. And that’s what bothers me most: That people who want to do good need to fear that they’re under complete surveillance.
Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guides remain one of the best ways to communicate design standards to an organization.
Recently, our company went through the process of creating a living style guide. This is the story of how we developed our living style guide, the mistakes we made along the way, and why the current landscape of style guide generators did not suit our needs.
In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and <picture> element and Picturefill (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that’s not easy.
On top of that, responsive images markup has to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. We can solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
Further Reading on SmashingMag: Automating Art Direction With The Responsive Image Breakpoints Generator Responsive Images Done Right: A Guide To And srcset Responsive Images In WordPress With Art Direction Responsive Images Now Landed In WordPress Core The lives of web developers aren’t getting any simpler as the number of different devices and potential screen resolutions increase.
CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s.
Nevertheless, the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll.