Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 18 2019

15 Mind-bending Three.js JavaScript Experiments

Abstracting WordPress Code To Reuse With Other CMSs: Concepts (Part 1)

Abstracting WordPress Code To Reuse With Other CMSs: Concepts (Part 1)

Abstracting WordPress Code To Reuse With Other CMSs: Concepts (Part 1)

Leonardo Losoviz

Making code that is agnostic of the CMS or framework has several benefits. For instance, through its new content editor Gutenberg, WordPress enables to code components which can be used for other CMSs and frameworks too, such as for Drupal and for Laravel. However, Gutenberg’s emphasis on re-utilization of code is focused on the client-side code of the component (JavaScript and CSS); concerning the component’s backend code (such as the provision of APIs that feed data to the component) there is no pre-established consideration.

Since these CMSs and frameworks (WordPress, Drupal, Laravel) all run on PHP, making their PHP code re-usable too will make it easier to run our components on all these different platforms. As another example, if we ever decide to replace our CMS with another one (as has recently happened that many people decried WordPress after its introduction of Gutenberg), having the application code be agnostic from the CMS simplifies matters: The more CMS-agnostic our application code is, the less effort will be required to port it to other platforms.

Starting with application code built for a specific CMS, the process of transforming it to CMS-agnostic is what, in this article, I will call “abstracting code”. The more abstract the code is, the more it can be re-used to work with whichever CMS.

Making the application completely CMS-agnostic is very tough though — even possibly impossible — since sooner or later it will need to depend on the specific CMS’s opinionatedness. Then, instead of attempting to achieve 100% code reusability, our goal must simply be to maximize the amount of code that is CMS-agnostic to make it reusable across different CMSs or frameworks (for the context of this article, these 2 terms will be used interchangeably). Then, migrating the application to a different framework will be not without pain, but at least it will be as painless as possible.

The solution to this challenge concerns the architecture of our application: We must keep the core of the application cleanly decoupled from the specifics of the underlying framework, by coding against interfaces instead of implementations. Doing so will grant additional benefits to our codebase: We can then focus our attention almost exclusively on the business logic (which is the real essence and purpose of the application), causing the code to become more understandable and less muddled with the limitations imposed by the particular CMS.

This article is composed of 2 parts: In this first part we will conceptualize and design the solution for abstracting the code from a WordPress site, and on the 2nd part we will implement it. The objective shall be to keep the code ready to be used with Symfony components, Laravel framework, and October CMS.

Code Against Interfaces, Rely On Composer, Benefit From Dependency Injection

The design of our architecture will be based on the following pillars:

  1. Code against interfaces, not implementations.
  2. Create packages, distribute them through Composer.
  3. Dependency Injection to glue all parts together.

Let’s analyze them one by one.

Code Against Interfaces, Not Implementations

Coding against interfaces is the practice of interacting with a certain piece of code through a contract. A contract, which is set up through an interface from our programming language (PHP in our case since we are dealing with WordPress), establishes the intent of certain functionality, by explicitly stating what functions are available, what inputs are expected for each function, and what each function will return, and it is not concerned with how the functionality must be implemented. Then, our application can be cleanly decoupled from a specific implementation, not needing to know how its internals work, and being able to change to another implementation at any time without having to drastically change code. For instance, our application can store data by interacting with an interface called DataStoreInterface instead of any of its implementations, such as instances of classes DatabaseDataStore or FilesystemDataStore.

In the context of WordPress, this implies that — by the end of the abstraction — no WordPress code will be referenced directly, and WordPress itself will simply be a service provider for all the functions that our application needs. As a consequence, we must consider WordPress as a dependency of the application, and not as the application itself.

Contracts and their implementations can be added to packages distributed through Composer and glued together into the application through dependency injection which are the items we will analyze next.

Create Packages, Distribute Them Through Composer

Remember this: Composer is your friend! This tool, a package manager for PHP, allows any PHP application to easily retrieve packages (i.e. code) from any repository and install them as dependencies.

Note: I have already described how we can use Composer together with WordPress in a previous article I wrote earlier this year.

Composer is itself CMS-agnostic, so it can be used for building any PHP application. Packages distributed through Composer, though, may be CMS-agnostic or not. Therefore, our application should depend on CMS-agnostic packages (which will work for any CMS) as much as possible, and when not possible, depend on the corresponding package that works for our specific CMS.

This strategy can be used to code against contracts, as explained earlier on. The packages for our application can be divided into two types: CMS-agnostic and CMS-specific ones. The CMS-agnostic package will contain all the contracts and all generic code, and the application will exclusively interact with these packages. For each CMS-agnostic package containing contracts, we must also create a CMS-specific package containing the implementation of the contracts for the required CMS, which is set into the application by means of dependency injection (which we’ll analyze below).

For example, to implement an API to retrieve posts, we create a CMS-agnostic package called “Posts”, with contract PostAPIInterface containing function getPosts, like this:

interface PostAPIInterface
  public function getPosts($args);

This function can be resolved for WordPress through a package called “Posts for WordPress”, which resolves the contract through a class WPPostAPI, implementing function getPosts to simply execute WordPress function get_posts, like this:

