Weekly News for Designers № 617

The start of a new era for Responsive Web Design – A look at the new techniques for creating responsive layouts with CSS.
Example from The start of a new era for Responsive Web Design

Designing our new company brand: Meta – You may have heard a little something about Facebook’s rebrand. Here’s the story behind its design.
Example from Designing our new company brand: Meta

Material Design 3 – Check out the latest version of Google’s design language.
Example from Material Design 3

Building an effective Image Component – How an intelligent image component can improve optimization and performance.
Example from Building an effective Image Component

Behind the Scenes: Having a Singular Focus for Your Web Design Business – The risks, benefits, and challenges of having a singular focus.
Example from Behind the Scenes: Having a Singular Focus for Your Web Design Business

Cleanup.pictures – Upload your image and this online tool will remove objects, text or defects.
Example from Cleanup.pictures

Anron Icons – Download this free icon set for Figma, with 480 icons available in 5 different styles.
Example from Anron Icons

An Introduction to the WordPress theme.json File – Explore this all-encompassing place for styling the block editor on both the front and back ends.
Example from An Introduction to the WordPress theme.json File

A Deep Dive Into object-fit And background-size In CSS – Get the rundown of these CSS properties, along with practical use cases.
Example from A Deep Dive Into object-fit And background-size In CSS

Web Performance Metrics Cheatsheet – This quick guide will fill you in on the most important aspects of site performance.
Example from Web Performance Metrics Cheatsheet

Is There a Perfect Solution to a Design Problem? – Why your “perfect” design doesn’t need to appeal to everyone.
Example from Is There a Perfect Solution to a Design Problem?

A Small Guide for Naming Stuff in Front-end Code – Guidelines for naming items in a descriptive and effective manner.
Example from A Small Guide for Naming Stuff in Front-end Code

Fontfacer – Upload your font files and this tool will provide you with the relevant CSS.
Example from Fontfacer

terminal.sexy – A tool for designing, editing and sharing terminal color schemes.
Example from terminal.sexy

The Top Add-Ons for the Gravity Forms WordPress Plugin – Enhance the popular WordPress forms plugin with these high-powered add-ons.
Example from The Top Add-Ons for the Gravity Forms WordPress Plugin

IconKitchen – Create your own custom app icons with this online generator.
Example from IconKitchen

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

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

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

Exploring Web Development History with Richard MacManus

The technologies web designers use today all had to start somewhere. The story of how they came to be is something that Richard MacManus wants to share with the world.

Located in New Zealand, MacManus has been involved in the industry since the 1990s. A writer and technology journalist, his latest project, Web Development History, is all about chronicling the history of the internet from a developer’s perspective.

Inside, you’ll find everything from web precursors dating back to the 1960s to the birth of JavaScript and beyond. They have all played a part in getting us to the present day.

I spoke with MacManus about the project, his beginnings in web design, and thoughts on the future of the web. His answers are lightly-edited for brevity/clarity.

How and when did you get started in web design?

I started out in the late 90s as first an “information developer” (a fancy name for a technical writer) and then a “webmaster” (not sure if this term is even used anymore!). I went on to be a “Web Manager” for a couple of New Zealand companies in the early 2000s, before starting up my tech blog ReadWriteWeb (RWW) in 2003.

I was a true web child of the 90s, in that I (am) self-taught (when it comes to) all the main web technologies. So, in those webmaster / web manager roles, I did a mix of web design, site architecture, and management, and even dabbled a bit in development. But it was when I began writing about the latest in web technology with RWW that I really found my niche.

What inspired you to start the Web Development History project?

A couple of reasons. Firstly, I’d read a lot of books and articles about the history of the web and the internet, but almost all of them (and certainly all the books) come at the subject from a business or cultural perspective.

I wanted to tackle web history from a technical point of view, and explain how the World Wide Web was actually developed and how it evolved — in a nuts-and-bolts way.

