Category: Webdesign Services

51 git commands that you’ll ever need to get started with Git – This handy reference provides need-to-know git commands.

Repetitive Typography Animation – Check out this experimental typography animation, where words get duplicated several times.

Typographica Library – Level up your typography game with this digital bookshelf of type and lettering resources.

8 Free Maintenance & Coming Soon Plugins for WordPress – Use these free plugins to inform your visitors about ongoing maintenance or a brand-new site.

CSS Squid Game – Squid Game challenges, recreated using pure CSS.

Expandable Sections Within a CSS Grid – Learn how to create a full-width, expandable section that works beautifully with CSS Grid.

For Casual Users, Information on New WordPress Features Can Be Hard to Find – Some ideas for closing the WordPress knowledge gap.

HOCUS :FOCUS – Get into the Halloween spirit with this keyboard accessibility horror game.

Lorem.space – This placeholder image API features movie posters, fashion images and other real-world items.

2021 Design Tools Survey – Take this annual survey and share your experience with design tools.

Is It Really Worthwhile Having a Personal Portfolio? – Why a portfolio site may not be as valuable as it used to be.

Nord Design System – Get inspired by this publicly-available design system from Nordhealth.

Evaluating Clever CSS Solutions – Clever CSS tricks are nice, but usually not necessary.

Definitive edition of “How to Favicon in 2021” – A look at implementing favicons that work across devices and use cases.

Defining a Vision for Your Web Design Business – A look at some ways to better understand who you are and what you want out of web design.

uiGradients – Find your favorite gradients with this collection of copy-and-paste styles.

Compressio – Save precious bandwidth with this image compression tool.

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

Did you miss our previous article…
https://www.1clanek.info/?p=938

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Did you miss our previous article…
https://www.1clanek.info/?p=923

When it comes to creating a great piece of web-based art, the details are what stand out. Lighting and shading effects are prime examples. They can turn a flat, 2D work into an immersive 3D experience.

For quite a while, the ability to add realistic light and shade to an illustration or animation seemed like the holy grail. The technology wasn’t always there. Thus, developers had to find workarounds to approximate the effect.

Thankfully, the power of CSS and various JavaScript libraries have ushered in a new age. It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.

Today, we’ll share some CSS and JavaScript code snippets that bring these effects to life. Enjoy!

Creativity Now✨(click anywhere) by Anna the Scavenger

Text seems like a natural place to add lighting and shading. But this example takes it to a whole other level. The creative makeup of each letter and cursor-following animation makes this a true work of art. It’s akin to a 3D mobile hanging from your ceiling. Even better: click on the presentation to create an entirely new look.

See the Pen Creativity Now✨(click anywhere) by Anna the Scavenger

Photo Tear by Steve Gardner

Place your cursor on one of the upper corners of a photo, then click-and-drag downwards. You’ll notice the image ripping apart. By itself, that’s a pretty cool effect. But what really sells it is the shading as the perspective shifts. The entire process feels very much authentic.

See the Pen Photo Tear by Steve Gardner

Platonics by Liam Egan

This 3D animation has a stunning liquid effect. A piece of metal twists and morphs its way into various objects. Realistic reflections make it all the more compelling to watch, thanks to WebGL.

See the Pen Platonics by Liam Egan

Beat Burger by Steve Gardner

Nothing like performing a huge drum solo in the spotlight. What? You’ve never been in a famous band? Maybe the next best thing is to play this virtual drumkit, made from a hamburger. You get the sounds, the spotlight and even the shadows. Just don’t get any grease on your new clothes.

See the Pen Beat Burger by Steve Gardner

Monochromatic Yoyo – Pure CSS by Josetxu

Here we have a slinky-like array of pure CSS squares. Their chain-reaction animation is further enhanced by the use of, you guessed it, lighting and shading. Gradients add the illusion of depth, while drop shadow moves along with each layer of the animation.

See the Pen Monochromatic Yoyo – Pure CSS by Josetxu

