Articles

10 Great WordPress Plugins in 2023

WordPress is a highly flexible content management system for website creation. A key reason for this flexibility is the wide variety of plugins available. You can add features and other improvements to your site.

The thousands of available useful WordPress plugins cover almost every feature for any type of website. Your website’s niche determines the kind of plugins you should have. There are some great WordPress plugins that every blog site needs; security, speed, SEO, and contact form, to name several.

The most effective WordPress websites create an enjoyable visitor experience. Whether you’re blogging about the latest fashion trends or selling products for your brand, you can enhance your website. Do it with one or more of these ten great WordPress plugins.

1. Brizy: The Best Website Builder for Non-techies

You might want to approach Brizy with caution because once you start using it, no other website theme builder you might try will ever seem as easy to use. Even better, you can download this WordPress website builder for non-techies (and for techies as well) for Free.

With the Brizy WordPress theme builder at your fingertips, you can –

build a brand new website or upgrade an existing one;
create dynamic templates for your blog and archive pages, headers, footers, custom pages, and more;
enjoy instant access to 150+ customer-friendly pre-made templates;
build your blog exactly as you envisioned it;
easily customize your WooCommerce shop site.

Brizy’s Theme Builder, Global Blocks, and Global Styling features are right at your fingertips, and WooCommerce integration is also included.

You can also choose the 100% White Label option if you wish to brand the Brizy Builder as your own. A Pro option is available.

Click on the banner to learn more about Brizy and download it free.

2. WpDataTables – WordPress tables plugin

While there are a host of good reasons for using wpDataTables, the main benefit is that it works with any WordPress theme, it can create a responsive table in minutes, and it requires no coding to use.

With this WordPress tables plugin, you can take advantage of a host of useful features that include –

four chart-building engines: Google Charts, Highcharts, Chart.js, and the new Apex Charts;
connecting to multiple database sources, e.g., MYSQL, MS SQL, and PostgreSQL;
fine-tuning a table or chart to make it responsive or editable and using conditional formatting to highlight critical data;
the ability to create tables from a nested JSON file;
and use dynamic single-cell shortcodes in many different options;
integration with Elementor, Divi, WPBakery, and Avada.

wpDataTables is a robust table and chart-building plugin that’s remarkably straightforward. Just click on the banner to learn more.

3. Amelia – WordPress booking plugin

Amelia is a WordPress booking plugin that can fully automate and streamline its appointment booking operations when added to a business’s WordPress site. This makes Amelia an excellent choice for beauty, healthcare, fitness, consulting, educational, and similar client-dependent businesses.

The Amelia plugin can –

manage an unlimited number of appointment bookings at multiple locations, and do so from a single platform and dashboard;
enable clients to book appointments online 24/7;
easily manage group appointments, package bookings, and events;
send notifications and reminders to clients via Email or SMS, and make payments online with PayPal, Stripe, Mollie, or Razor;
customize booking forms to match its host’s brand.

Click on the banner to find out more about how the Amelia WordPress plugin could be used to upgrade your business’s booking operations.

4. Slider Revolution – more than a WordPress slider plugin

Slider Revolution is a WordPress plugin that is more than just a slider plugin. It’s a highly popular plugin that designers rely on to create visuals they know their clients and customers will love.

Slider Revolution features –

250+ website and slider templates designed to impress;
innovative website animation effects and other features that push the boundaries of what is possible in web design.

Slider Revolution is trusted by over 9 million users around the world.

5. WordLift – AI-powered SEO

Structured data helps your website speak the language of Google, and WordLift is the most innovative way to create one.

It is an AI-powered SEO tool that:

adds structured data to your content;
creates a Knowledge Graph that makes it easier for Google to understand the relevance of pages, their relationship, and their value;
build up the expertise, authority, and trustworthiness of your website.

As a result, you get more organic traffic and audience engagement.

6. TheDock – Ship Solid Websites

TheDock is a design team-oriented WordPress theme builder that supports collaboration, speeds up website design, and helps to create sites that look sharp, perform great, and are easily maintained because of its –

custom Post Types and Custom Fields;
speedy page load;
flexible auto-adjusting layout system with UI components;
white-label builder for sharing access to TheDock if you want to;
built-in features that assure excellent security and easy maintenance.

7. Download Monitor – Best WordPress Download Manager