The second main reason is that, even though I spent nearly a decade covering the web technology industry with my tech blog turned media business RWW, I hadn’t necessarily delved deep into the technical foundations of the web during that time.

RWW began as one person’s exploration of the new web technologies coming out of Silicon Valley post-Dot Com boom and bust, but as RWW grew and became a proper business, it focused more on the revolutionary “Web 2.0” products and high-level trends that came along (e.g., social networking, cloud computing, the smartphone revolution, etc.).

So, with Web Development History (WDH), I wanted to return to my roots — as both a webmaster and a developer-focused blogger in the early days of RWW. My goal was to revisit the previous eras of the web and really dig into the technical foundations, to figure out how it evolved into this massive beast it is today.

Thinking of someone just coming into the industry – how can they benefit from learning its history?

I think it’s crucial for new web developers and designers to understand the foundations of what they’re building on — especially in this current era of abstracted frameworks (for JavaScript, CSS, etc.). The low-code tools available today also make it easier for people to build on the web, without necessarily understanding it.

So WDH is, I hope, a resource for people to learn the architecture of the web, how it began and then evolved over time, the most influential technologies, how web standards came to be, and so on.

Also, I think the industry is experiencing a renaissance of the web platform currently, with web standards and browser technology both at the cutting edge again — leading to Progressive Web Apps, cross-platform tools like Flutter, web components, and so on.

I cover all these new technologies, by the way, in my weekly column for The New Stack — so I see WDH as the perfect complement to the forward-looking column I also write. You have to understand the past first, before you build for the future.

Do you have a favorite facet or technology from the early web?

I love that Tim Berners-Lee invented the web browser as a read/write tool. It was an editor as well as a browser. The editing functionality, unfortunately, got stripped away as first Mosaic and then Netscape got popular, so the first era of the mainstream web (roughly 1993-2002) was ‘read-only.’

We had a term in the 90s, “brochureware,” that explains what many websites were — an extension of magazines, but they didn’t take advantage of the interactive functionality that Berners-Lee built into the web’s foundations.

Now with that said, as I’ve been writing WDH over this past year, I’ve looked more closely at technologies like CGI scripts and PHP that were being used to build early web apps in the 90s.

So, there was a lot of innovation happening with web apps. But writing to the web wasn’t something ordinary people could easily do from their browser. That was what Web 2.0 brought to the web, and indeed that was the thesis of my blog RWW.

You have a number of articles that cover the early browser wars. How do you think those events have impacted the web we use today?

It was a war that Microsoft decisively won by 1999, which unfortunately led to a period of low browser innovation — which lasted until Google Chrome came along. But there were a couple of major things that happened in the 90s in the first browser war, which influenced the direction of the web.

Firstly, Netscape introduced JavaScript in its browser in 1995 — which Microsoft promptly copied (jScript). Secondly, and perhaps less appreciated, was that Microsoft was the main influence behind the DOM (Document Object Model).

As I noted in one post, when Internet Explorer 4 was released in October 1997, it was the first browser to demonstrate a full-page object model — basically a prototype of the W3C DOM spec that would be released a year later.

So, both of those innovations, JavaScript and DOM, I think had major ramifications for our current highly interactive web.

The Web Development History home page.

You mentioned that the ultimate goal for this project is to publish a book. How will you determine when there’s enough content to go forward with it?

I’m still working out what might be the format for a book based on the blog. It may make sense to narrow the scope and choose a certain period (say, the 1990s) and develop a book proposal based on a particular theme. Or I might go all-in and write a full web development history.

So, I haven’t yet decided. Plus, it’ll also depend on what is attractive to book agents and publishers.

In terms of the blog, I do know that in 2022 I will be focusing on the 2000s — I’ve nicknamed this “season 2.” I may also change up the style of the posts; perhaps injecting more of my own personal story, since I chronicled this period for RWW and visited Silicon Valley a number of times. So, we’ll see how the blog evolves next year and whether I can continue to grow the audience.