Art Gallery by isladjan

This virtual art installation is certainly abstract. It features a colorful blob that morphs as your cursor moves across the screen. Rays of light add a touch of realism. However, click on the “Light OFF” button and the entire presentation transforms into a particle explosion.

See the Pen Art Gallery by isladjan

SVG lighting shader by Artem Lvov

With clever implementation, the flashlight effect can be simply amazing. Here it’s used to illuminate a rocky surface. Thanks to SVG, the image looks ultra-realistic. Both the light and perspective shift along with your cursor. It also has the benefit of being safer than walking around in the woods after dark.

See the Pen SVG lighting shader by Artem Lvov

Pacman Concept by Ivan Juarez N.

This PAC-MAN inspired snippet brings the beloved video game into the 3D age. Ghosts travel through an illuminated cube, with sharp rays of light bursting through the maze. Once again, the cursor plays a role, as you can change the scene’s perspective by moving around.

See the Pen Pacman Concept by Ivan Juarez N.

Finishing Touches That Stand Out

It used to be that you needed high-end software to create convincing lighting and shading effects. But, thanks to the advancements in web technologies, similar enhancements can be achieved through code.

The ability to leverage hardware acceleration also plays a key role. Without the power of the graphics processing unit (GPU), these advanced scenes couldn’t run with such fluid motion.

Put together, the results can be stunning. And the examples above might only be scratching the surface of this potential.

Want to check out even more amazing 3D scenes? Visit our CodePen collection to get your fill!

The post 8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=903

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

Did you miss our previous article…
https://www.1clanek.info/?p=892

I have to admit – I have a bit of a dev-crush on Advanced Custom Fields (ACF). The popular WordPress plugin allows you to build some incredibly powerful and user-friendly customizations. It takes WP’s already built-in ability to use custom fields and adds an attractive GUI for ease of use. But that’s really just scratching the surface.

Using ACF, you can create a custom UI that makes adding content a breeze. This makes for better efficiency and serves as a helping hand for non-technical users.

For example, you might dedicate a section of your website to staff member profiles. You could create custom fields for each person’s name, title, email address, photo, and biography.

From there, you add the custom fields to your theme’s template or as a custom block so that they display exactly the way you want. The result is that inputting content is quite simple, and you ensure that the data displays consistently on the front end. So yeah, that’s why I love using this plugin!

Even better is that several developers have created companion plugins that add even more cool features to ACF. Let’s have a look:

Advanced Custom Fields: Extended

Advanced Custom Fields: Extended provides a suite of enhancements for ACF Pro (yes, you need the Pro version). The plugin not only includes its own custom field types but also boosts some existing ones as well. And it works seamlessly with ACF, meaning there are no extra settings panels to configure.

Among the included fields: Button, Code Editor, Columns, Google reCAPTCHA, and more. But that’s just scratching the surface of what this plugin can do. A pro version adds even more goodies.

ACF Photo Gallery Field

ACF Photo Gallery Field offers an easy way to add WordPress photo galleries to your custom field setup. From there, theme authors can leverage PHP and CSS to create a custom look and layout for galleries in their templates. Thus, it’s aimed more at the DIY crowd than those who prefer an all-in-one solution.

ACF: Better Search

One drawback of custom fields is that their contents aren’t searchable by default. ACF: Better Search adds custom fields to the WordPress search function, ensuring users don’t miss out. An options panel allows you to choose which field types to include, along with a few other search-related tweaks.

ACF Quick Edit Fields

ACF Quick Edit Fields lets you view and edit custom field values right from the WordPress post listing. You can also take advantage of bulk edit functionality to change the values of several posts at once. This can be a huge time saver, as there’s no need to click into each post individually.

Advanced Custom Fields: Image Aspect Ratio Crop Field

ACF image fields are great because they allow content creators to easily swap out media files. However, ensuring that new images are sized correctly can be a challenge.

