Webdesign Services

Weekly News for Designers № 604

A framework for building Open Graph images – A look at GitHub’s new Open Graph image generator.
Example from A framework for building Open Graph images

There Is No Such Thing As A CSS Absolute Unit – Learn why CSS units aren’t so absolute after all.
Example from There Is No Such Thing As A CSS Absolute Unit

UI patterns & design inspiration from real products – Browse this curated library of screenshots & interaction patterns from the world’s best digital products.
Example from UI patterns & design inspiration from real products

Learn How to Determine Website Project Requirements Like a Pro – Strategies that can help you paint a clearer picture of what a website project will require.
Example from Learn How to Determine Website Project Requirements Like a Pro

uxbullshit – Read some not-so-recommended UX quotes.
Example from uxbullshit

Image optimisation: the ultimate guide – Learn the ins and outs of getting the best performance from your images.
Example from Image optimisation: the ultimate guide

The State of Developer Ecosystem 2021 – Annual look at the latest trends in the tech industry, as well as interesting facts about tools, technologies, programming languages, and many other facets of the programming world.
Example from The State of Developer Ecosystem 2021

Will Full Site Editing Help WordPress Themes Finally Reach Their Potential? – How Full Site Editing (FSE) could bring a one-size-fits-all approach to WordPress themes.
Example from Will Full Site Editing Help WordPress Themes Finally Reach Their Potential?

Layout with Reveal Animations and Content Preview – Learn to create experimental reveal animations on typographic elements as a repeating pattern.
Example from Layout with Reveal Animations and Content Preview

Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property – How a new CSS property could be a solution to a common problem.
Example from Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property

A Web Designer’s Guide to Working on the Go – Tips for staying productive and secure when you’re away from the office.
Example from A Web Designer’s Guide to Working on the Go

Advanced CSS Gradient Editor – This free CSS design app is full of useful features.
Example from Advanced CSS Gradient Editor

8 CSS & JavaScript Code Examples for Creating Interactive Timelines – Top examples of timelines that are both attractive and engaging.
Example from 8 CSS & JavaScript Code Examples for Creating Interactive Timelines

Project Hunt – A resource for finding the latest no-code projects.
Example from Project Hunt

Is it Time to Ditch the Design Grid? – Why the design grid feels more like a hangover from print than ever.
Example from Is it Time to Ditch the Design Grid?

Thinking About The Cut-Out Effect: CSS or SVG? – Which approach works best for a cut-out effect? Here’s a look at the benefits and drawbacks of each.
Example from Thinking About The Cut-Out Effect: CSS or SVG?

The post Weekly News for Designers № 604 appeared first on Speckyboy Design Magazine.

Webdesign Services

8 CSS & JavaScript Snippets for Creating Onboarding Carousels

Everyone that creates a professional product and cares about their users, takes onboarding seriously. It plays a vital role in bridging the gap between the user and application. It is the foundation of a great user experience. It simply cannot be overlooked.

As there are many onboarding solutions available, to make things easier for you, we have prepared this collection of onboarding CSS and JavaScript code snippets. While they are not all teeming with artistic charm and extravagant illustrations, they will all give you a solid base for creating your own user-friendly onboarding UI.

1. Beautiful Onboarding UI by Fabio Ottaviani

Our first code example is an eye-pleasing onboarding solution that uses beautiful graphics and user-friendly animation. It is based on a conventional horizontal slider that offers the universally known three dots for navigation. It has three screens, but you can easily increase that number to however many your project requires. Use this snippet if you would like to make your onboarding unobtrusive.

See the Pen DailyUI – #023 Onboarding by Fabio Ottaviani

2. Onboarding Slides with jQuery by Hainer Savimaa

While the previous example takes a more traditional route to onboarding, this snippet makes use of a split layout, offering a carefully organized UI for displaying information that allows you to separate the visual content from the textual. Along with the classic dot-based navigation, there are also supporting “Next” and “Back” buttons for those who prefer traditional controls.

See the Pen Onboarding slides with jquery by Hainer Savimaa

3. Simple Onboarding by Nahom Ebssa

This minimally designed onboarding snippet manages to accommodate all of the necessary information in one tiny screen while still providing a comfortable user experience. As for the navigation, it may feel a little unfinished since there is no back button, but you could easily add that in yourself. On the whole, this code snippet could serve as a great foundation for your own onboarding UI.

See the Pen Onboarding by Nahom Ebssa

4. Minimal Onboarding UI by Fersho Pls

Inspired by the outstanding onboarding screens created by Ennio Dybeli, this onboarding snippet, with its minimal design and smoothly animated behavior, isn’t anything ground-breaking in concept. The details are standard, and the transitions are basic, yet they work together perfectly. The concept is simple yet straight-to-the-point. It is ideal for use on smaller projects.

See the Pen Onboarding by Fersho Pls

5. Split-Screen Onboarding Carousel by Dario Corsi

We have already featured a split-screen layout in this collection, but this time, the onboarding UI has been rotated ninety degrees and transformed into a traditional stripe layout – looking pretty much like a basic slider from a few years ago. Beyond that, it has the potential to cover all of the onboarding information that you need to deliver to users. Even though it has a relatively wide layout, you could quickly make it responsive.

See the Pen Onboarding Carousel by Dario Corsi

6. Clasic Onboarding UI by Nick Wanninger

This snippet is not the kind of thing that wins over users with beautiful aesthetics or extraordinary animation. Rather, it serves as a base for your own onboarding creations. It does not have a particularly fancy design – just a classic structure. Unlike the previous snippets, this component comes with short lines instead of dots and standard arrows for navigation instead of the words “Next” and “Back,” but the result still feels intuitive.

See the Pen Onboarding by Nick Wanninger

7. Android App Onboarding by Mat Swainson

This onboarding UI may look dated, but it does its job perfectly well. It comes in two parts. The first shows four standard carousel screens that can be used to offer visitors more information, and the second includes an email subscription form for those who want to get straight to the point by pushing the “Get Started” button.

See the Pen Android App Onboarding by Mat Swainson