Finally, as someone who has closely studied the web’s history, how do expect it to evolve over the next few years?

It’s an exciting inflexion point again. On the one hand, there are a bunch of very promising web platform technologies that I’ve been writing about for The New Stack. There are also potentially groundbreaking new technologies emerging — who knows how this metaverse talk will pan out, for example.

There’s also crypto and “Web3,” which I’m currently skeptical about — it’s just as likely to end in a Dot Com-like crash than become the next big thing. Again, time will tell, but I’m monitoring it.

Regardless of how it all shakes out, I think the web’s foundation is in a great place — web standards are healthy, browsers are innovating (although it’d be great if Apple got its act together and allowed other browser engines onto iOS), and there is a high level of functionality in web apps today.

I think there’s room for a move back to less complexity in the web frameworks of today, perhaps using things like web components more. But overall, I expect the web to continue to delight and surprise me over the next several years!


A big thank-you to Richard MacManus for taking time out speak with me! Be sure to check out Web Development History and connect with Richard on Twitter.

The post Exploring Web Development History with Richard MacManus appeared first on Speckyboy Design Magazine.

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

25 Free Bootstrap Dashboard & Admin Templates

In the past, the admin section of a web application tended to be built solely for functionality, with not much, if any at all, consideration for design. Thankfully things have changed. Powerful functionality and beautiful design, especially over the last few years, have been merging nicely. And with the massive rise in popularity of the Bootstrap framework, creating a beautiful and functional admin panel has never been easier.

Why would you choose to use Bootstrap at all? Well, with Bootstrap, you know exactly what you are getting. It is relatively easy to customize mobile-first framework that includes ready-made design patterns and comes packaged with a vast library of components and widgets. And perhaps more importantly, your Bootstrap build will look consistent across all screen resolutions and platforms. So it does make sense to build the dashboard or the admin panel of your web application with something that you know works well.

All of the free Bootstrap (mostly version 5) admin and dashboard templates and themes below have been pre-built to be used as a complete solution so that you can rapidly create the front-end dashboard of your web app. As well as all of Bootstrap’s handy collection of widgets, they all include many extra addons, plugins, and features (plugins for charts and graphs, calendars, file managers, and so much more). Everything you will ever need for building professional and responsive dashboards.

And on top of all of those features, these free templates have all been beautifully designed as well.

Free Bootstrap 5 Admin Templates

Star Admin 2 for Bootstrap 5 (Free)

Star Admin 2 is the new and much-improved version of the hugely popular Star Admin Pro. Now, powered by Bootstrap 5, the free template comes bundled with a multitude of layouts, widgets, components, and so much more.

Synadmin Bootstrap 5 Admin Template (Envato Elements)

The Bootstrap 5 powered Synadmin dashboard template comes bundled with over sixty HTML page templates, a huge collection of UI components (including multiple charting options), making it flexible enough to be used on any type of project.

Synadmin Bootstrap 5 Admin UI Kit

AdminWrap Bootstrap 5 (Free)

The simple and beautifully designed AdminWrap dashboard template comes with everything you would ever need for building powerful, user-friendly web applications.

AdminWrap Bootstrap Lite Bootstrap 5 Admin Dashboard Template Kit UI Free

Matrix Bootstrap 5 Admin Template (Free)

Powered by Bootstrap 5, the Matrix Admin is a fairly basic dashboard template but does offer everything you need to get the backend of your web application up and running quickly.

Matrix Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

NobleUI Bootstrap 5 Admin Template (Envato Elements)

NobleUI is a lightweight and beautifully designed Bootstrap 5 powered dashboard template that includes a huge collection of reusable UI components and widgets, including charting options (ApexChart, ChartJs, Flot, Sparkline, and more).

NobleUI Bootstrap 5 Admin UI Kit

