Archive

Archive for January, 2020

Innovation Can’t Keep the Web Fast

January 31st, 2020 No comments

Every so often, the fruits of innovation bear fruit in the form of improvements to the foundational layers of the web. In 2015, HTTP/2 became a published standard in an effort to update an aging protocol. This was was both necessary and overdue, as HTTP/1 rendered web performance as an arcane sort of discipline in the form of strange workarounds of its limitations. Though HTTP/2 proliferation isn’t absolute — and there are kinks yet to be worked out — I don’t think it’s a stretch to say the web is better off because of it.

Unfortunately, the rollout of HTTP/2 has presided over a 102% median increase of bytes transferred over mobile the last four years. If we look at the 90th percentile of that same dataset — because it’s really the long tail of performance we need to optimize for — we see an increase of 239%. From 2016 (PDF warning) to 2019, the average mobile download speed in the U.S. has increased by 73%. In Brazil and India, average mobile download speeds increased by 75% and 28%, respectively, in that same period of time.

While page weight alone doesn’t necessarily tell the whole story of the user experience, it is, at the very least, a loosely related phenomenon which threatens the collective user experience. The story that HTTPArchive tells through data acquired from the Chrome User Experience Export (CrUX) can be interpreted a number of different ways, but this one fact is steadfast and unrelenting: most metrics gleaned from CrUX over the last couple of years show little, if any improvement despite various improvements in browsers, the HTTP protocol, and the network itself.

Given these trends, all that can be said of the impact of these improvements at this point is that it has helped to stem the tide of our excesses, but precious little to reduce them. Despite every significant improvement to the underpinnings of the web and the networks we access it through, we continue to build for it in ways that suggest we’re content with the never-ending Jevons paradox in which we toil.

If we’re to make progress in making a faster web for everyone, we must recognize some of the impediments to that goal:

  1. The relentless desire to monetize every square inch of the web, as well as the army of third party vendors which fuel the research mandated by such fevered efforts.
  2. Workplace cultures that favor unrestrained feature-driven development. This practice adds to — but rarely takes away from — what we cram down the wire to users.
  3. Developer conveniences that make the job of the developer easier, but can place an increasing cost on the client.

Counter-intuitively, owners of mature codebases which embody some or all of these traits continue to take the same unsustainable path to profitability they always have. They do this at their own peril, rather than acknowledge the repeatedly established fact that performance-first development practices will do as much — or more — for their bottom line and the user experience.

It’s with this understanding that I’ve come to accept that our current approach to remedy poor performance largely consists of engineering techniques that stem from the ill effects of our business, product management, and engineering practices. We’re good at applying tourniquets, but not so good at sewing up deep wounds.

It’s becoming increasingly clear that web performance isn’t solely an engineering problem, but a problem of people. This is an unappealing assessment in part because technical solutions are comparably inarguable. Content compression works. Minification works. Tree shaking works. Code splitting works. They’re undeniably effective solutions to what may seem like entirely technical problems.

The intersection of web performance and people, on the other hand, is messy and inconvenient. Unlike a technical solution as clearly beneficial as HTTP/2, how do we qualify what successful performance cultures look like? How do we qualify successful approaches to get there? I don’t know exactly what that looks like, but I believe a good template is the following marriage of cultural and engineering tenets:

  1. An organization can’t be successful in prioritizing performance if it can’t secure the support of its leaders. Without that crucial element, it becomes extremely difficult for organizations to create a culture in which performance is the primary feature of their product.
  2. Even with leadership support, performance can’t be effectively prioritized if the telemetry isn’t in place to measure it. Without measurement, it becomes impossible to explain how product development affects performance. If you don’t have the numbers, no one will care about performance until it becomes an apparent crisis.
  3. When you have the support of leadership to make performance a priority and the telemetry in place to measure it, you still can’t get there unless your entire organization understands web performance. This is the time at which you develop and roll out training, documentation, best practices, and standards the organization can embrace. In some ways, this is the space which organizations have already spent a lot of time in, but the challenging work is in establishing feedback loops to assess how well they understand and have applied that knowledge.
  4. When all of the other pieces are finally in place, you can start to create accountability in the organization around performance. Accountability doesn’t come in the form of reprisals when your telemetry tells you performance has suffered over time, but rather in the form of guard rails put in place in the deployment process to alert you when thresholds have been crossed.

