Tag Archives: website

How To Streamline WordPress Multisite Migrations With MU-Migration

Migrating a standalone WordPress site to a site network (or “multisite”) environment is a tedious and tricky endeavor, the opposite is also true. The WordPress Importer works reasonably well for smaller, simpler sites, but leaves room for improvement. It exports content, but not site configuration data such as Widget and Customizer configurations, plugins, and site settings. The Importer also struggles to handle a large amount of content. In this article, you’ll learn how to streamline this type of migration by using MU-Migration, a WP-CLI plugin.
Source: Smashing Magazine

Replacing jQuery With Vue.js: No Build Step Necessary

It’s been impossible to ignore all of the hype surrounding JavaScript frameworks lately, but they might not be the right fit for your projects. Perhaps you don’t want to set up an entire build system for some small abstractions you could feasibly do without. Perhaps moving a project over to a build system and thus, different deployment method would mean a lot of extra time and effort that you might not be able to bill to a client.
Source: Smashing Magazine

A Comprehensive Guide To Mobile App Design

(This is a sponsored article.) More than ever, people are engaging with their phones in crucial moments. The average US user spends 5 hours per day on mobile. The vast majority of that time is spent in apps and on websites.
The difference between a good app and a bad app is usually the quality of its user experience (UX). A good UX is what separates successful apps from unsuccessful ones.
Source: Smashing Magazine

Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2

When building a web application, one must consider what kind of delivery mechanism they are going to use. Let’s say we have a cross-platform application that works with real-time data; a stock market application providing ability to buy or sell stock in real time. This application is composed of widgets that bring different value to the different users.
When it comes to data delivery from the server to the client, we are limited to two general approaches: client pull or server push.
Source: Smashing Magazine

Free Adobe XD Icon Sets Made By Legendary Designers

(This is a sponsored article.) Our friends at Adobe unveiled a very special goodie at the Awwwards Conference in Berlin today. A goodie which is too good to miss: They asked three renowned designers to create exclusive free icon sets to use in Adobe XD. And, well, we are very happy to feature them here on Smashing Magazine, too.
The icon kits were created by design legend Lance Wyman, award-winning design studio Anton & Irene, and the Swiss design group Büro Destruct.
Source: Smashing Magazine

What Is Gulp?

What is Gulp? One description is that Gulp is a task runner. Another would be that it’s a toolkit for automating time-consuming tasks.

Whatever you want to call it, there’s one characteristic that remains true: automation. Let’s dig a little deeper…

What Is Gulp?

 

What Is a Task Runner?

Basically, you use Gulp to automate stuff that you would normally have to do manually, such as manually compiling Sass, manually optimizing images, manually refreshing your page in the browser, and so on. 

Well, these three actions can be consolidated into independent tasks. Then you would take those tasks and have Gulp run them automatically. That’s why tools like Gulp and Grunt are called task runners.

Piping

A very big difference between Gulp and the other task runners out there is the way it handles file operations. Gulp will essentially pass a data stream from one plugin to the next without actually writing that stream in a temporary file between these tasks. That is called piping or streaming.

If you search the web for a definition for piping, you will probably get something very technical. So I am going to try to simplify it a little bit. A Gulp workflow works with several different plugins that perform various operations on certain files. 

To give you an example, the Sass plugin will take a Sass or SCSS file and compile it into a CSS file. The Uglify plugin will take a normal JavaScript file and minify it. 

So the thing with piping is that you can take a set of files and run them through a set of plugins or through one plugin. And you would get a different type of file in the end, exactly what I said with the Sass plugin. You start with an SCSS file, and you end up with a CSS file. 

Data Streams

Normally these types of task runners will write temporary files to the disk. Well, Gulp doesn’t do that—it uses data streams. 

So the contents of that file are actually preserved in a buffer—it’s a stream of data basically. And it’s just passed on from plugin to plugin until it reaches its final destination. And in between these plugins, that stream goes through some changes. 

So what you can do, for example, is start with the SCSS files and pass them down to the Sass plugin. Now, the Sass plugin accepts SCSS files and returns CSS files. So the data stream that you get after the Sass plugin is different from the one that entered the plugin. 

And then you can do more things with that. Maybe you run them through an autoprefixer, right? So Gulp will take that data stream, and it’s going to run it through the autoprefixer plugin, which accepts CSS a file. And it also returns that CSS file, but in between it adds all the necessary vendor prefixes. So it also changes that file’s contents. 

And finally, you can minify it, for example, or you can write it to a disk. So that’s essentially how piping works. You pass data at the beginning of the stream, and you get a different type of data at the end, and in the middle you have these points which perform certain operations on that data stream.

Watch the Full Course

So hopefully you now have a basic understanding of what Gulp is. To get a clearer picture, you could take the full course, The Web Designer’s Guide to Gulp, in which we go through how Gulp works in a whole lot more detail.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 440,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.


Source: Webdesign Tuts+

A Look Ahead: Web Design Predictions for 2018

This year I wanted to give you time to settle in, to get January under your belts before peering ahead at what 2018 will hold for web design. Take a look at these seven predictions and see if your thoughts match mine!

Tradition Dictates

I’ve written quite a few of these prediction posts now–so if you’re feeling nostalgic you might want to see how my predictions from previous years stack up:

1. Grids, Everywhere

With the adoption of CSS Grid, we’ll see new and interesting ways to organize content with grids. This is a great example of the innovation of a technology that pushes forward the implications in the media itself.

CSS Grid will allow, for example, the rearrangment of content in ways that are much more dynamic than what we’ve been able to accomplish with Flexbox and certainly much more dynamic than traditional float-oriented grid systems.

As a result, designing content flows for mobile and other device sizes will be much easier to accomplish.

