As the WordPress Gutenberg block editor has evolved, theme developers have been encouraged to integrate it into their work. But in some ways, the editor itself is still a work in progress. That has led to frustration.
While including some features have been simple enough, there are challenges. Among the biggest headaches have been customizing block styles and setting up default color palettes.
These items have to be declared and styled in separate parts of a theme. When you need to make changes, that could mean editing multiple files. And if you switch to a new theme, you’ll have to recreate it all from scratch.
The solution? Enter the WordPress theme.json file. It aims to be an all-encompassing place for styling the block editor on both the front and back ends.
Today, we’ll take a look at what theme.json can do and how it will benefit WordPress theme developers. Let’s get started!
Bringing Block Styles and Defaults Under One Roof
According to the Block Editor Handbook, the rationale behind theme.json is to provide “a canonical way to define the settings of the block editor”. In practice, it offers theme developers granular control over how various blocks are styled and what options are available to users in the back end.
This allows for setting sitewide defaults for styling colors, fonts, and even the editor itself. But it also enables developers to go deeper and manage things on a per-block basis.
With theme.json, it’s possible to account for one-off situations where a specific block has different defaults than the others. For instance, if you wanted to provide a unique default font size for the Columns block, you can do so within this file. Likewise, you might also remove spacing options from that same block.
The result is a block editor that is more closely aligned with the theme. Developers no longer have to settle for Gutenberg’s out-of-the-box defaults or deal with clunky workarounds. In addition, they can set parameters for how users can manipulate blocks in an easier-to-maintain manner.
And now for the “magic” part: WordPress will read the settings in your theme.json file and output the necessary CSS for you. There’s no need to hack away at your stylesheet and only one file to change. How cool is that?
There are also some performance benefits. Normally, customizing block styles within the editor means both the original and edited versions are loaded in.
As the Handbook states, “…if a theme and a user set the font size for paragraphs, we only enqueue the style coming from the user and not the theme’s.” Fewer lines of CSS mean faster load times.
Before we start configuring our theme.json file, there are a few requirements to get out of the way:
WordPress 5.8 and above is required.
The file should reside in your theme’s root directory. For example: /wp-content/themes/mytheme/theme.json
The available settings are expected to grow over time and some are experimental. Thus, you may need to install the official Gutenberg plugin to access certain items.
Still, there are plenty of goodies to play with! Let’s explore a basic example.
Creating a Basic theme.json File
As its name indicates, the theme.json file is written in JSON. And, once you have a basic template, it’s possible to edit or add to the file by following the established syntax.
Eventually, one can envision a vast array of boilerplates and code generators for developers to use. For this demo, we used the Gutenberg Theme.json Creator. It provides a simple interface for generating a custom file.
Our mission will be to clean up the color options on our website. By default, there are simply too many possible colors a user could choose from – including creating their own custom hues.
That could lead to an inconsistent user interface. Therefore, we’ll scale things back to just our brand’s color palette.
To do so, we’ll tweak the following in Gutenberg Theme.json Creator:
Disable “Custom Colors” and “Custom Gradient” options;
Add a custom color palette with our brand’s colors;
Now, we can copy the generated output into a new theme.json file, which we’ll save to the root directory of our theme (we’re using Twenty Nineteen here).
Our custom theme.json file worked as expected. The simplified color palette we configured has replaced the default setting. And the user’s ability to create custom hues and gradients has been removed from the block editor.
In addition, WordPress has written all of the required CSS for us. Thus, any color changes we make in the block editor are also reflected on the front end.
Finally, because all of this resides in a single file, making future changes and additions will be a relatively simple process.
Going Further with theme.json
We’ve only scratched the surface of what theme.json is capable of. If you’re looking to further your knowledge, check out these helpful resources:
Configuring Theme Design with theme.json by Jeff Ong
Exercise: Creating theme.json by Full Site Editing
Global Styles & theme.json by Full Site Editing
Standardizing Theme.json Color Slugs in WordPress Block Themes by Rich Tabor
Theme.json for WordPress Theme Authors (demo, Q&A) by Gutenberg Times
Using theme.json in a classic theme by Marcus Kazmierczak
The post An Introduction to the WordPress theme.json File appeared first on Speckyboy Design Magazine.
When it comes to creating a great piece of web-based art, the details are what stand out. Lighting and shading effects are prime examples. They can turn a flat, 2D work into an immersive 3D experience.
For quite a while, the ability to add realistic light and shade to an illustration or animation seemed like the holy grail. The technology wasn’t always there. Thus, developers had to find workarounds to approximate the effect.
Creativity Now✨(click anywhere) by Anna the Scavenger
Text seems like a natural place to add lighting and shading. But this example takes it to a whole other level. The creative makeup of each letter and cursor-following animation makes this a true work of art. It’s akin to a 3D mobile hanging from your ceiling. Even better: click on the presentation to create an entirely new look.
See the Pen Creativity Now✨(click anywhere) by Anna the Scavenger
Photo Tear by Steve Gardner
Place your cursor on one of the upper corners of a photo, then click-and-drag downwards. You’ll notice the image ripping apart. By itself, that’s a pretty cool effect. But what really sells it is the shading as the perspective shifts. The entire process feels very much authentic.
See the Pen Photo Tear by Steve Gardner
Platonics by Liam Egan
This 3D animation has a stunning liquid effect. A piece of metal twists and morphs its way into various objects. Realistic reflections make it all the more compelling to watch, thanks to WebGL.
See the Pen Platonics by Liam Egan
Beat Burger by Steve Gardner
Nothing like performing a huge drum solo in the spotlight. What? You’ve never been in a famous band? Maybe the next best thing is to play this virtual drumkit, made from a hamburger. You get the sounds, the spotlight and even the shadows. Just don’t get any grease on your new clothes.
See the Pen Beat Burger by Steve Gardner
Monochromatic Yoyo – Pure CSS by Josetxu
Here we have a slinky-like array of pure CSS squares. Their chain-reaction animation is further enhanced by the use of, you guessed it, lighting and shading. Gradients add the illusion of depth, while drop shadow moves along with each layer of the animation.
See the Pen Monochromatic Yoyo – Pure CSS by Josetxu
Art Gallery by isladjan
This virtual art installation is certainly abstract. It features a colorful blob that morphs as your cursor moves across the screen. Rays of light add a touch of realism. However, click on the “Light OFF” button and the entire presentation transforms into a particle explosion.
See the Pen Art Gallery by isladjan
SVG lighting shader by Artem Lvov
With clever implementation, the flashlight effect can be simply amazing. Here it’s used to illuminate a rocky surface. Thanks to SVG, the image looks ultra-realistic. Both the light and perspective shift along with your cursor. It also has the benefit of being safer than walking around in the woods after dark.
See the Pen SVG lighting shader by Artem Lvov
Pacman Concept by Ivan Juarez N.
This PAC-MAN inspired snippet brings the beloved video game into the 3D age. Ghosts travel through an illuminated cube, with sharp rays of light bursting through the maze. Once again, the cursor plays a role, as you can change the scene’s perspective by moving around.
See the Pen Pacman Concept by Ivan Juarez N.
Finishing Touches That Stand Out
It used to be that you needed high-end software to create convincing lighting and shading effects. But, thanks to the advancements in web technologies, similar enhancements can be achieved through code.
The ability to leverage hardware acceleration also plays a key role. Without the power of the graphics processing unit (GPU), these advanced scenes couldn’t run with such fluid motion.
Put together, the results can be stunning. And the examples above might only be scratching the surface of this potential.
Want to check out even more amazing 3D scenes? Visit our CodePen collection to get your fill!
Everyone wants to control their own destiny. For web designers, that means layouts that look great, code that works as intended, and clients who pay on time.
While we may wish for each of those things, reality usually plays out differently. Layouts aren’t always pixel-perfect, code breaks and clients – well, they’re human.
But it goes even further. The deeper you look, the more situations you’ll find that are out of your control.
This is especially tough for those of us who keep a tight grip on both our business and projects. When something is out of our sphere of influence, it’s easy to become frustrated. And that can harm virtually every aspect of your work. It may even creep into your personal life as well.
That’s why the ability to cope with these situations is vital. By saving yourself from obsessing over something you can’t control, you’ll have more energy to focus on being positive and productive.
Let’s look at a few difficult-to-control situations that typically impact web designers. Along the way, we’ll discuss some methods for letting go in a healthy manner.
When a Longtime Client Leaves
If you’ve worked in this industry for a few years, you may have gotten an unexpected email from a client that goes something like this:
We wanted to let you know that we are in the process of building a new website. It should be ready in the next few weeks. Could you work with our new designer to help with the transition?
It was great working with you!
This is frustrating on a few different levels. First and foremost, it hurts that you didn’t get a chance to even discuss the project. On top of that, your soon-to-be ex-client expects you to work on the transition away from your services.
Clients will come and go – that’s just part of doing business. However, it’s particularly difficult when someone blindsides you like this.
As it turns out, you had no warning and zero control. If you had just been able to pitch an idea or two, maybe things would have turned out differently? These are the types of thoughts likely racing through your head after reading such a letter.
How to Cope
True, the damage has already been done. And while you can angrily fire off a one or two-word reply to your client, that’s not going to help the situation.
On the bright side, this could be a great learning opportunity. Reply with a few politely-asked questions, such as:
Was there a particular reason you went with a new designer?
Did you have any issues with the quality of my work?
So that I can continue to improve my services, is there anything else you’d like to share?
Much of what you ask will depend on the client and the project. But this is a solid place to start. The idea is to get inside your client’s head a bit and find out what went into their decision.
And while not everyone will provide answers, the ones who do can prove valuable. You may find that your services were lacking in some areas. Or, perhaps the client’s cousin is the “new designer”. Either way, it’s better than pounding your fist over the situation.
When a Third-Party Provider Messes Up
So much of what web designers do these days depends on third-party providers. That could be anything from web hosting, plugins, themes, or email delivery services. In other words – a big piece of a website’s ability to function or be accessed at all is run by someone else.
A failure at any one of these links in the chain can be disastrous. To illustrate the point, think about what happens when a content delivery network (CDN) has an outage. That could bring down a massive number of websites.
Meanwhile, web designers are left without much (if any) control. On one hand, you have an understandably frustrated client. On the other is a company that dropped the ball. Oh, look – there’s you in the middle!
In this type of situation, every second can feel like an eternity. There might be an opportunity to switch to a different product, but that’s not always feasible. If the issue is prolonged, tension continues to grow on all sides.
How to Cope
Maybe you can’t control an outage or even a troublesome line of code. But there are some things you can do proactively.
Working with the provider’s technical support can at least make you feel like you’re in the game. By getting the status of the situation, there’s an opportunity to pass it along to affected clients.
What’s more, any troubleshooting information you can offer also has value. Who knows? If it leads to a resolution, you can say you were part of the process.
When a Favorite App Changes for the Worse
This one often hurts on a personal level. We web designers tend to fall in love with tools and applications that allow us to get things done. Perhaps it’s a favorite design app like Photoshop or a content management system (CMS) such as WordPress.
When apps change, those changes are inevitably forced onto us, as well. They impact our workflow – and not always in the most positive way.
All it takes is a quick look around support forums and social media to see the frustration. Users go on about how the feature they loved was “ruined” or that things will never be the same. We’ve all seen it and, at one time or another, been a part of that collective disappointment.
How to Cope
The first coping strategy is to give such changes a chance to sink in. Even if your first impression of them wasn’t favorable, it can take time to build a comfort level. A feature that may have frustrated you at first could become positive after more exposure.
Second, you might reach out to the developer and let them know how you feel. Maybe it doesn’t result in an immediate remedy, but at least you get it off of your chest. And if enough people feel the same way, there’s a chance that things evolve more acceptably.
If all else fails, perhaps it’s time to find a suitable alternative. Sometimes, your relationship with a tool simply runs its course.
A Different Take on Control
In a profession where we aim to control all the variables, having the opposite can be maddening.
But, think of it this way: even if you could control every aspect of your work, would you even want to? It’s a major responsibility and more stress than most of us can bear.
Somewhere along the line, you have to put a level of trust in others. Whether that’s trusting a client, a software developer, or a service provider – they are often necessary rungs on the ladder to a successful business.
There will be failures and disconnects along the way. And, while it would be nice to have a measure of control over them, it’s also a bit unrealistic.
However, lack of control doesn’t mean that you have to give up all hope. Instead, look for ways to learn from the situation. The knowledge and experience you gain will serve you long into the future.
The post How Web Designers Can Cope with Situations Out of Their Control appeared first on Speckyboy Design Magazine.
With Christmas just a few weeks away, now is the perfect time to give yourself a little bit of seasonal cheer by decorating your desktop with a beautiful Christmas wallpaper.
All fifty of the wallpapers below have been photographed by professional photographers or created by designers, and are all free to download and use. You will find decorated trees, red candy canes, winter scenery, vintage seasonal scenes, sparkling lights, stockings hanging over the fireplace, people celebrating, perfectly wrapped gifts, cute dogs in Santa hats, and so much more.
Go on, grab yourself a high-resolution Christmas desktop wallpaper, and bring some seasonal cheer to your desktop background!
More Christmas Resources:
Free Christmas Templates & Resources for Designers
Free Christmas Icons in SVG & PNG Formats
The Free Christmas Pictogram Collection (50 Icons, EPS & AI)
Free Christmas & New Year Vector Banner Kit
Pure CSS Christmas Code Snippets
Santa’s Treasure & Merry Christmas by Cris DiNoto
Christmas Decoration Art by Brooke Lark
Puppy in Santa Hat by Jakob Owens
Two Red Candy Canes by Joanna Kosinska
Rustic Christmas Gifts by Nietjuh
Merry Xmas LED Sign by Tom Rickhuss
Santa Claus Holding Clothes Iron by Cottonbro
Christmas Vibe Illustration by Sam Ji
White & Gray Christmas Wall Decorations by Joanna Kosinska
Holiday Season Christmas Tree by Lilla Bardenova
Feliz Nevidad Rustic Christmas Scene by Beatriz Pérez Moya
Santa Clause Eating Cookie by Gratisography
Pine Tree in Snowfield by Lionello DelPiccolo
Woman Holding Christmas Gift by Kira auf der Heide
Santa Claus is Superman Ilustration by Beibei MUG
Wooden Christmas Doll Scene by Couleur
Winter Love Illustration by Erikas
Vintage Santa Cat Photo by Rawpixel
Christmas Stockings Hanging on Fireplace by Dan LeFebvre
Festive Cookies & Milk by Nietjuh
Christmas Culture Trip by Jean-Michel Perchet
Woman Holding Christmas Lights by Valeria Boltneva
Greeting Card Calligraphy on Tree by Jessica Lewis
Puppy Playing with Christmas Ribbon by Jakob Owens
Christmas Scene by Nick Fewings
Holding a Small Christmas Parcel by Ben White
Vintage Happy Holidays by Cris DiNoto
Merry Christmas Handwriting Card by Rawpixel
Bokeh Merry Christmas by Nietjuh
Meet Me Under the Mistletoe
Lichterkette Christmas Lights & Decorations by Couleur
Stacked Christmas Gift Wrapping by Yvette Fang
Wrapping a Gift Present by Kira auf der Heide
Woman Wearing Christmas Socks by Tookapic
Christmas Delivery by Wallpaper Cave
Pulling Christmas Tree Illustration by Wallpaper Cave
Little Elf People by Paige Cody
Cat & Christmas Stockings
Candy Canes & Assorted Christmas Items by Jeshoots
Gift Boxes with Red Baubles by Mel Poole
Bringing Home the Christmas Tree by Denise Johnson
Small Dog Writing a Christmas Card by Rawpixel
Merry Text & Christmas Wreath by Debby Hudson
Christmas Gift Boxes by Freestocks
Minimal Christmas Trees by Maria
Rustic Christmas Tree Decoration by Andréas Brun
Christmas Present Illustration by Lilla Bardenova
Cute Puppy Wearing Santa Hat by Rhaúl V. Alva
Red Christmas Tree Baubles by Sean Wells
Red Coffee Christmas Scene by Toa Heftiba
The post 50 Beautiful Christmas Wallpapers for Your Desktop appeared first on Speckyboy Design Magazine.
A web technology rarely maintains a continually growing user base over a long period. WordPress has done it, as has Bootstrap. But even they don’t have quite the market penetration of jQuery.
Yet, it’s also the target of a lot of online vitriol. In some circles, developers are loathed to give jQuery its due – instead focusing on the latest buzzworthy libraries.
This is understandable, as junior competitors like Vue and React have a lot of exciting features – if nowhere near the number of users. People naturally want to talk about what’s new. Established products that just keep chugging along don’t generate the same level of fanaticism.
But that doesn’t mean we should ignore jQuery altogether. It’s made a massive impact on the web and is still useful today. Join me as I take a look back at the library’s past and what the future may hold.
Bringing Cross-Browser DOM Manipulation and Effects to the Masses
It also allowed for the implementation of advanced UI elements, with the help of jQuery UI. Features such as accordions, date pickers, and tabbed interfaces were built right into the project. They could also be styled via CSS or a custom theme. And its architecture also allowed for custom plugins to be built as well.
The library has been used by all manner of different products. For example, it has been bundled with WordPress for several years now. And, with WordPress powering over 40% of all websites, that has undoubtedly boosted the usage numbers for jQuery as well.
In all, the ability to work with the sheer variety of browsers and devices out there made jQuery a safe, reliable choice for developers.
There’s no such thing as a perfect tool. Everything web designers use has its flaws and shortcomings. jQuery is no different.
Over the years, the library has endured a lot of criticism. And plenty of fair points have been raised. Here are a few that stand out:
jQuery Is No Longer Necessary
As we mentioned, jQuery initially provided cover to developers who wanted to bring advanced features to their projects without having to worry about compatibility. Well, there are now more options for doing so.
CSS, in particular, can replace jQuery in many instances. Elements like animation, for example, can be crafted without the need for a third-party dependency. It’s a native solution that can take advantage of hardware acceleration. The result is lightning-quick performance without the overhead.
jQuery Is Inefficient/Antiquated
When a project has been around for 15+ years, there are bound to be some inefficiencies. However, it’s worth noting that the version of jQuery your project utilizes can make a significant difference.
Consider the case of WordPress. Through several versions of the content management system (CMS), jQuery 1.1.x was bundled. These legacy releases were kept in part to maintain backward compatibility with themes and plugins.
The last of these, jQuery 1.12.4, was released in 2016. Not until WordPress 5.6 (released in 2020) did the more modern jQuery 3.5.1 make its way into core.
If you’re still stuck with those older versions, performance can definitely suffer. But, in my own testing, sites running later jQuery releases seem to perform significantly better in Google PageSpeed Insights. Of course, your experience may vary.
That’s not to say jQuery is always going to be the most efficient solution. Still, progress has been made in this area.
A Look at the Future
For all the criticism, it doesn’t look like jQuery is going away anytime soon. Part of that is due to the massive number of products that depend on it.
For instance, separating it from WordPress core would be a monumental task. And that’s not even counting the number of themes and plugins that also use the library. Even a highly coordinated effort to sever ties would likely take years.
The other thing to note is that jQuery is still in active development. There’s been an effort to bring it up to speed with the modern web. Recent releases have improved performance and fixed bugs.
In addition, the project has placed its focus squarely on jQuery core. Both the jQuery UI and jQuery Mobile projects are winding down, freeing up resources for the core revamp. The content delivery network (CDN) that hosts the project’s code is also being fortified.
The upshot is that jQuery is still improving and therefore continues to be an option for web designers.
Should You Still Use jQuery?
If you’re comfortable using jQuery, you can be confident that the library will still work and receive updates. Frankly, that should be enough of a reason to carry on using it.
As far as what other developers may think – haters are gonna hate. But don’t let that stop you from using the tools you enjoy and trust. For more than a decade, jQuery has earned it.
The post Despite Its Critics, jQuery Forges Ahead appeared first on Speckyboy Design Magazine.
The technologies web designers use today all had to start somewhere. The story of how they came to be is something that Richard MacManus wants to share with the world.
Located in New Zealand, MacManus has been involved in the industry since the 1990s. A writer and technology journalist, his latest project, Web Development History, is all about chronicling the history of the internet from a developer’s perspective.
I spoke with MacManus about the project, his beginnings in web design, and thoughts on the future of the web. His answers are lightly-edited for brevity/clarity.
How and when did you get started in web design?
I started out in the late 90s as first an “information developer” (a fancy name for a technical writer) and then a “webmaster” (not sure if this term is even used anymore!). I went on to be a “Web Manager” for a couple of New Zealand companies in the early 2000s, before starting up my tech blog ReadWriteWeb (RWW) in 2003.
I was a true web child of the 90s, in that I (am) self-taught (when it comes to) all the main web technologies. So, in those webmaster / web manager roles, I did a mix of web design, site architecture, and management, and even dabbled a bit in development. But it was when I began writing about the latest in web technology with RWW that I really found my niche.
What inspired you to start the Web Development History project?
A couple of reasons. Firstly, I’d read a lot of books and articles about the history of the web and the internet, but almost all of them (and certainly all the books) come at the subject from a business or cultural perspective.
I wanted to tackle web history from a technical point of view, and explain how the World Wide Web was actually developed and how it evolved — in a nuts-and-bolts way.
The second main reason is that, even though I spent nearly a decade covering the web technology industry with my tech blog turned media business RWW, I hadn’t necessarily delved deep into the technical foundations of the web during that time.
RWW began as one person’s exploration of the new web technologies coming out of Silicon Valley post-Dot Com boom and bust, but as RWW grew and became a proper business, it focused more on the revolutionary “Web 2.0” products and high-level trends that came along (e.g., social networking, cloud computing, the smartphone revolution, etc.).
So, with Web Development History (WDH), I wanted to return to my roots — as both a webmaster and a developer-focused blogger in the early days of RWW. My goal was to revisit the previous eras of the web and really dig into the technical foundations, to figure out how it evolved into this massive beast it is today.
Thinking of someone just coming into the industry – how can they benefit from learning its history?
So WDH is, I hope, a resource for people to learn the architecture of the web, how it began and then evolved over time, the most influential technologies, how web standards came to be, and so on.
Also, I think the industry is experiencing a renaissance of the web platform currently, with web standards and browser technology both at the cutting edge again — leading to Progressive Web Apps, cross-platform tools like Flutter, web components, and so on.
I cover all these new technologies, by the way, in my weekly column for The New Stack — so I see WDH as the perfect complement to the forward-looking column I also write. You have to understand the past first, before you build for the future.
Do you have a favorite facet or technology from the early web?
I love that Tim Berners-Lee invented the web browser as a read/write tool. It was an editor as well as a browser. The editing functionality, unfortunately, got stripped away as first Mosaic and then Netscape got popular, so the first era of the mainstream web (roughly 1993-2002) was ‘read-only.’
We had a term in the 90s, “brochureware,” that explains what many websites were — an extension of magazines, but they didn’t take advantage of the interactive functionality that Berners-Lee built into the web’s foundations.
Now with that said, as I’ve been writing WDH over this past year, I’ve looked more closely at technologies like CGI scripts and PHP that were being used to build early web apps in the 90s.
So, there was a lot of innovation happening with web apps. But writing to the web wasn’t something ordinary people could easily do from their browser. That was what Web 2.0 brought to the web, and indeed that was the thesis of my blog RWW.
You have a number of articles that cover the early browser wars. How do you think those events have impacted the web we use today?
It was a war that Microsoft decisively won by 1999, which unfortunately led to a period of low browser innovation — which lasted until Google Chrome came along. But there were a couple of major things that happened in the 90s in the first browser war, which influenced the direction of the web.
As I noted in one post, when Internet Explorer 4 was released in October 1997, it was the first browser to demonstrate a full-page object model — basically a prototype of the W3C DOM spec that would be released a year later.
You mentioned that the ultimate goal for this project is to publish a book. How will you determine when there’s enough content to go forward with it?
I’m still working out what might be the format for a book based on the blog. It may make sense to narrow the scope and choose a certain period (say, the 1990s) and develop a book proposal based on a particular theme. Or I might go all-in and write a full web development history.
So, I haven’t yet decided. Plus, it’ll also depend on what is attractive to book agents and publishers.
In terms of the blog, I do know that in 2022 I will be focusing on the 2000s — I’ve nicknamed this “season 2.” I may also change up the style of the posts; perhaps injecting more of my own personal story, since I chronicled this period for RWW and visited Silicon Valley a number of times. So, we’ll see how the blog evolves next year and whether I can continue to grow the audience.
Finally, as someone who has closely studied the web’s history, how do expect it to evolve over the next few years?
It’s an exciting inflexion point again. On the one hand, there are a bunch of very promising web platform technologies that I’ve been writing about for The New Stack. There are also potentially groundbreaking new technologies emerging — who knows how this metaverse talk will pan out, for example.
There’s also crypto and “Web3,” which I’m currently skeptical about — it’s just as likely to end in a Dot Com-like crash than become the next big thing. Again, time will tell, but I’m monitoring it.
Regardless of how it all shakes out, I think the web’s foundation is in a great place — web standards are healthy, browsers are innovating (although it’d be great if Apple got its act together and allowed other browser engines onto iOS), and there is a high level of functionality in web apps today.
I think there’s room for a move back to less complexity in the web frameworks of today, perhaps using things like web components more. But overall, I expect the web to continue to delight and surprise me over the next several years!
A big thank-you to Richard MacManus for taking time out speak with me! Be sure to check out Web Development History and connect with Richard on Twitter.
The post Exploring Web Development History with Richard MacManus appeared first on Speckyboy Design Magazine.
If you are a designer or a developer, you’d probably know that trying to make your project perfect can extend the time needed to complete the project-even several times. There’s always that one last element you want to improve quickly before sending it. But in my opinion Perfection is equal to fascism.
That’s a bold statement, I know. But look around you. Is there at least one defective item in your house or garage?
Your car? You need to refuel it and once in a while, it breaks down-not perfect. Your computer? Breaks down, and crashes, and the hard drive dies before you can manage to back up your data-not perfect. Bread? It goes stale too soon-not perfect. Glasses? Glass is vulnerable-far from perfect. So what’s the conclusion?
Why Designing Without A Design Brief Is Like Playing Charades
Why Designing Without A Design Brief Is Like Playing Charades
(Guest writer: Devora Homnick) We had a wonderful moment in the Kars4Kids design department recently when our manager… Read more
Perfection harms development
Nothing that surrounds us is perfect. There’s always at least one thing that can be improved. If everyone leads their product to perfection before launching it to the public, then today we would have nothing! Not even electricity or wheel.
Since everything surrounding you is not perfect, would you rather not own them? Would you rather wait until someone leads them to perfection before they let you have them? Probably not.
Therefore while working on your projects, always takes other’s failures as a reference – be creative, but don’t try to be perfect.
Why is perfection harmful?
Because it doesn’t favor achieving goals when starting the work, you always have some actual goals to reach with the design. It can be something as apparent as increasing sales or unusual ones like creating some awareness for your aquatic kickboxing training center.
Nevertheless, those should be the goals you need to focus on, and every time you want to do something new, you should ask yourself the question: “does this thing bring me closer to the goals?”
And now the funny part. The pursuit of perfection does not bring you closer to the goals. On the other hand – coming up with the simplest possible solution does. That’s right – most straightforward and reliable, not the best. In one of the early stages of the project, you can’t be 100% sure which solution will be the best one.
Because how would you know this when you haven’t even launched it? Only the feedback from the market (the real users) can give you genuine ideas for possible improvements to your website and its usability. That feedback is the improvement you need to focus on. not what you’ve thought would be the best for them.
This is the blatant truth (unfortunately). You’ll never know what people want or need, so working on some complex solution, which can end up not being needed, is a waste of time. That’s why you need to start with the solution that makes it possible to achieve the goals in the simplest possible way. And one more thing you should know:
Perfection very often remains unnoticed.
Unfortunately, all this extra time you’ve spent pursuing perfection can remain unnoticed and unappreciated. There’s a reason why the recipient of your project might not even notice your extra effort.
And that is simply because they didn’t see the previous version of the project, so they don’t have anything to refer to and compare to. The only thing they’ll notice and criticize will be basic functions and elements.
Working on details (tiny fragments of your graphic design) robs most of your time. That one little thing that keeps agitating you or some additional function you think would be cool and handy.
So, before you realize it, the total project completion time has extended several times. Do you want to spend 60% of your work time perfecting the details and only 40% on achieving the goals?
If you’re freelancing, you can be sure that every client will be 100 times more grateful for a simple, easy to use and understandable project focused on achieving goals than a beautiful work of art, which looks great but doesn’t put any extra money in their pocket.
Abandoning perfection is far from abandoning a good project.
As I’ve said before, during the creation phase of the project/product/design, you can’t be sure what will the perfect solution really be, so the whole idea of pursuing it is doomed from the get-go.
When you’re working on something, then the only way you can judge perfection is by your own subjective motives-One man’s meat is another man’s poison.
The most important rule of designing: You are not your client or visitor. That’s why you can’t judge the thing you’re designing only according to your own opinions and assumptions.
You will create a much better website by not being perfect.
It’s simple (and true). If you did not try to make every detail perfect and focus on the most important key elements instead, these key elements will not only be clearly visible in the final solution, but you will also finish the work earlier.
So by hiding perfection in the pocket, you’ll be much more productive and deliver much better results.
Here are the benefits that can be brought by forgetting about perfection and creating a simple version of the website instead:
The website can be launched earlier.
The website can make money / get exposure earlier.
The feedback from visitors will arrive earlier.
Because of the early feedback, you will improve the website by focusing on the things the visitors pointed out (not only the things you thought would be cool).
The most important conclusion here is (even though it sounds kind of strange) that a simple solution is better than a perfect solution. “Ok, but how to implement this approach?”
Divide your tasks into two groups: “Important ones” & “Details.”
The important ones are important such as achieving goals and objectives, building the basic functions, etc.), and the details are just, well, just details.
Details consume a massive amount of time. That’s why you need to skip them and get back to them later, during one of the next phases of the work (or don’t get back to them at all). So what do I mean by “later”? When is the best time to get back to details?
Here’s what I mean, just bear with me – When you finish dividing the tasks into two groups, then in the first iteration, you should try to focus only on the important ones and try to complete them in the easiest possible way. At the end of this iteration, you will have a finished website ready to be launched (SCRUM-like approach). You can start another one if you want to.
In this iteration, you can try to improve the previous version. (You will get the ideas for improvement from the feedback from your clients/visitors.) After the second iteration, you will have an improved version of the website.
If you want to continue the work and constantly improve the website, you can start the third iteration and then the next ones. This is the right moment for getting back to the things you’ve classified as “details” at the beginning of the work, but you might as well realize that these “details” are completely redundant judging by the reaction of the visitors/clients (a very common thing).
This is a real strength of the iterative approach. During each step of the work, you have a complete website ready to be launched, and you can improve it constantly. This is a much better situation to be in compared to working on something in a closed room for ten years, trying to make it perfect without any feedback from the world.
The iterative approach is much safer as well. What is a better scenario – Realizing that your idea is a piece of you-know-what and there is no demand on the market after a month of work, or realizing it after ten years of work?
Just a side note: Due to this approach, I was able to complete my Master’s Degree paper a couple of months before my colleagues did. What I did was focus on the most important thing about each chapter, got it done as soon as possible, and left all the details for later.
If I had wanted to make each perfect chapter right from the beginning, then probably I wouldn’t have finished it until today. Also, it has been over two years now since I’ve defended my M.Sc.
Work quickly and effectively.
This is an all-purpose tip, and it can be put into practice while working on a project for your client as well as while working on your own website. These are the only things that matter now: quick work and fast results. It’s about time to adapt.
Always try to deliver fast results (focus on achieving goals) by providing the simplest possible solution, not the “perfect” solution by your own subjective opinion. Remember – you don’t need to be perfect. “Good enough” is good enough.
One more thing – What are your experiences with projects at which you’ve tried to deliver a perfect solution?
The post Perfection in Design: Why It’s a Bad Idea appeared first on Hongkiat.
We had a wonderful moment in the Kars4Kids design department recently when our manager said, and I quote, “So we all agree the design brief works, now how do we…” And the soundtrack played its crescendo in the background and I shed some happy tears and thought, “my work here is done.”
The story leading up to this epic piece of drama is a delightful journey that goes something like this. But first, my background story. As the art director of an in-house design team, part of my job is to streamline the process for the graphic design projects that come our way from the many and varied departments of our organization.
Freelancers: Collecting Comprehensive Creative Brief from Your Client
Freelancers: Collecting Comprehensive Creative Brief from Your Client
I had ordered a special cake for a friend’s birthday and had given the receptionist all the specifications… Read more
The quest for the perfect design brief
It was a couple of years ago, and we as a company, especially the marketing team, were growing fast. I was set on the very specific project of creating an official process for the design projects we tackle.
Until then, we operated in a very casual, informal way but it quickly became clear that some order was in order, if we were to be an efficient design team.
After much research and mad professor-ish note-taking, I revealed my magnum opus: The Design Brief. For some well-oiled-machine designers, that might have been a duh moment, but for me, it was putting a name to a face, the answer to my “there must be a better way” quest.
Behold, Le Design Brief
The design brief is a who, what, when and why form for design projects that has to be filled out with all the project details and goals before we do any actual design. By customizing the information gathered on the brief, I was able to provide a valuable tool in avoiding some of the most frustrating problems our team encounters.
Never again would we get halfway through a project without knowing what exactly it is that we’re asking the target market to do. The information would be right there, on the line next to “call to action.”
Instead of adding a mailing block and indicia to a brochure right at the deadline as it was on the way to the printer, we would simply fill in the “method of distribution” space on the brief with “self-mail, bulk indicia” right at the beginning of the project.
And most importantly for an in-house team, my design brief has a slot for “internal goal for this project.” This not only helps focus the entire project, it allows us to measure the project’s success for future action.
Getting the design brief accepted
There was only one problem with my dream solution: getting the other departments, ultimately our clients, to accept what they saw as, at best, red tape and at worst, cruel and unusual punishment.
Part of the challenge of working in-house is familiarity. You and your “clients” are like an old married couple. They can drive you nuts and do everything you asked them not to do in the safety of knowing that you’re not going anywhere and will still work like crazy to get them a good product.
So if I wanted to change the way we worked with the other departments, I was going to really have to sell it. How did I explain why we can’t just take notes on a legal pad as the project is described in a minute or two and then work out the details as we go along?
Designing a project without a design brief is like…
Being a fan of metaphorical speaking, I became a veritable storyteller of a tale with many twists. The title: Designing a project without a design brief is like…
Here are the best of Designing a project without a design brief is like…
Filling an order for a steak in a restaurant kitchen which reads, “I’ll have a cow piece, thanks.“
Playing charades. Designer: “Okay, you’re pointing to a paper, so this must be a print project… no? Wait – Web! You’re holding up three fingers, so you need it in three weeks? WHAT?! THREE HOURS?“
Being a fortune teller with a crystal ball. Designer: “Ooooh, I see you have a big event coming up. You will need an advertising campaign. It will be all wrong until 4 a.m. the night before we go to print. Yes, the Great Designer never guesses, she knows.“
A forensic artist drawing a suspect. Designer: “From what you described, this is what you want for your brochure.” Client: “No, that’s basically my competitor’s brochure. I wanted that but BETTER.“
Buying your wife surprise jewelry. Designer: “Last time we met, my client mentioned tri-folds. She probably wants a tri-fold. And she always signs her email in comic sans. She must like comic sans. And the design will match her signature!“
If your design department is not using a formal design brief, be the hero and introduce it. Just remember, a little humor goes a long way in making something new and unfamiliar acceptable. Here are a few more posts that can help you sort this out while still staying on your client’s good side:
Collecting Comprehensive Creative Brief From Your Client
5 Effective Communication Tactics/Tips For Designers
Convincing The Client – How To Win A Design Argument
How To Become A High-Demand Designer (And Get The Good Clients)
(This guest post is written by Devora Homnick for Hongkiat.com. Devora is the Art Director at Kars for Kids, a national car donation charity that funds educational and youth programs, where she leads a team of talented designers and creative marketers. You can find Devora on LinkedIn.)
The post Why Designing Without A Design Brief Is Like Playing Charades appeared first on Hongkiat.
If you are a designer or developer, you probably know that this field is one of the most innovative and fastest growing industry in the world. If you want to keep up to date and stay ahead of your competitors you must learn new things all the time and follow trends.
Even though the Internet is the best place for the Creatives to learn anything for free, I would highly recommend you to spend a few bucks and get some design and development books. There are a lot of experts who have encountered problems and found solutions which they share with us in the books, so why not take advantage of their best practices and smart approaches to problems?
These books will definitely help you become a better designer, developer or both. You will gain a lot of useful and practical knowledge in design psychology, user experience, branding, storytelling, programming, coding, business and much more.
Hopefully this list of books will help you choose the next book to read during rainy evenings.
Why All Developers Should Learn Command Line
Why All Developers Should Learn Command Line
Some developers cringe at the mere thought of opening a terminal window. For the uninitiated it can be… Read more
1. How to Build Habit-Forming Products
Written by Nir Eyal, Hooked is a practical guide to help you create the kind of products that people would want to use. It introduces the ‘hook model’ – a four-step process that most brands use to shape consumer habits.
The book is packed with consumer behavioral insights, tips on taking actionable steps in creating enticing products, and many case studies to help you understand the concepts.
It is written for designers, product managers, marketers, start up founder, or just any one who’s interested in consumer behavioral patterns.
2. Don’t Make Me Think
Dubbed as the usability guru, Steve Krug is the writer of this wonderful book Don’t Make Me Think that talks about intuitive navigation and information design. This revised version gives you fresh perspectives and updated case studies along with a chapter on mobile usability.
You will find the book to be witty, highly practical, and full of commonsense-based points. Either you’re a web or graphic designer or a web developer, you’ll find the usability concepts mentioned in the book to be highly applicable to everyday designing.
3. Creativity Inc
Creativity Inc. is a cumulation of years of work and experience of Ed Catmull, one of the founders of Pixar Animation company and the creator of the amazing Toy Story. The book talks about ideas, techniques, and creativity process that goes on in Pixar.
From the very core of it, the book is about creating and nurturing a creative culture in your organization. Designers, developers, and team managers can take it as their guide book for taking their work to new heights of originality.
4. Invisible Women
Approximately half of the world’s population are women. However, they are constantly at the receiving end of gender bias that manifests in everyday life. This book The Invisible Women highlights how a world made by men systematic ignores women.
The book talks about data bias that almost all women face in their lives. Phone too big for your hands, medication not suitable for your body, greater likelihood of injuries you can get from an accident, and many such hurdles that are faced by women everyday.
5. The Lean Startup
The Lean Startup is an interesting book that sheds light on some practical approaches to help startup businesses avoid failure through continuous innovation. It helps you shift your company’s direction and shorten product-development cycles.
By the dint of some useful concepts with practical examples in the book, you can change the way companies are built and new products are launched. It emphasizes on shorter more adjustable goals instead of creating elaborative business plans.
6. Paradox of Choice
In today’s world, whether you’re buying something, choosing a career, or subscribing to a service, the choices are abundant. However, when the choices become a little too abundant, you start questioning your decision. And this is where this book comes in.
Written in accessible, engaging, and anecdotal prose, Barry Schwartz helps you understand the psychology of choice for humans. Designers and product creators can make good use of these insights when building their products and making them stand out from the rest.
7. Universal Principles of Design
Written by William Lidwell, The Universal Principles of Design is a richly-illustrated encyclopedia of designing and user experience. The book covers everything from usability, user perception, laws of design, guidelines, human biases, and general concepts important for a successful design.
You will find interesting visual examples to elaborated each concept as well as design guidelines that’ll encourage brainstorming and broaden your design knowledge.
It is equally useful for designers, artists, marketing managers, startup entrepreneurs, interior designers or anyone who’s designing a system for users.
8. Flow The Psychology of Happines
Penned by famous psychologist Milhay Csikszentmihalyi, this interesting book Flow explores the psychology behind optimal experience. According to the author, people are genuinely satisfied when things go in a certain flow.
The book further highlights that during the state of flow, people experience enjoyment, creativity, and total involvement. You can use these insights to work and improve your designs and products and create a better user experience.
9. How to Speak Machine
Just as the name says, How to Speak Machine lays down some simple laws to control and manage computers of today and even machines of the future. It offers guidelines and useful framework for product designers, business leaders, and policy makers.
The author shares his vast experience as a design and tech thinker and shows trough this book how individuals and businesses can harness technology to create dynamic and inclusive products for users.
10. 1000000 Web Designer Guide
As more and more designers and creative professionals are going freelance, this wonderful book covers tips, tricks, and life lessons for designers who are on or planning to take the path to freelance career.
In this book, you’ll get some practical tips on taking a smart approach towards freelancing without getting overworked and underpaid. The book also has tips on balancing a successful work life and balancing it with a fulfilling personal life.
11. Client Centric Web Design
A client-centric web design methodology addresses the negative attitude that exists towards client work and has the potential to transform your business.
For the client/designer relationship, to work both parties need to respect the other. In this book you will explore how to move the clients’ perception of you as a pixel pusher to that of an expert.
12. Content Strategy for the Web
Without meaningful content, your website isn’t worth much to your key audiences. But creating (and caring for) “meaningful” content is far more complicated than we’re often willing to acknowledge. Content Strategy for the Web explains how to create and deliver useful, usable content for your online audiences, when and where they need it most. It also shares content best practices so you can get your next website redesign right, on time and on budget.
13. A Project Guide to UX Design
User experience design is the discipline of creating a useful and usable website or application — one that’s easily navigated and meets the needs of both the site owner and its users.
But there’s a lot more to successful UX design than knowing the latest Web technologies or design trends: It takes diplomacy, project management skills, and business savvy. That’s where this book comes in.
You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.
16. jQuery Novice to Ninja
There are a lot of books out there that show collections of logos, but David Airey’s “Logo Design Love” is something different. It’s a guide for designers (and clients) who want to understand what this mysterious business about logos is all about.
Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points.
18. Neuro Web Design
Neuro Web Design employs “neuro-marketing” concepts, which are at the intersection of psychology and user experience. It’s scientific, yet you’ll find it accessible, easy to read, and easy to understand. By applying the concepts and examples in this book, you’ll be able to dramatically increase the effectiveness and conversion rates of your own website.
19. PHP Solutions
You want to make your websites more dynamic by adding a feedback form, creating a private area where members can upload images that are automatically resized, or perhaps storing all your content in a database.
This book doesn’t just provide a collection of ready-made scripts: each PHP Solution builds on what’s gone before, teaching you the basics of PHP and database design quickly and painlessly.
By the end of the book, you’ll have the confidence to start writing your own scripts.
20. Storytelling Branding in Practice
This book is written for practitioners by practitioners. Through real life examples, simple guidelines and practical tools, the book aims to inspire companies to use storytelling as a means of building their brand — internally as well as externally.
21. Stunning CSS3
By reading this book you’ll learn how to accomplish modern CSS3 effects and more by working through a series of practical yet cutting-edge projects.
Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques.
22. The Thank You Economy
If this were 1923, this book would have been called “Why Radio Is Going to Change the Game”. The Thank You Economy is about something big, something greater than any single revolutionary platform.
It isn’t some abstract concept or wacky business strategy — it’s real, and every one of us is doing business in it every day, whether we choose to recognize it or not. It’s the way we communicate, the way we buy and sell, the way businesses and consumers interact online and offline.
23. The Elements of User Experience
The Elements of User Experience cuts through the complexity of user-centric design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design.
This accessible introduction helps any Web development team, large or small, to create a successful user experience.
24. Thinking with Type
Thinking with Type is the definitive guide to using typography in visual communication, from printed page to computer screen.
This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the Web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering.
25. Web Design Confidential
Drawing on survey statistics from over 5,400 web designers from around the world, and the insight and experiences of several design veterans, Amanda Hackwith unlocks the door and sheds light on the web design industry in Web Design Confidential.
Have you ever wondered if your hourly rate is too low or too high? Are you torn between freelance design work and full-time employment? Are you missing an essential design skill without even knowing it?
Whether you’re looking for the latest web design practices, words of wisdom from design veterans, or just a better understanding of your profession, Amanda Hackwith and 5400 colleagues have the answers to your questions and you’ll find what you need in Web Design Confidential.
26. Design Is a Job
Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, this brief book is packed with knowledge you can’t afford to not know.
27. Designing for Emotion
Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead, Aarron Walter.
From classic psychology to case studies, highbrow concepts to common sense, Designing for Emotion demonstrates accessible strategies and memorable methods to help you make a human connection through design.
28. CSS3 for Web Designers
From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm.
Learn what works, how it works, and how to work around browsers where it doesn’t work.
29. HTML5 for Web Designers
The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?
In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.
30. The Elements of Content Strategy
Content strategy is the web’s hottest new thing. But where did it come from? Why does it matter? And what does the content renaissance mean to you?
This brief guide explores the roots of content strategy, and quickly and expertly demonstrates not only how it’s done, but how it is done well. A compelling read for both experienced content strategists and those making the transition from other fields.
The post 30 Books For Web Designers and Developers appeared first on Hongkiat.