Now comes the kicker: even if all of these things come together in your workplace, good outcomes aren’t guaranteed. Barring some regulation that forces us to address the poorly performing websites in our charge — akin to how the ADA keeps us on our toes with regard to accessibility — it’s going to take continuing evangelism and pressure to ensure performance remains a priority. Like so much of the work we do on the web, the work of maintaining a good user experience in evolving codebases is never done. I hope 2020 is the year that we meaningfully recognize that performance is about people, and adapt accordingly.

As technological innovations such as HTTP/3 and 5G emerge, we must take care not to rest on our laurels and simply assume they will heal our ills once and for all. If we do, we’ll certainly be having this discussion again when the successors to those technologies loom. Innovation alone can’t keep the web fast because making the web fast — and keeping it that way — is the hard work we can only accomplish by working together.

The post Innovation Can’t Keep the Web Fast appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Smaller HTML Payloads with Service Workers

January 31st, 2020 No comments

Short story: Philip Walton has a clever idea for using service workers to cache the top and bottom of HTML files, reducing a lot of network weight.

Longer thoughts: When you’re building a really simple website, you can get away with literally writing raw HTML. It doesn’t take long to need a bit more abstraction than that. Even if you’re building a three-page site, that’s three HTML files, and your programmer’s mind will be looking for ways to not repeat yourself. You’ll probably find a way to “include” all the stuff at the top and bottom of the HTML, and just change the content in the middle.

I have tended to reach for PHP for that sort of thing in the past (), although these days I’m feeling much more jamstacky and I’d probably do it with Eleventy and Nunjucks.

Or, you could go down the SPA (Single Page App) route just for this basic abstraction if you want. Next and Nuxt are perhaps a little heavy-handed for a few includes, but hey, at least they are easy to work with and the result is a nice static site. The thing about these JavaScript-powered SPA frameworks (Gatsby is in here, too), is that they “hydrate” from static sites into SPAs as the JavaScript loads. Part of the reason for that is speed. No longer does the browser need to reload and request a whole big HTML page again to render; it just asks for whatever smaller amount of data it needs and replaces it on the fly.

So in a sense, you might build a SPA because you have a common header and footer and just want to replace the guts, for efficiencies sake.

Here’s Phil:

In a traditional client-server setup, the server always needs to send a full HTML page to the client for every request (otherwise the response would be invalid). But when you think about it, that’s pretty wasteful. Most sites on the internet have a lot of repetition in their HTML payloads because their pages share a lot of common elements (e.g. the , navigation bars, banners, sidebars, footers etc.). But in an ideal world, you wouldn’t have to send so much of the same HTML, over and over again, with every single page request.

With service workers, there’s a solution to this problem. A service worker can request just the bare minimum of data it needs from the server (e.g. an HTML content partial, a Markdown file, JSON data, etc.), and then it can programmatically transform that data into a full HTML document.

So rather than PHP, Eleventy, a JavaScript framework, or any other solution, Phil’s idea is that a service worker (a native browser technology) can save a cache of a site’s header and footer. Then server requests only need to be made for the “guts” while the full HTML document can be created on the fly.

It’s a super fancy idea, and no joke to implement, but the fact that it could be done with less tooling might be appealing to some. On Phil’s site:

on this site over the past 30 days, page loads from a service worker had a 47.6% smaller network payloads, and a median First Contentful Paint (FCP) that was 52.3% faster than page loads without a service worker (416ms vs. 851ms).

Aside from configuring a service worker, I’d think the most finicky part is having to configure your server/API to deliver a content-only version of your stuff or build two flat file versions of everything.