8. Open-Source Liquid Swipe by Cuberto

We have looked at solutions that provide a base technique for showing a series of screenshots or animations in a row. Liquid Swipe is a bit different. It is centered around a transition effect that perfectly imitates a liquid swipe behavior that feels incredibly natural. You can download the files from its GitHub repo.


In essence, an onboarding UI can be created using a basic carousel system. All you need to do is divide each slide into two parts. One for content, and the other for navigation. After that, you can add your own creative flair and transition effects to make the user experience not just informative but enjoyable as well.

The post 8 CSS & JavaScript Snippets for Creating Onboarding Carousels appeared first on Speckyboy Design Magazine.

Webdesign Services

10 WordPress Plugins for Email Marketing Management

Email marketing should be one of the key components of your customer retention strategy. Engaging in regular communication will keep subscribers informed about your latest news and promotions. So it’s vitally important that your website focuses on enticing people to opt-in to your mailing list.

WordPress is an ideal platform for collecting data. There are many plugins available that allow you to connect with your favorite email marketing service. You can even run your own service directly through your website.

Whatever your ideal setup, we’ve collected 10 of the best plugins for managing your email marketing through WordPress.

MailPoet

MailPoet started out as a free/premium plugin that turns your WordPress install into a mailing list service. Their new version continues this (free up to 2,000 subscribers), but also offers to deliver email for you.

This solves one of the tough issues with running your own lists – ensuring messages don’t get caught in spam filters. For that matter, your host server could get blacklisted as well. So sending through your own server in the free version is best left to smaller lists that don’t send very often.

MailChimp for WordPress

The nice aspect of MailChimp for WordPress is that you have the option of creating signup forms directly through the plugin or integrating with other plugins (Contact Form 7, Gravity Forms, Ninja Forms, BuddyPress, WooCommerce and Easy Digital Downloads – to name a few).

Advanced WooCommerce integration is one of the features of the premium edition.

MailChimp for WordPress

Constant Contact Forms

Using Constant Contact Forms, you can enable visitors to easily subscribe to your email list. The plugin also lets you create custom fields so that you can collect additional data.

You can even use the plugin without having a Constant Contact account – but obviously, the features are geared towards those who do use the service.

Constant Contact Forms

Hustle

Hustle provides a means to not only connect with popular services such as MailChimp, Campaign Monitor, Constant Contact, GetResponse and Mad Mimi, it also lets you target users through slide-ins, popups, widgets and shortcodes.

So it’s more of a complete marketing suite that you can use to encourage subscriptions, along with other functionality. It also provides nifty features like social sharing and statistical data regarding opt-ins.

Hustle

MailMunch

It’s fair to say that MailMunch and Hustle are somewhat similar in scope. Where they differ is that MailMunch really is solely focused on email marketing. You can create a variety of different opt-ins ranging from popups, embedded forms, top bar, scroll box and sidebar.

The plugin is compatible with many third-party services (AWeber, Campaign Monitor, Constant Contact, GetResponse, InfusionSoft, and MailChimp). You can also take advantage of A/B testing and analytics.

MailMunch

Email Subscribers & Newsletters

With Email Subscribers & Newsletters, you can take a more holistic approach to email marketing. You’ll be able to collect user information and send out HTML newsletters through your WordPress website.

But you can also set up automatic email notifications when new posts are added to your site. That provides an incredibly easy way to keep users engaged with your content.

Email Subscribers & Newsletters

Contact Form 7 Campaign Monitor Extension

Beyond your standalone opt-in form, it’s a great idea to integrate subscription options into other existing forms on your site. Contact Form 7 Campaign Monitor Extension is one of many available plugins that will do this for you. Compatible with the ever-popular Contact Form 7, users who are filling out a form on your site are just a click away from also subscribing to your Campaign Monitor list.

The very same plugin author has similar offerings for AWeber, GetResponse, iContact and MailChimp.

Contact Form 7 Campaign Monitor Extension

ConvertKit

ConvertKit is a bit of a unique service, as it is geared towards bloggers. It offers some automation features that will help keep your readers in the loop. Their WordPress plugin allows you to connect to your ConvertKit account via API and easily add opt-in forms either globally or on a post-by-post basis.

Overall, it’s a nice option for content creators.

ConvertKit

Yith WooCommerce MailChimp

An online store’s checkout is the perfect opportunity to offer your customers a place to subscribe. After all, if someone is willing to spend some hard-earned cash on your site, there’s a mutual interest in forming a relationship.

Yith WooCommerce MailChimp will hook up with the mailing service and enable customers to subscribe to a list of your choosing via a simple checkbox on the front end.

Yith WooCommerce MailChimp

Newsletter Glue

A relative newcomer, Newsletter Glue enables WordPress site owners to create email newsletters directly within the CMS. The unique selling point is that the plugin connects to an outside email service provider via an API. You write the newsletter in WordPress and send it through the provider. The result is a familiar content creation UI and a more reliable way to actually deliver those newsletters.

The free version connects to your MailChimp account. The pro version has more sending options, along with the ability to embed social media and WordPress posts.

Newsletter Glue

Bonus: MailOptin

MailOptin aims to be a complete solution for email marketing via WordPress. It connects with a wide variety of third-party providers (MailChimp, Constant Contact, etc.). But it also enables you to create list signup forms that can be implemented in several ways and even let you send mail to your lists from within WordPress. You can run your entire email marketing operation without leaving your website. A premium version adds automation capabilities, like sending out new post notifications, enables mail scheduling and more.

MailOptin

WordPress as a Marketing Hub

The plugins profiled above provide some flexibility with how you collect and distribute information through email marketing channels. Some even allow you to create a channel that’s all your own. This wide array of options allows you to tailor things to match your needs and philosophy.

What’s really great is that you can reach people on any part of your site. Whether through a traditional sidebar widget or an option on your checkout form, you can encourage visitors to build a relationship.