Image Aspect Ratio Crop Field provides a UI for users to crop their uploaded image to a specific size or aspect ratio. This helps to mitigate the risk of a client breaking your carefully-crafted look and layout.

ACF Theme Code

ACF Theme Code solves a very common issue when adding custom fields – you need to add code to your theme in order to render that data (although Shortcodes are also available for more simple implementations). This can get rather complicated even for seasoned developers.

Using this plugin, a code snippet for each field is displayed at the bottom of an ACF page that you can copy and paste into your theme. A pro version adds more features, including compatibility with several third party add-ons (some of which are in this roundup).

Advanced Custom Fields: Font Awesome Field

This plugin combines my passions for both ACF and Font Awesome icons. It adds a field that lets users choose an icon to go along with their content.

For example, I recently used this to add icons to text headings within a page. It makes for a nice way to separate content and provide context to visitors. Plus, people really like to pick out their own icons.

Advanced Custom Fields: Table Field

Here’s an easy way to add custom field data to HTML tables. What’s nice is that the non-technical user can enter data without having to worry about breaking anything. Simply drag rows or columns to reposition them. Tables can also have an optional header.

Advanced Custom Fields: Gravityforms Add-on

Both ACF and Gravity Forms are among the most flexible WordPress plugins. So it makes sense that there’s now a way to tie them together. This add-on creates a new “Forms” field type that will allow the user to select the form of their choice from a drop-down list.

Ajax Load More for Advanced Custom Fields

The Ajax Load More plugin adds infinite scrolling to various aspects of your WordPress Website. This add-on brings that same lazy loading functionality to ACF repeater, flexible content, gallery and relationship fields.

Build It Your Way

If you’re serious about developing with WordPress, then custom fields are a must-have tool. With Advanced Custom Fields, you have the ability to customize just about any content scenario imaginable. It’s one of the tools that help make WordPress a truly powerful platform.

But combining ACF with the add-ons above will bring even more convenience and flexibility to the party. It will allow you to transform a standard website into something much more dynamic.

The post 10 WordPress Plugins to Supercharge Advanced Custom Fields appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=876

Ideas: the germs that grow into those great, award-winning designs we all want to have our names attached to. We all get dozens of ideas constantly, which typically range from fairly good to amazingly good. Ideas are an abundant commodity that we all have, as creative people.

In fact, most designers have more ideas than they know what to do with. Yet, most jealously hide their ideas, paranoid that someone will “steal” them and do something that will undermine their own fame as a designer.

Today, we’re going to explore some important reasons why it’s stupid to worry about anyone potentially stealing your ideas.

Ideas Mean Nothing

First of all, success is 99% execution. The sweat and hard work that go into making a design a reality is really what matters – that’s the important part. Only 1% of success is the idea. Ideas are useless on their own. We all get them – they only mean something if you make them happen. You can have ideas that are sort of ‘blah’, and yet still dominate your field through hard work.

The good news is, people who steal others’ ideas don’t realize this. They think it’s the idea itself that is valuable. But the truth is, a mediocre idea executed well is worth a lot more than a great idea executed poorly. So, if you have good ideas, and you work hard to turn them into something, you can always generate more ideas and have success as a designer.

Telling People Gives You More Ideas

Sharing your ideas will usually foster the development of new ideas. If you’re creative, that is (which you are; why else would you be reading this?). The person you share your ideas with can give you an outside perspective and some much-needed feedback about whether your idea is actually as good as you think it is.

You can also brainstorm together with others to come up with a myriad of different ideas, each one stronger than the last.

If you only have one idea, though, that’s a bad sign. It’s important to avoid ‘one-itis’ or fixating on a single idea to the exclusion of all others. You might be completely convinced that that one, single idea is the end all, be all thing that’s going to make your career, but it probably isn’t.

Success is a culmination of the little things, the daily triumphs we make each time we complete a new project that we’re proud of. So go out there and make as much work as you can.

Provide Value to Others