Direct Link to ArticlePermalink

The post Smaller HTML Payloads with Service Workers appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Lightning-Fast Web Performance

January 31st, 2020 No comments

If you’re interested in leveling up your knowledge and skill of web performance, you can’t do better than learning directly from Scott Jehl.

Direct Link to ArticlePermalink

The post Lightning-Fast Web Performance appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

29 Days Of February (2020 Wallpapers Edition)

January 31st, 2020 No comments
It's A Cupcake Kind Of Day!

29 Days Of February (2020 Wallpapers Edition)

29 Days Of February (2020 Wallpapers Edition)

Cosima Mielke

2020-01-31T11:00:00+00:002020-01-31T12:08:32+00:00

What will you make of the extra day that February has in store for us this year? Visit an old friend, explore a new place, or use it to get stuff done you have put off for so long? Whatever you might have planned this month, our new collection of wallpapers is bound to cater for a little inspiration spark along the way.

Created by artists and designers from all across the globe, the wallpapers come in versions with and without a calendar for February 2020 and can be downloaded for free — a Smashing tradition that has been going on for more than nine years already. A big thank-you to everyone who challenged their creative skills and shared their artworks with us this time around!

As a little bonus goodie, we also added some February favorites from our archives to the end of this post. Because, well, some things are just too good to be forgotten, right? Enjoy!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit your wallpaper

Do you have an idea for a March wallpaper design? We are always looking for creative talent to be featured in our wallpapers posts. Don’t be shy, join in! ?

It’s A Cupcake Kind Of Day!

“Sprinkles are fun, festive and filled with love… especially when topped on a cupcake! Everyone is creative in their own unique way, so why not try baking some cupcakes and decorating them for your sweetie this month? Something homemade, like a cupcake or DIY craft is always a sweet gesture.” — Designed by Artsy Cupcake from the United States.

Well It’s Groundhog Day… Again!

“‘It’s always Groundhog Day and there’s nothing I can do about it.’ as the inimitable Bill Murray said in the timeless Groundhog Day movie. We used a photo manipulation technique to come up with this sense of being caught in a time loop. When the Groundhog emerges from his den on this Groundhog day, will it forecast an early Spring or six more weeks of winter? Find out on February 2nd!” — Designed by Alistair Dodds from the United Kingdom.

Love Is in the Air

— Designed by MasterBundles from the United States.

Love Is in the Air

National Don’t Cry Over Spilled Milk Day

“If ‘don’t cry over spilled milk’ hasn’t yet been your mantra, it should definitely become now. The English proverb, whose national day is celebrated on February 11th, stands as a reminder not to worry over things of the past that cannot be undone, but to think positive, and keep our spirits high. Life is too short to let the trifling issues bother us.” — Designed by Pop Art Studio from Serbia.

National Don't Cry Over Spilled Milk Day

The Rainbow Is Here!

“In February the weather is crazy. One day it is sunny and the next it is snowing. And that is its charm…” — Designed by Veronica Valenzuela from Spain.

The Rainbow Is Here!

Freedom

“On the 24th of February, far north in Europe, the tiny nation of Estonia celebrates its 102nd Independence Day. Cheers to the cleanest, greenest nation on earth! Happy Independence Day Estonia! Mu isamaa, mu õnn ja rõõm — My fatherland, my joy and happiness.” — Designed by Shishir Keluskar from Tallinn.

Freedom

Rock & Roll

Designed by Ricardo Gimenes from Sweden.

Rock & Roll

Celebrate Love

“February brings the season of love, and what could be better than celebrating it with Taj Mahal – the iconic monument and symbol of love.” — Designed by Farhat Asif from India.

Celebrate Love

Oldies But Goodies

Do you know those moments when you rediscover a treasured item you almost forgot about? Below you’ll find some February wallpaper goodies from our archives. Maybe one of your favorites from the past is in there, too? (Please note that these wallpapers don’t come with a calendar.)

