PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $995
Our team of SEO Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

REQUEST QUOTE
SEO Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

SEO / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Web Hosting
Top
SEO Web Design, LLC / Web Design  / New Year, New Beginnings: Smashing Workshops & Audits

New Year, New Beginnings: Smashing Workshops & Audits

About The Author

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris ↬[1]

Catch up on what’s been cookin’ at Smashing and explore some of the most popular community resources featured in our newsletter over the past few weeks. Spoiler: there are also new workshops[2], front-end & UX audits[3] and truly smashing podcast episodes[4].

With the new year sinking in and everyone’s resolutions still being put to the test, we are slowly returning back to our day-to-day projects. And as we do so, we focus on the new targets for 2021: improving accessibility, conversion, engagement, retention, and of course web performance. We all have different personal goals for this year, but one thing unites us all: improving the web for everyone.

The time between the years is always a great time to calm down; but it’s also a wonderful time to do some reseach, thinking, writing and perhaps even unsolicited coding and designining. And almost as if it was an annual tradition (it actually is), Vitaly has been reading through everything that happened in front-end in 2021, and compiling it all in the front-end performance checklist 2021[5] yet again.

Performance budgets should adapt depending on the network conditions for an average mobile device
From the Front-End Performance Checklist 2021[6]: performance budgets should adapt depending on the network conditions for an average mobile device. (Image source: Katie Hempenius[7]) (Large preview[8])

This guide covers pretty much everything you need to build fast experiences on the web today — from metrics to tooling and front-end techniques and strategies. It has proved to be quite useful to many readers in the past years, so hopefully it will be useful for you, too. You can also edit the checklist (PDF[9], MS Word Doc[10] and Apple Pages[11]) and adjust it to your own personal needs, or even use it for your organization.

Now, without further ado, let’s take a look at what the Smashing team has in store for you in the next months.

Plan Your Year Ahead With Online Workshops

Have you attended one of our workshops[12] yet? We are thrilled each and every time we run practical, online workshops with all of the wonderful attendees from all over the world coming together to learn together. It has proved to be a great opportunity to connect with people around the world, and share experiences live. So many ideas have been brought to life thanks to the live design and coding sessions[13], and there are many folks that have found new friends, too!

Join our friendly Smashing Workshops! It gets even better: We now have workshop bundles[14] from which you can choose 3, 5 or even 10 tickets for the workshops of your choice — ongoing, upcoming or the ones happening in the future! Pick the online workshops of your choice — at the best price and at the best dates — for yourself, your team or your agency. Jump to workshop bundles[15].

We keep working on the program for this year, and there are more workshops to announce. Let us know if you’d like to run one, get in touch on Twitter DM[16] and we promise to do our best to make it happen. Also, feel free to subscribe here[17] if you’d like to be the first to be notified when new workshops come up. Plus, you get access to early-bird tickets as well.

New: Smashing Online Audits on Front-End & UX

Topple the Cat dressed up as a wizardJust last week we’ve silently launched our new little product — online audits[18] — 30–60 mins video review along with a written report of our findings. It’s a simple quick way to validate your ideas and get an honest, unbiased feedback (for now just from Vitaly) on the front-end & UX of your website, app, or mock-ups. Plus, guidelines and action points to do better.

Book an audit of your choice[19] and share some details about your website, app, or mock-ups, and we’ll get back to you in almost no time!

Smashing Podcast: Tune In And Get Inspired

Last year, we’ve published a new Smashing Podcast[20] episode every two weeks, and the feedback has been awesome! With over 56k downloads (just over a thousand per week, and growing!), we’ve had 34 guests on the podcast with different backgrounds and so much to share!

If you don’t see a topic you’d like to hear and learn more about, please don’t hesitate to reach out to host Drew McLellan[21] or get in touch via Twitter[22] anytime — we’d love to hear from you!

Stay tuned for the next episode coming out on January 26!

Smashing Newsletter: Best Picks

The weekly Smashing NewsletterWith our weekly newsletter[23], we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!

Also, by subscribing[24], there are no third-party mailings or hidden advertising, and your support really helps us pay the bills. ❤️

Interested in sponsoring? Feel free to check out our partnership options[25] and get in touch[26] with the team anytime — they’ll be sure to get back to you as soon as they can.

Below are some of the popular newsletter pieces that we’ve shared in our newsletter recently:

Default Local Fonts Compatibility