When you share ideas, you help the entire design community. It’s important to give back to your fellow designers who might be struggling with the same issues you did once upon a time. I’m not saying you have to give away all of your “trade secrets” (although even that’s not as taboo as it used to be).

But talking out an idea and letting others transform it in their own unique ways can inspire you as well. You might see a completely different approach to an idea that you hadn’t considered before.

Someone Else Probably Thought of It Anyway

Exactly what it says on the tin. Ideas occur simultaneously to different people all the time, often without them even knowing it. This is why some work can look strikingly similar without the designers even having heard of each other. Great minds think alike. That’s the reason you can’t legally copyright an idea. We humans are just too similar in our thought patterns.

The key is taking an idea that other people might have already explored and doing it in your own unique way, using your experiences and skills as a designer to put an unconventional spin on it. As the saying goes, everything has been done before, but not by you.

Finally, keep in mind that ideas are rarely stolen wholesale anyway. Usually, someone takes bits and pieces of ideas from various sources (or they should, anyway). As we saw earlier, everything is a remix – not a direct copy.

Very few designers who have any pride in their abilities at all will actually want to steal your idea entirely. Those are called hacks – they’re very easy to spot, and the design community doesn’t normally tolerate them for long.

The post Stop Worrying About People Stealing Your Ideas appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=874

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.1clanek.info/?p=852

Bootstrap is the most popular CSS framework ever. It is currently used on over 22% of all sites on the web, and despite the rapid rise in popularity of front-end JavaScript frameworks, it continues to grow. And with each new version (currently v5.0), it gets better and better.

Built on a mobile-first twelve column grid system, bundled with an endless list of components, utilities and helpers, and add in the fact that it is easy to customize and extend, it is no wonder that web designers and developers continue to use and love Bootstrap. It truly is the perfect framework for quickly getting started on any type of web project.

To help make life easier for you, we have collected forty of the best free Bootstrap 5 templates for you to use on your next project. We have purposefully omitted all of those starter and barebones templates from this collection, of which there is already a multitude available on the web. Instead, we have focussed on highlighting all of those fully-featured, beautifully designed, and of course, free Bootstrap templates that you can use straight away.

All of the responsive templates come packaged with pre-styled ‘ready to use’ components, and many have come bundled with additional extras, like charting libraries, pricing tables, tabs, and much more. All of these templates will save you hours of extra work and are all waiting for you to add your content and creativity.

If you’re new to Bootstrap, the best place to learn how to use the framework is to follow the steps on the official quick start guide, and you’ll be up and running in no time.

Free Bootstrap Portfolio Templates

Style Bootstrap Template (Free)

This elegant and minimally designed free Bootstrap template comes bundles with a filterable portfolio, smooth slider, and many other useful web elements.

Lendex Bootstrap 5 Personal Portfolio Template (on Envato Elements)

Lendex is the perfect foundation for building your portfolio. Built using Bootstrap 5. It comes packaged with multiple page layouts and sections, so you can develop and design your portfolio exactly how you need it.

Kross Single-Page Portfolio Template (Free)

Kriss is a bold, single-page portfolio template that seamlessly uses smooth scrolling to link the beautifully designed sections. This Bootstrap template could be used as a portfolio, resume, or as the homepage of a small agency.

Andle Bootstrap 5 Portfolio Web Template (on Envato Elements)

Bundled with eight various page layouts and designed in an elegant modern style, Andle is an excellent Bootstrap 5 web template for creatives and design agencies.

Barts Bootstrap Portfolio Website (Free)

Built using Booststrap, Barts is a super-simple web template for those that are needing to quickly create a personal portfolio or resume site.

Creative Portfolio Bootstrap 5 Template (Free)

Built for both creatives and small businesses, this Bootstrap 5 template features a modern design and layout, and offers just enough to help get your website off the ground quickly.

Free Bootstrap Landing Page Templates

DevConf Free Bootstrap 5 Conference Template (Free)

DevConf is a free Bootstrap 5 single-page template for building the landing page of a technology or web development conference.