Savannah Stroll

“February is a month focused on romance and as a southerner, I can’t think of a more romantic way to spend a day than strolling the historic moss-draped streets of Savannah, GA. Spending time sitting on a bench on one of the many beautiful squares, holding hands and people watching as you sip a cappuccino.” — Designed by Heather Ozee Designs from the United States.

Savannah Stroll

Principles Of Good Design

“The simplicity seen in the work of Dieter Rams which has ensured his designs from the 50s and 60s still hold a strong appeal.” — — Designed by Vinu Chaitanya from India.

Principles of Good Design- Dieter Rams

Dark Temptation

“A dark romantic feel, walking through the city on a dark and rainy night.” — Designed by Matthew Talebi from the United States.

Dark Temptation

Cold And Frost

“Frosts in Russia are very severe. Walking through the Park, I found these branches at the top and decided to capture the moment.” — Designed by Nikolay Belikov from Russia.

Cold And Frost

Love Is Worth Fighting For

— Designed by Maria Keller from Mexico.

Love Is Worth Fighting For

Share The Same Orbit!

“I prepared a simple and chill layout design for February called ‘Share The Same Orbit!’ which suggests to share the love orbit.” — Designed by Valentin Keleti from Romania.

Share The Same Orbit!

Charlie Chaplin

“I love street art, so I took a shot of this great graffiti of Charlie Chaplin with his inspirational quote that is even more true for this age: ‘Sometimes we think too much and feel to little’. He also said: ‘More than machinery, we need humanity; more than cleverness, we need kindness and gentleness. Without these qualities, life will be violent and all will be lost.” — Designed by Marija Zaric from Belgrade, Serbia.

Charlie Chaplin

Plucking At The Heart Strings

“Choose to embrace Valentine’s as a day to appreciate those who are special to you. The base of this wallpaper is ‘Plucking at the Heart Strings’, an original painting by Hayden Gigner.” — Designed by Adam Mezzatesta from the United Kingdom.

Plucking At The Heart Strings

February Ferns

— Designed by Nathalie Ouederni from France.

February Ferns

French Fries

— Designed by Doreen Bethge from Germany.

French Fries

Snowy Sunset

— Designed by Nathalie Croze from France.

Snowy Sunset

Balloons

— Designed by Xenia Latii from Germany.

Balloons

February’s Gift

“A leap year means we have one more day to cherish! Maybe use it to visit an old friend, or go somewhere new, but use it well! And the most important: have some fun!” — — Designed by Printsome.com from the United Kingdom.

February's Gift

Made In Japan

“See the beautiful colors, precision, and the nature of Japan in one picture.” — — Designed by Fatih Yilmaz from the Netherlands.

Made In Japan

February Flowers

“A little bit of romance, a little bit of vintage: Happy Valentine’s Day this month!” — Designed by Kari Andresen from the United States.

Smashing Wallpaper - february 13

Love Angel Vader

“Valentine’s Day is coming? Noooooooooooo!” — — Designed by Ricardo Gimenes from Sweden.

Love Angel Vader

Febrewery

“I live in Madison, WI USA, which is famous for its breweries. Wisconsin even named their baseball team ‘The Brewers.’ If you like beer, brats, and lots of cheese, it’s the place for you!” — — Designed by Danny Gugger from the United States.

Febrewery

Free Your Mind

“People should have the right to believe and think what they want. They should be free in choosing their opinion. The wallpaper (especially the birds) reminds me of the great freedom we have in many countries of the world.” — — Designed by Daniela Faltz from Germany.

Free Your Mind

Frozen Worlds

“A view of 2 frozen planets, lots of blue tints.” — Designed by Rutger Berghmans from Belgium.

Smashing Wallpaper - february 13

Join In Next Month!

Thank you to all designers for their participation. Join in next month!

Smashing Newsletter

Upgrade your inbox and get our editors’ picks 2× a month — delivered right into your inbox. Earlier issues.