Xtreme Lite Bootstrap 5 Admin Template (Free)

The minimally designed Xtreme Admin is a Bootstrap 5 powered dashboard template that will allow you to display, track and manage all of your data in an efficient way. There is a Pro version available, but Lite does give you everything you need to get started quickly.

Xtreme Bootstrap Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

Portal Free Bootstrap 5 Admin Dashboard (Free)

Portal is a clean and modern Bootstrap 5 dashboard template that offers modularly written code, making it much easier for you to edit and change the template to suit the needs of your application.

Portal  Bootstrap 5 Admin Dashboard Template Kit UI Free

Rocker Bootstrap 5 Admin Template (Envato Elements)

Rocker is a well-documented Bootstrap 5 admin template that comes bundled with over seventy pre-built page templates, and also includes color, light, and dark versions.

Rocker Dashboard Bootstrap 5 Admin UI Kit

Adminator Bootstrap 5 Admin Dashboard Template (Free)

The Adminator is a free Bootstrap 5 Admin Template that boasts a clean and simplistic design and offers a vast collection of copy and paste code snippets, utilities, custom pages, components, and widgets.

Adminator Bootstrap 5 Free Admin Dashboard Template Kit UI Free

Material Dashboard 2 Free Bootstrap 5 Admin Template (Free)

This free Bootstrap 5 template has been heavily inspired by the design aesthetics of Google’s Material Design. It comes with 60 pre-designed components and a multitude of pre-built design blocks making it a fantastic starting point for your next dashboard design.

Material Dashboard Free Bootstrap 5 Free Admin Template

Vue Material Design Bootstrap 5 Admin UI Kit (Free)

The Vue Material Design is a Bootstrap-based admin UI kit. It includes more than 500 elements, hundreds of icons, and plenty of templates and tutorials to help you design the perfect Material-inspired admin dashboard.

Vue Material Design Bootstrap 5 Admin UI Kit Free

Free Bootstrap 4 Admin Templates

Vibe – Free Bootstrap 4 Dashboard Template (Free)

Built with Bootstrap 4, Vibe is a free React.js admin template that offers a clean interface and plenty of UI elements and components to help you create a beautiful dashboard for your application. You will find a few helpful starter page templates as well.

Vibe Free Bootstrap 4 Dashboard Template

Amanda Responsive Bootstrap 4 Admin Template (on Envato Elements)

The Amanda Bootstrap 4 admin dashboard template features a beautifully designed corporate look and feel. It comes with a collection of starter page templates, and various charts widgets, email templates, toggle switches, time pickers, and many other components, elements and plugins.

Amanda Bootstrap 5 Admin UI Kit Dashboard Responsive

Now UI Free Bootstrap 4 Dashboard Template (Free)

Now UI is a Bootstrap 4 admin dashboard with a beautiful color scheme, elegant typography, a vast collection of pre-designed components and widgets, and seven pre-built HTML page templates.

Now UI Bootstrap 4 Dashboard Template Free Kit

Flatkit Bootstrap 4 Admin Template (on Envato Elements)

If you love flat design, you will love this Bootstrap admin template. It comes with six prebuilt layout templates and all the necessary UI elements and components to create the admin dashboard of your web application.

Flatkit Bootstrap 5 Admin UI Kit Dashboard Responsive

CoreUI Bootstrap 4 Admin Template (Free)

CoreUi is a free Bootstrap 4 admin template with a simple and modern color scheme. It comes with all of the components you would expect from Bootstrap, such as breadcrumbs, accordions, buttons, code editors, and more.

CoreUI Bootstrap Admin Template Kit UI Free

Gentelella – Free Bootstrap 4 Admin Template (Free)

Gentelella is an elegant admin template that features three dashboard variations and a collection of starter page templates. You will also find various UI elements, forms, tables, multi-level menus, a set of useful extra pages, and more.

Gentelella Free Bootstrap Admin Template