Download Monitor is a WordPress downloads manager that can help you streamline your business operations without having to go through the process of setting up a complicated or costly tracking solution.

With the Download Monitor plugin, you can –

track any type of file download (ZIP, PPT, XSLX, PDF, etc.);
assemble aggregated file download statistics about different file download types;
establish access rules based on user roles and download quotas.

8. Essential Grid – best WordPress grid plugin

Essential Grid is, by all accounts, the best WordPress grid plugin on the market. Essential Grid makes it ever so easy to spice up your websites by using it to create superbly engaging and professional-looking galleries.

This WordPress plugin can give you –

stunning, fully customizable boxed and full-width to full-screen grid layout options and various grid designs;
responsive designs that enable you to control grid appearance on various devices;
access to social media content.

9. LayerSlider – Best WordPress Slider Builder Plugin

LayerSlider is the best WordPress slider plugin, but it is not just for sliders. Create image galleries, popups, landing pages, animated page blocks, parallax and scroll scenes, and even full websites.

LayerSlider –

will fit your needs and is easy to use;
can spice up and add flair and style to an otherwise run-of-the-mill website;
supports any WordPress theme and page builder;
features 210+ highly customizable websites, slider, and popup templates.

10. YellowPencil – Visual CSS Editor

YellowPencil is a visual CSS editor you can use to customize any WordPress site in minutes.

Key features include –

a complete visual editing interface that allows you to redesign a page with a few clicks;
a simple interface that does not require coding;
the capability to edit any font and any color;
the capability to visually edit a design element’s size, margin, and padding properties;
the ability to undo/redo mistakes.

*******

It is almost needless to tell any WordPress user how important plugins are for a website. A good WordPress plugin has the power to boost the success of your business online by adding a range of helpful features and functionality to your website.

In this article, we have shared our expert pick of 10 great WordPress plugins for your websites in 2023.

[– This is a sponsored post on behalf of BAW media –]

Source

The post 10 Great WordPress Plugins in 2023 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

17 janvier 2023/par Service comm.

50 Best Websites of 2022

Actualités, Actualités

We’ve seen some incredible websites in 2022. There have been more than the usual number of sites with a political mission, and plenty that made us want to travel. The big design trends were brutalism, huge typography, and bold positive color. We’re looking forward to what the web will bring in 2023, but in the meantime, take a look back at the best 50 websites of 2022. Enjoy!

Justice Reskill

Justice Reskill used bright colors and positive, uplifting artwork to create a supportive platform for people who’ve been through the justice system.

Pienso

Bold type and plenty of on-scroll animation made this site for Pienso stand out back in January.

Gazelle No.1

The promotional site for Gazelle No.1 used innovative scroll-activated video to sell the electric bike.

Mekanism

Mekanism’s site was the first agency redesign to impress us in 2022. Super-polished then, super-polished now.

Redbrick

Redbrick was well ahead of the trend for brutalism with a twist when it released this site promoting its coffee.

SOS Foods

Ethical and sustainable goods were top of the sales charts in 2022, and SOS Foods did a great job capitalizing on the style.

Hartzler Dairy

Hartzler Dairy embraced its mid-20th-century branding with a nostalgia-infused site.

Engineered Floors

Even in 2022, designers are still paying mobile short shrift, but this site for Engineered Floors is excellent on mobile.

Emi Ozaki

We loved the quirkiness of Emi Ozaki’s phone-style interface for her portfolio back in February.

I Killed A Cactus

I Killed A Cactus is a beautiful 3D site designed to help people care for houseplants.

Aris Hotel

We were tempted in the direction of Crete by this stunning luxury site for Aris Hotel on the island.

Milton Textiles

Milton Textiles is a big, bold site for a product that is usually an afterthought in the interior design world.

MAAP

The site for MAAP is predictably excellent, modern, and efficient. It encapsulated the apparel brand’s values perfectly.

Garden Eight

The promotional site for Garden Eight, a digital design studio in Tokyo and Copenhagen, was suitably standout eccentric.

Circus Shanghai

Circus Shanghai used a mid-century illustration style to reference the solar system and the Chinese flag.

Normand

Normand took the bold decision to step away from the typical law firm design strategy.

SND

Designing a site for UI sound kits is challenging, but SND pulled it off perfectly with this minimal site.

Polybion