Qexal Bootstrap 5 Landing Page Template (on Envato Elements)

The Qexal Bootstrap 5 web template comes bundled with nine different homepage layouts and multiple other page templates, like services, pricing, blog, contact, and much more. This is the perfect foundation for launching any type of business.

Simple Landing Page Bootstrap Template (Free)

You can’t get simpler than this free Bootstrap template. It has one single purpose: to allow you to build a landing page for your new products or services quickly. As well as the landing page layout, Simple also comes with an about, blog, and testimonial page templates.

Peyso Bootstrap 5 Landing Page Template (on Envato Elements)

The beautifully designed Peyso is a Bootstrap 5 web template for startups and businesses. It comes with six different homepage layouts and three authentication pages.

DevBook Bootstrap 5 Book & eBook Landing Page Template (Free)

DevBook is a minimally designed Bootstrap 5 landing page template for promoting or selling books or ebooks. It comes with all of the components needed for converting visitors into buyers.

Agency One-Page Bootstrap 5 Template (Free)

Agency is a single-page template that has recently been updated to Bootstrap 5. It is perfect for design agencies or small businesses that need to set up a basic landing page.

AppKit Landin Page Template (Free)

Built on Bootstrap 4, AppKit is a free landing page template for helping you launch and promote any type of product or service.

Simple Bootstrap 5 Landing Page (Free)

This simple Bootstrap 5 template comes with all of the basic features you need for quickly building a landing Page for showcasing your products or apps.

Free eCommerce Bootstrap Templates

Safia Bootstrap 5 eCommerce Bootstrap Template (Free)

This bold, dark, and minimally designed Bootstrap 5 landing page templates could be used to promote or launch any type of service or product. It would be the perfect option for either a start-up or a single product eCommerce store.

Alan Kitchen Bootstrap 5 eCommerce Template (on Envato Elements)

This Bootstrap 5 eCommerce template comes bundled with multiple homepage, store page, product page, and blog page layout templates. It may be too extensive for smaller stores but you could simple pick the pages and components you need.

Majestic Bootstrap 5 eCommerce Template (Free)

Majestic is a clean Bootstrap 5 web template for eCommerce websites. It does only come with a homepage template, but if you’re an experienced web designer, you would be able to easily create a multi-page site by cleverly using the many beautifully designed homepage sections.

Shop Homepage Bootstrap 5 Template (Free)

This unstyled Bootstrap 5 template is the perfect foundation for building a modern eCommerce website. There are just enough features to help you get started quickly.

Free Business Bootstrap Templates

Promodise Bootstrap Business Template (Free)

This Bootstrap template comes bundled with multiple homepage layouts (including a single-page layout) and templates for about, services, pricing, blog, and contact pages. This flexible and easy to edit template could be used as the homepage of any business.

Zinc Bootstrap 5 Business Web Template (Free)

Zinc is a clean Bootstrap 5 web template for small businesses. It does come with various page layouts but works best as a smooth-scrolling single-page layout.

CoderDocs Bootstrap 5 Documentation Template (Free)

Built for developers, CoderDocs is an open-source Bootstrap 5 documentation template. Its modern design and simple layout make it very easy to customize to suit any project.

Small Business Bootstrap 5 Template (Free)

This is an unstyled, barebones Bootstrap template for quickly building a small business website. It has recently been updated to Bootstrap 5.

Space Business Bootstrap 5 Template (Free)

Space is a simple one-page Bootstrap 5 template for small businesses. It features a clean design and flawless, smooth scrolling between each of the homepage’s sections.

Jadoo Bootstrap 5 Travel Agency Web Template (Free)

Even though this template has been marketed as a travel agency template, it could be easily used as the homepage of many types of websites. It comes with a beautiful hero header section, sticky navigation bar, services section, smooth animated hover interactions, and much more.

Little Squirrel Bootstrap 5 Education Template (Free)

Little Squirel is a clean multi-page Bootstrap 5 template for education and learning websites. As well as a multi-section homepage layout, the free template also includes course selection, pricing, and blogging templates.