If you’re just getting started with email marketing, think about the various ways you can implement it into what you’re already doing. For example, if people are already interacting with a specific feature (like a contact form), then it makes perfect sense to add an opt-in. But you may also want to approach them at other times, like at the bottom of a blog post or through a popup window.

Wherever and however you want to reach out, there are WordPress plugins out there to help make it happen.

The post 10 WordPress Plugins for Email Marketing Management appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2315

Webdesign Services

Weekly News for Designers № 620

330 React Interview Questions – Perhaps the most comprehensive collection of React JS interview questions you’ll ever find.
Example from 330 React Interview Questions

The Power of Automating WordPress – A look at WordPress automation tools and basic examples of what they can do for you.
Example from The Power of Automating WordPress

Layout patterns – Check out this collection of CSS layouts for common UI elements.
Example from Layout Patterns

Parallax Powered by CSS Custom Properties – A step-by-step guide to creating some unique parallax effects.
Example from Parallax Powered by CSS Custom Properties

JOY.JS – This JavaScript library provides a fun GUI for creating your own tools.
Example from JOY.JS

10 WordPress Plugins to Supercharge Advanced Custom Fields – Power up your usage of ACF with these companion plugins.
Example from 10 WordPress Plugins to Supercharge Advanced Custom Fields

Flip, Invert, and Reverse – Learn some handy SVG transformation techniques with this tutorial.
Example from Flip, Invert, and Reverse

Slideshow with Filter Reveal Effect – The steps behind building a slideshow page layout with a filter enhanced navigation effect.
Example from Slideshow with Filter Reveal Effect

Stop Worrying About People Stealing Your Ideas – Why you don’t need to be paranoid about others taking your ideas.
Example from Stop Worrying About People Stealing Your Ideas

RegexLearn – This tool will help you learn RegEx with step-by-step instructions.
Example from RegexLearn

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH – Some advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today.
Example from A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

25 Free Bootstrap Dashboard & Admin Templates – Find the perfect free Bootstrap template for your application’s dashboard.
Example from 25 Free Bootstrap Dashboard & Admin Templates

Using Position Sticky With CSS Grid – Learn how to make sticky elements play nicely with the modern CSS layout technique.
Example from Using Position Sticky With CSS Grid

Runno – Use this tool to create runnable code examples.
Example from Runno

How WordPress Full Site Editing Could Impact the Design Process – This new feature has the potential to change how we design for WordPress.
Example from How WordPress Full Site Editing Could Impact the Design Process

Swiffy Slider – A slider and carousel script that takes advantage of modern browser technology.
Example from Swiffy Slider

BubblesJS – A visualization framework that provides a variety of chart types, filters and KPIs that can be composed to create cross connected dashboards.
Example from BubblesJS

The post Weekly News for Designers № 620 appeared first on Speckyboy Design Magazine.

Webdesign Services

Behind the Scenes: Having a Singular Focus for Your Web Design Business

There’s a lot of talk about specialization in the web design industry. The idea is to focus on a specific type of clientele, tool, or project.

That means different things to different people. For some, it may entail building websites only with a content management system (CMS) like WordPress. Others may tailor their services to attract clients within a specific industry, such as medical or non-profit organizations.

One of the benefits of this singular focus is that a designer can gain an understanding of industry-specific needs and challenges. From there, it’s theoretically possible to offer a more customized (and profitable) experience than someone who works as a jack-of-all-trades. That expertise becomes attractive to clients and, before you know it, you become a go-to source for solutions.

Running this type of web design business is not without pitfalls, however. Success isn’t guaranteed. And, if you’re focusing on a specific industry, establishing credibility can be difficult.

Let’s take a look at the risks, benefits, and challenges of having a singular focus. Along the way, we’ll hear from a web designer who’s taken the plunge.

An Opportunity to Follow Your Passion

While money is always a consideration in business, it’s not necessarily the best reason to pursue a niche. A passion for the type of work you do and the people you work with is a better place to start. It’s more likely to lead you in the right direction and fuel growth.

For web designer Tara Claeys, her passion led to a realization. As she puts it, “I realized my favorite projects and clients were all education/school and non-profit organizations. I decided to go all-in and announce that I would only be working with this type of client from that point forward…”

And the goals for her new venture were simple: “I hoped this would make it easier to say ‘no’ to projects that I didn’t want to do… and over time would establish that I was a ‘go to’ for my niche”.

When you follow your passion, you’re more likely to put in the necessary groundwork – and do so happily. That could result in more in-depth knowledge and experience. It’s something you’ll want to share with every client.

That approach can put you on the fast track to both personal fulfillment and financial success.

An Uphill Climb to Visibility

Deciding to jump into a niche with both feet is a calculated risk. It can take time to build your brand. Meanwhile, lucrative projects outside of your new specialty may feel like missed opportunities.

If you don’t hit the ground running, the possibility of financial strain is real. Thus, it’s tempting to take on those other projects. It’s an understandable decision, but one with a slippery slope. The danger is in becoming too busy to go for the projects you want.

One of the big challenges is in establishing a footprint. This is especially difficult in sectors where there is a lot of competition. It may take several projects and some word-of-mouth to make a name for yourself.

This was something Claeys experienced. She notes that her greatest difficulty was “getting my name out in the industry as an expert/becoming known and trusted.”

Even if you have vast experience in building a specific type of website, there’s a lot of time and effort required to be seen as an authority. Building a portfolio of successful projects is important, but only part of the process.

The other half of the equation is in sharing what you know. Things like writing blog posts, speaking at industry events, and networking can help. It can be a lot of extra work but will introduce you to people within the areas you want to target.

That’s opposed to another popular tactic – cold-calling potential clients. For Claeys, “That was a waste of time and energy.” Indeed, it may be more effective to establish an identity and encourage people to come to you.

A person standing in a foggy field.

When Your Business Reflects Who You Are

You’ve put in the hard work and things have taken off. Now what? Claeys tells us that the rewards have been numerous.

“…I have loved every project I have taken on and have developed and enhanced a process to serve school and non-profit clients. It is easier to close sales because I am passionate and an ‘expert’”. In addition, this niche focus allows her to more easily identify potential clients.