We saw lots of brutalism in 2022, and Polybion’s site was a standout example of how to make the trend work.

neueMeta

Bold block coloring added depth and interest to this portfolio site for design studio neueMeta.

Dumpling Delivery

OK, we confess we spent waaay too much time playing this dumpling delivery game from Mailchimp back in May.

Nowhere Bakery

Nowhere Bakery succeeded in making vegan, paleo, gluten-free cookies seem appealing.

Triniti

We were mesmerized by the perpetual motion video for the pan-Baltic law firm Triniti.

Kim Kniepp

Kim Kniepp’s site impressed us with interconnected navigation and a superbly coded masonry grid.

Feed The 300

Feed The 300 is one of dozens of great sites to combat Russia’s invasion of Ukraine. In this case, it was aimed at feeding zoo animals.

Icons By Menu

Icons By Menu is a stunning minimalist site that is a pleasure to browse.

Museum Of Pink Art

The Museum of Pink Art is an immersive experience celebrating the color pink. It was easy to lose hours wandering around.

BelArosa Chalet

2022 was the year of illustrations, and BelArosa Chalet’s site used them to significant effect to sell a venue still under construction.

WTFFF

Online sexual abuse and harassment are particularly appalling when directed at young people. WTFFF tackled the issue sensitively.

Pretty Damn Quick

Logistics aren’t the most engaging topic, but this friendly, illustrated site for Pretty Damn Quick grabbed us immediately.

Norwegian Soda Co.

This site for the Norwegian Soda Co. uses beautiful photography to create an engaging one-page site.

Fornasetti Profumi

Fornasetti Profumi wowed us with its long-form videos used to emphasize stillness and calm.

Laesk Kombucha

We were convinced this site for Laesk Kombucha had been produced by Wes Anderson.

Cased In Time

Single-product sites are often underwhelming, but this excellent ecommerce site bucks that trend.

DS & Durga

Eschewing the well-trod approach of flowers and pretty models, this perfume site for DS & Durga fully embraces the brutalist trend.

Daniel Spatzek

We loved the way Daniel Spatzek’s portfolio site broke all the rules and still managed to be informative and engaging.

Aro

Aro kept minimalism alive with a simple site that exudes luxury while selling a simple concept.

Think Packaging

Think Packaging took a case study approach to present its products, and it worked really well.

Steffie de Leeuw

Giant typography intertwined with botanical illustrations created a memorable site for Steffie de Leeuw.

Anna Jóna

The prelaunch teaser site for the Ana Jóna café and cinema was elegant and modern and had us eyeing a long weekend in Reykjavik.

Das Salz

More wanderlust courtesy of the fresh, enticing site for the Das Salz hotel and café.

Jono Pandolfi

This simple-to-use site for US tableware and cookware brand Jono Pandolfi sold us on hand-made ceramics.

LolaVie

We still can’t get over the fact that it took until 2022 for Jennifer Aniston to produce a haircare range.

Nathan Riley

Another big trend in 2022 was masonry-style sites, and this portfolio for Nathan Riley was one of our favorites.

Capsul’in Pro

With the excellent application of animation and careful use of color, this site for Capsul’in Pro transformed coffee pods into luxury items.

Seen

Seen is an essential site that explores themes of prejudice and racism in creative fields. It’s a strong approach to a difficult subject.

Glasfurd & Walker

Glasfurd and Walker’s superb portfolio site sets itself apart by over-extending the viewport. It’s a highly original idea.

The Other Side Of Truth

The Other Side of Truth is the standout site of 2022. It used the web expertly to present two interpretations of the facts surrounding the Russian invasion of Ukraine.

Bannach

Back in October, we fell in love with the pixel-block animation loading for the Bannach furniture brand.

Karina Sirqueira

Karina Sirqueira’s portfolio was a joy to browse through. The morphing shapes imposed simplicity on a series of beautifully presented case studies.

Joshua’s World

We were amazed by Joshua’s World, a little island that can be titled and rotated to power the little cyclist along his career.

Source

The post 50 Best Websites of 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

12 décembre 2022/par Service comm.

3 Essential Design Trends, October 2022

Actualités, Actualités

This month, it’s all about the images. Each of the design trends we spotted has to do with the images you select – or don’t select – for a project and how you use them.

Here’s what’s trending in design this month.

1. Floating Images