Default fonts vary significantly across different operating systems. To provide an easy way to look up a system’s default fonts, especially the ones that need to be available through CSS font-family, Zach Leatherman built Font Family Reunion[27].

Font Family Reunion

The compatibility table works like a Can I Use for default local fonts: Once you enter a font-family, it will tell you if it is supported, as well es what the five standard CSS keyword font-families (serif, sans-serif, monospace, and the lesser known fantasy and cursive) are aliased to in each operating system. One for the bookmarks.

Improving Google Fonts Performance

Self-hosting fonts is widely accepted to be the fastest option when using web fonts. However, Google Fonts can be speedy, too: their ability to serve the tiniest possible font files to specific user agents and platforms and their relatively new support for font-display via the URL parameter &display=swap are already a good base. And, as Harry Roberts shows[28], there are quite some things that you can do to improve their performance even further and mitigate a lot of the issues that Google Fonts are commonly known for.

The Fastest Google Fonts

For his article “The Fastest Google Fonts[29],” Harry went down the performance testing rabbit hole to find the best combination for fast Google Fonts: asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains. All of these techniques combined might sound a bit overwhelming at first, but Harry concludes his article with a slim and maintainable snippet that helps you get the most out of Google Fonts.

Responsive Emails Made Easy

Coding clean, responsive emails that provide a solid experience in all popular email clients can be a time-consuming challenge. HEML[30] is here to change that. The open-source markup language gives you the native power of HTML without having to deal with all of the email quirks. There are no special rules or styling paradigms to master, so if you know HTML and CSS, you are ready to start.

MJML

MJML[31] is based on the same idea of simplifying the process of creating responsive emails. The markup language is based on a semantic syntax that makes the process straightforward while an open-source engine does the heavy lifting and translates the MJML you wrote into responsive HTML. A library of standard components saves you extra time and lightens your email code base. And if you want to build your own, Modular Template System Guide[32] might help, too. Promising!

Bulletproof HTML Email Templates

Making an HTML email work across email clients ain’t an easy task. Fortunately, there are plenty of reliable tools, templates and frameworks to make it easier to get your work done. For example, Maizzle[33] is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) that you can start with right away.

Bulletproof HTML Email Templates

Cerberus[34] and HTML Email[35] provide small collections of reliable, solid patterns for responsive HTML emails that are well-tested in 50+ email clients, including Gmail, Outlook, Yahoo, AOL, and many others. EmailFrame.work[36] allows you to build responsive HTML email templates with pre-built grid options and basic components, supported in over 60+ email clients.

Stripo[37], Chamaileon[38], Postcards[39], Topol.io[40] and Bee Free[41] feature plenty of free HTML email templates, Litmus provides Responsive Email Templates[42] for newsletters, product updates and receipts, and CampaignMonitor has a free HTML email template builder[43] with drag’n’drop functionality.

From CSS Gradients To Fake Data

Imagine that you just need to find CSS triangle styles for elements and pseudo-elements. Or perhaps refine the color palette a bit by exploring tints and shades of a given color. Or perhaps generate a linear and radial CSS gradient for a section of the page. There is no need to do it all manually or try to find those CSS snippets all over the web. You can always find them on Omatsuri[44].

From CSS Gradients To Fake Data

Omatsuri means festival in Japanese, and the site is a lovely little festival of open-source browser tools for everyday use. On the site, you’ll find a triangle generator, a color shades generator, a gradient generator, page dividers, SVG compressor, SVG → JSX converter, a fake data generator, CSS cursors, and keyboard event codes. Designed and built by Vitaly Rtishchev and Vlad Shilov. The source code of the site[45] is available as well.

CSS Shadow Generator

Looking for a tool that’ll automatically generate CSS code for really smooth, layered box-shadows? Well, you’re going to love SmoothShadow[46]. Inspired by an article written by Tobias Ahlin Bjerrome[47], this nifty tool was created to help anyone generate the code they need on the spot.

SmoothShadow Figma plugin by Philipp Brumm

Once you’ve given it a try, it will be difficult to not use it. The little tool allows you to visually design a layered smooth box-shadow, but also tweak alpha, offset and blur with individual easing curves. And it gets even better: The creator of the tool, Philipp Brumm[48], has also released SmoothShadow as a Figma plugin[49], so you can optimize your workflow just like you’ve always wanted to!

Understanding CSS Variables

CSS variables are powerful. They cascade normally, inherit, make it possible to reuse code, and they are extremely permissive. But what can you actually put in a CSS variable to make full use of its potential? Since some of the things aren’t that obvious, Will Boyd explored the possibilities in a blog post[50].