Bunzo Bootstrap 5 Blogging Template (on Envato Elements)

The Bunzo Bootstrap 5 web template comes with everything you need for building a modern blog your readers will love. The bundled layout templates give you the flexibility to create the blog or online magazine you need.

Free Bootstrap One-Page & Single-Page Templates

Swipe One-Page Bootstrap 5 Template (Free)

Swipe is a simple Bootstrap 5 template for quickly building a homepage or landing page for mobile applications. It also features a testimonial, FAQ, and downloads section.

Brushed One-Page Bootstrap Template (Free)

Brushed is a beautifully designed single-page Bootstrap template for design studios and agencies. It could also be the perfect template if you’re a creative looking to build a portfolio quickly.

Mamba One-Page Bootstrap 5 Template (Free)

Recently updated to Bootstrap 5, Mamba is a multi-purpose one-page template that has been designed to be used by various types of businesses.

Grayscale Single-Page Bootstrap 5 Template (Free)

Recently updated to Bootstrap 5, Grayscale is a multi-purpose, one-page web template that features a dark layout and smooth scrolling page animations.

Freelancer One-Page Bootstrap 5 Template (Free)

Designed using the flat design aesthetic, Freelancer is a one-page template that allows developer to quickly create a portfolio or resume site.

Free Bootstrap Multi-Purpose Templates

Scout Multi-Purpose Bootstrap Template (Free)

Due to its clean design and simple layout, Scout is a Bootstrap template that could be used on many different types of sites. Easy to edit and build upon, and comes with all of those useful web components you would expect from a professional template.

Knight One-Page Multi-Purpose Bootstrap 5 Template (Free)

Multi-purpose in design, the Knight Bootstrap 5 template is a great foundation if you want to quickly build a single-page business site.

Mountain King Multi-Purpose Template (Free)

The Mountain King Bootstrap Template comes with a clean and responsive layout and includes Typicons vector icons, masonry galleries, off-canvas menus, and smooth CSS animations.

Free Bootstrap Design Agency Templates

K!sbag Minimal Agency & Portfolio Template (Free)

K!sbag is a clean Bootstrap template that comes with six pre-built page layouts, including homepage, blog, about, contact, portfolio, and single project page. It could be used as either a personal portfolio or design agency website.

Strane Startup Agency Bootstrap 5 Template (on Envato Elements)

With its fifteen various HTML layout templates and super-simple design, Strane is the ideal Bootstrap 5 template for creating a startup or business website.

Avana Design Agency Template (Free)

Avana is a modern Bootstrap template built for either design agencies or personal portfolios. It features a smooth-scrolling homepage, a user-friendly blogging section, and it is all brought together perfectly by its beautiful typography.

Amoeba Design Agency Bootstrap 5 Template (Free)

Amoeba is a simple one-page Bootstrap 5 template for design agencies. It features an about us, services, portfolio, team, and contact us sections, that scroll seamlessly with each other.

Free Coming Soon Bootstrap Templates

Coming Sssoon Bootstrap Page Template (Free)

Ssssoon is a simple landing page template for anyone that needs to quickly create a basic coming soon page for their new website. With this template, you have a choice of having either an image or video background.

Maundy Coming Soon Bootstrap 5 Template (Free)

This simple Bootstrap 5 coming soon template features a countdown timer and an about section for adding information about your business. Just enough features to get your coming soon page online quickly.

Free Material Design Bootstrap Templates

Material Design for Bootstrap 5 (Free)

The Material Design Bootstrap 5 template allows you to use Google’s Material Design specs in your favorite front-end framework. The template includes 500+ Material UI components.

Bootplus Front-End Framework (Free)

Built on Bootstrap, Bootplus is a front-end framework for faster and easier development. Google’s UI has inspired its design.

Vintage & Nostalgic Bootstrap Templates

NES-style CSS Framework (Free)