Sometimes you design off the grid intentionally. Other times you are designing on a grid that’s maybe not-so-obvious. One of these things is happening with the floating images website design trend.

Here, you’ll see images and image containers that don’t seem to have any direction with their placements. They may or may not include animation, that further emphasizes the floating effect.

Floating images can include:

Cutouts that aren’t anchored to anything or any container
Images that are scattered on the canvas
Images in oddball placements that don’t seem to serve a purpose
Any image or element with an obvious off-the-grid location or spacing
Images that use different orientations or lack depth for perception

The challenge with this style is that it can look cohesive and organized or can turn into a jumble of parts rather quickly. It can take a lot of user testing to find the right balance.

Repeat uses animated, outline-style images in the background that have seemingly random placements. The floating effect is further emphasized by animation and the overlapping of images and other elements.

HummingYard uses images in a container in the design but the placements don’t have obvious meaning. There’s also a floating leaf on the right side of the canvas and a call to action button that appears to be off the grid as well. Each of the elements seems almost haphazardly placed, creating a floating effect for the entire design.

Wealthsimple uses a bunch of smaller different images to create a floating cascade of elements. The three-dimensional icons almost look like they are falling down the screen. Some overlap text elements, but most do not. It all feels a little random, but the images do frame and help bring the eyes toward the center-screen text elements and call to action.

2. No Images

If floating images aren’t your thing when considering a trendy design element, maybe no images is the answer.

In this design trend, the aesthetic comes together without any true imagery. The design uses mostly text with maybe an icon, logo, or small divot. The result can be a fairly stark design, but there’s a distinct focus on the words.

This trend is not so difficult to design, but storytelling and language are vital if you want users to interact with the design. No images can sometimes be off-putting to users who are looking for something visual.

Fandes Consulting uses a super simple black and white design with a simple call to action on the homepage. The scroll cue has a nice animation that helps you get a little deeper into the design quickly. (There are also more interactive elements and images after the scroll.)

Diego also uses a simple and stark aesthetic for his website. Again, there’s a simple animation for engagement and there’s more color and some imagery beyond the scroll.

Ashfield MedComms has the most color of these no-image website examples. With a navy background and a green icon, you can feel your eyes moving more on the screen here. There’s also more to read and a scroll animation to further the engagement.

3. Merged Text and Images

The merged text and images trend is the most complex of these design examples. Here, designers are creating overlapping layers for text and image (or animated) elements on the screen so that there’s a lot to consume visually. This can be a highly engaging concept, but also one that’s difficult to develop.

This design trend can be immensely beautiful when done well. Layered elements are exciting and have a “designed” feeling to them.

The visual challenge is this: Maintaining the readability of words and letters, especially when you are thinking about the responsiveness of the website. Animation or motion can add another level of complication.

If you are planning a design like this, it is important to plan for breakpoints and even have a fallback for what to do when readability becomes a concern. The desktop and mobile aesthetics might have different feels here to ensure that you have an easy-to-understand visual theme for both.

The Most Dangerous Places for Sailors includes text and an image element (the ship) that are tucked behind an animated water layer. What’s especially nice about this design is how the water looks just as dangerous as the words convey thanks to motion and the shape and color of the graphics.

Meow overlaps text and an image in a way that almost obscured readability, but the word has enough context that it’s generally understood. If you click through, there’s a fun little animation with the cat as well.

Champoleon the Valley of Dreams tucks part of the text into the mountains for a foreground to text to background layer set that’s beautiful and unified. There are a lot of layers in this design, making it much more complex than it appears on the surface. On the scroll, the rest of the site continues this layered theme with text and images that overlap and share space.

Conclusion

Which of these image trends is most appealing to you? They are vastly different approaches to website design and can work for different projects in different ways. They also range in development complexity, from super easy to manage – no images at all – to potentially challenging – merged text and images.

Source

The post 3 Essential Design Trends, October 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

10 octobre 2022/par Service comm.

Exciting New Features in Safari 16

Actualités, Actualités

Apple has released an OS update. Packaged in with it is the latest version of Safari, 16.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

Source

The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

14 septembre 2022/par Service comm.

Popular Design News of the Week: June 27, 2022 – July 3, 2022

Actualités, Actualités

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

Advanced CSS Tricks that You Have to Know

Nnneon – SVG Generator for Futuristic-looking Glowing Shapes