Useful tips for web designers. Sent 2× a month.
You can unsubscribe any time — obviously.

Categories: Others Tags:

Why One-Third of the Top 10 Million Websites Choose WordPress?

January 31st, 2020 No comments

Did you know that WordPress CMS powers around 26% of all the websites? This CMS has always been a favourite among the web-savvy users and start-ups because of its simple yet powerful features.

If you have plans to start a small business website using any CMS platform, then WordPress is worth choosing because it comes with ample features to help start-ups at a fee of cost.

The immense popularity of WordPress CMS has led to its rise in demands for even conversion projects like switching from HTML into WordPress website. But developers must also have a plan ahead of executing any such task so that the entire process can be conducted smoothly without any problems.

In the year 2011 WordPress was powering about 13% of the websites and today in 2019, it is powering over 33.4% sites. In the past few years, WordPress has become the most popular CMS for more and more organizations and a variety of websites are now built using the CMS. Even large enterprises use it to power their site as it is easy to maintain and comes with a huge community of volunteers that has grown along the CMS. Besides this, there are many other benefits of choosing WordPress.

Let’s get into some more details and understand the reasons behind its popularity.

It has been in the market for many years

WordPress is a CMS software launched in the year 2003. Initially it started as a tool for the bloggers. But it quickly grew to be the first platform for every business and developers with little or no technical experience. About more than 500 websites were created every day by using WordPress and this continued for a long period. With some latest CMS platforms coming up, the market competition is also increasing, but still, WordPress remains to rule the market as it is highly stable and reliable.

Open-Source CMS

Whether you are making a commercial website or a personal blog, WordPress doesn’t charge any money and this is what makes it extremely popular among users. It is an open-source CMS, which means that WordPress development code is free and can be accessed by any user. You can easily download it and make the essential changes in the code as per your needs. It is also essential to remember that not all changes are accepted by the WordPress team. You have to update it to a new version in case your changes are approved. Today, there are over 31,000 WordPress plugins and over 2600 WordPress themes online and for this, you need a web host and structural domain to run.

Easy to customise the themes and plugins:

A large number of people using WordPress are neither programmers nor web designers and as a matter of fact, most of them start to use WordPress CMS even without any knowledge of creating a site. WordPress is the best solution for non-tech savvy folks out there because it comes with thousands of free website templates that they can choose from. You will find a perfect theme for every kind of website, whether it is a business site, an e-store or a blogging platform.

Not only this, but you can also add custom functionality to any WordPress site by using the plugins and these plugins can help you add advanced features like contact forms, membership areas and analytics.

Search engine friendly:

Every website owner dreams to attain higher rank on the search engines and WordPress CMS is designed to be SEO friendly since it can be easily downloaded to enhance the function and also improve the domain. By choosing to use WordPress, you can easily create an attractive website for the search engines and the platform is also written by using simple and standard and clean codes. Its responsive and logical design makes the search engines prefer WordPress websites.

Safe and secure to use:

With the popularity of WordPress also comes the interest of the hackers. A reason why WordPress development is preferred is the security measures that the developers take to keep it secured. The WordPress staff can constantly update the CMS together with the plugins that can be integrated with it. But the users should always be very cautious and only download the plugins from trusted sources, like the ones that are directly logged into WordPress.

Categories: Others Tags:

5 Unexpected Places to Find Inspiration For Your Next Graphic Design Project

January 31st, 2020 No comments

Every single day, we have to come into our jobs needing to be creative.

And it’s hard to always have that kind of pressure on us. A lovely, lovely pressure that we obviously love having.

But sometimes, just like writers, we go through some type of block.

I like to call it a creativity block.

So today, I want to go over what you can do when you go through a creative design block, and unexpected places to find it.

5 Unexpected Places to Get Inspiration From For Your Next Graphic Design Project

So today, I want to go over what you can do when you go through a creative design block, and unexpected places to find it. Let’s do it!

1. Vintage Magazines & Posters