And perhaps those are the best reasons to become a specialist. The chance to utilize your talents on projects you love sounds very compelling.

Still, it may not be for everyone – and that’s OK. Taking a broader approach to your career and business can be profitable and satisfying. A variety of projects can also be a great way to learn, after all.

But for those with a passion, specialization has some fantastic benefits. Tara Claeys is an example of how to make it a reality.

Thanks to Tara Claeys for sharing her experiences with us!

The post Behind the Scenes: Having a Singular Focus for Your Web Design Business appeared first on Speckyboy Design Magazine.

Webdesign Services

10 Free WordPress Plugins for Extending BuddyPress and bbPress

BuddyPress is a powerful, free plugin that adds community features to your WordPress website. Install it on your site, and you’ll have access to handy features like activity streams, user profiles, notifications, groups, and private messaging. But that’s just the base layer of what BuddyPress can do.

bbPress is a forums plugin that is often used in conjunction with BuddyPress. The forums are easy on the eyes, simple to use, and fit nicely with BuddyPress groups.

Extending BuddyPress and bbPress with plugins can bring even more functionality to make your site into a real online community hub. You might be surprised at some of the cool features you can easily add-in.

Here are 10 free plugins you can use to make BuddyPress and bbPress even better:

Free BuddyPress Plugins

BP Profile Search

Not only will BP Profile Search allow users to search member profiles, but it’s also a quick way to create a member directory. When it comes to search, you can build a custom form to meet your community’s needs. Directories are also easy to customize, with the ability to apply filters and create multiple member listings.

BuddyPress Docs

Add the power of collaborative documents to your community with BuddyPress Docs. Documents can be uploaded, assigned to specific users or groups, and edited on the front end of your site. There’s also a revision history and the ability to categorize/tag uploads.

BuddyPress Docs

BP Better Messages

BuddyPress has a default messaging system. But if you want to take things up a notch, BP Better Messages offers an improved user experience. It uses AJAX to power live chat, allows for file uploads and multimedia embeds. Messages can range from a private chat between two users or site-wide notifications.

BP Better Messages

BuddyPress Group Email Subscription

BuddyPress Group Email Subscription helps keep group members informed of activity. There are five different notification levels members can choose from: No Email, Weekly Summary Email, Daily Digest Email, New Topics Email and All Email. If desired, admins can set a default notification level for users.

BuddyPress Group Email Subscription

BuddyPress Registration Options

Spam bots can hit BuddyPress just like everything else on the internet. BuddyPress Registration Options helps squash spam registrations by allowing for moderation on new user accounts. Email notifications are sent when an administrator either approves or denies a new registrant. This plugin also works with bbPress.

BuddyPress Registration Options

Free bbPress Plugins

GD bbPress Attachments

GD bbPress Attachments enables users to upload files to forum topics and replies. Administrators can control file size limits, the number of files that can be uploaded at once, and can change things up on a forum-by-forum basis.

GD bbPress Attachments

bbp Style Pack

Want to change up the look of your bbPress install? bbp Style Pack lets you change fonts, colors, and forum layouts. In addition, you can tweak emails, and add handy features such as an unread topics page. And that’s just the beginning. This plugin gives admins plenty of ways to make bbPress their own.

bbp Style Pack

bbPress Notify (No Spam)

Take control of bbPress email notifications with bbPress Notify. Easily customize messages sent to users and choose who receives them. The plugin is developer-friendly, with lots of hooks and filters at your disposal.

bbPress Notify (No Spam)

GD bbPress Tools

GD bbPress Tools offers a suite of tweaks for your WordPress forums. Visual changes include the ability to disable breadcrumbs and advanced topic filtering. There’s also a collection of 30 shortcodes that make adding custom functionality a breeze. Unlock even more features with the pro version.

GD bbPress Tools

Private Groups

If you’re looking to limit your forums to a specific group of users, give Private Groups a try. The plugin allows administrators to restrict specific forums and topics. There’s a lot of flexibility here when it comes to user permissions – perfect for bbPress installs that need both public and private access. This is a great option for membership websites.

Private Groups

Build Your Community

The combination of BuddyPress and bbPress can help you build a bustling and productive online community. And, because they both take advantage of WordPress, they’re also very easy to use and customize to fit your needs. Experiment with them and see how they can benefit your WordPress website.

The post 10 Free WordPress Plugins for Extending BuddyPress and bbPress appeared first on Speckyboy Design Magazine.

Webdesign Services

50 Free Christmas Templates & Resources for Designers

With Christmas just a few weeks away, all you designers will undoubtedly start to plan the designs of your personalized Christmas cards, invitations, posters, wallpapers, and everything else in between that is Christmas or holiday season-related.

So, to help you out, we have a fantastic collection of free Christmas and holiday season resources and templates we know you will love.

We haven’t chosen traditional resources. Instead, we have focussed on those resources that have been designed using modern design trends. You’ll find seasonal illustration templates and icon sets, line-styled Photoshop Brushes, retro-styled characters, hand-drawn invitation templates, and finally, free seasonal fonts and wintery Photoshop Actions that scream, “Merry Christmas!”

Table of Contents:

  • Christmas Illustration Templates
  • Christmas Illustrated Icon Sets
  • Christmas Badge & Logo Templates
  • Christmas Flyer & Invitation Templates
  • Christmas Banner & Label Templates
  • Christmas Photoshop Brush Packs
  • Christmas Patterns
  • Christmas Fonts
  • Christmas Photoshop Actions

More Christmas Resources:

  • 210 Free Christmas Icons in SVG & PNG Formats
  • The Free Christmas Pictogram Collection (50 Icons, EPS & AI)
  • 72 Christmas & New Year Vector Banner Kit
  • Pure CSS Christmas Code Snippets
  • 50 Beautiful Christmas Wallpapers for Your Desktop

Christmas Illustration Templates

56 Free Christmas 3d Illustrations (PNG)

24 Illustrated Christmas Elements (EPS & JPG)