If you’re a fan of vintage video games, then you’re going to love this free Bootstrap theme. NES.css allows you to give your websites a nostalgic 8bit-like look and feel.

Bootstrap/386 DOS Web Template (Free)

Carrying on with nostalgia, with this free Bootstrap template, you can make your web pages look like vintage DOS computers from the 1980s.

Windows 95/98 Bootstrap Template (Free)

Jumping forward from the 1980s, We’re now going to take a step forward into the 1990s. Win95.CSS is a free template that will allow you build incredible websites that look like the GUI from Windows 95 and 98.

Geo for Bootstrap (Free)

This time we’re stepping back into the early days of the web. Do you remember how websites looked back then? Not pretty at all. Geo is a free template that will allow you to recreate the way websites looked back then. Not sure why you would want to do that, but a fun project all the same.

The post The 50 Best Free Bootstrap 5 Templates & Themes in 2021 appeared first on Speckyboy Design Magazine.

Showcode – Create beautifully-styled code snippets, then export them as an image with this handy tool.

Bootstrap Icons – A free, open-source library of 1,500+ icons to use in your projects (Bootstrap or otherwise).

10 Free WordPress Plugins for Extending BuddyPress and bbPress – Turn your WordPress website into an online community with these free plugins.

React Aria – A library of React Hooks from Adobe that provides accessible UI primitives for your design system.

Developer Tools secrets that shouldn’t be secrets – Get the inside scoop on what your browser’s developer tools are capable of.

8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects – It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.

Spectrum – Add a base color and this tool will generate an entire palette for you.

A 10-step approach to inclusive branding, using the BBC as an example – A look at how the BBC put together its accessible branding.

GUI Challenges – A collection of solutions to common interface challenges.

Those Things You Must Do When Ending a Freelance Design Project – There are some important things that most designers never do when ending a freelance project. Here’s why you should make the effort.

Getting out of the Freelance Pricing Trap – Learn how to start charging what you’re truly worth.

Jam – This Chrome extension lets you give lightning-fast feedback on live websites without the frustration of screenshots.

HTML Forms Library – This library contains ready-to-use code for forms and works with popular frameworks.

CSS Buttons – Check out this open-source collection of button styles for every use case.

Despite Its Critics, jQuery Forges Ahead – The popular JavaScript library is still in active development and in use by three-quarters of the web.

FlowBite – This open-source library features 400+ web components built with Tailwind CSS.

How I made Google’s data grid scroll 10x faster with one line of CSS – This case study demonstrates the troubleshooting process and how to implement a solution.

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

Did you miss our previous article…
https://www.1clanek.info/?p=738

(Guest writer: Marvin Espino)

If there’s anything that could make a freelancer more marketable, it’s the power and allure of their website portfolios. And among freelancers, there’s none other than designers who feel the need to make their websites more visually appealing.

Because what could be a better way to showcase a designer’s experience than to present their work through beautifully crafted websites? Yes, experience matters — length and depth of expertise in particular. But a website laden with the most interactive features, unique typefaces, and punching imagery can speak better for the designer than experience alone.

So it would not be surprising to find that some portfolios of designers are that beautiful. Simplicity? They don’t know that. Extravagance and elegance? Yes indeed.

Are you looking for inspiration? Browse these portfolios and learn a thing or two about professionally designed websites.

Roby Leonardi

Roby Leonardi is a freelancer based in New York City. His website portfolio is packed with game-design inspiration. Lots of vivid colors and vector graphics embellished the space. It’s also complete with information.

There’s a short bio, as well as his recent projects and contact details. His main website is only an introduction to his actual portfolio, which is well presented through a game experience.

As you scroll, there’s a figure who resembles Roby, and he plays the game while in the background shows his background, hobbies, skills, experiences, and awards.

Yul Moreau

Yul Moreau is a digital art director based in Paris. His website speaks of his ingenuity in UX and UI design.

Upon entering the site, you’ll be greeted with immersive videos in the background. His short bio in white sans serif font is in the foreground.