The Best New CSS Features for 2022

Avatarg – Generate Beautiful Types of Avatar in One Click

I Just Spent $35,000 on a Domain. Here is Why!

10 Useful CSS Layout Generators (Grid & Flexbox)

Fffuel – A Mighty Collection of SVG Generators

Raindrop.io — All in One Bookmark Manager

My Wonderful HTML Email Workflow

3 Essential Design Trends, July 2022

My Dumbest CSS Mistakes

Source

Source de l’article sur Webdesignerdepot

3 juillet 2022/par Service comm.

Popular Design News of the Week: June 20, 2022 – June 26, 2022

Actualités, Actualités

How to Create Simple CSS Grid System

Why are You Running?

15+ VS Code Extensions for Web Developers

10 of the Biggest SEO Mistakes [Infographic]

SVG Loading Animations

AI Pixel Art Human Face

VSLook – Customize the Look of your VSCode

One Line of CSS to Add Basic Dark/light Mode

Basicons – Basic Icons for Product Design & Development

Touch-first Cursor: Round Pointers Vs Mouse Arrows

7 UX Laws You’re Probably Getting Wrong

“Google” Programmers – How One Idiot Hired a Couple More Idiots

Bunny Fonts – Privacy Respecting Drop-in Replacement for Google Fonts

Source

Source de l’article sur Webdesignerdepot

26 juin 2022/par Service comm.

A Brief History of Responsive Web Design

Actualités, Actualités

Websites haven’t always been as adaptable as they are today. For modern designers, “responsivity” is one of the most significant defining factors of a good design. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes.

However, the shift to responsive design didn’t happen overnight. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today.

Today, we’re going to take a closer look at the history of responsive web design.

Where Did Web Design Begin?

When the first websites were initially created, no one was worried about responsivity across a range of screens. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.

Even when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. However, they still found a few ways to work with different monitor and browser sizes.

Liquid Layouts

The main two layout options available to developers in the early days were fixed-width, or liquid layout.

With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. You can see an example here.

Alternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design.

Liquid layouts could adapt to different monitor resolutions and browser sizes. However, content could also overflow, and text would frequently break on smaller screens.

Resolution-Dependent Layouts

In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size. This technique became known as “resolution-dependent layouts”. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design.

The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers.

With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away.

The Rise of Mobile Subdomains

The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too.

Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications.

Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. However, at the same time, developers then needed to manage two variations of the same website.

Back at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. For instance, even simple layouts used the max-width: 100% trick for flexible images.

Fortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device.

A New Age of Responsive Web Design

Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images.

Fluid Grids

The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen.

On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space).

Flexible Images

Flexible images introduced the idea that, like content, images should be able to grow or shrink alongside the fluid grid they’re located in. As mentioned above, previously, developers used something called the “max-width” trick to enable this.

If you were holding an image in a container, then it could easily overflow, particularly if the container was responsive. However, if you set the “max-width” to 100%, the image just resizes with its parent container.

Media Queries

The idea of “media queries” referred to the CSS media queries, introduced in 2010 but not widely adopted until officially released as a W3 recommendation 2 years later. Media queries are essentially CSS rules triggered based on options like media type (print, screen, etc), and media features (height, width, etc).

Though they were simpler at the time, these queries allowed developers to essentially implement a simple kind of breakpoint – the kind of tools used in responsive design today. Breakpoints refer to when websites change their layout or style based on the browser window or device width.

Viewport Meta tags need to be used in most cases to ensure media queries work in the way today’s developers expect.

The Rise of Mobile-First Design

Since Marcotte’s introduction of Responsive Web Design, developers have been working on new ways to implement the idea as effectively as possible. Most developers now split into two categories, based on whether they consider the needs of the desktop device user first, or the needs of the mobile device user. The trend is increasingly accelerating towards the latter.

When designing a website from scratch in an age of mobile-first browsing, most developers believe that mobile-first is the best option. Mobile designs are often much simpler, and more minimalist, which matches a lot of the trends of current web design.

Taking the mobile first route means assessing the needs of the website from a mobile perspective first. You’d write your styles normally, using breakpoints once you start creating desktop and tablet layouts. Alternatively, if you took the desktop-first approach, you would need to constantly adapt it to smaller devices with your breakpoint choices.

Exploring the Future of Responsive Web Design