What Can You Put in a CSS Variable?

From unit values to pre-defined keywords, content strings, images, and even fancy animated values, Will’s summary shines a light on the most common things that you might want to use in combination with a CSS variable. A great overview.

Never Stop Learning

The learning never stops. And since it’s often the little insights, code tidbits, and tips that turn out to be the most useful, Stefan Judis started “Today I Learned[51]”.

Code Tidbits

Whether it’s the awareness that SVG filters can be inlined in CSS or how to tell browsers that your site supports color schemes, for each little thing he learned, Stefan shares a brief summary — not only related to CSS but also accessibility, bash, git, GraphQL, HTML, JavaScript, and much more. Samantha Ming’s code tidbits[52] are also a treasure chest of quick but invaluable web dev wisdom that is bound to make your live easier.

And That’s A Wrap!

We sincerely wish you a truly wonderful year this time around — full of laughs, memorable moments and remarkably smashing experiences. For one, we can’t wait to see you online or in person, but one thing is certain: we sincerely appreciate you being smashing month after month, and for that we are eternally grateful.

Stay smashing!

Smashing Editorial(cm, vf, ra)

References

  1. ^ More about Iris ↬ (www.smashingmagazine.com)
  2. ^ workshops (smashingconf.com)
  3. ^ front-end & UX audits (smashingconf.com)
  4. ^ podcast episodes (podcast.smashingmagazine.com)
  5. ^ front-end performance checklist 2021 (www.smashingmagazine.com)
  6. ^ Front-End Performance Checklist 2021 (www.smashingmagazine.com)
  7. ^ Katie Hempenius (twitter.com)
  8. ^ Large preview (cloud.netlifyusercontent.com)
  9. ^ PDF (www.dropbox.com)
  10. ^ MS Word Doc (www.dropbox.com)
  11. ^ Apple Pages (www.dropbox.com)
  12. ^ one of our workshops (www.smashingmagazine.com)
  13. ^ live design and coding sessions (smashingconf.com)
  14. ^ workshop bundles (smashingconf.com)
  15. ^ Jump to workshop bundles (smashingconf.com)
  16. ^ get in touch on Twitter DM (twitter.com)
  17. ^ subscribe here (smashingconf.com)
  18. ^ online audits (smashingconf.com)
  19. ^ Book an audit of your choice (smashingconf.com)
  20. ^ Smashing Podcast (podcast.smashingmagazine.com)
  21. ^ Drew McLellan (twitter.com)
  22. ^ get in touch via Twitter (twitter.com)
  23. ^ weekly newsletter (www.smashingmagazine.com)
  24. ^ by subscribing (www.smashingmagazine.com)
  25. ^ partnership options (provide.smashingmagazine.com)
  26. ^ get in touch (www.smashingmagazine.com)
  27. ^ Font Family Reunion (fontfamily.io)
  28. ^ as Harry Roberts shows (csswizardry.com)
  29. ^ The Fastest Google Fonts (csswizardry.com)
  30. ^ HEML (heml.io)
  31. ^ MJML (mjml.io)
  32. ^ Modular Template System Guide (blocksedit.com)
  33. ^ Maizzle (maizzle.com)
  34. ^ Cerberus (tedgoas.github.io)
  35. ^ HTML Email (htmlemail.io)
  36. ^ EmailFrame.work (emailframe.work)
  37. ^ Stripo (stripo.email)
  38. ^ Chamaileon (chamaileon.io)
  39. ^ Postcards (designmodo.com)
  40. ^ Topol.io (topol.io)
  41. ^ Bee Free (beefree.io)
  42. ^ Responsive Email Templates (litmus.com)
  43. ^ free HTML email template builder (www.campaignmonitor.com)
  44. ^ Omatsuri (omatsuri.app)
  45. ^ source code of the site (github.com)
  46. ^ SmoothShadow (brumm.af)
  47. ^ Tobias Ahlin Bjerrome (tobiasahlin.com)
  48. ^ Philipp Brumm (twitter.com)
  49. ^ Figma plugin (www.figma.com)
  50. ^ blog post (codersblock.com)
  51. ^ Today I Learned (www.stefanjudis.com)
  52. ^ code tidbits (www.samanthaming.com)

Powered by WPeMatico

[email protected]

Smashing Magazine is a website and eBook publisher that offers editorial content and professional resources for web developers and web designers.

No Comments

Sorry, the comment form is closed at this time.