Scrolling a little bit more and you’ll find well-presented projects in big pictures and short video explainers. Overall, his website is a carefully curated experience.

Robin Mastromarino

Robin Mastromarino is an interactive designer from Paris. His works vary in style. Some are high-quality photos. Others are vector and 3d images. Images are big and take up the whole space, and Robin did a great job curating them in beautiful slides.

There’s no doubt why the website has been a winning favorite from the award-recognizing website “awwward.”

Ben Mingo

Ben Mingo has worked with big brands like Nokia. He’s a freelance designer from Southern California, and he also operates under a design studio called Basic.

But his website is far from basic. It’s unique and interactive — the mouse cursor blends with the website design, where the dominating color is black and white. Projects are well-curated with lots of sample pictures. So visitors and potential clients will have fun navigating through the site.

Kuon Yagi

Kuon Yagi is a Japanese freelance web designer and mark-up engineer. His portfolio includes big, bold white letters and shades of red.

Kuon did not just typically display the pictures, but they come and go every time you scroll through, providing an animated experience.

Julie Bonnemoy

Julie is a freelance graphic designer living in Amsterdam, Netherlands. Her website boasts several projects which showcase her design ability.

But more importantly, the website design itself is visually arresting. The front page boasts animated pink bubbles dancing in the background. The colors have fade-in fade-out effects. And whenever you point the cursor to the images, it produces a rippling effect.

Étienne Godiard

The concept on Etienne Godiard’s website is simple, but the size and vividness of the picture and the fonts are what make the portfolio alluring enough.

Etienne is a visual designer based in Paris, and she specializes in technology brands. The website is laden with different colors covering the whole page. It changes depending on the project it showcases, and each project shows embossed pictures of her work samples.

Koco

KOCO is short for Kochenburger Company. Michael Kochenburger is a freelance product designer. He has an extensive work project

Black is not the usual color for a website, but KOCO nailed this unusual display. The texts and pictures are clear despite the black background. And the best part is how clean the arrangement of all his design projects makes the website so easy to navigate.

Dot Lung

Dot Lung is a social media expert. Her website is one of a kind due to the contrasting colors of purple and neon orange.

It’s not funny to look at. In fact, the difference in colors is a wow factor. Plus, the 3d shapes and images of her favorite figure, unicorn, are well placed along with the site, creating an otherworldly experience.

Sofia Papadopoulou

Sofia Papadopoulou is a visual designer and an art director. Black is the theme of her portfolio. But what makes it uniquely good is the use of shades and light. The mouse cursor acts as a flashlight that helps shine the words brighter. Plus, in the background sits an abstract moving black or white figure. There’s no doubt why this portfolio hoards website awards since 2017.

Final Thoughts

Ready to take on the challenge of making your portfolio unique? But to make your brand stand out, you must carefully consider which elements go in and which should be left out. Meaning, all content is well-curated for future clients to have a seamless viewing experience.

First, you need to integrate your personality. Your name, logo, slogan, or even colors must reflect your personality and your services. You can design a logo through logo makers for a small amount. And some of the branding designs can be crafted in free services like Canva, Visme, and Adobe. It’s where you can choose slogans and colors to your liking.

Afterward, consider placing only the most important, relevant, and the best projects — the ones that stand out. Because a portfolio is not a detailed history of your professional work, it only acts as an attractive pedestal to lure clients.

Over to you, write in the comments things you consider for your website. Do these portfolio samples inspire you? Or what factors did not sit right with your design taste? Share in the comments.

(This guest post is written by Marvin Espino for Hongkiat.com. Marvin has been writing since high school. A background in journalism marked a career in reporting and freelance writing. He has written several articles on marketing, technology, and small businesses on BrandCrowd (brandcrowd.com). Outside work, Marvin reads a lot and hoards well-written pieces for inspiration. And he sings and bakes goodies too.)

The post Showcase of 10 Talented Freelance Designers (And Their Portfolios) appeared first on Hongkiat.