Light Bootstrap 4 Dashboard Template (Free)

The Light dashboard template has a spacious and minimal design. You will find tables, user profiles, icons, and Google Maps integration. The template is fully responsive and has been designed so that you can get the dashboard of your application up and running quickly.

Light Bootstrap Dashboard Template

AdminLTE – Free Bootstrap 4 Admin Template (Free)

The lightweight AdminLTE Bootstrap 4 admin template comes with six pre-designed skins, and includes a multitude of components, plugins, and page templates to help you quickly create a dashboard for your web application.

AdminLTE Free Bootstrap Admin Template

Free Bootstrap 3 Admin Templates

Bootflat Admin – Flat UI Bootstrap 3 Admin Dashboard (Free)

Bootflat Admin is an open source flat dashboard template. It’s based on Bootstrap 3 and it comes equipped with numerous templates and UI elements that will help you design a beautiful and colorful admin interface.

Bootflat Admin Flat UI Bootstrap Admin Dashboard Kit UI Free

Bracket Bootstrap 3 Admin (on Envato Elements)

Bracket Bootstrap Admin is an admin and dashboard template with a corporate look and feel. It comes with starter pages as well as various charts, email templates, toggle switches, time pickers, and many other elements.

Bracket Bootstrap Admin

Startmin – Open Source Admin Dashboard Template for Bootstrap 3 (Free)

Startmin is an open source admin dashboard template based on Bootstrap 3. It features a modern design and comes with charts, tables, form elements, and a useful set of starter pages.

Startmin Open Source Admin Dashboard Template for Bootstrap Kit UI Free

Admin.io Bootstrap 3 Admin Template (on Envato Elements)

If you’re looking for a Bootstrap 3 admin dashboard template with material design, look no further than Admin.io. This dashboard template also includes vector maps, flowcharts and graphs, icons and styling.

Admin.io Bootstrap Admin

Paper Dashboard – Free Bootstrap 3 Admin Template (Free)

Paper dashboard is a clean and minimal admin template based on Bootstrap 3. The template comes with 16 different components, 4 customized plugins, and 4 example page templates.

Paper Dashboard Kit UI Free Bootstrap Admin Template

SB Admin 2 – The Original Free Bootstrap 3 Admin Theme (Free)

The SB Admin 2 dashboard template comes with an elegant, corporate design. It comes packaged with tons of UI elements, various charts, forms, tables, and a set of demo pages that you can use as a starting point.

Kit UI Free SB Admin 2 Original Bootstrap Admin Theme

Lumino Free Bootstrap Admin Template (Free)

The Bootstrap 3 Lumino dashboard template has a fresh and clean design. It comes with dozens of widgets including forms, charts, UI Elements, panels, alerts, tooltips, menus, and much more.

Lumino Free Bootstrap Admin Template

Klorofil Free Bootstrap 3 Admin Template (Free)

The Klorofil admin template features a clean and professional design. It comes loaded with all the necessary page templates, UI elements, and components for creating any type of dashboard design.

Klorofil Free Clean Bootstrap Admin Template

Free Bootstrap 2 Admin Templates

RDash Bootstrap 2 AngularJS Admin Dashboard (Free)

RDash Angular has been built on Bootstrap 3 and Angular JS. It comes with a nice set of UI elements, tables, and a responsive, colorful design. It’s a great choice if you need a straightforward, simple interface.

RDash Angular Bootstrap 2 AngularJS Admin Dashboard Kit UI Free

Clean Dashboard Responsive Bootstrap 2 UI Theme (Free)

As the name suggests, the Clean Dashboard template has a clean design. The Bootstrap 2 dashboard template includes several unique UI elements that aren’t usually included in the Bootstrap package.

Clean Dashboard Responsive Bootstrap 2 Kit UI Free Theme

The post 25 Free Bootstrap Dashboard & Admin Templates appeared first on Speckyboy Design Magazine.