Responsive web design still isn’t perfect. There are countless sites out there that still fail to deliver the same incredible experience across all devices. What’s more, new challenges continue to emerge all the time, like figuring out how to design for new devices like AR headsets and smartwatches.

However, it’s fair to say we’ve come a long way since the early days of web design.

Featured image via Pexels.

Source

The post A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

1 juin 2022/par Service comm.

20 Best New Sites, June 2022

Actualités, Actualités

This month’s collection of the best new sites is a mixed bag. Positivity remains from last month’s edition, and what we’re seeing is designers being far more ambitious for the experiences they create.

We have a couple of sites helping to alleviate the damage of war, some unusual approaches to topics that are normally very dour, and some excellent portfolios to be jealous of. Enjoy!

Sarah Fatmi

Characterful illustration and desktop sideways scrolling make this portfolio site for illustrator Sarah Fatmi stand out.

Vestiaire Impact Report

Green is the new black, and fashion resale platform Vestiaire presents its green credentials in an informative and engaging way.

Houseplant

Houseplant is a collection of cannabis-related products designed by Seth Rogen and Evan Goldberg; this site is a lot classier than the average headshop.

FreshCut BarberShop

The site for FreshCut BarberShop is modern, bold, and gets its message across clearly, even if the user doesn’t read French.

Feed The 300

Feed the 300 is an appeal in aid of the animals in Ukraine’s zoos. It is very simple in concept and design, but endearing animated line drawings give it character.

Honeymoon Chicken

Luscious photography combined with surprisingly delicate illustrations makes Honeymoon Chicken very inviting.

Patachou Inc

Patachou Inc operates a group of eateries and the site does a good job of conveying both the very different individual brand identities of each establishment, and the common ethic behind all of them.

Living With OCD

Many design studios do showcase projects, and Living With OCD by designedbyla is one of the more publicly beneficial, and well-executed, examples around.

Aro

Aro is a product with a very simple concept — basically, a box to put away a phone, that also charges it — but this website does a great job of increasing the product’s desirability.

Kim Kniepp

The navigation on this site for Kim Kniepp’s design studio feels very interconnected, an effect heightened by the overlapping masonry grid.

Triniti

There is a calming, reassuring quality to the color used here for Pan-Baltic law firm Triniti. The perpetual motion style hero video adds a confident, soothing touch too.

Herezie

Creative agency Herezie uses saturation and gradual color changes to pleasing effect in this confident, assured website.

MetalColor

The color choices in this site for MetalColor, and how they are used, succeed in evoking what results the company could achieve without focusing on the less glamorous parts of the process.

Gras

Architecture and design studio Gras goes for a clean feel with an irregular grid layout and carefully curated images. The blog sidebar works well too.

Vendredi Society

Dark green and bright yellow make a strong statement in this portfolio site for brand strategists Vendredi Society.

HUB

HUB describes itself as a progressive property developer and this site does a great job of leaving behind the corporate image usually associated with property developers.

Nowhere Bakery

Nowhere Bakery makes vegan, paleo, gluten-free cookies, which don’t sound all that appealing on paper. This site manages to make them seem both really tasty and healthy.

Apotheke zur Triumphpforte

The botanical illustration style images on Apotheke zur Triumphpforte’s site help create an approachable brand identity while adding visual interest.

B!POD

A good balance of images, animation, and illustration combine to create an impactful presence for B!pod’s first product, a food vacuum storage system.

The New Exhibition

The New Exhibition is a showcase platform for Ukrainian creatives — type designers, illustrators, graphic designers, photographers, and others — whose ability to get work has been affected by war.

Source

The post 20 Best New Sites, June 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

23 mai 2022/par Service comm.

20 Best New Sites, May 2022

Actualités, Actualités

Sometimes it’s easy to feel like the world is going to pieces all around us, especially when we’re doom scrolling Twitter between news alerts every few minutes. But if we step back a little, things may not seem so bad.

On the web, we see companies and individuals taking a positive stand, making changes, and carrying on despite challenging circumstances. So in this month’s collection, we celebrate confidence and accentuate the positive, as the song says. Enjoy!

Plastic Bionic

The ‘change view’ option is well used in this portfolio site for Plasticbionic design studio. The grid view is especially pleasing.

Fabricca

Creative agency Fabricca has gone for a simple look, with some appealing illustrations and custom icons.