class WPPostAPI implements PostAPIInterface
  public function getPosts($args) {
    return get_posts($args);

If we ever need to port our application from WordPress to another CMS, we must only implement the corresponding CMS-specific package for the new CMS (e.g. “Posts for October CMS”) and update the dependency injection configuration matching contracts to implementations, and that’s it!

Note: It is a good practice to create packages that only define contracts and nothing else. This way, it is easy for implementers to know exactly what must be implemented.

Dependency Injection To Glue All Parts Together

Dependency injection is a technique that allows declaring which object from the CMS-specific package (aka the “service provider”) is implementing which interface from the CMS-agnostic package (aka the “contract”), thus gluing all parts of the application together in a loosely-coupled manner.

Different CMSs or frameworks may already ship with their own implementation of a dependency injection component. For instance, whereas WordPress doesn’t have any, both Symfony and Laravel have their own solutions: DependencyInjection component and Service Container respectively.

Ideally, we should keep our application free from choosing a specific dependency injection solution, and leave it to the CMS to provide for this. However, dependency injection must be used also to bind together generic contracts and services, and not only those depending on the CMS (for instance, a contract DataStoreInterface, resolved through service provider FilesystemDataStore, may be completely unrelated to the underlying CMS). In addition, a very simple application that does not require an underlying CMS will still benefit from dependency injection. Hence, we are compelled to choose a specific solution for dependency injection.

Note: When choosing a tool or library, prioritize those ones which implement the corresponding PHP Standards Recommendation (in our case, we are interested in PSR-11), so they can be replaced without affecting the application code as much as possible (in practice, each solution will most likely have a custom initialization, so some re-writing of application code may be unavoidable).

Choosing The Dependency Injection Component

For my application, I have decided to use Symfony’s DependencyInjection component which, among other great features, can be set-up through YAML and XML configuration files, and it supports autowiring, which automatically resolves how different services are injected into one another, greatly reducing the amount of configuration needed.

For instance, a service Cache implementing a contract CacheInterface, like this one:

namespace MyPackage\MyProject;
class Cache implements CacheInterface
  private $cacheItemPool;
  private $hooksAPI;

  public function __construct(
    CacheItemPoolInterface $cacheItemPool, 
    HooksAPIInterface $hooksAPI
  ) {
    $this->cacheItemPool = $cacheItemPool;
    $this->hooksAPI = $hooksAPI;

  // ...

… can be set as the default service provider through the following services.yaml configuration file:

      MyPackage\MyProject\HooksAPIInterface: '@hooks_api'

    class: \MyPackage\MyProject\ContractImplementations\HooksAPI

    class: \MyPackage\MyProject\Cache
    public: true
      $cacheItemPool: '@cache_item_pool'

    class: \Symfony\Component\Cache\Adapter\FilesystemAdapter

As it can be observed, class cache requires two parameters in its constructor, and these are resolved and provided by the dependency injection component based on the configuration. In this case, while parameter $cacheItemPool is manually set, parameter $hooksAPI is automatically resolved through type-hinting (i.e. matching the expected parameter’s type, with the service that resolves that type). Autowiring thus helps reduce the amount of configuration required to glue the services and their implementations together.

Make Your Packages As Granular As Possible

Each package must be as granular as possible, dealing with a specific objective, and containing no more or less code than is needed. This is by itself a good practice in order to avoid creating bloated packages and establishing a modular architecture, however, it is mandatory when we do not know which CMS the application will run on. This is because different CMSs are based on different models, and it is not guaranteed that every objective can be satisfied by the CMS, or under what conditions. Keeping packages small and objective then enables to fulfill the required conditions in a progressive manner, or discard using this package only when its corresponding functionality can’t be satisfied by the CMS.

Let’s take an example: If we come from a WordPress mindset, we could initially assume that entities “posts” and “comments” will always be a part of the Content Management System, and we may include them under a package called “CMS core”. However, October CMS doesn’t ship with either posts or comments in its core functionality, and these are implemented through plugins. For the next iteration, we may decide to create a package to provide for these two entities, called “Posts and Comments”, or even “Posts” under the assumption that comments are dependent on posts and bundled with them. However, once again, the plugins in October CMS don’t implement these two together: There is a plugin implementing posts and another plugin implementing comments (which has a dependency on the posts plugin). Finally, our only option is to implement two separate packages: “Posts” and “Comments”, and assign a dependency from the latter to the former one.

Likewise, a post in WordPress contains post meta attributes (i.e. additional attributes to those defined in the database model) and we may assume that every CMS will support the same concept. However, we can’t guarantee that another CMS will provide this functionality and, even if it did, its implementation may be so different than that from WordPress that not the same operations could be applied to the meta attributes.

For example, both WordPress and October CMS have support for post meta attributes. However, whereas WordPress stores each post meta value as a row on a different database table than where the post is stored, October CMS stores all post meta values in a single entry as a serialized JSON object in a column from the post table. As a consequence, WordPress can fetch posts filtering data based on the meta value, but October CMS cannot. Hence, the package “Posts” must not include the functionality for post meta, which must then be implemented on its own package “Post Meta” (satisfiable by both WordPress and October CMS), and this package must not include functionality for querying the meta attributes when fetching posts, which must then be implemented on its own package “Post Meta Query” (satisfiable only by WordPress).

Identifying Elements That Need To Be Abstracted

We must now identify all the pieces of code and concepts from a WordPress application that need be abstracted for it to run with any other CMS. Digging into an application of mine, I identified the following items:

  • accessing functions
  • function names
  • function parameters
  • states (and other constant values)
  • CMS helper functions
  • user permissions
  • application options
  • database column names
  • errors
  • hooks
  • routing
  • object properties
  • global state
  • entity models (meta, post types, pages being posts, and taxonomies —tags and categories—)
  • translation
  • media

As long as it is, this list is not yet complete. There are many other items that need abstraction, which I will not presently cover. Such items include dealing with the location of assets (some framework may require to place image/font/JavaScript/CSS/etc. files on a specific directory) and CLI commands (WordPress has WP-CLI, Symfony has the console component, and Laravel has Artisan, and there are commands for each of these which could be unified).

In the next (and final) part of this series of articles, we will proceed to implement the abstraction for all the items identified above.

Evaluating When It Makes Sense To Abstract The Application

Abstracting an application is not difficult, but, as shall be observed in the next article, it involves plenty of work, so we must consider carefully if we really need it or not. Let’s consider the advantages and disadvantages of abstracting the application’s code:


  • The effort required to port our application to other platforms is greatly reduced.
  • Because the code reflects our business logic and not the opinionatedness of the CMS, it is more understandable.
  • The application is naturally organized through packages which provide progressive enhancement of functionalities.


  • Extra ongoing work.
  • Code becomes more verbose.
  • Longer execution time from added layers of code.

There is no magic way to determine if we’ll be better off by abstracting our application code. However, as a rule of thumb, I’ll propose the following approach:

Concerning a new project, it makes sense to establish an agnostic architecture, because the required extra effort is manageable, and the advantages make it well worth it; concerning an existing project, though, the one-time effort to abstract it could be very taxing, so we should analyze what is more expensive (in terms of time and energy): the one-time abstraction, or maintaining several codebases.


Setting-up a CMS-agnostic architecture for our application can allow to port it to a different platform with minimal effort. The key ingredients of this architecture are to code against interfaces, distribute these through granular packages, implement them for a specific CMS on a separate package, and tie all parts together through dependency injection.

Other than a few exceptions (such as deciding to choose Symfony’s solution for dependency injection), this architecture attempts to impose no opinionatedness. The application code can then directly mirror the business logic, and not the limitations imposed by the CMS.

In the next part of this series, we will implement the code abstraction for a WordPress application.

Smashing Editorial(rb, dm, yk, il)

What Is an Icon Font? (And How to Use One)

Icon fonts are a popular solution to a common CSS problem; how to incorporate web icons into your website design in an efficient, fast-loading way.

With plenty of services available to make choosing and using an icon font easy, you don’t have to create your own from scratch. Icon fonts are all over the internet.

But what exactly is an icon font? And how do you use them? Here’s a guide to everything you need to know about icon fonts.

What Is an Icon Font?

icon font

Icon fonts are typefaces that use tiny images rather than letterforms. Like type, each character is scalable and can be modified using CSS.

The main reasons for using an icon font are that you can change the size, color, shape, with ease. Icon fonts are transparent by nature so you can put them on any color or type of background and you can add strokes or change the opacity of icons.

It’s all done with CSS so you don’t have to create unique images for each new instance of an icon in the design. (This is great for keeping your website and code lightweight.)

Icon fonts are vector images, meaning they are scalable. As with any other font, you can make them as large or small as you like. Use icon fonts alone as art elements or even scattered throughout other text fields.

The most popular and well known library of icon fonts is Font Awesome. It’s used for more than 100 million websites and includes a robust collection of icon options. It works with all the popular tools, including Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React, and Ember.

There are a few other fairly well-known font icons sets as well.

Pros and Cons of Using Icon Fonts

icon font

So why would you use – or avoid – an icon font? Here are some of the pros and cons of working with this style of art element.

Pros of Using Icon Fonts

  • Icons are easy to scale as long as the proper classes exist in your CSS
  • You can get large icon libraries with little trouble
  • Changing icon properties is easy, not matter what you used to build your website
  • It’s easy to add icons to any page in the website (just insert the icon name)
  • There are thousands of icons to choose from in all kinds of styles
  • WordPress users can add icon fonts with a simple plugin or by coping the font directory into the code (almost any interface)
  • You can create your own icon font if you need something super custom

Cons of Using Icon Fonts

  • Icons are a single color or color gradient (in most instances); some more premium packs are changing this
  • No good fallback if the icon font does not load
  • You might not need a full icon set
  • Some screen readers don’t know what to do with icon fonts
  • You might not find a pack that fits your needs

How to Use Icon Fonts

icon font

While instructions for using icon fonts can vary slightly depending on which provider you choose, the basic idea is the same.

Generally, you have three options (unless you plan to do a little more hard-coding yourself):

  • Use a plugin that installs everything so you only have to call icons you want to use. (Super easy!)
  • Use built-in font icons from your CMS or website builder. This works great if you don’t have a custom site or need/want a specific type of font icon. Most website builders come with something “out of the box.”
  • Manually link to an externally hosted icon font. (The more complicated version of using a plugin.)

Icon Fonts vs. SVGs

icon font

The bigger debate is shifting to whether you should (or would want to) use an icon font versus SVG images for the purpose of inserting small images on your website. Both options are equally viable and have a lot to do with personal preference.

Icon fonts are generally easier for most people to find and use. SVG icons are preferred by users who need more design control.

An SVG (scalable vector format) file can give you a little more flexibility in design. (You aren’t limited to one color). The small, scalable files can be uploaded right into your media directory and are easy to work with. This is a good option if you only need a handful of icons and don’t want to deal with a library.

SVGs are more flexible with the ability to add more colors and animation.

Icon fonts might be faster loading in the long run because they are cached. But the difference can be quite minimal.

Positioning icons fonts can get a little tricky since they are subject to typical font rules such as size, line spacing, and vertical alignments. This alone is why most people using an icon font, opt for an established provider rather than trying to make their own.

SVGs can include alt elements that make them more accessible than icon fonts, which can come across as letter characters to screen readers.

Icon fonts are generally easier for most people to find and use. Libraries are generally available and aren’t difficult to understand. SVG icons are preferred by users that want more design control and customization options.

Both options are commonly used and work well in most cases. Picking one has a lot to do with what you are most comfortable with and what matches your design aesthetic and user interface.


One reason icon fonts are so popular is that they are versatile and easy to use. Thanks to a scalable format that can be installed with a couple click to most content management systems, almost anyone can start using icons fonts quickly.

The real benefit to an icon font is that the element uses CSS, and is not an independent image file. This is good for creating a lean website with elements that load quickly and in a vector format (great if you need to change the size later).

November 15 2019


How to Create a Nature Photography Gallery With a WordPress Grid Plugin

Today’s internet culture is driven by images and videos. Studies have proven that adding visual content to your website will attract and hold the attention of your audience longer than if you did not have any visual content. This makes it necessary for you to prioritize images and videos on your website. 

When it comes to displaying visual content on your WordPress website, you have a myriad of choices. There are many free and paid gallery plugins that are available for you to add to your website to display your content. However, many of the free and paid WordPress plugins lack the customizability needed to display visual content on your website. Often times these plugins lack the customizability to allow you to blend in the gallery with your website’s theme and are missing important features that are needed for the gallery to work the way you would like it too. 

The Essential Grid WordPress gallery plugin is an all in one solution for your gallery needs. This feature-rich plugin allows you to build a stunning looking gallery that can display image, video and audio galleries. You can not only create these galleries from your site's posts and pages, but you can create them from your social media feeds and create a completely custom gallery. In this article, I am going to go over how to create a custom gallery for your WordPress website with the Essential Grid plugin. 

What We Will Be Building 

We will be building an eye-catching gallery for our nature photography website. We want to customize the gallery so that it invites our audience to spend time interacting with the gallery and gets them interested in hiring us for our photography services. 

The gallery that we will build will feature a customized grid, lightbox, filters, and animation. This customization will allow us to display our gallery in a way that blends in with our website's theme and functions in a way that encourages users to keep stay engaged with the gallery.

Below is an image of what our final essential grid gallery will look like.

Nature Photography

Creating the Gallery

To begin creating the gallery, head on over to Essential Grid > Ess. Grid after you have installed the plugin. You will now be brought to the grid creator menu where we will click the Create New Ess. Grid button. This will take us to the main essential grid editor for our newly created grid. In the Naming section, type in "Nature Photography" for Title and Alias.  This will create the title for our grid and give create a custom shortcode for us to use to add the grid to our website. 

Now it is time to add in our nature photographs to the grid. Click on the Source tab on the top of the Essential Grid editor. We will now select the source that will provide the images for our grid. In our case, we will be selecting the Custom Grid option as we want to add individual images to the grid. The other sources available to you allow you to create the grid from your site's pages and posts as well as through your social media accounts. 

After you have selected the Custom Grid option, scroll all the way down to the Editor / Preview. Hover your cursor over the grey square and click the circle that has an image icon in it. Since we would like to add multiple photos at once to our grid, we will click the Bulk button. We will be taken to the WordPress media library where we will select all of the nature images and then click the Choose Images button at the bottom right-hand corner of the media library. We have now added the images we would like to the gallery, but the look and function of the gallery need to be altered to fit our photography website's needs. 

To change the look of the grid, we will go to the Grid Setting tab. Under the Layout section, we will choose the Fullwidth option as we would like to have our eye-catching nature photographs take up as much of the screen as possible. The full-width display will also help make the photos seem more important. Next, we will change the number of columns that will appear on each webpage for specific screen sizes. Again, we would like to attract the attention of our audience and make the images seem important. The smaller the image is, the less important it will seem. Having a maximum of three columns on the grid will keep the photos at a desirable size. We will adjust the number of Desktop Large, Desktop Medium, and Desktop Small columns to three.

Changing Amount Of Columns Essential Grid

If we scroll down to the bottom of the page, we can now see a preview of how our gallery looks. The nature photos look great, but there is no space in between each photo making the grid look very crowded. To fix this issue, we will head to the Item Spacing option which is in the Grid Settings tab and type in "10”. Click on the blue cycle icon button with two arrows on the middle right-hand side of your screen to see the 10 pixel item spacing that you just added to the grid. 

In addition to the item spacing, we would also like to add in padding on the right and left-hand side of the screen. While we do want the images to be full screen, we would like there to be some padding so they fit better with the design of our website. In the Whole Grid Padding section, type in "20" on the Right and Left fields. Again, click the cycle icon button and you can view these padding changes in the Editor/Preview. The grid looks much less crowded now. 

Fixed Padding Essential Grid

Next, we need to add a navigation filter to allow the viewers of the gallery to scroll through all of our photos. Click on the Nav-Filter-Sort tab and you will be brought to the navigation editor. Under the Available Module section, drag and drop, the Pagination button in the DROPZONE Bottom 1 section under the Controls Inside Grid section. This will add the pagination control to the bottom of your grid. The pagination control is now displayed on the bottom of the grid but there is no space between the pagination and grid. To add in spacing in the margin to make it seem less crowded, type in "10" in the Margin Bottom in the Dropzone Bottom 1 section.

Finally, we are going to make some minor adjustments to the construction of each individual grid. When a user hovers over a specific photo, we would like there to only be a magnifying glass icon that opens up a lightbox to the specific image. For our website's theme, this will look much better. To adjust the contents of each grid we will click on the Skins setting tab.  We will be brought to a screen that displays all the skins available for grid. We just want to edit the current grid we are using called Washington. To do this, click on the water drop icon on the upper right-hand corner of the Washington skin. This will bring us to the skin editor. Again, we would just like to have the magnifying glass icon that links to the lightbox. We want to remove the link icon and title element. To do this, click on each icon in the Item Layout section on the right-hand side of your screen and click the red Remove button. Finally, click the green Save button on the right-hand side of your screen to save the skin. 

Skin Editor

Finally, to add the plugin to your website, all you have to do is go back to the Essn. Grid page on your WP Dashboard and copy the shortcode next to the Nature Photography grid. Then simply create a new page or post and add paste the shortcode to this page or post. There you have it! You can now view our nature photography gallery. Watch the video below to watch the creation of the grid.


Getting The Most Out Of The Plugin

In this article, we only scratched the surface of what this feature-rich plugin can do. Below is a list of a few of the features that can be utilized to improve the functionality and look of your essential grid.

Grid Filters 

In the Nav-Filter-Sort settings, you can add in filter buttons for your post and page and custom grids. If the grid you are showing has different types of content that need to be categorized, adding in filters is a must. This allows your users to easily browse through your visual or audio content for a more enjoyable website experience. Simply drag the filter button down to into one of the four dropzones to display these filters and the filters will be displayed. 


Another great feature in Essential Grid is the animation that you can set for each grid. Changing around the animation of your specific grid may seem like a feature that will not have a big impact on user experience, but it absolutely does. Users subconsciously pick up on the animation that is used on pages and this animation can create a more polished and professional presentation of the content on your website. In the Animations settings tab, you can change the start animation, filter and pagination animation and the hover animations. Experiment with different combinations of animations and survey your audience to see which animations perform the best.

Skin Editor

In the article, we only briefly went over the skin editor. The skin editor is a very complex editor that allows you to change all aspects of the skin. You can edit the layout of the skin, the cover, spacing, shadows, animation and even add in links or groups of links to each grid you create. Also, each element that you add onto the skin can be styled, animated, and have links added to it. The specific styling and functionality will depend on your specific website's needs. 

It would be best to come up with a basic idea of what your website grids will need and what you want them to look like before you dive into all the skin features available. This way you will have a goal in mind to help you from getting lost in all the available features. 


When displaying visual content to your audience, you need to ensure that the gallery plugin you use allows you to customize your gallery to your website. Without this customization, you will not be able to create a gallery that attracts the attention of your audience. 

By using the Essential Grid plugin, you can easily customize any grid that you create and give it that professional look and feel. To give this plugin a try, head over to CodeCanyon and check out the Essential Grid live preview. And while you're here, check out some of the other great WordPress plugins available from CodeCanyon.

  • WordPress
    17 Best WordPress Gallery Plugins
    Jane Baker
  • WordPress
    10 Best WordPress Slider & Carousel Plugins of 2019
    Nona Blackman

14 Best Logo Design Tools to Create a Professional Logo

Logos are the best tools for leaving a long-lasting impression on the audience. This is why you must create a good logo for leaving a great impression on your audience. It eases communicating your business identity to a great extent. If you are a new business whose product and services haven’t reached your targeted audience yet, you would primarily depend on visual elements like a logo design for creating an impression about your brand and also for the marketing campaigns. Logos give identity to a brand that it uses throughout its range of activities and products. Logos, thereby, can be considered to be the face of a company. One of the primary purposes of creating a logo is creating a perception and image of the brand that it’s different from the existing alternatives available in the market, in the right way. This is why keeping up with the design trends is an essential element of logo design to ensure your logo doesn’t get obsolete and is well perceived by the public.

Creating an excellent logo design isn’t ever an easy task.  You need to have a through clarity about the client’s vision, brand’s mission and identity, and the message they want to convey. Once you have clarity about these, you need to have the skills to translate these guidelines and ideologies into a recognizable visual logo.

To create a detailed logo, you need to do much research, continuously keep working on the design, and use the right tools like Adobe Illustrator CC. However, licensing such software can be an expensive affair and using it also needs a certain level of expertise and invest a lot of time and effort behind it. So if you’re in a rush, or need convenient solutions which are still useful, many online tools can get the work done.

You can use these websites to create the entire logo or a basic framework which can later be worked upon for a  finished design. All of them have a free to use a feature if you’re all right to download a low-res version of the logo you created. However, if you need the flexibility of using scalable vector, then you might have to pay for those services.  The prices, however, are still reasonable.

Here are 14 Best Logo Design Tools to Create a Professional Logo you can use for your next Logo Design:

1. Hatchful:

Hatchful is a tool from Shopify which provides one of the easiest Logo Maker available today. You need to input certain basic facts about your business you need a logo for. Then you need to decide on the style of the logo and decide how you want to use it. After putting in all these details, it provides you with a list of logos generated with the guidelines you inputted. You can browse through these plethoras of options, and select the one you like. Once you’ve selected the logo, you can manipulate and adjust the colour palette, fonts, icon and layout until you’re satisfied with the final result. After this, you can download your logo in any format you need.

2. Designhill Logo Maker:

Designhill’s Logo Maker provides easy and quick solutions for making fantastic logos for any company from any niche.  You need to provide basic information like the company name, and nature of the business, preferred symbols, and colour schemes. After using all this information fed by the user, the software generates a collection of professional-looking logos that can be customized as per need. The process until here is completely free. However, you need to pay for downloading the logo, even for a basic low-res file. They are also known for their responsive support team help.

3. DesignEvo Free Logo Maker:

DesignEvo Logo Maker gives you the flexibility of creating a logo from scratch or take advantage of the pre-designed template library it has to offer. There are over 6000 templates to choose from, which enables you to find a great starting point for your logo. If you are determined to make the entire logo yourself, you can start by putting on a blank layout and build a logo using shapes, fonts and symbols. You can download the low-res logo for free and for scalable vector versions you need to pay with prices starting around $24.99.

4. Tailor Brands Logo Maker:

Tailor Brands Logo Maker takes a different approach at providing logo solutions than most of the other logo makers available in the market. Instead of providing the user with an endless scrolling list of templates, for finding the perfect logo, it asks for the name of your business and a basic description of what it does. Then it asks you to choose between text and initial-based logo and then for getting a handle on the design style you want; it uses the ‘This or That’ tool. After all the inputs and processing it presents you with a logo that you can customize if you want and download the low-res file for free as well. For scalable vectors, you need to pay.

5. Canva Free Logo Maker:

Canva is popular software that covers more than just logos by providing many solutions. However, if the logo is your top priority, it has a pretty efficient free Logo Maker. It follows the same principle of asking you certain basic details about you and your company and then provides you with many templates to choose a look from which you like. Then you can customize the design as per your requirement using its intuitive tools. There are a lot of free tools that you can experiment with; however, if you want to unlock deeper customization tools, you need to pay for the premium elements. Once you’re done, you can download the finished logo as PNG or PDF for free.

6. MarkMaker:

MarkMaker uses a simple and clever approach to creating the right logo. All you need to do is type in a company’s name, and it starts giving you suggestions. One great feature this software has is that when you click on a logo that you like, it understands the elements that you liked in that logo, and thereby starts giving you more options and variables that follow the same design principle. You can add more information as to what your company does, for more specific and accurate results. Then you can scroll through the options till you find the logo that you like, and then you can edit and fine-tune it with many customization tools like sliders.  You can download your logo for no cost in PNG and SVG formats. They have an option for a donation that is voluntary on the user’s part.

7. UCraft Free Logo Maker:

UCraft Logo Maker gives you the right amount of tools to create a logo from scratch in short order. Its vector editor provides a big selection of icons to experiment with and complement it with texts, shapes and colours until you get the logo that you want. You can download the finished logo in PNG format for free however for a scalable SVG format you have to pay around $12.

8. LogoMakr:

LogoMakr is sophisticated software for Logo Making. It offers all the basic features that UCraft does, but it has a friendlier front end and more options to experiment with. It also lets you find a suitable icon and bring all the text and shape elements you need for building and designing your logo. There is a video tutorial as to how to use the software that pops up as soon as the site loads, which is useful to familiarize with the software and eases the process even further. The  PNG version can be downloaded for free however for $19; you can avail it in SVG and PDF formats as well.

9. Laughing Bird:

Laughing Bird Logo creator doesn’t require the user to have advanced designing skills and much investment. It has built-in templates and a reasonable one-time fee. There are over 170 logo templates and over 200 elements that you can add to your logo. It also allows the users to insert their graphics to customize their logo even further. Apart from this, the software has special effects and text options to apply to the templates. A general trend of the logo and templates tend to be loud and bold. The logo works better for an informal company rather than very professional companies in most cases. It is easy to use, helps create logos quickly and has a less traditional look.

10. LogoYes:

It is one of the simplest platforms when we talk about the features it has to offer. There are preset graphic icons and fonts, which enables the user to create a basic logo in no time. It is a very straightforward tool with a drag and drops canvas. You can add text and make small graphics tweaks like resizing, rotating, flipping or even repositioning elements. You are allowed to use one graphic per logo. There is a bare minimum charge of $0.99 to download the logo design, which is uniform across all resolution of the logo.

11. Looka:

Looka is a platform that combines your design preferences with its AI to create custom made logos. The program uses AI to determine your likes and preferences based on colour, style, and icon preferences. Looka also is capable of providing marketing asset design and website building solutions. It generates a wide section of custom logos based on your preferences and allows you to tweak basic details of the logo you select like colour and size of the shapes. It charged $20 for a low res file and $65 for multiple high res files with colour variants.

12. Squarespace logo maker:

Squarespace offers website building software and also effective logo-creating tools. It is one of the simplest tools which make it a great choice for those people who have limited design skills or time to invest. The software allows you to arrange text and icons in a drag and drop editor. The icons and texts can be customized by changing colours, style and shapes. The Low Res files are watermarked but available for free whereas the High Res files can be obtained for $10.

13. Logoshi:

Logoshi provides a custom logo for affordable prices with a unique approach to it. Apart from taking traditional inputs like colour preferences and business names, it also generates logos from your sketched logos. It creates logos from a wide variety of inputs like your business name, initials, colour preferences, and a custom sketch. All the suggested logos look professional with unique fonts and icons, especially when they are designed to match the custom sketch. The logo price ranges from $5 to $30. Buying the more premium version allows you to choose from a wider selection and download them with different colours and backgrounds option.

14. Logaster:

The major benefit of this software is its speed and convenience rather than design capabilities. You can enter your company name and the type of industry, which helps Logastar create multiple logo options as close to your field. There are a variety of logos based on different fonts, colours and icons. Each suggested logo is highly customizable, with many layout and colour options. The logos are free to download in low res, and the high res files cost from $10 to $25. This software allows you to create a professional logo with minim design skills and the minimum time that doesn’t need much reworking however if you polish it further with your inputs, you’ll get a better-finished logo.

These were the 14 Best Logo Design Tools to Create a Professional Logo. Make sure you know what your / your client’s vision and mission are for the brand, and what the brand represents to be indeed able to depict and translate their thoughts to a logo that represents them.

The post 14 Best Logo Design Tools to Create a Professional Logo appeared first on Line25.


JAMstack CMSs Have Finally Grown Up!

This article is based on Brian's presentation at Connect.Tech 2019. Slides with speaker notes from that presentation are available to download.

In my experience, developers generally find the benefits of the JAMstack easy to comprehend. Sites are faster because the resources are static and served from a CDN. Sites are more secure because there is no framework, application server or database to compromise. Development and deployment can be optimized because all of the pieces that make up the stack are unbundled. And so on.

What can be more difficult for developers to comprehend are the trade-offs that this can often require for the folks who create and edit content. Traditional, monolithic content management systems have often been ridiculed by developers (yes, even WordPress) who became frustrated trying to bend the tool to their will in order to meet project requirements. But, until recently, the JAMstack largely just passed that burden onto the non-technical content creators and editors.

By developers, for developers

Static site generators (i.e. tools like Jekyll, Hugo and Gatsby) grew enormously in popularity in large part because developers adopted them for projects. They became common solutions for things like blogs, documentation or simple static pages. By and large, these were sites created by developers, maintained by developers and with the content primarily written and edited by developers.

When I first wrote about these tools in a report for O'Reilly in 2015, this is what I said:

Just in case this isn’t already clear, I want to emphasize that static site generators are built for developers. This starts with the development of the site all the way through to adding content. It’s unlikely that non-developers will feel comfortable writing in Markdown with YAML or JSON front matter, which is the metadata contained at the beginning of most static site engine content or files. Nor would non- technical users likely feel comfortable editing YAML or JSON data files.

—Me (Static Site Generators report for O'Reilly 2015)

When, two years later, I wrote a book for O'Reilly on the topic (with my friend Raymond Camden), not too much had changed. There were some tools at the very early stages, including Jekyll Admin and Netlify CMS, but they had not matured to a point that they could realistically compete with the sort of WYSIWYG tooling that content editors were used to in tools like WordPress.

The WordPress editor showing a field for the post title and a text area for the post content. The WordPress editing experience

By contrast, the editing experience of static CMSs still required an understanding of Markdown and other markup (YAML, Liquid, etc.).

An editing screen in Netlify showing post fields on the left and a preview of the post on the right. The Netlify CMS editing experience in 2017

Suffice it to say, whatever the technical merits of the architecture at the time, from a content editing standpoint, this was not a toolset that was ready for mainstream adoption.

The awkward teenage years

Over the ensuing two years, a combination of a couple of trends started to make the JAMstack a viable solution for mainstream content sites with non-technical editors. The first was that the static CMS matured into what we now generally refer to as git-based CMS solutions. The second was the rise of the headless, API-first CMS as a solution adopted by enterprises.

Let's take a look at the first trend... well... first. Netlify CMS, an open-source project from Netlify, is an example of a git-based CMS. A git-based CMS doesn't store your content, as a traditional CMS would, but it has tools that understand how to edit things like Markdown, YAML, JSON and other formats that make up a JAMstack site. This gives the content editors tools they feel comfortable with, but, behind the scenes, their content changes are simply committed back into the repository, forcing a rebuild of the site. While Netlify CMS is installed on the site itself, other popular git-based CMS options are web-based, including Forestry and DatoCMS.

An editing screen in Netlify from 2017 showing post fields on the left and a preview of the post on the right. The current editing experience in Netlify CMS

The headless, API-first CMS functions much more like the editing experience in a traditional CMS. It not only offers tools for creating and editing content, but it stores that content. However, it makes that content available to the front end - any front-end - via an API. While not limited to JAMstack in any way, an API-first CMS works well with it because the creation and management of the content is separate from the display of that content on the front end. In addition, many API-first CMSs offer pre-built integrations with some of the most widely used static site generators. Popular API-first options include Contentful and Sanity.

The Contentful admin, showing post fields on the left and post settings on the right. Contentful is a site maintained by Netlify that has a comprehensive list of all the available tools, both git-based and API-first. For a good look at the differences, pros and cons between choosing a git-based versus an API-first CMS, check out this post by Bejamas.

Both git-based and API-first headless CMS options began to give non-technical content editors the tools they needed on the backend to create content. The awkwardness of these "teenage years" comes from the fact that the tooling is still disconnected from the frontend. This makes it difficult to see how changes you've made in the backend will impact the frontend until those changes are actually committed to the repo or pushed live via the API. Add in the time cost of a rebuild and you have a less than ideal editing experience where mistakes can more easily make it to the live site.

A Look at the future

So what does the future look like when the JAMstack CMS is finally grown up? Well, we got a good look at this year's JAMstack_conf_sf. Coincidentally, there were two presentations demonstrating new tools that are bringing the content editing experience to the frontend, letting content editors see what they are changing, how their changes will look and how they will impact the layout of the site.

The first presentation was by Scott Gallant of Forestry. In it, he introduced an new open source projects from Forestry called TinaCMS that brings a WYSIWYG style content editing experience to the frontend of sites that use a git-based CMS and Gatsby or Next.js (both React-based tools).

Animated flow for editing a page on the front end with Tina CMS. TinaCMS

The second presentation was by Ohad Eder-Pressman of Stackbit (full disclosure: I work as a Developer Advocate for Stackbit) that introduced an upcoming set of tools called Stackbit Live. Stackbit Live is designed to be CMS and static site generator agnostic, while still allowing on-page editing and previewing of a JAMstack site.

Animation of editing a page on the front end with Stackbit Love Stackbit Live

What both these tools demonstrated is that we're at a point where a "JAMStack + headless" architecture is a real alternative to a traditional CMS. I believe we've reached the tipping point whereby we're no longer trading a great developer experience for an uncomfortable editing experience for content authors. By 2020, JAMstack CMS will officially be all grown up. 👩🏽‍🎓

The post JAMstack CMSs Have Finally Grown Up! appeared first on CSS-Tricks.


How to Sell Tickets With a WordPress Event Calendar and Tickets Plugin

In this post, I'll show you how to use the WordPress Events Calendar Registration and Tickets plugin to create different types of events for your website. Most importantly, I'll show you how to keep track of all attendees and sell tickets for your events.

No matter what kind of event you’re organizing, you want people to be able to participate in it easily. That means you need to have a way for users to register for your events and confirm their booking through your website. And if it’s a paid event, users should be able to pay for it online without much hassle.

  • WordPress
    20 Best WordPress Calendar Plugins and Widgets
    Esther Vaati
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa

That might sound like a lot of work to set up: registration forms, displaying events in a calendar, accepting different payment methods, and allowing users to purchase event tickets. It would be a lot of work if you had to start from scratch, but fortunately there are WordPress plugins that already provide all the necessary features.

When it comes to setting up events in WordPress, there are hundreds of extensions and plugins available online. You'll find free options and also premium plugins that provide ready-to-use features and extended support. In the case of commercial options, you should also expect quality code, bug fixes, and new enhancements.

In this post, we’re going to explore the WordPress Events Calendar Registration & Tickets plugin, which is one of the most popular all-in-one plugins in the event management category. It allows you to create different types of events, be they seminars, workshops, conferences, or any other kind of event. From the front-end, users can register for the event and pay for it if it’s a paid event.

Let’s have a look at some of the important features this plugin brings:

  • online event booking and payment
  • single event support
  • event list and grid layouts
  • event calendar view
  • Google map integration
  • statistics dashboard
  • and many more

In fact, this plugin provides a plethora of useful features, all at a reasonable price, allowing you to set up a complete event booking flow on your WordPress website.

What We'll Be Building

There are different types of events you could create with this plugin. In this post, I’ll demonstrate how you could allow users to register for a seminar event and pay for it online.

In this case, let's assume that you’re an expert WordPress developer and you would like to arrange a one-day seminar to teach different aspects of WordPress to participants. And thus, you’re planning to open online registration for your seminar with a certain fee.

In the front-end, you’re setting up a calendar so that users can see the available dates of your seminar. Interested users should be able to register for the seminar by filling in the registration form. And finally, they should be able to pay for it to confirm their registration.

Throughout this tutorial, we’ll explore different aspects of this plugin while moving closer to our goal. In the next section, I'll show you how to download and install this plugin.

If you want to try the plugin free of charge, you can visit the WordPress Events Calendar Registration & Tickets live demo.

Download and Installation

In this section, we’ll see how to install and configure the WordPress Events Calendar Registration & Tickets plugin once you’ve purchased and downloaded it from CodeCanyon. For this post, I’ve used WordPress 5.2.3, and the WordPress Events Calendar Registration & Tickets plugin version is 2.4.9. I would recommend that you install it if you want to follow along with this post.

As soon as you purchase this plugin, you’ll be able to download the plugin zip file. This is a  WordPress plugin file which you can install from the WordPress admin. So go ahead and follow the standard WordPress plugin installation process.

Important Back-End Configurations

In this section, we’ll go through a couple of important back-end configuration settings that we need to do for this plugin to work properly.

Head over to the WordPress admin side and access the Events+ > General Settings section. Under the Contact tab, fill in all the information and make sure that you fill in the Your Company Name field as shown in the following screenshot.

Setting up the plugin

Under the Payment tab, enable payment methods that you would like to enable during the registration. At the moment, there are four payment methods supported:, PayPal, Stripe, and Offline Payment.

During the installation, the WordPress Events Calendar Registration & Tickets plugin creates a couple of important pages in your website. One of them is the Registration page, and we need to edit it.

Go ahead to the Pages section and edit the page titled Registration. You just need to add the {EVRREGIS} code on that page, as shown in the following screenshot, and save that page.

Registration Page

With that done, we’re ready to continue with the global settings. Navigate to the Events+ > Page Config section. You need to make sure that the Main registration page field contains the Registration page that you just edited. Refer to the following screenshot for clarification. Click on the Update Configuration Settings button to save the settings. 

This is the most important step in the plugin configuration, so please ask me if you have any doubts. If you don’t configure this properly, the plugin won’t work at all.

Setting up the main registration page

Finally, navigate to the Confirmation tab, which allows you to enable different email notifications and templates. It’s pretty self-explanatory, so we won’t go through that in detail.

Apart from these settings, there are a few other settings that you could configure as per your requirements. However, we’ve covered all the critical settings that are required for this plugin to work. From the section onwards, we’ll start working on the WordPress developer seminar example which we discussed earlier.

How to Create Paid Events

In the previous section, we fine-tuned the plugin configuration in the back-end. In this section, we’ll move closer to our goal by creating the event category and event itself.

Create a Category

Access the Events+ > Event Categories menu, which takes you to the event category page. Click on the Add New Category link, and that should allow you to add a new category. Go ahead and create the Workshop category, as shown in the following screenshot.

Create an event category

Click on the Add Category button to save the category settings.

Create an Event

Once you have created the category, it’s time to create a new event! Navigate to the Events+ > Add Event link, and that should open the following UI to add a new event.

Create an event UI

There are different sections here that allow you to enter information about the event. We’ll go through the important sections since the rest of the stuff is self-explanatory.

Under the Description tab, enter the basic event information as shown in the following screenshot. Make sure that you select the Workshop category in the Event Categories field.

Create the event description

Next, there’s the Event Venue tab, which allows you to enter the venue of your event. Enter your event venue details and you’re done. Set the Use Google Maps On Registration Page field to Yes if you want to show the Google map on the event registration page.

Further along is the most important section of all: Event Date/Time. There are two types of events you could add: one-off events and recurring events. In our use case, we are creating a one-off event, and thus the settings look like this.

Setting the event date and time for a one-off event

Finally, there’s the Event Options section, which allows you to enable a couple of extra fields that you might like to add into your event registration form. In our case, I've enabled the Phone Number field.

Enable extra fields for event registration

Click on the Add Event button, and that should save your event and take you to the event listing page.

Add Event Fee

If you want to set up a fee for your event, you'll need to configure it for your event first. On the event listing page, click on the Fees/Items link, as shown in the following screenshot.

Manage event fees

When you click on the Fees / Items link, it takes you to the Event Items / Cost Management page. Click on the Add Cost / Item button to set up your event fee as shown in the following screenshot.

Set up the event fee

It’s important to note that you need to select the REG - Registration Attendee in the Type of Item / Cost field, otherwise the registration won’t work properly. 

Next, enter the name and description of the item. You can also select the maximum number of seats that can be booked during registration.

Let’s make the event paid as well, along with setting the event registration price per attendee. 

Finally, enter the Start Date and End Date during which period you want to enable event registration.

And with that, we are almost done, and we’re ready to display the calendar on the front-end. In the next section, we’ll explore it and demonstrate the front-end registration process.

How to Display an Event Calendar on the Front-End

Event calendars are displayed by category, so let’s go to the Events+ > Event Categories page, which lists all the categories along with their shortcodes, as shown in the following screenshot.

Categories Shortcodes

The [eventsplus_list event_category_id="1"] shortcode is used to display events in a list view. On the other hand, the [PLUS_CALENDAR:Workshop] shortcode is used to display events in a calendar view. In our case, we’ll use the latter, so go ahead and add the [PLUS_CALENDAR:Workshop] shortcode in a page or post and publish it. And it looks like this:

The event calendar view

As you can see, it displays events in the calendar view nicely. Click on any event and you'll be taken to the event detail page, as shown in the following screenshot.

The event detail and registration page

Click on the Register button, and it will open the event registration form:

Event registration form

Fill in the registration form and click on the Submit button to initiate the event registration process. On the next step, you’ll be shown registration confirmation along with the payment options that you could use to pay for the event.

Event registration payment options

In our case, we’ve enabled the PayPal and offline payment methods, and thus you can see two payment methods to choose from. Once users pay for the event, their registration is confirmed. As per the settings, notifications will be sent about the new registration.

So that’s the complete flow of setting up paid events on your WordPress website by using the WordPress Events Calendar Registration & Tickets plugin. This plugin is capable of doing a lot of amazing things, and what we’ve discussed is just one of the use cases you could implement.


Today, we discussed one of the most popular plugins in the event management category in WordPress: the WordPress Events Calendar Registration & Tickets plugin. It’s a commercial plugin available at CodeCanyon at a very reasonable price. 

Try it free today with the WordPress Events Calendar Registration & Tickets live demo!

I hope that you’re convinced that the WordPress Events Calendar Registration & Tickets plugin is useful enough to fulfill your requirements. Although it’s a commercial plugin, I believe it’s reasonably priced considering the plethora of features it provides.

If you have any suggestions or comments, feel free to use the feed below and I’ll be happy to answer your queries!

  • WordPress
    20 Best WordPress Calendar Plugins and Widgets
    Esther Vaati
  • WordPress
    8 Best WordPress Booking and Reservation Plugins
    Lorca Lokassa Sa
  • WordPress
    How to Add an Appointment Booking Calendar With a WordPress Plugin
    Esther Vaati
  • WordPress
    How to Create a Google Calendar Plugin for WordPress
    Ashraff Hathibelagal

The Amazingly Useful Tools from Yoksel

I find myself web searching for some tool by Yoksel at least every month. I figured I'd list out some of my favorites here in case you aren't aware of them.

The post The Amazingly Useful Tools from Yoksel appeared first on CSS-Tricks.


How We Perform Frontend Testing on StackPath’s Customer Portal

Nice post from Thomas Ladd about how their front-end team does testing. The list feels like a nice place to be:

  1. TypeScript - A language, but you're essentially getting various testing for free (passing the right arguments and types of variables)
  2. Jest - Unit tests. JavaScript functions are doing the right stuff. Works with React.
  3. Cypress - Integration tests. Page loads, do stuff with page, expected things happen in DOM. Thomas says their end-to-end tests (e.g. hitting services) are also done in Cypress with zero mocking of data.

I would think this is reflective of a modern setup making its way across lots of front-end teams. If there is anything to add to it, I'd think visual regression testing (e.g. with a tool like Percy) would be the thing to add.

As an alternative to Cypress, jest-puppeteer is also worth mentioning because (1) Jest is already in use here and (2) Puppeteer is perhaps a more direct way of controlling the browser — no middleman language or Electron or anything.

Thomas even writes that there's a downside here: too-many-tools:

Not only do we have to know how to write tests in these different tools; we also have to make decisions all the time about which tool to use. Should I write an E2E test covering this functionality or is just writing an integration test fine? Do I need unit tests covering some of these finer-grain details as well?

There is undoubtedly a mental load here that isn’t present if you only have one choice. In general, we start with integration tests as the default and then add on an E2E test if we feel the functionality is particularly critical and backend-dependent.

I'm not sure we'll ever get to a point where we only have to write one kind of test, but having unit and integration tests share some common language is nice. I'm also theoretically opposite in my conclusion: integration/E2E tests are a better default, since they are closer to reality and prove that a ton is going right in just testing one thing. They should be the default. However, they are also slower and flakier, so sad trombone.

Direct Link to ArticlePermalink

The post How We Perform Frontend Testing on StackPath’s Customer Portal appeared first on CSS-Tricks.


20+ Best Billboard Mockups

If you’re currently designing a billboard or a banner design, then you should also prepare for how to present it to your client. Because the way you’re going to showcase your design will influence the final decision of your clients. It’s one part of the project that you should invest in, without holding back.

Luckily, you don’t have to spend days trying to find a way to showcase your billboard design. You can simply use a pre-designed billboard mockup template to get that job done.

To help you find the perfect mockup for your project, we handpicked a few mockups that are perfect for showcasing billboard designs. Check them out and start downloading — some are free, and some are part of an Envato Elements subscription. Our tips for billboard design should help get you off to a great start!

Top Pick

Outdoor Advertisement Billboard Mockup

Outdoor Advertisement Billboard Mockup

This high-quality billboard mockup is ideal for presenting modern billboard designs related to all kinds of businesses.

The mockup template comes in a fully layered PSD file. It also features editable shadows and smart layers to let you easily customize the mockup.

Why This Is A Top Pick

The realistic background environment, the perfect view angle of the billboard design, and ideal lighting conditions make this mockup one of the best professional billboard mockup templates we’ve ever seen.

Advertisement Billboard Mockup PSD

This modern billboard mockup features a very close-up view of the billboard to make even the tiniest detail of your design clearly visible. The mockup is designed based on a real photo and comes in 4K resolution.

Roadside Advertisement Mockup Template

You can use this unique mockup to showcase billboard designs on the side of a road. The mockup comes with a realistic background and includes smart objects for easily placing your design.

Modern Billboard Mockup Template

Another creative billboard mockup with an urban and busy street view on the background. This mockup comes in 5 different styles. You can even change the background to your preference as well.

Close-Up Advertisement Billboard Mockup

Present your billboard designs with a close-up view using this minimal billboard mockup. This template includes fully organized layers and comes with smart objects for one-click editing.

7 Billboard Mockup Templates

A collection of billboard templates featuring various backgrounds and views. This pack includes 7 different mockup designs and comes in easily editable PSD files.

Free Lamp Post Billboard Mockup

If you’re designing a banner-style billboard, this mockup is perfect for showcasing your design. It features a billboard on a lamp post. The mockup is free to download and use as well.

6 Outdoor Advertising Mockups

Another bundle of 6 creative billboard mockups. This pack comes with various outdoor advertising mockup designs based on real photos and natural environments. The mockups include smart objects and organized layers.

Highway Billboard Mockup Template

With this unique billboard mockup, you can make your designs look like they’re placed on a highway billboard. The mockup comes in 4 different views. You can edit them using Photoshop smart objects as well.

Billboard Mockup On The Side Of The Road

This is a unique billboard mockup with a realistic view. You can use it to showcase your billboard designs on the side of the road. This mockup also includes smart objects for easy editing.

Square Street Billboards Mockup

  • File Type: PSD
  • Dimension: 5845 x 3897 px

A high-quality and free billboard mockup. This template can be used to showcase your billboard design in a streetside environment. You can also use it to show two sides of your advertisement as well.

Outdoor Advertising Billboard

  • File Type: PSD
  • Dimension: 4000(w) x 2760(h) px

This professional and realistic billboard mockup let you showcase your design on a beautiful and a modern building background. The template comes in static and animated versions you can use in different types of presentations. It’s all bundled up into 10 PSDs of static mockups and 5 PSDs of animated mockups.

Brick Wall Billboard Mockup

  • File Type: PSD
  • Dimension: 2400 x 1606 px

If you’re looking for a simple and an elegant mockup for showcasing a poster or an advertisement design, this mockup will come in handy. The brick wall adds a certain retro look to it as well. You can also download this mockup template for free to use with your personal and commercial projects.

Urban Underground Billboard Mockup

  • File Type: PSD
  • Dimension: 4200(w) x 3000(h) px

This mockup template doubles as both a billboard and a lightbox mockup. It’s a two-in-one template pack that’s useful for showcasing different types of designs. The template comes in 10 PSD files in various sizes and you can also easily customize it to change colors, shadows, and lights as well.

Indoor Billboard Mock-Up

  • File Type: PSD
  • Dimension:

For showcasing indoor advertisements and billboards, this template is the perfect choice as it comes in 2 different PSD files featuring different perspectives and easily editable smart objects and layers. The photorealistic background setting will make your designs stand out.

Bus Stop Billboard Mockup

  • File Type: PSD
  • Dimension: 4000 x 2800 px

This is a simple and a clean billboard mockup you can use for showcasing your designs in a bus or a tram stop. The mockup features light colors to highlight your billboard design. And, of course, this template is also free to download.

Outdoor City Advertising Mockup

  • File Type: PSD
  • Dimension: 4000(w) x 2760(h) px

This mockup is perfect for showcasing your billboard design in a busy city environment. Using this template, you can see how your billboard will look like on a modern building. The template comes in both animated and static mockups.

Urban Building Billboard Mockup

  • File Type: PSD
  • Dimension: 4500(w) x 3000(h) px

This is a set of high-quality mockups that includes 9 different photorealistic billboard mockup templates for showing off your designs in an urban environment. The template files are fully-layered with smart objects for easier editing.

Night Billboard Mockup PSD

  • File Type: PSD
  • Dimension: 3000 x 2000px

Showcase your billboard in a nighttime background using this professional mockup template. It will also double as a great way to show your billboard on a road-side as well. You can download the template free of charge.

Natural Billboard Mockup

  • File Type: PSD
  • Dimension: 2000(w) × 3000(h) px

Another pack of modern billboard mockup templates featuring an urban background. This template pack includes 20 mockups in different perspectives. They come in fully-layered PSD files for easy editing.

Outdoor Ocean Billboard Mockup

  • File Type: PSD
  • Dimension: 4888(w) x 2848(h) px

This pack of outdoor billboard mockups includes 12 different mockup templates featuring different city settings, including a beautiful ocean background, city light posters, wall billboards, and more. The reflections and shadows in the templates are also layered to allow you to easily edit them.

7 Urban Poster-Billboard Mock-Ups

  • File Type: PSD
  • Dimension: 4500(w) x 3000(h) px

Another pack of billboard and poster mockup templates featuring 7 different views, all in a nighttime setting. The templates are also professionally designed with well-balanced proportions and colors to better highlight your designs.

Realistic Outdoor Billboard Mockup

  • File Type: PSD
  • Dimension: 4752(w) x 3168(h) px

Use this brilliant template to showcase your billboard design in a more realistic environment. This mockup features a real-photo background to make your billboard designs look more natural. It comes with 6 different mockups for banners and billboards.

20 Outdoor Billboard Mockups

  • File Type: PSD
  • Dimension: 5000(w) x 3333(h) px

This pack of billboard mockups includes 20 unique templates featuring different views and with 40 variations and in different light settings and locations. You can also easily edit the PSD files to customize the templates as well.

Whether you’re creating a presentation for a client or showcasing your best designs in a portfolio, these billboard mockups will help add a more professional look to your designs.

5 Tips for Designing a Billboard

Here are a few simple tips to get a headstart on your billboard design.

1. Use a Template

If you’re going through a creative block or struggling to find inspiration for a billboard design, the best way to get started is to use a template. You can easily customize a print-ready billboard template to match your own branding and create a unique billboard design without an effort.

2. Find the Right Font

Making your billboard easier to read from a distance is one of the most important parts of designing an effective billboard. Use a font that improves readability. A sans-serif font with a bold character design is the best choice for billboard design.

3. Aim for a Minimalist Design

Adding lots of images, shapes, and text in the billboard design can make it harder to notice and read at a glance. Create a minimal design that highlights the content above everything else. A design that anyone can easily notice no matter where they see it.

4. Choose Appropriate Colors and Images

When using colors, make sure to pick a color palette that’s appropriate for the billboard placement. Pick colors that make the text easier to read in different outdoor conditions such as sunlight and night time.

5. Present Your Design Like a Pro

Last, but not least, use a great mockup when presenting your billboard design to clients. Mockups help add a more realistic look and feel to your billboard. And it allows you to show clients what your design might look like when placed on a real billboard.

Don’t forget to check out our poster mockups and logo design mockups collections for more great templates.


Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

Iris Lješnjanin

On behalf of the Smashing team, welcome to another monthly update to keep you all in the loop about all things smashing. Join us as we share the latest news and highlight the things we have enjoyed reading over the past month.

Many of the included posts are sourced from the most popular links from our Smashing Newsletter. If you don’t get our newsletter yet, then sign up here to receive useful techniques and goodies (including a free eBook on accessibility)!

What’s New At Smashing?

The last SmashingConf of this year took place in New York, an event that got sold out a long way in advance and another one we’re all quite proud of. In case you missed out, our editor-in-chief Rachel Andrew summed up everything in a post with videos and photos of SmashingConf NY. You can find the slides of the talks over here, and even already grab your super early-bird ticket if you like!

Smashing Podcast moderated by Drew McLellanNext, there’s a ’lil project that we’ve been meaning to launch for a quite a while, and it’s finally happening! We’re proud to have kicked off the Smashing Podcast, a bi-weekly podcast that is moderated by our dear friend Drew McLellan — make sure to subscribe and tune into any podcast player of your choice.

Last but not least, we’re excited and looking very much forward to the release of the upcoming Smashing book “Inclusive Components” written by Heydon Pickering on the whys and the hows, making accessibility more approachable and friendly for developers. Stay tuned!

Recommended Reading on Smashing Magazine

We publish a new article every day, and so if you’re not subscribed to our RSS feed or follow us on social media, you may miss out on some brilliant articles! Here are some that our readers seemed to enjoy and recommend further:

  • How To Stop Analysis Paralysis With Design” by Suzanne Scacca
    When it comes to putting our visitors on the spot, giving them too many options hurts their decision-making ability along with how they feel about the experience as a whole.
  • What Newspapers Can Teach Us About Web Design” by Frederick O’Brien
    Before the home page, there was the front page. From the Gutenberg Principle to grid systems to above the fold, newspapers teach us much about the foundations of web design.
  • Creating Online Environments That Work Well For Older Users” by Barry Rueger
    A significant part of the Internet-using population is aged 50 or older — including the people who invented it. Designers need to understand what older users need and why it’s not enough to just say, “I can read it, so what’s the problem?”
  • Writing A Multiplayer Text Adventure Engine In Node.js” by Fernando Doglio
    A 4-part series that takes you through step by step to help you create a text-adventure engine with Node.js.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! So, without wanting to make this monthly update too long either, we’re shining the spotlight on the following projects:

Note: A thank you to Cosima Mielke for writing and preparing these posts!

Free Services For Developers

So many services out there offer free tiers, but they can be hard to find. Free For Developers wants to change that and lists software and other services that have free tiers for developers.

Free for developers, a list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev.

The services included in the list are particularly interesting for System Administrators, DevOps Practitioners, and other infrastructure developers and cover everything from cloud providers and source code repos to testing, log management, payment integration, and a lot more. More than 500 people have contributed to this community project and you are welcome to submit your findings, too, of course. A handy resource for the bookmarks.

Git Command Cheatsheet

Do you know your git commands? While you probably know the most common ones by heart, there are always those commands that are easily forgotten because you don’t need them often. A concise refresher now comes from Rainer Selvet.

A list of git commands and what they do GitSheet, a dead simple git cheatsheet.

Described as a “dead simple git cheatsheet” by its creator, GitSheet lists git commands and what they do by topic. A nifty little feature: You can copy a command to your clipboard with just a click. Simple yet effective.

A Playground For Tinkering With Design Systems

You’re about to build a design system but don’t really know where or how to begin? Well, the Design System Playground might be a great place to get started.

Choosing a body font on the Design System Playground Design System Playground, an open-source project built by John Polacek.

The playground offers a lot of room to tinker with different font and color combinations and, once you’re happy with your choices, it generates a design system that you can export and use in your projects right away. If the visual direction of your design isn’t clear yet, there’s also the option to use a preset theme or random choices to build upon.

Freebie: Mix-And-Match Illustrations

Illustrations are a fantastic way to breathe some life into a project. But not all of us have the skills to create them ourselves or the time or the budget to hire an illustrator. For these occasions, the mix-and-match illustration library which Leni Kauffman created, might come in handy.

Illustrations of people interacting to each otherFresh Folk, a beautiful illustration library of people and objects created and designed by London-based illustrator Leni Kauffman.

Fresh Folk lets you combine poses, outfits, and skin tones into different characters. The library also includes background elements (e.g., tables, seating, lamps, plants) to create different settings — from office spaces to nature scenes. Free for personal and commercial projects.

Real-Time Visualization Of Tokyo’s Public Transport

A stunning 3D data visualization project comes from Akihiko Kusanagi: Mini Tokyo 3D displays Tokyo’s public transport system on a map in realtime.

Tokyo’s public transportation system visualized on a map Large preview, a real-time 3D digital map of Tokyo's public transport system.

You can follow along Tokyo’s trains moving through the city, with information on the train line, train number, next and previous stops, and possible delays. The data for this mammoth project is sourced from Open Data Challenge for Public Transportation in Tokyo which promotes the openness of public transportation data. Their aim is to make public transportation (which is considered to be the world’s most complicated) easier to navigate. Inspiring!

Vintage Science And Tech Ads

If you’ve got a sweet spot for vintage graphic design, here’s a very special goodie for you: a Flickr album with more than 1,400 science and tech ads from the 1950s and 60s.

Science and Tech AdsScience and Tech Ads” (Flickr album), a random assortment of science ads collected from various science and tech magazines of the 50s and 60s.

The ads come from various science and tech magazines and are great examples of the modernist mid-century aesthetic — and a fascinating journey back to the times when the foundations of the technologies we take for granted today were being laid. Eye candy!

JavaScript Frameworks Security Report 2019

The folks at Snyk published their state of JavaScript frameworks security report for 2019. It investigates the state of security for the Angular and React ecosystems as well as security practices for the popular JavaScript frameworks Vue.js, Bootstrap, and jQuery.

The opening slide from the security report JavaScript Frameworks Security Report 2019, a report that investigates the state of security for both the Angular and React ecosystems.

Given the fact that Angular and React both have their proponents with ongoing discussions whether one or the other is a true framework, the report doesn’t intend to venture into rivalries but reviews each of them as viable front-end ecosystem alternatives, while focusing on security risks and best practices and the differences between them. A must-read.

Designing Accessible Color Systems

Getting color contrast right is an essential part of making sure that not only people with visual impairments can easily use your product but also everyone else when they are in low-light environments or using older screens. However, if you’ve ever tried to create an accessible color system yourself, you probably know that this can be quite a challenge.

A color system for icons consisting of nine colorsDesigning Accessible Color Systems” written by Daryl Koopersmith and Wilson Miner.

The team at Stripe recently decided to tackle the challenge and redesign their existing color system. The benefits it should provide out of the box: pass accessibility guidelines, use clear and vibrant hues that users can easily distinguish from one another, and have a consistent visual weight without a color appearing to take priority over another. If you’re curious to find out more about their approach, their blog post will give you valuable insights.

Digital Wellbeing Experiments

Everyone has a different relationship with their phones, but we all have something in common: There are always those moments when it feels that phones distract from life rather than improve it — when having dinner with friends and everyone checks their incoming notifications, for example.

An illustration of a woman gone fishing on a deserted island. She’s surrounded by a camera and a video app iconDigital Wellbeing Experiments”, a showcase of ideas and tools that help people find a better balance with technology.

With their Digital Wellbeing Experiments, Google now showcases ideas and tools that help people find a better balance with technology and inspire designers and developers to consider digital wellbeing in everything they design and build. There are experiments that let you switch off from technology as a group, for example, stay focused by getting the right apps at the right times, or take the most important things with you on a printed “paper phone”. The code for the experiments is open-source, and if you have an idea for a digital wellbeing experiment, the Hack Pack will help you bring it to life.

Recursive: A Free Highly-Flexible Variable Font

A font that gives you typographic control over five stylistic axes and can go from Sans to Mono? The variable font Recursive makes it possible, offering an entirely new level of flexibility.

A screenshot of the Recursive font Recursive Font, a typographic palette for vibrant code and UI.

Taking full advantage of variable font technology, Recursive enables you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes. Inspiration came from single-stroke casual signpainting to give the font a flexible and energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Please note that Recursive is still under active development and will soon be available through Google Fonts. A beta version is already available.

Open-Source Tutorials For Learning GraphQL

GraphQL enables a client to specify exactly what data it needs from an API, so instead of multiple endpoints that return fixed data structures, a GraphQL server exposes a single endpoint and responds with precisely the data a client asked for. If you want to wrap your head around GraphQL, here are two great resources to get you started.

Illustration of a wizard and three little dragons who seem to be learning something from him There are a number of open-source community maintained tutorials that will help you to move from the basics of GraphQL to building a real-time application in no time.

How to GraphQL is a free open-source tutorial to take your GraphQL skills from zero to production. Divided up into two parts, part one covers the core concepts of GraphQL while part two gives you a broader understanding of the GraphQL ecosystem. The other learning resource comes from the makers of the GraphQL engine Hasura: three open-source community-maintained tutorials (front-end, mobile, and back-end tutorials) teach you GraphQL to get you ready to build a real-time application in two hours.

Fixing Image Orientation

Image orientation on the web is, well, complicated. When Michael Scharnagl worked on a side project, he noticed that the images he uploaded to his server were shown in the wrong orientation. Now he wrote a blog post in which he dives deeper into the issue and how to fix it.

Portrait image shown in landscape mode Image orientation on the web explained by Michael Scharnagl.

The reason for portrait images being displayed in landscape mode when they are embedded using <img> or background-image is the EXIF data for the image. How a browser deals with EXIF orientation depends on the browser, and there’s no cross-browser way to easily correct it either. Michael’s Node.js fix helps you correct the orientation. A handy little tip.

From Smashing With Love

A month can be a long time to stay on top of things, so please do subscribe to our bi-weekly newsletter and our podcast if you still haven’t. Each and every issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also tune into our very own Smashing TV, and follow us on Twitter, Facebook as well as LinkedIn. Please do always feel free to reach out and share your projects with us! We love hearing from you!

Keep up the brilliant work, everyone! You’re smashing!

Smashing Editorial(cm, vf, ra, il)
Unwritten Rules of Travel: Don’t Mix Business and Pleasure

November 14 2019


How to Learn React Native: Start With These Courses and Tutorials

Whether you’re new to React Native or you’ve been using the framework for years, there’s always something more to learn. This powerful JavaScript-based mobile framework makes it possible to take code that wouldn’t be out of place on a website and turn it into a native mobile app.

With this power, comes a number of techniques, architectures, and design choices of differing complexities to learn. This guide will walk you through some of the best resources available from Envato to help you get started in React Native, and to keep your education going no matter what level you’re currently at.

Before we get started, you might also want to check out some of the excellent React Native app templates available for sale on CodeCanyon. Starting with one of these templates can get your project off to a great start.


About the React Native Framework

Mobile apps have been around for a while now, but the recent advent of JavaScript-based application frameworks has completely changed the game. While there are a number of different frameworks out there, React Native has become one of the biggest contenders in the space, powering behemoth apps such as Facebook, Instagram, Discord, AirBnB, and hundreds (if not thousands) more.

Why has React Native become the go-to for app development?

In short, it makes app development exponentially more efficient for both developers and companies. Building off of a central JavaScript code base, React Native reduces, and in many cases, eliminates the duplicated work that used to be necessary to launch both an iOS and Android app. In addition, having a single language that is also widely used within web development means that there are many more developers available to work on projects. This means more help when you run into issues, more documentation on how to do common tasks, and more engineers if the need arises.

Now that we’ve talked a bit about the importance of React Native though, let’s look at the first step of a React Native journey, getting up to speed on JavaScript.

Before Getting Started With React Native

React Native is a powerful framework, but before getting started working with it, there’s some underlying technology that you’ll need to be familiar with. In this case, we’ll be mostly looking at JavaScript, and maybe a little bit of React.

A good place to start is the Practice JavaScript and Learn course series, which can help pin down the basics of JavaScript quickly:

  • JavaScript
    Practice JavaScript and Learn: The DOM
    Jeremy McPeak
  • JavaScript
    Practice JavaScript and Learn: Object-Oriented Programming
    Jeremy McPeak
  • JavaScript
    Practice JavaScript and Learn: Functions
    Jeremy McPeak

Then you’ll want to expand your knowledge to include Modern JavaScript Fundamentals, and finally nail in your knowledge by completing some projects:

  • JavaScript
    Modern JavaScript Fundamentals
    Dan Wellman
  • JavaScript
    3 JavaScript Projects for Beginners
    Craig Campbell

Once you’ve gone through those (or if you happened to already know a bit of JavaScript), you’ll want to pick up some React. React is a JavaScript framework that serves as the base for React Native, and carries a number of similarities, including its structure and dependence on components.

Once you’ve got React down, you’ll be able to apply a lot of that information to a React Native app. If you’re experienced with JavaScript and other frameworks already though, feel free to skip forward to learning React Native.

For the rest of us, check out these courses on the fundamentals of React: 

  • React
    Practical React Fundamentals
    Derek Jensen
  • React
    Modern Web Apps With React and Redux
    Andrew Burgess
  • React
    Thinking in React: Component Lifecycle Methods
    Andrew Burgess

With React under your belt, now it’s time to dive into React Native. While there are many similarities between React and React Native, there are some important new skills that you’ll need to get your native app rolling. Let’s check them out!

React Native Basics

We’ve got all of our prerequisites met, so now it’s time to dig in.

React Native has two key pieces that we’ll want to tackle first, its architecture and the use of components. Components are often self-contained bits of code or UI, built in a modular nature so that they can be used several times throughout an app (or even be dropped into other programs easily). These are commonly tied to screen elements, such as login screens, buttons, or other interactions. The use of these components as the main building blocks of the app is what gives React Native its unique architecture.

This architecture means that elements are often divided so that their functionality and user interface are separated. Then they are grouped into screens, with each representing a literal screen being shown to a user. This structure makes it easier to debug your code, reuse components between screens, and rewrite components to be used for new purposes.

First you can check out this article on the React Native Ecosystem to get a feel for what all tools, environments, and other useful resources exist. After that, this course on Getting Started with React Native will teach you many of the basics, like setting up your environment, dealing with JSX, and more. Finally, try your hand at putting together your own component by following along with this tutorial on creating a calendar component with React Native.

With those basics out of the way, the next step is to delve into working with and creating full apps. Let’s check that out next.

Building Full Apps with React Native

Awesome, by this point you’ll have a good feel for working in React Native. You know what components are, how to build them into screens, and have put together a few small features by yourself or made some changes to existing code. Next we’re going to look at how you can bring that all together to create fully fledged apps using React Native.

We aren’t quite to the point of building them from scratch yet, but taking an existing template, library, or resource, we’ll figure out how to make it into a usable end product.

A good place to start is to bolster your understanding of JSX and React a bit by taking this deep dive course that will shed more light into their functionality: 

  • React
    Thinking in React: JSX Deep Dive
    Andrew Burgess

Then take a look at some of the app templates that exist already. Study up on their code, their structure, and their documentation. Even more importantly though, tinker around! Add in your own components, change up how an existing one works, or customize some of the styling. Anything to take it from a standard template to a working minimum viable product will help you to build out the core skills it takes to build React Native Apps.

Here’s a good head start on some of the best ones available through Envato: 

  • Mobile App
    9 Best React Native App Templates of 2019
    Nona Blackman
  • React Native
    Getting Started With the MStore Pro React Native App Template
    Kyle Sloka-Frey
  • React
    9 React Native App Templates for You to Study and Use
    Eric Dye

Once you’ve put together a few projects on your own, it’s time to move onto the more advanced parts of React Native.

Advanced Techniques and Features of React Native

When working with more advanced concepts of React Native, there are two directions to go: deep and wide. You can learn more about creating an app from scratch, start to finish, working on every stage (wide). But you might also want to go deeper, looking into specific ways to improve your usage of React Native, such as mastering advanced app structures or really digging into an available library or service (such as Firebase). Or maybe you want to do both!

For going wide, try out this course that walks you through the creation of an app from beginning to end:

  • React Native
    Build a Social App With React Native
    Markus Mühlberger

If you want to go deep into a specific topic, there’s a lot of them available.

A good start would be getting up to speed on using Expo to work with projects and make it easier to test and deploy: 

  • React Native
    Easier React Native Development With Expo
    Wern Ancheta

You might also want to learn how to plug your app into an expandable, popular back-end such as AWS:

  • Mobile Development
    Supercharging Your React Native App With AWS Amplify
    Nader Dabit

Or, check out some of these more advanced courses on React and React Native:

  • React
    6 Cutting-Edge React Courses
    Andrew Blackman

Building Your React Native Journey

Like any language or framework in programming, you’re never quite finished. As you make your way along your journey, new features pop up all the time and complex edge cases make themselves known. Because of this, your path to learning can be distinct from that of someone else’s.

How did you learn React Native? What are your favorite resources for learning and improving within app development? Let me know!


Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification Prompts

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification the silent treatment.

Let's get into the news!

Edge browser with new Internet Explorer mode launches in January

Microsoft expects to release the new Chromium-based Edge browser on January 15, on both Windows and macOS. This browser includes a new Internet Explorer mode that allows Edge to automatically and seamlessly render tabs containing specific legacy content (e.g., a company’s intranet) using Internet Explorer’s engine instead of Edge’s standard engine (Blink).

Here’s a sped-up excerpt from Fred Pullen’s presentation that shows the new Internet Explorer mode in action:(via Kyle Pflug)

Speed report experimentally available in Google Search Console

The new Speed report in Google’s Search Console shows how your website performs for real-world Chrome users (both on mobile and desktop). Pages that "pass a certain threshold of visits" are categorized into fast, moderate, and slow pages.

Tip: After fixing a speed issue, use the “Validate fix” button to notify Google Search. Google will verify the fix and re-index the pages if the issue is resolved.

(via Google Webmasters)

Facebook’s notification prompt will disappear in Firefox

Firefox will soon start blocking notification prompts on websites that request the notification permission immediately on page load (Facebook does this). Instead of the prompt, a small “speech balloon” icon will be shown in the URL bar.

Websites will still be able to show a notification prompt in Firefox as long as they request permission in response to a user interaction (a click, tap, or key press).

(via Marcos Càceres)

More news...

Read more news in my weekly newsletter for web developers. Pledge as little as $2 per month to get the latest news from me via email every Monday.

More News →

The post Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification Prompts appeared first on CSS-Tricks.


Learn UI Design

Erik Kennedy's course Learn UI Design is open for enrollment for less than a week. Disclosure, that link is our affiliate link. I'm linking to it here because I think this is worthy of your time and money if you're looking to become a good UI designer.

I think of Erik sorta like the Wes Bos of design teaching. He really gets into the nitty-gritty and the why of good design. Design is tricky in that way. Adjusting some colors, spacing, and lines and stuff can feel so arbitrary at times. But you still have a sense for good and bad. The trick is honing your eye for spotting what is bad in a design and how to fix it. Erik excels at teaching that.

The course is a thousand bucks. Not very cheap. Personal lessons double that. It's reasonable for you to have some questions.

Yes, it's pro-quality. Yes, it's 20 hours of video. Yes, you have lifetime access and can complete it on your own schedule. Yes, students get design jobs after completing it. Yes, there's a student community with 1,000+ folks. Yes, you can use Sketch or Figma.

It's a lot. It's very modern and made to teach you how to be a designer in today's world. So no, it's not free or even inexpensive — but it's good.

Direct Link to ArticlePermalink

The post Learn UI Design appeared first on CSS-Tricks.


Some CSS Grid Strategies for Matching Design Mockups

The world of web development has always had a gap between the design-to-development handoff. Ambitious designers want the final result of their effort to look unique and beautiful (and true to their initial vision), whereas many developers find more value in an outcome that is consistent, dependable, and rock solid (and easy to code). This dynamic can result in sustained tension between the two sides with both parties looking to steer things their own way.

While this situation is unavoidable to some extent, new front-end technology can play a role in bringing the two sides closer together. One such technology is CSS grid. This post explores how it can be used to write CSS styles that match design layouts to a high degree of fidelity (without the headache!).

A common way that designers give instructions to front-end developers is with design mockups (by mockups, we’re talking about deliverables that are built in Sketch, XD, Illustrator, Photoshop etc). All designers work differently to some degree (as do developers), but many like to base the structure of their layouts on some kind of grid system. A consistent grid system is invaluable for communicating how a webpage should be coded and how it should respond when the size of the user’s screen differs from the mockup. As a developer, I really appreciate designers who take the trouble to adopt a well thought-out grid system.

A 12-column layout is particularly popular, but other patterns are common as well. Software like Sketch and XD makes creating pages that follow a preset column layout pretty easy — you can toggle an overlay on and off with the click of a button.

A grid layout designed in Sketch (left) and Adobe XD (right)

Once a grid system is implemented, most design elements should be positioned squarely within it. This approach ensures that shapes line up evenly and makes for a more appealing appearance. In addition to being visually attractive, a predictable grid gives developers a distinct target to shoot for when writing styles.

Unfortunately, this basic pattern can be deceptively difficult to code accurately. Frameworks like Bootstrap are often used to create grid layouts, but they come with downsides like added page weight and a lack of fine-grained control. CSS grid offers a better solution for the front-end perfectionist. Let's look at an example.

A 14-column grid layout

The design above is a good application for grid. There is a 14-column pattern with multiple elements positioned within it. While the boxes all have different widths and offsets, they all adhere to the same grid. This layout can be made with flexbox — and even floats — but that would likely involve some very specific math to get a pixel-perfect result across all breakpoints. And let’s face it: many front-end developers don’t have the patience for that. Let’s look at three CSS grid layout strategies for doing this kind of work more easily.

Strategy 1: A basic grid

See the Pen
Basic Grid Placement
by chris geel (@RadDog25)
on CodePen.

The most intuitive way to write an evenly spaced 12-column layout would probably be some variation of this. Here, an outer container is used to control the outside gutter spacing with left and right padding, and an inner row element is used to restrain content to a maximum width. The row receives some grid-specific styling:

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;

This rule defines the grid to consist of 12 columns, each having a width of one fractional unit (fr). A gap of 20px between columns is also specified. With the column template set, the start and end of any child column can be set quite easily using the grid-column property. For example, setting grid-column: 3/8 positions that element to begin at column three and span five columns across to column eight.

We can already see a lot of value in what CSS grid provides in this one example, but this approach has some limitations. One problem is Internet Explorer, which doesn’t have support for the grid-gap property. Another problem is that this 12-column approach does not provide the ability to start columns at the end of gaps or end columns at the start of gaps. For that, another system is needed.

Strategy 2: A more flexible grid

See the Pen
More Flexible Grid Placement
by chris geel (@RadDog25)
on CodePen.

Although grid-gap may be a no go for IE, the appearance of gaps can be recreated by including the spaces as part of the grid template itself. The repeat function available to grid-template-columns accepts not just a single column width as an argument, but repeating patterns of arbitrary length. To this end, a pattern of column-then-gap can be repeated 11 times, and then the final column can be inserted to complete the 12-column / 11 interior gap layout desired:

grid-template-columns: repeat(11, 1fr 20px) 1fr;

This gets around the IE issue and also allows for columns to be started and ended on both columns or gaps. While being a nice improvement over the previous method, it still has some room to grow. For example, what if a column was to be positioned with one side spanning to the outer edge of the screen, and the other fit within the grid system? Here’s an example:

A grid Layout with an that's item flush to the outer edge

In this layout, the card (our left column) begins and ends within the grid. The main image (our right column) begins within the grid as well, but extends beyond the grid to the edge of the screen. Writing CSS for this can be a challenge. One approach might be to position the image absolutely and pin it to the right edge, but this comes with the downside of taking it out of the document flow (which might be a problem if the image is taller than the card). Another idea would be to use floats or flexbox to maintain document flow, but this would entail some tricky one-off calculation to get the widths and spacing just right. Let’s look at a better way.

Strategy 3: An even more flexible grid

See the Pen
Right Edge Aligned image with grid
by chris geel (@RadDog25)
on CodePen.

This technique builds on the idea introduced in the last revision. Now, instead of having the grid exist within other elements that define the gutter sizes and row widths, we’re integrating those spaces with the grid’s pattern. Since the gutters, columns, and gaps are all incorporated into the template, child elements can be positioned easily and precisely on the grid by using the grid-column property.

$row-width: 1140px;
$gutter: 30px;
$gap: 20px;
$break: $row-width + 2 * $gutter;
$col-width-post-break: ($row-width - 11 * $gap) / 12;
.container {
  display: grid;
  grid-template-columns: $gutter repeat(11, calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) #{$gap}) calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) $gutter;
  @media screen and (min-width: #{$break}) {
    grid-template-columns: calc(0.5 * (100% - #{$row-width})) repeat(11, #{$col-width- post-break} #{$gap}) #{$col-width-post-break} calc(0.5 * (100% - #{$row-width}));

Yes, some math is required to get this just right. It’s important to have the template set differently before and after the maximum width of the row has been realized. I elected to use SCSS for this because defining variables can make the calculation a lot more manageable (not to mention more readable for other developers). What started as a 12-part pattern grew to a 23-part pattern with the integration of the 11 interior gaps, and is now 25 pieces accounting for the left and right gutters.

One cool thing about this approach is that it can be used as the basis for any layout that adheres to the grid once the pattern is set, including traditionally awkward layouts that involve columns spanning to outside edges. Moreover, it serves as a straightforward way to precisely implement designs that are likely to be handed down in quality mockups. That is something that should make both developers and designers happy!

There are a couple of caveats...

While these techniques can be used to crack traditionally awkward styling problems, they are not silver bullets. Instead, they should be thought of as alternative tools to be used for the right application.

One situation in which the second and third layout patterns are not appropriate are layouts that require auto placement. Another would be production environments that need to support browsers that don’t play nice with CSS grid.

The post Some CSS Grid Strategies for Matching Design Mockups appeared first on CSS-Tricks.


Finally, it Will Be Easy to Change the Color of List Bullets

In my germinating years, the general advice was this:

  <li><span>List item</span></li>
  <!-- ... -->
li { color: red; } /* bullet */
li span (color: black; } /* text */

Not terrible, but not great. You're "resetting" everything at the span level, so it gets more complicated the more you do.

Things are getting much easier. Let's take a walk through this world getting more modern as we go.

An alternative was to rip off the default list styling and replace it with a pseudo-element.

ul {
  list-style: none;

li::before {
  content: "• ";
  color: red;

If we need to count, we could do that with CSS counters.

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

ol li {
  counter-increment: my-awesome-counter;

ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;

Quick aside here: this doesn't help with the color, but you can specify what character to use for the bullet by setting a string, like:

ul {
  list-style-type: '✽ ';

This is as of Firefox 39 (2015) and Chrome 79 (which comes out Dec 9, 2019).

For ordered lists, there is a ton of language-specific options. And those language styles work for CSS counters as well, which you can learn more about in Hui Jing's deep dive.

See the Pen
Random CSS counters playground
by Chen Hui Jing (@huijing)
on CodePen.

But all the while, we only wanted to select the stupid bullet (or whatever it is) and style it. Now we are starting to be able to do just that.

As of Firefox 68 (July 2019), you can do like:

li::marker {
  color: red;
  content: "►";

...which, as you can see, changes the color and the bullet thing That is definitely the cleanest and easiest way to go, so it's nice to see progress.

Tejas demonstrates:

See the Pen
::marker example
by Tejas (@Tejask)
on CodePen.

Manuel Matuzović notes that if you set an element to a list-item display type, you can use markers on them as well.

h2 {
  display: list-item;

h2::marker {
  color: orange;
  content: "☞";

Even Safari has support at the time of this writing, so we should lean on Chrome here.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.


Chrome Opera Firefox IE Edge Safari No No 68 No No 11.1

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox 11.3-11.4 No No No No No

The post Finally, it Will Be Easy to Change the Color of List Bullets appeared first on CSS-Tricks.


15+ Best Icon Fonts for Web & UI Design (Free + Premium)

Icon fonts are one of the most useful elements that web and UI designers simply can’t live without. Today we’re bringing you a collection of the best modern and creative icon fonts you can use in your website and user interface designs.

With icon fonts, you don’t have to rely on libraries of PNG files. You don’t have to resize and edit icons using vector files to make them fit into your website designs. And, more importantly, you don’t have to worry about optimizing the icons for various screen sizes.

However, finding the right icon font to blend with your design projects can be challenging. We want to make that process much easier. Get started by browsing our handpicked collection of free and premium icon fonts (and be sure to take a look at our tips for choosing an icon font to help you get started!)

Icofont – Free Creative Icon Font

Icofont is the most creative icon font you can download and use for 100% free of charge. This font includes more than 2100 icons in 30 different categories such as currency, social, branded logos, and more. One of the benefits of using this pack is it’s available in both SVG format and as icon font.

Font Awesome – Free Icon Font

Font Awesome is the Internet’s most popular icon font featuring over 7000 icons. It’s been used by over 100 million websites, including brands such as McDonalds and Yale University. It packs lots of useful features. Self-hosting the icon pack is the ideal way to use it since cloud-hosted plans have usage limits.

Ionicons – Free Minimal Icon Font

Ionicons is another set of creative icons featuring minimal and simple designs. This icon font is made specifically for web and mobile user interface design and it’s compatible with both iOS and Android platforms. It features a total of over 1100 icons. It’s licensed under The MIT open-source license

150 eCommerce Icons with Icon Font

This is a collection of unique icon pack featuring a modern and minimalist icon design. It includes 150 different icons you can use in various eCommerce designs. The icons are available in EPS, AI, SVG, and an icon font version as well.

130 Vector Line Icons & Icon Font

This bundle includes a mixed collection of useful icons related to entertainment, multimedia, online engagements, lifestyle, and more. The pack comes with a total of 130 icons that you can use as an icon font or edit and customize to your preference using its vector EPS and AI files.

Weather Icons and Icon Font

Weather icons are often used in many different types of web and UI designs, especially in mobile user interfaces. With this pack, you get to choose from 42 unique weather-related icons. The icons are available in AI, PSD, SVG, and icon font formats as well.

32 Weather Icons and Font

Similar to the previous bundle of icon fonts, this pack features a set of minimal line icons. It also includes 32 stylish weather icons in multiple formats, including AI, SVG, EPS, and icon fonts. The clean and simple design makes these icons suitable for all types of business and professional designs.

Fontisto – Free Modern Icon Font

Fontisto is another great free icon font featuring a set of modern and stylish icons in multiple categories. The icons are fully scalable and look great on Retina displays. It’s completely free to use with commercial projects as well.

Dripicons – Free Vector Line-Icon Font

Dripicons is a collection of line icons featuring smooth and minimal designs. The icons feature modern layouts that are suitable for both web and mobile user interface designs. It’s also free to use with commercial projects.

Typicons – Free Simple Icon Font

Typicons comes with a set of lightweight and simple icons that works across both web and native app user interfaces. The font includes more than 330 unique icon designs in multiple categories and with scalable designs.

Modern Line Style Icon Set + Font

If you’re a fan of line icons, this set of modern line icons is perfect for you. It features more than 300 icons. The icons are available in AI, SVG, PSD, and includes an icon font version for digital designs as well.

100 Transport Vector Icon Font

This premium icon font comes with 100 unique icons that includes all kinds of symbols and designs related to transportation and travel. It also comes in multiple vector file formats as well as icon font format.

200 Education Icon Font

A set of 200 unique icons made specifically for education-related designs. This bundle of icons comes in EPS, AI, and SVG file formats. An icon font version is also included for web and mobile UI designs.

1430 Line Icons Bundle + Font

This is a massive bundle of line icons featuring a wide variety of designs in multiple categories. This pack is perfect for modern mobile and web designs. The icons are available in vector format and font icon format.

Captain Icon – Free Creative Icon Font

Captain Icon is a modern icon font featuring more than 350 unique icon designs. The icons are ideal for crafting both web and mobile user interfaces. The icons come in multiple formats including EPS, SVG, PSD, and icon font versions.

Devicon – Free Fill Icon Font

Devicon is a free to use icon font featuring a fill-color icon design. The pack features many useful icons, especially related to web and mobile development. You can either use the cloud-hosted version of the icon font or self-host on your own servers as well.

Entypo – Free Clean Icon Font

Entypo is a free icon font featuring a minimal and clean design. This pack includes over 400 icons. Even though the font hasn’t been updated in a while, the icons are still relevant today.

Stroke Icons 7 – Free iOS Icon Font

This free icon font made by Pixelden comes with 200 unique icons featuring thin line designs. Each icon features a design inspired by iOS 7. This icon font is most suitable for website and web app designs.

5 Tips for Choosing an Icon Font

Here are a few tips to help you pick the best icon font for various types of web and UI designs.

1. SVG Icons vs Icon Fonts

There’s quite a debate going on over choosing SVG icons and icon fonts. While both options have their own benefits and downsides, some designers prefer one over the other.

Thankfully, most of the icon fonts on our list also include SVG icon versions as well. So we’ll let you decide which option is right for your project.

2. Make Sure it’s Responsive

Responsiveness of your icon font is probably the most important feature to look for when choosing any type of icon. This is also where icon fonts shine as they are usually responsive enough to look the same on all types of screen sizes and devices.

Although, it wouldn’t hurt to double-check to make sure the icons are responsive, especially if you’re using an SVG version of the icons.

3. Pick Appropriate Themes

Icon fonts come in various styles and themes. Such as outline icons, flat design icons, minimalist icons, and more. Depending on the type of project you’re working on, it’s up to you to find the right icon font with the appropriate theme.

4. Colors and Customization

One of the many benefits of self-hosting your own icon fonts is that it allows you to customize icons to your preference. Most modern icon fonts even let you choose from multiple icon versions, including fill and outline versions.

5. Free vs Premium Icon Fonts

Of course, if you’re on a tight budget, going with a free font is the ideal choice. But, if you can afford a few bucks, use a premium icon font. Not just to give a unique look to your web or UI design. But also to have full control over the icons and to be able to use them in commercial projects.

Check out our collection of the best app landing website templates to get a head start in your website designs.


Become An HTML Email Geek With These Videos From Rémi Parmentier

Become An HTML Email Geek With These Videos From Rémi Parmentier

Become An HTML Email Geek With These Videos From Rémi Parmentier

Rachel Andrew

Creating an HTML email can feel like stepping back a few years as a web developer. All of our new layout functionality is unavailable to us &mdasj; email clients render the same layout in completely different ways. Just when we think we have it all fixed, another email client shows up with a new set of bugs.

Not too long ago, Rémi Parmentier, an HTML Email developer, ran a session with practical front-end techniques for building modern, cross-client emails. A few weeks later, he gave a wonderful talk at SmashingConf Freiburg highlighting some of the common struggles and shared useful strategies for avoiding problems in email development.

There was so much useful information contained in these sessions that we wanted to release them more widely — including the webinar transcript and references to slides and resources. If you have ever struggled with email development, these will give you a great starting point to understand why an email isn’t rendered properly, and how to squash those nasty bugs quickly.

If you enjoy learning from these videos, check out Smashing Membership. Starting from this month, we will be showing some of the live sessions we run every month to a wider audience — absolutely free of charge to view. However, if you’d like to join the discussion live and perhaps have your work reviewed by an expert, join Smashing Membership. For the price of one coffee a month, you can support the creation of more content like this.

Now get ready to learn everything you need to know about HTML email!

Webinar: HTML Email with Rémi Parmentier

Resources And Transcript

Rémi Parmentier: Thanks, everyone, for coming to my presentation. My name is Rémi Parmentier. Some of you might know me from Twitter or from my blog under the nickname hteumeuleu. I’ve been doing HTML emails for as long as I’ve been working in this industry. For the past few years, I’ve started to give training in HTML emails as well I am spending a lot of time online on Slack, on Twitter, on forums to help people find solutions for their email problems. This gave me a pretty good view of most of the coding problems that people have and how to actually solve them. I started working on this email coding guidelines project this year. This was greatly inspired by some of the work that’s been done on the web about I think a decade ago.

Rémi Parmentier: About a decade ago, there was a lot of trends of web guidelines being shared by people from many different companies. First one was the most famous one was this code guide by Mark Otto, who was then working at Twitter. The point of the document was to share a lot of guidelines about how HTML and CSS should be coded within the company. There was a lot of good practices shared in this document, like which doctype you should use or to close your tag and such. I think this is really interesting to have.

Rémi Parmentier: In the email world, Ted Goas from Stack Overflow actually made a very similar document with a lot of content as well about how they’re building the emails at Stack Overflow. This really gave me the lust to make a similar document that everyone could share within their company or everyone could pick good practices for building HTML emails. We’re going to see a few of these best practices and you’ll be able to see the document afterwards online. Let’s start ahead.

Rémi Parmentier: The first thing that I usually share is to use the HTML5 doctype. Whenever I help people online of open HTML email, it makes me sad to see that a lot of people are still using HTML4 doctype or XHTML 1. The first reason to use the HTML5 doctype is that it’s really nice. Actually, it’s very short. You can type it by hand, you can remember it, and that’s already a good reason to use it.

Rémi Parmentier: The most important reason to use the HTML5 doctype is that when an email is displayed in webmail, our doctype is usually removed and we inherit from the webmail’s doctype. Most webmails use the HTML5 doctype, so even for you wish you could use HTML1 or HTML4 doctype, this won’t work because webmails will remove it.

Rémi Parmentier: I made this little illustration of how this actually works. On the left, you can see an email address coded. It’s got a style tag and it’s got a div and an H1 inside. What happens when a webmail like Gmail, for example, wants to display this content, it will pick the style tags and pick the content within the body, and it will prefix the styles, it will remove all the styles that it won’t support, and then it will include this inside the HTML of the actual webmail, because webmails are actually just HTML and CSS. This means that even if I use an HTML4 doctype, because Gmail uses HTML5 doctype, my code will be random thanks to that doctype. This is a good thing to have in mind.

Rémi Parmentier: I made this about this, about which doctype you should use in HTML emails, about three years ago already, but what I saw back then was that most of the email clients already were using an HTML5 doctype. A few of them didn’t have a doctype at all, like on mobile apps sometimes, but a lot of them were on HTML5.

Rémi Parmentier: It’s important to know that you can end up on different doctypes because there can be differences. The first one is that HTML5 actually have spaces between images. If you slice some big image inside your email, you will see something like this if you try it with an HTML5 doctype.

Rémi Parmentier: Let me actually show you this with a little demo. Here, I have this … Oops, it’s the wrong one. Here I have this little demo of a T-Rex. It’s actually three images. Here with an HTML1 doctype, everything is working fine, but if I use an HTML5 doctype instead, boom, you have white lines appearing between each images.

Rémi Parmentier: Now, I’m not exactly sure why this happens, but I think it’s because when HTML5 upgraded, they cannot change some of the way that images are supposed to behave according to the specification, so now it looks more like a paragraph with text, so there are lines in between images.

Rémi Parmentier: Email Geeks have found very good solutions to the service. One of the solutions is to actually add a display block style to every images. Once you do this, it will remove the white lines between the images. Another solution to avoid this if you can’t use display block is to add a vertical align middle style and then you will remove these white lines as well.

Rémi Parmentier: This is a first quirk that you can encounter with HTML5 doctype, but there is another interesting case is that you can’t display block a table cell in WebKit without a doctype. This one is really interesting as well. I’ve got a table for this as well, which would be right here.

Rémi Parmentier: Here I’ve got a table with three little dinosaurs next to each others. Usually when we’ve got tables like this and we want to make our emails optimized for mobiles, what we can do is apply the display block to our TDs and then they will stack on each others like this.

Rémi Parmentier: As we can see here, we have an HTML5 doctype. This is working fine, but if I would ever end up in an image client that will remove the doctype, then this won’t work anymore in WebKit. As you can see now, it’s back to the regular pattern display.

Rémi Parmentier: I think this has to do with legacy websites and quirk modes and all of these things, but one solution that was found by the email community is to actually use TH tags instead of TD. If I remove every TD here by TH, you can see that, here, even without a doctype, it’s working again. This is some kind of the quirks that you have to deal with in HTML emails because of not only email clients behave but also rendering engines like WebKit here.

Rémi Parmentier: The second best practice I’d want to share with you today is to use the lang attributes. The lang attribute in HTML is to define the language of your document. This is very important for accessibility, and mostly this is because accessibility tools like screen readers will be able to pick the right voice for it.

Rémi Parmentier: Once again, let me show you a demo of this live, and hopefully it won’t crash. Here I have this very nice email from Mailchimp. As it was said before, I am French, so my computer is set in French. My screen reader is in French as well, so every time we’ll see some new content, it will try to read it in French. I will stop my screen reader now. You try to see when we’ll get to this paragraph and see how it will read it.

Rémi Parmentier: I know that I don’t really have a good English accent, but this is even worse than mine. If you don’t set the lang attributes, your content will be read on whatever default language is for your users. The quick phase here is to add the lang attributes, and then I can restart my screen reader.

Screenreader:: Mailchimp Presents has a new collection of original content made with entrepreneurs in mind. In recent months, we’ve rolled out documentaries, short-form series and podcasts that live only on Mailchimp. Today, we officially launch a platform.

Rémi Parmentier: As you can hear, even for my screen reader, and my system is still set in French, once the screen reader is actually on HTML contents, it will use another voice, an English voice there, to read the content which makes the experience much, much better here.

Rémi Parmentier: One small difference that we have in HTML emails with the lang attribute is that, just like for the doctype, the doctype might not be picked up by webmails, because webmails will only take just styles and the content of the body. It’s usually a good practice to add the lang attribute as well on the wrapper that you have on your content inside your body, so you’ll make sure that this will get picked by webmails as well.

Rémi Parmentier: Now a third best practice that I like is to actually use styles over HTML attributes. This is really something that people hate about HTML emails because they feel that they have to use all the HTML attributes, they have to use all code, and this makes emails look very different from the web, but there is really no reason for this at all unless you need to support very old email clients like Lotus Notes 6 or similar.

Rémi Parmentier: In this example here, in the first example, you can see I’ve used valign, align and bgcolor attributes in HTML, but all of those can be very easily and robustly replaced by the corresponding styles. Here I only have one style attribute and inside I have the vertical align CSS property, text align and background color.

Rémi Parmentier: One reason I like to do this is because it makes go cleaner and more readable. All your presentational properties are grouped in a single style attribute instead of being all over the place with valign, align and all the stuff. This makes it, in my opinion, very, very better to read and to maintain.

Rémi Parmentier: There’s another reason I like to use styles over attributes is that it helps taking over email clients’ own styles. For example, on the French webmail of Orange, the webmail’s UI actually has a CSS that has a rule that sets every TD to vertical align top. Because of this rule, if you were to use only HTML attributes like valign=middle, the CSS role from the webmail would override with the HTML attributes because this is how the cascade works in HTML and CSS.

Rémi Parmentier: Instead, if we use an inline style with a vertical align property on the TD here, well, this style will take over the webmail style because inline styles are more important than external style sheets. Using styles over attributes is also a good way to fight other email clients’ and webmails’ default styles.

Rémi Parmentier: There are a few exceptions to the attributes that I still use. The first exceptions is to center a table in Outlook 2007 to 2019 on Windows, because as Scott said in the introduction, Outlook uses Word as a rendering engine in those versions and it’s not really good at understanding CSS, at least for some properties.

Rémi Parmentier: For example, here, it would understand the margin properties for pixel values, but it wouldn’t understand the margin zero auto value to center a table. We still need the align=center attribute to center elements and data, especially in Outlook, but we no longer need to use which attributes as in the first example here. This can be replaced by the width style instead.

Rémi Parmentier: Now other exception in Outlook as well is when you want to define a fluid image width. In the first example, I use a width attribute with 100% value. The thing is that Outlook actually doesn’t deal with percentage width for images the same way as it should be in CSS.

Rémi Parmentier: The percentage in Outlook is actually matching the physical image size and not the parent size in the HTML. If you’ve got an image that’s 600-pixel wide and you use a width=50%, then your image will actually be 300 pixels no matter what the size of your parent in HTML is.

Rémi Parmentier: Usually, to avoid any quirks with this is then I always define a fixed width in pixels for Outlook using the width attribute in HTML, and then using a style, I use a width with 100%. Outlook will only pick the attribute value here and not the style value.

Rémi Parmentier: Then, another exception I have when I use styles over attributes is to reset the default styles of the table. By default, the HTML tables have borders and padding inside and cells, et cetera. The proper way to do this in CSS is to set border zero, border spacing zero, our padding is zero, our border is zero, the first ones on the table, and expanding your border actually for each cell of your table.

Rémi Parmentier: This is pretty much why I don’t really like to do it the CSS way because you need to repeat the padding and border for every TD of your table, while if you use the attributes, you only need to use them on the table, and then you’re all set for any … no matter on any cells you have inside your table. This is probably something I will change my mind in a few years maybe, I hope, but for now, I’m still used and I prefer using the attribute way for resetting default styles on tables.

Rémi Parmentier: Now another best practice I’d like to share is, do not split the visuals. This was actually a very common practice maybe a decade ago. When we had large images, it was always better, at least it was always shared that you should split it to make download faster and things like that, but this is not true today.

Rémi Parmentier: Not splitting visual actually has a lot of benefits. The first one is that it’s easier to maintain. If you have a big visual in your email and it’s Friday night and your project manager comes at you and asks you to change it at the last minute, well, you don’t have to open Photoshop and slice your images again and where you’ve got everything. You can just replace that image and you’re done.

Rémi Parmentier: It’s also better for accessibility because you have a single image, you have a single element, so a single alt attribute. This is simpler and better for accessibility. One thing it’s also better for is for web performance, because downloading 100 kilobytes image is theoretically faster than downloading five image of 20 kilobytes.

Rémi Parmentier: That’s because for each image of 20 kilobytes, the request to the server needs to be made and we need to wait the answer five times. Even for the really small micro-transactions between the client and the server, this add up the more image you have, and it can slow down the download of your email image, so this is something to avoid.

Rémi Parmentier: Next, on the WebKit, there’s also a very weird behavior. Whenever you use a CSS transform on sliced images, WebKit will have very thin lines between split images. I would just show you a demo of this as well. Back to my first T-Rex image here, if I add a small transform here that will scale the image, here you can see that at this ratio, there are very small lines that appear within each slices of my image.

Rémi Parmentier: This is really due to WebKit not handling well the way they should scaled images like this. Maybe there’s a node size somewhere and it doesn’t compute properly, so you end up with small hair lines like this. Yes, the best practice here is to avoid to split your visuals.

Rémi Parmentier: This is actually something that will happen inside email clients because in, for example, if your email is bigger than the actual view of emails inside the clients, then your email will be resized using a CSS transform to feed the view port of the email client. This is something that you should be wary of.

Rémi Parmentier: Finally about splitting visual, I always try not to do it because this kind of things happens. This is something that was shared on Reddit almost 10 years ago. This is an email by LinkedIn and the face of this young lady, it was cut in half, maybe because some text was longer than expected or maybe because here the user chose to set up his email client with a bigger font than expected, so all kind of things can happen inside email clients, just like on the web. If you want to avoid these kind of strange situations, just don’t split visuals.

Rémi Parmentier: Next, this is a big one. This is tables for layouts. This surely is the most common thing that people think about when they think about HTML emails. It always annoys because we mostly don’t really need tables for layouts, except for one email client, and that is the Outlooks on Windows from 2007 to the latest 2019 version.

Rémi Parmentier: The reason of that, as we said before, is because all of those versions of Outlooks use Word as a rendering engine. Word is not really good in interpreting HTML and CSS. There is this documentation online about what it should be capable of, but it’s pretty hard to read and to make sense of, so I try to make this diagram to actually make sense of it.

Rémi Parmentier: From this documentation, what it says is that CSS supports in Outlook will actually vary from which elements you use CSS on. It will be different in body and span than in div and p and then all the other supported HTML tags.

Rémi Parmentier: First, if you have a body and span, you can only use what Microsoft calls Core CSS properties. That’s the color property, the font, text align and background color property. On the body element and the span element, you can only use those four CSS properties.

Rémi Parmentier: Then, on divs and paragraphs, you can use all those four properties from the Core level, but you can also use two new properties from what Microsoft calls the Coreextended level. In this level, you have two new properties, the text indent and margin properties.

Rémi Parmentier: Then, for all the other tags, you can use properties of the two previous levels, and you have what Microsoft calls the Full CSS support with many more CSS properties, but I think the most interesting are the width, height, padding, border and this kind of properties for defining elements.

Rémi Parmentier: This means here that if you want to use width and height properties and make it work in Outlook, you won’t be able to do this on a div because div only support Coreextended and Core CSS properties. You will need to use tables for those CSS properties, and the same thing for padding and border.

Rémi Parmentier: I usually narrow it down to the few following guidelines to use tables. I try to only use a table when I want to set a fixed width on an element. If I need an element to be a certain width, then I will use a table and define the width from that table.

Rémi Parmentier: Also, if I want to set two block elements side by side, because even Outlook doesn’t really support any advanced CSS layout property, so even float is not really well-supported, so if you need to have two elements side by side, then as you make a table with two cells, and those two elements will be next to each others then. Then I use tables whenever I need to set a padding, a background color or border style. This make it very reliant, very robust to use a table for those styles only.

Rémi Parmentier: Now a problem with tables is something we’ve learned in the way a long time ago is that tables are not made for presentation. They are made for actual data tables. This can be very problematic for screen readers especially. In order to improve accessibility here, we will use the role=presentation attribute whenever we will make a layout table.

Rémi Parmentier: Let me show you a quick example of how this will change the way your email is interpreted by a screen reader. I will take a new demo here. I’ve got this email from Jacadi, which is a French children clothing brand. They have this table here with different sizes of products. This is actually a table inside the code. I’ve pre-recorded a video here to show you how this is read by a screen reader.

Screenreader: Counting pairs, web content. Blank, blank, blank. Table 1 column. Nine rows. Blank. Column 1 of 1. Row 2. Nine Level 2 tables, seven columns. One row, Column 1 of 1. Blank. Column 3 of 7. Blank. Column 4 of 7. Blank. Column 5 of 7. Blank. Column 7 of 7. End of table. Row 3 of 9, blank. Column 1 of 1. Row 4 of 9, Row 2 table, seven columns, one blank. Column 1 of 7. Blank. Blank. End of table. Row 5 of 9, blank. Row 6 of 9, blank. Column, blank, blank, column end of table. Row 7 of 9, blank. Row 8 of 9 Row 2 table, blank. Column 1, blank. Column end of table. Row 9 of 9 blank. Column end of table.

Rémi Parmentier: This is terrible. This is so annoying. Now let’s see how we can fix these cells. The way we can fix this is by adding the role=presentation attributes. This is not something that it reads from tables to tables, so we need to add this attribute whenever we’ll have a new table. We have a few nested tables here, so we’ll add a few. Here is how the results sound.

Screenreader: Blank. Blank. Voice-over off.

Rémi Parmentier: This is so much better. This is so much smoother and it makes for much nicer experience. I hope this convinced you that you should always use as less tables as you can, but if you do, use role=presentation attributes on those tables.

Rémi Parmentier: Now, one step that we can take even further is that since tables are mostly for Outlook, we can use conditional comments to make those tables only visible on Outlook. Conditional comments are actually something that was available in Internet Explorer as well until I think I9. With these, if MSOs are in text, we can tell the borders that all the following contents within that conditional comment will be available only for MSO clients, so that’s mostly Outlook.

Rémi Parmentier: Then, between those opening and closing tables comments, we can have a div with a role or stuff that will come just like for a regular web border, although webmails will pick the div and Outlook will pick the table. This is video how I got most of my emails.

Rémi Parmentier: Now another small good practice to have is to use margin or padding for spacing. This is mostly to avoid empty containers, empty cells like this where we have a role within a cell with a height of 20 and then we have TDs with width of 20 to create margin all along with this content. I still see this done a lot, and this make your code really, really heavy. It’s less readable and it’s really bad in my opinion.

Rémi Parmentier: The proper way to do something like this would be to use a table as well if you want and have the padding style on the first TD, and then inside use margin to space tags between each others. This works again really well in every popular image client and in Outlook as well.

Rémi Parmentier: Now the small quirk that can happen in the Outlook and Windows is that there is the background color. If you use the background color on any of these elements with margin, it actually bleeds through the margin. Here’s an example where I should have a margin between the red background and blue background, but in Outlook, the margin is actually the same color of the background of that element. In those cases, then the solution is to maybe use another table and nest your content like this to space elements, but if you don’t use background, then margin is really safe even in Outlook.

Rémi Parmentier: Finally, this is perhaps my favorite recommendation. It’s to make it work without style tags. It’s not necessarily about having this raw HTML rendering, but thinking about progressive enhancements and graceful degradation and about how your emails will look without this guideline. This is something pretty unusual in cooperation of the web because it doesn’t happen on the web, but not having a style tag actually happens a lot on email clients.

Rémi Parmentier: First, not all email clients support style tags. Perhaps one of the most common example I see is Gmail on its mobile applications on iOS and Android lets you configure a third-party email address. You can use your Yahoo or address inside the Gmail app. If you do so, then every emails that you check won’t have support for style tags. This is what Email Geeks have nicknamed GANGA for Gmail apps with non-Gmail accounts. This is a very common occurrence that you can have.

Rémi Parmentier: Then you have a lot of cases for smaller or local or international email clients like SFR in France or Yandex and in Russia, et cetera. Even to this day, there are a lot of email clients that don’t support style tag, so if you want to make your code more robust, make sure that it can work without style tag.

Rémi Parmentier: Sometimes it’s also temporary. For example, in the past year or so, Gmail has had two days where style tags were completely removed from every email on every one of their email clients. We don’t know why this happened. There has been zero communication on that, but there’s a good chance that maybe they detected some kind of attacks that use certain styles, and so they needed to remove it very fastly and secure their users, so they removed style tag support for a few hours or almost a day. If you were to send a campaign that day, you were out of luck if your emails required style tags to work.

Rémi Parmentier: Sometimes also it’s contextual. For example, in Gmail, when you forward an email to someone, then you won’t have any style tags anymore, or when an email is viewed in its unclean version, you know when you have a view entire messaging at the bottom of your email because it was too long, if you view your email in that window, you won’t be able to have a style tag.

Rémi Parmentier: Then finally, sometimes it’s buggy. For example, in Yahoo Android in the app, the head is removed, so every style tag inside it are removed as well, but only the first head. We don’t really usually think as HTML documents are in multiple heads, but you can actually totally do this.

Rémi Parmentier: This has been pretty much a common practice now for a few years to deal with this bug in Yahoo. If you have a second head with your style with it, then it will work fine in Yahoo Android and in most email clients as well. We have just this empty head first so that Yahoo will strip it, and this will work.

Rémi Parmentier: Now, what I mean by making an email works is that the email should adjust its layer to any width without horizontal scroll and the email should reflect the branding of the sender. This can be colors often, this can be fonts or whatever, but make sure that it works without styles.

Rémi Parmentier: In order to do this, we can use inline styles. This is why most emails still use inline style, and I really recommend to do this for most of your styles. Make sure that the brand, the colors and everything can come up with just inline style.

Rémi Parmentier: Then, to tackle mobile emails to make sure that your emails can work fine from desktop to mobile, we have different solutions. The first one is to make your email fluid. I’ve got a little demo here as well, which I will show you right now.

Rémi Parmentier: This is an email that I’ve worked on almost four years ago for a French magazine, GEO. It’s got a lot of interesting things here. The first one is this grid here. If I try to resize it to make it responsive, you can see that it’s 100% fluid and it will scale accordingly to whatever the width for the image client is.

Rémi Parmentier: This works absolutely well without even a single style tag. This is just two tables on top, one for each lines, and we’ve got image inside it and the image are set with a fluid width, and so this works well enough even without style tags. This is good to have elements like this that can scale accordingly.

Rémi Parmentier: Now, this might not be the most optimal for every email, so another technique is to make your content hybrid. “Hee-breed,” or “hi-breed,” I’m not sure how you pronounce it, sorry for that, hybrid comes from the fact that you can still use media queries, but only as progressive enhancements, and then you need to make sure that your layout can fall back gracefully even without styles.

Rémi Parmentier: I would go back to this exact same email that I just showed you. A little bit lower here, we’ve got this gallery of user portraits. We can scale it as well. We have three columns here and then it will get on to two columns, and then only to one column.

Rémi Parmentier: The way this works here is using div width display in my block. We’ve got actually three divs like this next to each others and they all have a width of 33%. They will set so three can sit next to each others. They all have a minimum width of 140 pixels, so if there is no longer enough room to fit all those three elements because they’re in display inline block, they will naturally match even CSS flow down next to each others. This is a pretty good way to make it work like this.

Rémi Parmentier: I also use CSS and media queries here to make it a little bit more graceful when you have content here. If I disable the styles here, if I remove all of this, you can see that the layout has changed a little bit. We still have two columns, but they’re more stuck together. The layout still works appropriately where we can go from three to two to one layouts even without any styles, just with both div display and line blocks.

Rémi Parmentier: Then, perhaps the final, most popular way to make your emails work on mobiles is to make them mobile-first, to code them mobile-first. I will once again go back to that exact same email. You can see here that … Oops, it’s not fitting. I’ve got these two email columns next to each others. If I resize my window a little bit smaller, they will stack on each others.

Rémi Parmentier: Now because this is coded mobile-first, it means that this is actually the default layout for this zoom. On them, I use a min-width media query to change the layouts on desktop, on larger window sizes to make this work. If I remove all the styles here, just like I did before, you can see that now, our images are stacked on each others just like on mobile. This is what you’ll get when you code mobile-first. You get mostly your mobile view, but larger on desktop. This is really a lot of considerations to have when you’re coding emails for mobiles and for every email clients.

Rémi Parmentier: That’s pretty much it for me. All those recommendations, all those guidelines, you can find them online on GitHub, where I have these documents available. I really strongly encourage you really to share it within your colleagues and also to contribute to it.

Rémi Parmentier: If you think you have good recommendations that could apply to every emails you will code, feel free to share with me, feel free to contribute to this document as well. Hopefully you will have some questions. You can find me on Twitter or on my blog or you can send me an email as well if you have any questions after this session. Thank you.

Scott: Thank you very much, Rémi. “Re-my.” That was really very good. I’ve had a lot of questions about … Oh, hey, Vitaly.

Vitaly: Hello. Hello, Rémi. I’m so sorry about being late. Hello, everybody, dear Smashing members. I had a train delay and all. Scott, you wanted to say something? Sorry I interrupted you.

Scott: No. There was just two questions I was going to get out of the way. One was from Pawan, who’s a very, very active member of the Smashing membership. He is asking us, any thoughts on applying fonts consistently through HTML email?

Rémi Parmentier: Sorry, can you repeat?

Scott: Do you have any thoughts about applying fonts consistently through HTML email?

Rémi Parmentier: Yes. Well, for fonts, I usually encourage my clients to use web fonts in emails because it’s always better when you can have your own brand fonts. Now the thing to have in mind is that it won’t work everywhere. When using web fonts, especially, it almost works nowhere. It works in Apple Mail and in Thunderbird and maybe a few local email clients, but that’s really it. It doesn’t work in Gmail, it doesn’t work in Yahoo. If you can adapt to that, if that’s good for you, then go ahead and do it.

Rémi Parmentier: Now, the problem that you can have with web fonts like this is that if you try to use really funky fonts like Lobster or Pacifico on Google fonts, if it falls back to something like Arial or Helvetica, your email will definitely look very, very different. If you can use Montserrat and it falls back to Helvetica, that’s less a problem in my opinion. It really depends on the fonts you want to use and how much you are ready to not have this font in the cases where it won’t work.

Scott: That’s a really good point. There’s Zach Leatherman, who’s a very active member with Smashing and a presenter at SmashingConf, he’s done a lot of presentations about the fallback on fonts, so that’s interesting to make that correlation between email and web-based fonts.

Scott: Before I hand it over to Vitaly, my other question is, a lot of people are talking about interactive emails. There was actually, not this past SmashingConf, I believe the SmashingConf before, there was a presentation about interactive emails where you can actually complete an action just with one click of a button in an email, and mostly it’s based on AMP email. I was just curious, what do you know, what is AMP email and what’s the support for it currently?

Rémi Parmentier: AMP for Email is still something relatively new. It was announced by Google about a year ago, but it was only made available in Gmail desktop webmail about a few months ago, I think, in maybe April or something. AMP for Email is basically bringing the AMP Javascript framework to HTML email so that now inside Gmail, you can use interactive components like carousels or accordions, and you’ve got also, more interestingly, in my opinion, have live data.

Rémi Parmentier: If you’re selling clothes, for example, you can make sure that the clothes you’re presenting in your email are available in stock and are the ones in the best interest for your customer that’s viewing this email. This brings a lot of new customizations and possibilities for emails like that.

Rémi Parmentier: The thing is that it’s very still in its infancy and it mostly only works on Gmail desktops so far. It should come in on Gmail mobiles in the coming months, but then, there is also Yahoo and I think who said they were interested in implementing it.

Rémi Parmentier: Maybe this is something that will actually grab attention and go in the future. Yes, this is something I’m looking into and I’m really interested in. It’s still very hard to say if it will work and be successful, but there are a lot of interesting things in it.

Scott: Definitely. That falls back on what I was asking at the beginning before you started the presentation is, is there going to be some sort of standard that comes across for email clients? That’s my dream is that that will happen. On that note, Vitaly, I’m going to hand over to you for some questions.

Vitaly: Excellent. Thank you so much, Scott. Actually, Rémi, that was a brilliant presentation. Thank you so much. I learned-

Rémi Parmentier: Oh, thank you.

Vitaly: … a lot. I was a little bit not shocked, but in a way, I felt like it’s just wrong that we’re preaching these best practices for email which are not necessarily best practices full stop in 2019. It’s really about time that web standards have evolved.

Vitaly: We do have an open question from Pawan. Just before we do that, I have a couple, but one thing I wanted to know from somebody who’s so deeply motivated by the beauty and horror of email, I do have to find out, do you sleep well at night?

Rémi Parmentier: Oh, yes.

Vitaly: Excellent.

Rémi Parmentier: It depends because I have two small children, so not every night, but it’s not because of email.

Vitaly: Okay. The thing is, if you look back, let’s say, over the last, I don’t know, how many years have you been now in this madness?

Rémi Parmentier: Almost 15 years, but I really started digging into emails maybe five years ago, or maybe a little bit more, but yeah, about five years.

Vitaly: I’m curious, then, do you see that there has been a lot of progress in terms of email client supporting new features, broadening CSS support, Gmail, support of media queries and all? Do you see that the differences have been remarkable over the last five years or is it a very slow progress? Just so we can set expectations of what we should be expecting coming up next on the platform.

Rémi Parmentier: I would say both. It’s been both slow, but there has been progress. If you look back five years ago, five years ago, Gmail didn’t support media queries, and neither did Yahoo, I think, and neither did Media queries are a huge tool to make email works well on mobile. The simple fact that those emails were able to adapt and add this to their list of CSS properties and features supported is actually a very good thing.

Rémi Parmentier: Now, it’s always a bit frustrating because it definitely doesn’t move as fast as the web is moving nowadays where you can see new features added in Chrome or Firefox every week and new articles about it. Things are moving slowly for really unknown reasons. That’s perhaps the biggest problem of emails is that everything is really opaque.

Rémi Parmentier: We don’t know how things work within Gmail or within Outlook and we have a lot of advantages for the web, people from the Chrome team, from the Firefox team sharing all the new advances in their browsers, but this is not the case in email clients, and this is really perhaps the most frustrating thing is that if you see a bug, if you have a problem, you pretty much have no one to talk to.

Vitaly: It’s a little bit loud here. I’m just in a park, I promise. Pawan is wondering, do you have any thoughts on embedding HTML forms in emails? Is it a good idea or not?

Rémi Parmentier: It can work. This is actually something that’s done a lot by us in the presentation you mentioned. Mark Robbins was the godfather of interactive emails. A lot of people actually use form in emails. Just like everything, you just need to realize that this won’t work everywhere. You need to think about, what happens if my form doesn’t work? Do I show something different? Do I have a link that sets to a form on my website? This is perhaps the hardest part, when you try to think of advances in emails like that. Every time, you need to think about what happens if this doesn’t work and what will I show to the people when it won’t work.

Vitaly: That makes sense. Well, I have so many questions. If you do have a few minutes, I just wanted-

Rémi Parmentier: Yeah, sure.

Vitaly: Because just today, I had to send out a wonderful email to our wonderful Smashing subscribers. One thing that stuck with me, and I wasn’t really sure how to deal with it. Not every client who understand media queries. Gmail does. You will have the media rule and then it will be all fine, but then, for some reason, when we’re sending out with Mailchimp and we do inline styles, actually inline styles in the attributes, what happens is you have the inline styles say font size 21 pixel, let’s say, on H2. Then you have a media that overrides it with font size 28 or something else.

Vitaly: Am I correct to assume that it’s probably a good idea to avoid bang importance one way or the other, because it will override whatever you have in the inline styles? If you have a media rule, and then that media rule, you actually have font size 30 pixels importance, will it override inline styles or not in most-

Rémi Parmentier: Yeah, definitely importance will override inline style.

Vitaly: But then it’s included in the media rule, right? If a client doesn’t understand media, they wouldn’t know-

Rémi Parmentier: Yes, exactly. Yes, which is why you once again need to think what happens if media is not supported. There, your inline style will be picked up. Maybe you will need to have the mobile-first approach and have the smaller font size inline and then use a min-width media query to have the different font size on desktop.

Vitaly: Makes sense. When you start building, do you actually build mobile-first or do you build desktop-first?

Rémi Parmentier: Well, it really depends. As I just show in my last three examples between-

Vitaly: Oh, sorry, I must have missed a few things.

Rémi Parmentier: Yeah. Between the three examples or if we do mobile-first, these are different approaches that you can have and that makes sense, depending on the contents you have. Most of the time, I usually go mobile-first, but it really depends on how you want your fallback to display. Sometimes it makes sense to have more desktop layouts and sometimes it makes more sense to have more mobile layouts.

Vitaly: For testing, we’re using Mailchimp just to see how it looks in different clients, but Doug Working is asking, do you have any recommendations for tools to test email code to see how it looks in different email clients?

Rémi Parmentier: Yes. There are two very good and very popular email tools that will allow you to take screenshots of how your email render across many, many email clients. Those are Litmus and Email on Acid. They work really similarly for email testing.

Rémi Parmentier: You just import your code and you will get screenshots very fast of how your email looks. This is really how I recommend to test emails because, of course, you need to do some ports manually as well, but it’s so much faster when you have a tool like this that it’s really more professional and you will win a lot of time by working with tools like this.

Vitaly: But then, it basically takes screenshots that you have to analyze. If you discover something like a major bug, how do you debug? Any tools for remote debugging, so to say?

Rémi Parmentier: Yeah. Debugging is the hardest part. In webmails, actually, it’s pretty easy because since the webmail is just a webpage, you can fire up your browser inspector tools and inspect the webmail’s code. This is really something interesting to do. I encourage everyone to do it at least once in a while because you will see how the webmail transforms your code in ways that you maybe have never imagined, like prefixing and renaming the classes you can have in your code.

Rémi Parmentier: This is a good way to see if maybe an image client has removed some of your styles or maybe if you did a mistake somewhere. For webmail, this is the best way to debug. For other email clients like Outlook, this is really a try-and-retry approach where you just send a code, change something, resend the email-

Vitaly: It sounds like fun.

Rémi Parmentier: Yeah, this can be a bit irritating. With the experience, you do less and less of this, but yes, unfortunately, there are no developer to see in Outlook.

Vitaly: That makes sense. One more thing that actually came up as well, is it safe to use SVG in emails? Or if you’re having the same image, would you prefer to use SVG or would you recommend to stay away from SVG and use PNG or JPEG instead, or God forbid GIF?

Rémi Parmentier: GIFs are actually still very popular in email-

Vitaly: I know. I noticed.

Rémi Parmentier: … but there are actually no reason because PNG is just as well-supported as GIFs for that matter. Regarding SVGs, just as my previous answers, I will say do it if you can manage to make it fall back to something I think for other email clients.

Rémi Parmentier: I think SVG works very well in Apple Mail, in Mac OS and iOS. It might work in a few more email clients, but I don’t think it works well in webmails. If you can have a distant SVGs that you call maybe in … For example, if you use a picture tag, you can have a source with your SVG, so this will be picked up by Apple Mail. Inside this picture, you can have an image tag as a fallback with a regular PNG or JPEG. This will work in other email clients.

Rémi Parmentier: There are different ways to tackle this kind of things, but SVG is definitely not the first format for images that you were shown when you built emails, but this is definitely something you can use, even though it won’t work everywhere. If you can have the proper fallback, then go ahead and use it.

Vitaly: Willow Cheng is asking, would you have recommendation on design tools which could let you design and export email in HTML?

Rémi Parmentier: No. Unfortunately, nothing that I can think of right now. Because most of the time, tools that will offer you to generate your HTML from design tool will be really rubbish because it will be either completely outdated and not work well in most modern versions of email clients, so I would actually recommend to stay away from those tools. From design point of view, I’m not sure there are any tools that will let you export clean, proper HTML for emails.

Vitaly: That’s actually an answer I was expecting, to be honest. Maybe just one final question. I’m sure I’ll have more later, but I know you do also have family and all and it’s quite late as well, and I get to meet you in Freiburg, so this is just a couple of weeks from now, so at SmashingConf Freiburg. This is going to be exciting.

Vitaly: I do have a question, though, still. I remember for a while, maybe a year ago, maybe two years ago, I found these two resources which were great. One of them was The other is responsiveemailresources, or something like that, .com. One of them has gone away. It’s just down I think at this point, but I will also post the link later. Can you recommend some websites, resources where you can get copy-pastes almost email codes, snippets or something that you can reuse on a daily basis? I have heard that you might be working on something. Was I wrong?

Rémi Parmentier: I’m not sure, but I won’t talk about this for now, but it’s always [inaudible 01:04:56] snippets of codes that you can share because there are a lot of factors inside an email that can make your code behave differently. Every time there’s a tool that says it makes bulletproof backgrounds or bulletproof buttons, for example, you can always very easily, very shortly find email clients in which this doesn’t work properly. This is always a problem.

Rémi Parmentier: I remember the websites we were talking about, about responsive patterns, but I actually don’t know who were maintaining those. I don’t think they are ever really updated. As for websites, I can’t think of any right now. Maybe it will come later, that’s too bad, but the two things I will recommend is, if you’re into Twitter, follow the Email Geeks hashtag. That’s #emailgeeks, G-E-E-K-S. There are always a lot of people sharing good resources and the latest good articles that are always interesting.

Rémi Parmentier: The other thing I recommend is to join the Email Geeks at Slack channel. This is a really good community that’s growing a lot. There are all sorts of channels for marketing or for design or for code. People are really, really nice there and really always trying to help and almost available at any hours of the day, so this is incredible. If you look up for Email Geeks Slack on Google, you will see a subscription page that you can join. I hope you can join and just say “Hi” if you come.

Vitaly: Just one final, just the really, really last one, and then I’ll let you go. Sorry, excuse me if you mentioned it already in the session, but I’m wondering, as of today, as of 2019, looking at the best practices and the email clients, what are the baseline where you would say, let’s support this kind of client?

Vitaly: Because at this point, when we think about a 8, sometimes you obviously want to search something accessible to a 8, but you’re not going to optimize for a 8. We’re getting to the point where some companies can actually start dropping a 9 in the same way, but again, we’re quite far away yet.

Vitaly: When it comes to email clients, is Outlook 2013 still a thing? I remember the big update that Outlook brought in 2013 changed a lot of things in email, if I remember correctly. As of today, when we look into the landscape of email clients, what is the baseline we absolutely have to support at least?

Rémi Parmentier: I think the-

Vitaly: To support.

Rémi Parmentier: The others’ basis is Outlook 2007, because this is something actually pretty annoying is that this is used in a lot of big companies, and those big companies don’t pays new license for new versions of Outlook every year and they pay for a decade or so. There are still quite a lot of people I think using those older versions. This is still something that we have to account for.

Rémi Parmentier: Now, it’s not really that much a problem because between Outlook 2007 and Outlook 2019, unfortunately there weren’t that much of progress made because it’s still Word as a rendering engine. I think this is maybe the worst case we have to support mainly because, yes, we are not getting rid of those versions of Outlook anytime soon, I think.

Vitaly: That’s very optimistic, a bright outlook in life. I like that. I respect that. Thank you so much, Rémi, for being with us today and sharing all the wonderful insights.

Rémi Parmentier: Thank you for having me.

Vitaly: Of course. Will you be kind enough to share the slides of your presentation as well?

Rémi Parmentier: Yes, absolutely.

Vitaly: If you have any other resources that come to your mind, please send them over to us and we’ll publish them, too.

Rémi Parmentier: Sure.

Vitaly: All right? That’s been very exciting. It wasn’t actually as dirty as I thought it would be. Just humble in a way, even. I didn’t see anything that would screech and make me feel uncomfortable at night when I want to sleep. Thank you so much for that, Rémi.

Rémi Parmentier: Thank you.

Vitaly: On that note, Scott, any other updates we should keep in mind or anything we need to mention?

Scott: I was going to ask you, Vitaly. Tomorrow, we have another Smashing TV.

Vitaly: Yes. Friends, we’re trying something else and something new every time. Apparently, well, finally, today we got … I hope we received, because I didn’t get the confirmation yet, but we’re supposed to receive the first copies of the Smashing Print or our new printed magazine dedicated to topics that are often not covered well enough on the web, or maybe that just got lost in the myriad of workflows.

Vitaly: The first issue is dedicated to ethics and privacy. As a dedication to that, we’re going to have a live session, a live stream on Smashing TV tomorrow with five panelists, all contributors to this first issue of Smashing Print. It’s going to be broadcasted on YouTube. If you go on Smashing.TV, you’ll find the links, but we also will be publishing an article tomorrow featuring the links and everything.

Vitaly: The printed magazine, that by the way, Smashers, the ones with $9 plan are getting it for free, and the members with $5 plan are getting the ebook and the heavy discount on the ebook as well. Rémi is getting a printed magazine as well just because he’s so awesome.

Rémi Parmentier: Thank you.

Scott: Thanks, Rémi.

Vitaly: Beyond that, we also have a few more things coming up, I think.

Scott: On the 13th, Mr. Paul Boag, who has been a very prominent mentor in the Smashing community, many Smashing Conferences, many webinars, August 13th, Paul Boag is doing the customer journey mapping where UX and marketing meet.

Vitaly: Then we have Cassie Evans on August 20th exploring the interactive web animation with SVG. This is going to be fun as well. If you actually ever wanted to do a bit more or try to figure out a better workflow for SVG animation, that’s definitely a session not to miss, so looking forward to that.

Vitaly: All right, I think we’re good here. Any more announcements, major announcements, Scott, that we need to share with the world around us?

Scott: You’re making me feel like I’m forgetting something, but … SmashingConf Freiburg?

Vitaly: Yes, we do have a SmashingConf Freiburg, where Rémi is going to speak as well, but we also have the videos of Toronto conference which will be released today, or maybe tomorrow. Maybe they already released. See how well-prepared I am. Watch out for that and you’ll get them, you’ll find them also in your dashboard, so keep that in mind. All right. I think we’re good!

Scott: Okay. Thank you everybody for attending. Thank you-

Vitaly: Thanks, everyone, for attending.

Rémi Parmentier: Bye! Thank you and bye.

Vitaly: Thank you and see you next time. Thank you, Rémi. Bye-bye.

Rémi Parmentier: Thanks. Bye.

Vitaly: See you next time.

SmashingConf Freiburg Presentation “Think Like An Email Geek”

At the end of the Webinar, Vitaly mentions that Remi will be speaking at Freiburg. You don’t have to wait for that as we also have that video to share with you, along with the slides and resources.

We hope you enjoyed this look into HTML email. If you would like to enjoy more of this kind of content, plus the chance to interact with the presenters and other members while helping to support the creation of independent content for web designers and developers join us here.

Smashing Editorial(ra, vf, il)
How to Sell Art Online
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!