24 Illustrated Christmas Elements

3 Christmas Illustrations (PSD)

Christmas Illustrations

12 Hand-Drawn Christmas Cards & Patterns (PSD & AI)

12 Hand-Drawn Christmas Cards & Patterns

14 Free Christmas Illustration Templates (SVG, EPS & PNG)

14 Free Christmas Illustration Templates

10 Illustrated Christmas Cards (EPS & JPG)

10 Illustrated Christmas Cards

Free Christmas & New Year Illustrations (AI)

Free Christmas & New Year Illustrations

Christmas Illustrated Icon Pack (SVG & PNG)

Christmas Illustrated Icon Pack

Christmas Vector Illustration Kit (EPS, PNG & JPG, on Envato Elements)

Christmas Vector Illustration Kit

Santa Claus with Swagg Illustrations (AI, Designed by Jordan Succar)

santa Claus with Swagg Illustrations free holidays

Santa on a Motorcycle Vector Template (AI, EPS, JPG & PNG, on Envato Elements)

Santa on a Motorcycle Vector Template

Isometric Merry Christmas Vector (AI, EPS & JPG, on Envato Elements)

Isometric Merry Christmas Vector

Christmas Vector Letters Background (EPS)

Christmas Vector Letters Background free holidays

Merry Christmas Vector Illustration Concept (AI, EPS & JPG, on Envato Elements)

Merry Christmas Vector Illustration Concept

Christmas Illustrations (AI, JPG, PDF & SVG, on Envato Elements)

Christmas Illustrations

Merry Christmas Typographic Christmas Greeting Illustration (EPS)

Merry Christmas Typographic Christmas Greeting Illustration free holidays

95 Winter & Christmas Illustrations (AI, EPS, PSD & PNG, on Envato Elements)

95 Winter Christmas Illustrations

Happy Holidays Free Vector Illustration (AI, Designed by Marko Jotic)

Happy Holidays Free Vector Illustration free holidays

Santa, Reindeer and Christmas Pudding Vectors (AI & EPS, Designed by Jenny Hadfield)

Santa Reindeer Christmas Pudding Vectors free holidays

Merry Christmas & Happy New Year Background Illustration (EPS)

Merry Christmas Happy New Year Background Illustration free holidays

Christmas Icon Sets

25 Free Christmas Icons (SVG)

25 Free Christmas Icons

47 Christmas Icons (SVG, on Envato Elements)

47 Christmas Icons

33 Christmas & Winter Icon Set (AI, EPS, SVG & PNG)

33 Christmas Winter Icon Set free holidays

Merry Minimal Christmas Icon Set (AI, JPG, EPS & PNG, on Envato Elements)

Merry Minimal Christmas Icon Set

12 Hand-Drawn Style Merry Icons (AI, EPS, PSD & PNG)

12 Hand-Drawn Style Merry Icons free holidays

Christmas Icons (PSD & JPG, on Envato Elements)

Christmas Icons

Christmas Icons Vector Set (AI & EPS)

Christmas Icons Vector Set free holidays

Line & Solid Christmas Icons (AI, EPS & JPG, on Envato Elements)

Line & Solid Christmas Icons

8 Christmas Icons (Sketch App)

8 Christmas Icons  free holidays

78 Christmas Icons (AI)

78 Christmas Icons free holidays

Christmas Icon Set (EPS)

Christmas Icon Set free holidays

Christmas Vector Icon Set (EPS)

Christmas Vector Icon Set free holidays

15 Flat Vector Icons for Christmas (AI)

15 Flat Vector Icons for Christmas free holidays

15 Flat Christmas Icons (AI)

15 Flat Christmas Icons free holidays

32 Christmas Vector Icon Set (EPS & AI)

32 Christmas Vector Icon Set free holidays

12 Vector Holiday Icons (AI)

12 Vector Holiday Icons free holidays

16 Vector Christmas Icons (AI & EPS)

 free holidays

15 Flat Holiday Icons (AI)

16 Vector Christmas Icons free holidays

Christmas Badge & Logo Templates

Christmas Vector Elements (AI & EPS)

Christmas Vector Elements free holidays

Christmas Sharp Badges (AI & EPS, on Envato Elements)

Christmas Sharp Badges

Vintage Vector Christmas Badges Pack (AI)

Vintage Vector Christmas Badges Pack free holidays

Black and White Vector Christmas Badges Pack (AI)

Black and White Vector Christmas Badges Pack free holidays

Christmas Flyer & Invitation Templates

Christmas Flyer Set (AI & PSD, on Envato Elements)

Christmas Flyer Set

Christmas Flyer Template (PSD, on Envato Elements)

Christmas Flyer Template

Vector Vintage Party Christmas Flyer Template (AI & PSD)

Vector Vintage Party Christmas Flyer Template free holidays

Free Christmas & Happy New Year Party Flyer Template & Mockup (PSD)

Free Christmas Happy New Year Party Flyer Template Mockup free holidays

Real Photo Invitation or Greeting Card Mockup (PSD)

Real Photo Invitation or Greeting Card Mockup free holidays

Free Christmas Flyer Mockup (PSD)

Free Christmas Flyer Mockup free holidays

Christmas Party Invitation with Hand-drawn Santa Vector (AI & EPS)

Christmas Party Invitation with Hand-drawn Santa Vector free holidays

Christmas Banner & Label Templates

A Huge Christmas & New Year Vector Banner Kit (AI & EPS)

Huge Christmas New Year Vector Banner Kit free holidays

Retro Distressed Christmas Label Set (AI & EPS)

Retro Distressed Christmas Label Set free holidays

Christmas Photoshop Brush Packs

126 Christmas Doodles Brush Pack (Photoshop)

126 Christmas Doodles Brush Pack free holidays

Free Christmas in July Holiday Brushes (Procreate)

Free Christmas in July Holiday Brushes

91 Christmas Brush Collection (Photoshop)

91 Christmas Brush Collection free holidays

13 Christmas Stamp Brushes (Photoshop)

13 Christmas Stamp Brushes free holidays