For companies that invest in following trends, we will likely see the traditional grid usage broken, making the grid itself a design device.

Learn CSS Grid Layout

2. World of Web Apps

The popularity of React and other component systems have made app oriented web development the new standard. Quickly expiring are the days of page design and templating; arriving are the days of components and composition.

This will also usher in a larger number of native applications, as these concepts are transferrable to the native application environment using tools like React Native.

“arriving are the days of components and composition”

More designers will use component building as a medium for expression. For a few years, we’ve seen these micro-designs growing in popularity, and they aren’t slowing down.

What you won’t see:

Complex app functionality replacing content-driven components.

While component design and composition is the future, most content-oriented sites don’t necessarily need interactivity that spans beyond dynamic display of content.

What this means is that the power of component design is more about creating flexible and reusable modules and consistent design language, and less about creating an “app-like experience”.

3. More Complex Animations and Compositions

Animation is continuing to mature on the web. While much of the animation seen thus far has either been used as flourish effects in interfaces or as flashy large transitions, as animation matures it will become a more integrated part of the media itself.

This will blur the lines of the elements we use, allowing for much more fluid transformations of content.

4. Images as Design

Web design has generally separated images from design elements. For the most part, images have been treated as a separate part of the content; a window into the real world.

In 2018 and beyond, images will be used in a more integrated way, making up part of the design. The deconstruction of images into layers and the intermingling of other element types like particles or dynamic text will bridge the gap between images and other design elements, creating new demands on web-conscious photographer positions.

5. More Illustration

Now more than ever, organizations must communicate transparency and trustworthiness. While genuine transparency is of course the basis of all trust, it is also important for online communications and design style to portray that trustworthy image.

One way to accomplish this is to establish a sense of environment and a branding “world”. This is what Geico does with their spokesperson Gecko—an alternative world where a kindly, talking Gecko is selling you insurance.

Other examples of this include Regions Bank’s green bicycle, the anti-hero Mayhem used by AllState, and Voya’s colored rabbits. You’ll notice these examples are two sectors where trust has always been key (insurance and finance).

Now, as trust becomes a much more important selling factor, these parallel worlds provide us a picture of the ethical makeup and culture a company has adopted as their own.

From Big Brands Using Illustration in 2018 by Rob Levin
From Big Brands Using Illustration in 2018 by Rob Levin

Most companies don’t have a format or resources to support a spokesperson. However, illustrative design allows for this same symbology, constructing a world to explain the company’s values.

Practically speaking, this will mean more illustrations and illustration-laden photos will show up as primary elements in design. Whether to explain a story, or to build a visual landscape of branding elements, illustrations will serve as a way for companies to break down the barriers between themselves and the people they serve.

6. Hello Fluid Shaped Gradients

As design tools and web capabilities evolve, the borders that have confined web design for so long will be broken down. Vibrant colored gradients and morphous curved shapes will make their way into designs stronger than ever before. Say “goodbye” to solid colored boxes.

Spotify has been instrumental in pushing these trends forward, and we can see this in Apple’s redesign of the App Store released in 2017.

Some gradient resources and inspiration you may find useful:

7. Interactive and Conversation-Oriented Experiences

Message apps are bigger than ever, and they aren’t going anywhere. In many ways, every application can be modeled through the concept of messaging, and now it has become even more explicit. Message bots are growing in popularity, and of course 1-to-1 human messaging is a massive industry.

More and more companies and services will adopt this same interaction model, building experiences that rely on free-form messages sent from a user. AI will assist in making these interfaces more powerful, especially as AI becomes more sophisticated and widely available as a service model.

We’ve already seen conversational interfaces become mega-companies in their own right; WhatsApp, of course, but more recently the launch of ProductHunt’s product launch landing page service, Instagram’s messaging app, and plenty more.

Expect to see super-powered customer service interfaces, ordering via chatbots, and even small customizations in your user experience in response to chat messaging interchanges.

Onwards!

Enough talk–go out there into the wide world of web design, and see what 2018 brings!

More on What Lies Ahead in 2018


Source: Webdesign Tuts+

Think Less, Embrace More: Inspiring Desktop Wallpapers For February 2018

Time flies by… The first month of the new year is already behind us, and with February just around the corner, it’s time for some fresh inspiration. So how about some wallpapers to tickle your ideas? Wallpapers that are a bit more distinctive as the ones you usually find out there? Well, we’ve got you covered.
As every month since more than nine years already, artists and designers from across the globe once again fired up their favorite illustration tools and got out their paint brushes and cameras to create charming desktop wallpapers that are sure to breathe some fresh life into your desktop.
Source: Smashing Magazine

A Comprehensive Guide To Product Design

(This is a sponsored article.) What is a product? Until recently, the term was used only in relation to something material and often found in a retail store. Nowadays, it is coming to mean digital products as well. Apps and websites are modern products.
When it comes to building great products, design is the most important “feature.” We’ve moved into the stage where product design dominates — it’s what sets companies apart and gives a real edge over competitors.
Source: Smashing Magazine

New Short Course: Customizing WordPress With Child Themes

Final product image
What You’ll Be Creating

Customizing existing WordPress themes is a great way to get the look you’re going for, but if you’re not careful, when you update your theme, you can easily lose all of the customizations you’ve made. 

In our new short course, Customizing WordPress With Child Themes, you will learn how to use child themes to customize your WordPress websites, so you can make all the changes you want without worrying about losing them.

What You’ll Learn

This short course will take you through the full process of creating a child theme from an existing WordPress theme.

Creating a child theme in WordPress

Instructor Craig Campbell will also explain topics like enqueuing styles, enqueuing multiple stylesheets, and customizing the structure of your child theme.

Watch the Introduction

 

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 420,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.


Source: Webdesign Tuts+