design inspiration vintage magazines

There’s a reason we all feel a little nostalgic and proud when we find a vintage diamond in the rough.

Everyone loves a blast to the past, and you can do that through your work.

One place that you can find unique designs and inspiration from is vintage literature.

vintage posters graphic design inspiration

Whether it’s a poster or magazine, take a deep look at these vintage pieces, find the smallest details and be inspired by them.

I recommend taking a stroll through your local thrift shop and take a look through the vintage literature.

You’re bound to find something there, a hidden gem, that will make your work have that extra pizzaz that you need.

2. Construction & Home Decor Stores

Another crazily unexpected place that you can find design inspiration is at construction or home goods stores.

I know, sounds crazy, but hear me out.

I don’t think I speak just for myself when I say that seeing modern home decor totally inspires my inner designer.

Some of the shapes and designs of home decor just get my design wheels spinning.

Whether it’s a shape, a color scheme, or just a walk around the store, I feel like I always come home with a good idea that I need to immediately jot down.

where to find design inspiration

So my advice is that you look down an aisle with things you love, whether it’s little knick-knacks and toys, or lights and chandeliers, keep your eye out for sleek designs that you could implement into your next design.

3. Graphic Tees From Thrift Shops

Can you tell that I love thrift shops?

Listen, besides being a sustainable way to shop and dress, going, searching, and shopping for graphic tees is an amazing, and let me say it again for those in the back, amazing way to find design inspiration.

Just head on over the graphic tee section of any thrift store or vintage store and start taking a look at the t-shirts.

You’ll find some terrible, terrible designs that will definitely show you what not to do, but on the flip side, you might just find the basis for your next design project.

Shirts from the ’70s, ’80s, and 2010s will surely inspire you in one way or another.

Take it from me!

And of course, you can always purchase the shirt that inspires you so you can mark the moment.

4. Architecture

Architecture.

? I ?love ? it.

There are literally millions of different designs, and each one is so unique.

So many amazing, unexpected shapes, corners, and designs everywhere you look.

I recommend using Pinterest and searching for architecture, and you’ll be presented with hundreds of thousands of creations that you can gain inspiration from.

5. Walks in Nature

And finally, we come to our last, not so unexpected place to find inspiration.

Nature is the mother of all design.

And so, it’s no surprise that the ultimate place for you to find inspiration is in your own backyard, town, and national parks.

Everywhere you look in nature, you will always find beauty.

Everything has an intricate design if you look close enough.

So take a break, take a walk, and find your inspiration in nature.

Wrapping up

So take a stroll outside, to your nearest thrift store, or scroll on Pinterest.

Beauty is all around you, all you have to do is look for it.

Until next time,

Stay inspired, folks.

Read More at 5 Unexpected Places to Find Inspiration For Your Next Graphic Design Project

Categories: Designing, Others Tags:

Sticky Table of Contents with Scrolling Active States

January 30th, 2020 No comments

Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let’s toss in a sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.

Bramus Van Damme has a nice tutorial on all this, starting from semantic markup, implementing most of the functionality with HTML and CSS, and then doing the last bit of active nav enhancement with JavaScript.

For example, if you don’t click yourself down to a section (where you might be able to get away with :target styling for active navigation), JavaScript is necessary to tell where you are scrolled to an highlight the active navigation. That active bit is handled nicely with IntersectionObserver, which is, like, the perfect API for this.

Here’s that result:

CodePen Embed Fallback

It reminds me of a very similar demo from Hakim El Hattab he called Progress Nav. The design pattern is exactly the same, but Hakim’s version has this ultra fancy SVG path that draws itself along the way, indenting for sub nav. I’ll embed a video here:

That one doesn’t use IntersectionObserver, so if you want to hack on this, combine ’em!

The post Sticky Table of Contents with Scrolling Active States appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

“resize: none;” on textareas is bad UX

January 30th, 2020 No comments

Catalin Rosu:

Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.

Removing the default reliability of a