Christmas Patterns

Snowmen Vector Free Seamless Pattern (AI, EPS & PNG)

Snowmen Vector Free Seamless Pattern

Christmas Gifts Vector Free Seamless Pattern (AI, EPS & PNG)

Christmas Gifts Vector Free Seamless Pattern

Snowman & Santa Seamless Pattern Graphic (EPS & JPG)

Snowman & Santa Seamless Pattern Graphic

20 Christmas Colors Patterns for Photoshop (JPG & Photoshop Patterns)

20 Christmas Colors Patterns for Photoshop free holidays

26 Vintage-Retro Xmas Patterns (Photoshop Patterns)

26 Vintage-Retro Xmas Patterns free holidays

Christmas Fonts

Free Honey Christmas Decorative Font

Free Honey Christmas Decorative Font

Happy Christmas Script Font (on Envato Elements)

Happy Christmas Script Font

Free Christmas Festive Serif Font

Free Christmas Festive Serif Font

Snowy Decorative Christmas Font (on Envato Elements)

Snowy Decorative Christmas Font

Merry Christmas Free Font

Merry Christmas Free Font free holidays

Christmas Time Free Font

Christmas Time Free Font free holidays

Christmas Photoshop Actions

3 Free Christmas Actions (Photoshop)

3 Free Christmas Actions free holidays

50 Christmas Lightroom Presets LUTs (on Envato Elements)

50 Christmas Lightroom Presets LUTs

3 Christmas Photoshop Actions (Photoshop)

3 Christmas Photoshop Actions free holidays

10 ‘Make it Snow’ Actions (Photoshop)

10 Make it Snow Actions free holidays

The post 50 Free Christmas Templates & Resources for Designers appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2104

Webdesign Services

30 Free Responsive Email & Newsletter Templates

Newsletters have been a critical area of marketing since the inception of the web. They have been and continue to be an essential method of communication for brands and businesses to share new content and product updates. Even though social media is hugely popular, there is no replacement for email. Most users would rather keep their business within their private inbox – and their personal lives on social networks.

When you consider that there will be an estimated 330 billion emails sent and received per day next year (2022), and that over 90% of those emails will be checked or opened on a mobile device, the importance of using a responsive template for your email marketing campaigns has never been higher.

As you will probably already know, designing simple HTML emails is challenging in itself. But creating emails that work well across all email clients and also work on all of the various mobile devices and sceeen sizes is even more challenging.

Thankfully, there are many designers and developers that have done most of the work for you by creating easy to edit and free responsive newsletter templates that work well on all email clients and devices. You will find the best of them below.

Table of Contents

  • Pre-Designed Responsive Newsletter Templates
  • Barebones Responsive Newsletter Templates
  • Responsive Newsletter Frameworks
  • Snippets for Creating Responsive Newsletter Templates

Pre-Designed Responsive Newsletter Templates

Briar Free Responsive Email Template (by Slicejack)

Briar is a free responsive newsletter template with a simple design. It has been thoroughly tested with Litmus and EmailOnAcid, and works perfectly well in all email clients. This template is MailChimp-ready.

Green Village Free HTML Template (by Pixelbuddha)

Green Village is a clean pre-designed email template that is suitable for various purposes and business types. The download package includes both a layered PSD template and the HTML source files.

Green Village HTML free responsive newsletter template email

Olivia eCommerce Responsive Email Template (on Envato Elements)

Compatible with almost all email service providers, Olivia is a responsive newsletter template that comes bundled with thirteen pre-designed modules so you can create your newsletter exactly how you want it.

Olivia eCommerce responsive newsletter template email

Bussy Free HTML Email Template (by MailBakery)

Bussy is a free newsletter template that has been designed with a simple layout and dark blue and soft red color scheme, making it ideal for corporate business.

Bussy Free HTML responsive newsletter template email

Passion Free Responsive Email Template (by Pixelbuddha)

Modern and clean, Passion is a multi-purpose email template that various business types can use. It is compatible with both MailChimp and CampaignMonitor, and works in all major email clients.

Passion free responsive newsletter template email

Madeline eCommerce Responsive Email Template (on Envato Elements)

Easy to customize and bundled with nine pre‑designed modules, Madeline is the perfect responsive newsletter template for fashion and eCommerce businesses. You can create your newsletter without writing a single line of code by using the built-in email builder.

Madeline eCommerce responsive newsletter template email

MailPortfolio Free Responsive Email Template (by Slicejack)

With a simple and clean design, MailPortfolio is a free responsive email newsletter for sending personal portfolio or blogging updates to your readers and followers.

MailPortfolio free responsive newsletter template email

Emailology Responsive Email Template (by Email On Acid)

Released by Email on Acid, Emailology is a pre-designed template that offers three layouts that trigger based on the screen’s width. By default, it supports either one, two or three columns, and as you activate each media query, the template converts to a one column layout for mobile devices.

Emailology free responsive newsletter template email

Way Mail Email Template (on Envato Elements)

Way Mail is a collection of email templates that comes with over thirty pre-designed modules. Responsive, compatible with all major email service providers, and also includes the PSD templates of the original design.

Way Mail responsive newsletter template email

Creative Boost HTML Email Template (by MailBakery)

Creative Boost is a free newsletter template from MailBakery that is fully responsive and tested in all major email clients. It comes with a dark color scheme that would be perfect for most types of businesses.

Creative Boost HTML free responsive newsletter template email

Free Material Design HTML Email Template (by Paul Goddard)

Created by Paul Goddard and based on the design aesthetics of Google’s Material Design, this simple newsletter template has been fully Litmus tested and is completely free to use.

Material Design HTML free responsive newsletter template email

Dazzle Photography Email Newsletter Template (on Envato Elements)

Even though the minimally designed Dazzle newsletter template has been specifically built for photographers, it could easily be edited and used by any creative person or agency. It comes with an online builder, so you don’t need to know any coding to design your newsletter.

Dazzle Photography free responsive newsletter template email

Daily Times Email Template (by Email On Acid)