Normand

The color scheme and display font choice (Knockout) make a strong statement here for law firm Normand.

Dumpling Delivery

We all need some bored-on-a-slow-friday-afternoon distraction from time to time, and Mailchimp delivers the goods here.

OTR

OTR is a mental health service for young people aged 11-25. The site does a great job of feeling approachable and friendly to younger users while not being condescending, cutesy, or childish.

neueMeta

Good use of block color adds extra depth to this otherwise brutalist portfolio site for neueMeta design studio.

Vitra Chair Finder

This interactive questionnaire helps the customer identify the best chair for their needs. The animation is done well here, and a page of swirling Vitra chairs is a lovely thing to see.

Chia Studios

A good balance here of serious and fun in Chia Studio’s portfolio site, professional but friendly.

Sagmeister 123

The concept behind this limited clothing range designed by Stefan Sagmeister is that, taking the long-term view, the world is actually getting better. As such, the Sagmeister 123 site has an overall feeling of quiet positivity. And a koala.

RecPak

RecPak is a meal replacement shake designed for taking during outdoor activities. The site has an active, dynamic feel that works well to convey a sense of rugged outdoor adventure.

Alicia Moore

This site for Alicia Moore clothing brand oozes style and sophistication with soft colors and beautiful fashion photography.

Think Packaging

Think Packaging’s website has a bright, bold, fun feel. Case studies are well presented visually but keep text to a minimum.

BP&O

Brand design and packaging blog BP&O has added extended content for subscribers, and their new site is a pleasure to browse.

The Future Factory

The Future Factory is a business lead generation agency, which doesn’t sound, well, a bit dull. But, some funky animation and slightly quirky type certainly do not convey dullness.

Polybion

Polybion’s new website has a spacious feel with a rich color scheme adding a sense of confidence and brand maturity.

The Empathy Experiment

The Empathy Experiment is an interactive ‘game’ from digital agency media.monks that examines empathy and inclusivity in the workplace while at the same time showcasing some technical skills.

Belle Epoque

The opening scroll on Belle Epoque’s site is really pleasing, and the random floating shapes are intriguing.

Richard Ekwonye

Richard Ekwonye’s portfolio site is clean and straightforward. Skills are on display, but without intruding on the content.

SND

SND has created UI sound kits. The site is as simple as it could possibly be, and yet it is impossible not to investigate all the sounds and start imagining where you could use them.

KMZ Industries

Regular readers will know how much we like technical/industrial-made-interesting sites, and this one for KMZ grain storage systems is a perfect example.

Source

The post 20 Best New Sites, May 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

25 avril 2022/par Service comm.

15 Best CSS Frameworks: Professional Bootstrap and Foundation Alternatives

Actualités, Actualités

Whether you are a CSS expert or a front-end beginner, using the right CSS framework is crucial for your daily tasks. There are numerous frameworks whose ultimate goal is the same: helping developers target multiple screens, in the simplest possible way.

This is why Bootstrap is by far the most popular framework on the market. All developers have heard of Bootstrap, and more than 80% of them say they are happy using it.

But that doesn’t mean that there aren’t some great alternatives if you’re willing to shop around. Bootstrap won’t be top dog forever, and there are numerous new lightweight and powerful CSS frameworks.

If you are bored of coding with Bootstrap and Foundation and tired of using complex CSS rules, this list is for you.

From frameworks that take a pure CSS approach to minimalist frameworks with fully customizable themes, nothing is left out. Let’s get started…

1. Bulma

Bulma is one of the most popular alternatives to Bootstrap and Foundation. It is an entirely free, open-source CSS framework that does not have a steep learning curve. No prior CSS knowledge is required to use Bulma.

When you add the variety of colors, responsiveness, and clean flexbox-based grid it offers, it’s no wonder Bulma is becoming more popular every day. Bulma is a well-documented framework that you should definitely try out.

2. UIkit

If you’re looking for a lightweight yet powerful CSS framework that can be wired with HTML and JS, Ulkit is for you. It fully supports right to left languages and has one of the best icon libraries out there.

Keep in mind that Ulkit is also easy to use. All in all, Ulkit is an excellent Bootstrap alternative that is perfect for designing web layouts for desktop and mobile screens.

3. HTML5 Boilerplate