The free newsletter template Daily Times is perfect for online newspapers, magazines, and personal bloggers to share content with their followers and readers. It can even deliver dynamic ads when paired with LiveIntent’s software.

Daily Times free responsive newsletter template email

Shopilicious Free HTML Email Template (by MailBakery)

Thoroughly tested in all major email clients, Shopilicious is a free responsive newsletter template that has been designed specifically for eCommerce stores.

Shopilicious HTML free responsive newsletter template email

Litmus Responsive Email Templates (7 Templates, by Stamplia)

Designed by Stamplia and released by Litmus, this is a collection of seven pre-designed responsive email templates that been thoroughly ‘Litmus-tested.’ They also come with the PSD source files.

Litmus HTML free responsive newsletter template email

Barebones Responsive Newsletter Templates

Cerberus Responsive HTML Email Templates (3 Templates, by Ted Goas)

Cerberus is a small collection of robust and thoroughly tested barebones HTML email templates. The Fluid template is percentage-based and shrinks on mobile screens, the Responsive template uses media queries, and finally, there’s a Hybrid template which uses a blend of both percentages and media queries.

Antwort Responsive Layouts for Email (3 Templates)

Antwort offers a small collection of barebones responsive layouts for email that fits and adapts to client widths. The one, two, and three column templates work perfectly well on all major desktop and mobile email clients. The templates also come with extensive documentation.

Email Blueprints HTML Email Templates (6 Templates, by MailChimp)

MailChimp released this collection of six bare-bones responsive templates, entitled Email Blueprints, so that they could be used as a solid starting point for designing email newsletters. The templates include some MailChimp specific template language elements, but they can be easily removed if you are not a MailChimp user.

Basic Free HTML Email Template (by MailBakery)

Designed to be used as a base for your own responsive email newsletters, Basic is a free to download template that comes with just enough CSS and a simple layout so that you can get started quickly.

Responsive Table-Based Email Template (by Phil Wareham)

This barebones template has been based on MailChimp’s Email Blueprints and the Email Boilerplate from Sean Powell. It is a responsive table-based email template that includes MailChimp merge tags, but they can be removed if you don’t need them.

Responsive Newsletter Frameworks

Foundation for Emails (11 Templates)

Previously called Ink, Foundation for Emails is a responsive email framework from ZURB that includes a flexible grid system and some simple UI elements for rapid email prototyping. Foundation for Emails also has 11 responsive email templates available.

MJML Responsive Email Framework (21 Templates)

MJML is a markup language that has been designed to reduce the pain of coding a responsive email. Its semantic syntax makes the language straightforward, while its rich standard components library shortens your development time and lightens your email codebase. MJML’s open-source engine takes care of translating the MJML you wrote into responsive HTML.

Bojler Responsive Email Framework (2 Templates)

The Bojler Framework has been built by the team at Slicejack to make it easier for you to create lightweight and responsive newsletters. The framework has been thoroughly tested on numerous email clients and devices.

The HTML Email Framework (3 Templates)

The HTML Email Framework has been developed to help you build responsive HTML email templates using pre-set grid options and simple components needed for building responsive HTML email templates. It support’s over 60+ email clients.

Maizzle Framework for Rapid Email Prototyping (5 Templates)

Powered by Tailwind CSS and a Node.js build system, Maizzle is a modern framework for developing HTML emails and newsletters. The framework doesn’t use tags like row or column; instead, you use real HTML tags that you style with Tailwind CSS’s utility classes.

The post 30 Free Responsive Email & Newsletter Templates appeared first on Speckyboy Design Magazine.

Webdesign Services

8 HTML Code Snippets for Creating Responsive Newsletter Templates

Email newsletters are vital to keeping in touch with customers. And they can also serve various purposes, from sharing the latest news to providing helpful reminders. It’s still one of the best ways to reach your audience.

One of the keys to getting conversions (clicks, sales, etc.) is having a clean, easy-to-read newsletter template. But that’s not all. Your newsletters must also be responsive to account for the variety of mobile devices out there.

All told, the goal is to craft emails that are informative and look good on every screen. Thankfully, you don’t have to look far for inspiration. That’s exactly what the simple responsive email newsletter code snippets in today’s collection are for.

These sharply-designed snippets cover a variety of potential use cases. And they’d make a great starting point for your own project. Let’s get started!

Email Template Practice by Regina Catipon

This highly-visual email template provides the perfect look for showcasing your products. The mix of photos and short passages of text will help get the point across without overwhelming users. It encourages readers to click for more details.

See the Pen Email Template Practice by Regina Catipon

Simple Abandoned Cart Email Template by Maizzle

Sticking with eCommerce, abandoned cart emails offer an opportunity to casually remind customers about what’s waiting for them. In this attractive snippet, the message is simple and provides actionable information. It also leverages the popular Tailwind CSS framework.

See the Pen Simple Abandoned Cart Email Template by Maizzle

UI Guild / Email Template by Edmundo Santos

Email clients are still quite limited when it comes to compatibility with the latest CSS techniques. But here’s proof that you can still create something unique. The use of color and typography make this template stand out from the ordinary.

See the Pen UI Guild / Email Template by Edmundo Santos

Invoice email template by chetan

Some types of email messages should be as simple as possible – invoices are one of them. Some basic branding and a clear call to action are vital. It’s a solid example of a single-purpose message that provides users with exactly what they need to know.

See the Pen Invoice email template by chetan

VOH Facebook Live by Alisa Longoria

Event invitations are a great way to drum up interest in virtual or in-person happenings. This snippet not only looks great but also serves as a guide for content strategy. Recipients will instantly know what the event is, when it takes place, and how to register. That’s how you do it!

See the Pen VOH Facebook Live by Alisa Longoria

HTML Email Template – Blog by Josh Beard

Not everyone has time to check out your blog regularly. That’s where an email newsletter can help keep readers up-to-date. What makes this template sparkle is that it allows for effective branding and breaks posts down into bite-sized chunks. It’s easy for a reader to digest in a short period of time.

See the Pen HTML Email Template – Blog by Josh Beard

BMIC Newsletter Template by Tom Markart

Here’s another approach to a news-based email. It focuses on a single article while providing additional clickable headlines below. This might be a terrific option for non-profits who want to highlight a fundraising campaign, while also listing other relevant news. In addition, the typography in this snippet makes the newsletter very easy to read.

See the Pen BMIC Newsletter Template by Tom Markart

Welcome Email Template by Jude Francis

An onboarding email is a great way to welcome new users. Once again, simple is better. This snippet uses white space and clean typography to fill newbies in on the relevant details. Colorful icons also help to make specific items stand out.

See the Pen Welcome Email Template by Jude Francis

Email Templates for Every Need

In many ways, email template design lags in terms of available features. While that may be disappointing, it’s also an opportunity. Because email clients aren’t as savvy as modern web browsers, it forces designers to strip all the bells and whistles away.

This allows us to focus more on simplicity. It’s about promoting the message within rather than wowing readers with fancy extras. That’s something each of the snippets above does quite well.

Want to explore even more template options? Check out our CodePen collection and get inspired!

The post 8 HTML Code Snippets for Creating Responsive Newsletter Templates appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=1998

Webdesign Services

8 Powerful Plugins for Integrating Social Media into WordPress

These days, no website should go without at least some basic social media integration. If you’re a content creator, enabling readers to share various services is a must. But you can also go beyond just the basic share buttons.

You might even want to automate the process of sharing that same content on your own social accounts. Then there are the methods for enabling social media login, commenting, and analytics.

If your website is powered by WordPress, adding this type of functionality couldn’t be any easier. Some plugins cover everything mentioned above and more.

Here are some outstanding free WordPress plugins that run the gamut of social media integration:

Smash Balloon Social Photo Feed

Photo galleries are a popular feature for many websites. But, if you’re already on Instagram, why reinvent the wheel?

Smash Balloon Social Photo Feed is tied to your Instagram account. Set it up and the plugin will display your feed as an attractive gallery. And it also brings back oEmbed functionality – something that had previously left WordPress core. The pro version offers advanced features, such as the ability to display hashtag feeds and image lightboxes.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

If you run an online community or membership website, users will have to fill out yet another registration form – and keep track of one more account. But with WordPress Social Login, you can enable the use of their social media accounts instead.

The plugin integrates with all the major social media networks. In addition, it works with popular WordPress plugins such as BuddyPress and WooCommerce.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

Flow-Flow Social Feed Stream

Want to combine all of your social media posts into a single feed? Flow-Flow Social Feed Stream can make it happen. It works in conjunction with the “big four”: Facebook, Instagram, Pinterest, and Twitter.

This can be a server-intensive process. That’s why the plugin utilizes AJAX and caching to speed things up. You’ll also find post-share counts, mobile compatibility, and plenty of design settings. If you’re looking for even more social networks for your feed, the pro version has you covered.

Flow-Flow Social Feed Stream

AddToAny Share Buttons

AddToAny Share Buttons is one of those plugins I find myself turning to over and over. It provides an easy-to-use and highly customizable way to add your basic social sharing icons.

Place them directly into your template or create a floating share bar. You have access to virtually every social media platform (over 100 in all), and it integrates with Google Analytics. Use the included icons or your own.

AddToAny Share Buttons

Jetpack

Indeed, with over 3 million active installs, Jetpack is one of the most widely used plugins out there. And since you may already have it installed, it’s worth mentioning that there are some powerful social media tools built right in.

Besides adding social sharing buttons, you can also automatically post your content to Facebook, Twitter, LinkedIn, and more through their Publicize feature. Your readers can also use their WordPress.com, Twitter, or Facebook accounts to comment on your posts. Who knew?

Jetpack

WPSSO

WPSSO is a plugin that works behind the scenes to make sure your WordPress website contains valid Open Graph and Schema Markup, among other things. This helps ensure that when your content is shared on social media, it’s properly read by services like Facebook, Pinterest, and Twitter. For example, this information will make sure that Twitter Cards grab the right images, etc.

Even more advanced features are available in the Pro version of the plugin.

WPSSO

Facebook for WooCommerce

If you’re running a WooCommerce shop, the free Facebook for WooCommerce plugin will help you harness the power of the popular social media network. Integration with Facebook Ads provides conversion tracking, optimization, and remarketing.

But you can also create a Facebook store that connects your WooCommerce products directly to Facebook. You can list your entire catalog on Facebook. And, when you make changes to products, they will automatically sync with the social network.

Facebook for WooCommerce

Blog2Social: Social Media Auto Post & Scheduler

Blog2Social is a suite of tools to make automatic posting of WordPress content to social media work on your terms. It connects to your Facebook, Google+, Instagram, Reddit, Twitter or other social profile and lets you customize messages, hash tags and more for each service.

It’s also great for re-sharing older posts. The Premium version features advanced scheduling, allowing for more than one concurrent profile on a specific network and more.

Blog2Social: Social Media Auto Post & Scheduler

BONUS: Scriptless Social Sharing

Minimalists and speed demons, rejoice! Scriptless Social Sharing provides an absolute barebones version of social sharing buttons. No JavaScript and no increased load times.

The plugin claims to build a set of links and can be displayed as simple icons with or without labels. Accessibility is also ensured – even if you choose not to show labels on the included icons. Frankly, I’m scared scriptless.

Scriptless Social Sharing

Becoming Fully Socialized

The ways and reasons for integrating social media into your WordPress website have grown tremendously. It’s no longer a matter of just helping users share your content (although that’s still an important piece of the puzzle).

Now, it’s also about ensuring that the social networks you care about can properly read your content. And, when users do share, you’ll want some data to see how it’s working out. Beyond that, many social network integrations add a layer of convenience for users.

With that in mind, it’s important to consider both your needs and those of visitors to your site. Choose the functionality that will make the most impact. With the plugins above, you’ll be up and running in no time.

The post 8 Powerful Plugins for Integrating Social Media into WordPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=1915