Even though Bootstrap is relatively easy to learn, it is much more than just a front-end template. So what if you need a fully compatible JavaScript, CSS3, and HTML5 template? In this case, HTML5 Boilerplate is a good choice.

Of course, since it’s a template, this framework does not include layouts and component modules. However, if you need a reliable CSS template that offers extensive documentation, HTML5 Boilerplate is a great solution.

4. Metro UI

Metro UI is one of the most flexible CSS frameworks on the market. This front-end framework can be easily combined with JavaScript-based frameworks like Angular, React, etc.

We found Metro UI to be an excellent open-source CSS framework and a great alternative to Foundation during our testing.

5. Skeleton

As a two-in-one solution, Skeleton quickly made it on our list. This is both a boilerplate and a comprehensive CSS framework. We enjoyed customizing its 12-column grid during our testing, and we found out that it has virtually no learning curve.

The automatic width resizing works like a charm, and the syntax is fully responsive. This is why we consider Skeleton to be an excellent Bootstrap alternative.

6. Bootflat

If you are looking for a quick way to create a web app, Bootflat is the framework you need. Bootflat’s components are built with CSS3 and HTML5, and the framework offers a comprehensive panel of color schemes for you to choose from.

Bootflat looks and acts like a simplified version of Bootstrap. However, that doesn’t mean that this CSS framework isn’t scalable and robust. On the contrary, you can fully manipulate the size and performance of the web designs you create.

7. Semantic UI

If you exclude the fact that Semantic UI doesn’t have the utility classes Bootstrap offers, it is a comprehensive CSS framework that you should try. The best Semantic feature allows you to write HTML code without using BEM methodologies.

So, if you need a framework that will help you write readable codes in minutes, Semantic is the one for you.

8. Susy

We know that most developers nowadays use flexbox and native CSS grids. Still, there’s nothing better than Susy if you need a grid system that supports legacy browsers. Although Susy is no longer maintained, it is one of the most flexible old-school grid systems.

9. Materialize

Like most CSS frameworks on this list, Materialize is built with HTML, CSS, and JavaScript.

It’s specifically designed to help you develop faster using a standard template and customizable components. As the name suggests, Materialize is based on the basic principles of Material Design.

10. Kickstart

If you need a lightweight alternative to Bootstrap, Kickstart is the CSS library for you. A great thing about Kickstart is that it doesn’t require jQuery which makes it very small.

Of course, like a pruned version of Bootstrap, this CSS framework isn’t as robust. Still, this is an excellent choice for those who need a UI framework and a comprehensive boilerplate library.

11. Tailwind CSS

With a fast styling process and the ultimate freedom it provides, Tailwind is extremely popular among some developers. This is a utility-first, front-end framework that is fully responsive and stable.

Unfortunately, Tailwind CSS requires some time to learn, and it is not the most flexible choice when it comes to revising CSS rules.

12. Pure CSS

Yahoo specially developed Pure CSS to help developers create fully responsive web pages.

We consider Pure a minimalist alternative to Bootstrap that offers every module a beginner needs (navigation menu, grid, tables, etc.).

13. PowertoCSS

PowertoCSS is on this list for a good reason. This is an ultimately responsive CSS framework that you can use to create grids and scale web apps on any platform.

PowertoCSS is based on Modular Architecture and Scalable when it comes to design.

Unlike other CSS frameworks, PowertoCSS is very lightweight, beginner-friendly, and comes with detailed documentation.

The coding process is simple, and we found the learning curve to be shallow.

14. Spectre

Spectre is one of the most flexible and lightweight CSS frameworks we tested for this article.

It has a modern (flexbox) layout system; it is fully customizable and allows you to get quick, attractive results.

15. Primer

Our last suggestion is Primer, a great open-source CSS framework.

To be precise, Primer is more of a design system that lets you use a BEM CSS framework and create your projects quickly and efficiently.

So, even though Primer is not a CSS framework in the strict sense, it will help you use React and Figma components, icons, and advanced documentation to unify all of that.

Wrap Up

Choosing the right CSS framework is not easy. It all depends on your personal needs and preferences as a front-end developer.

Although Bootstrap and Foundation are still the most popular frameworks, many of the alternatives presented above will continue to gain popularity for good reasons.

Source

The post 15 Best CSS Frameworks: Professional Bootstrap and Foundation Alternatives first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

8 avril 2022/par Service comm.