MJML – How To Make Responsive HTML Email Coding Easy — Smashing Magazine

    Quick Summary

    Email is one of the best ways to engage with your users, especially during the holiday season. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. Creating responsive email is not an easy task, and there are various reasons for that.

    First, there is no standard in the way email clients render HTML. This is true for email clients from different companies, such as Outlook and Apple Mail, but not only. Even different versions of Outlook, such as Outlook 2003, Outlook 2013 and Outlook.com, render HTML differently.

    Table of Contents

    Smashing Newsletter

    Imagine you wrote a beautifully crafted newsletter and nobody read it. That would make any cat sad. Don’t let that happen!

    With useful tips for web devs. Sent 2× a month.
    You can unsubscribe any time —obviously.

    Smashing Job Board

    Great companies are looking for people like you.

    About The Author

    Nicolas is a self-taught developer fond of JavaScript technologies (especially ReactJS & NodeJS). After joining Mailjet as the Lead Developer Evangelist for ……

    MJML – How To Make Responsive HTML Email Coding Easy

    What’s New in HTML 5.2?

    Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC). When a specification reaches the REC stage, this means that it has received the official endorsement of W3C Members and the Director, and that the W3C officially recommends it’s deployment by user agents, and it’s implementation by web page authors.

    In HTML 5.2, there were a number of additions and removals, all of which can be seen on the official HTML 5.2 Changes page. In this article, I’ll go over some of the changes I think will impact my development the most.

    New Features

    A native <dialog> element

    Of all the changes in HTML 5.2, I’m the most excited about the introduction of the element, a native dialog box. Dialogs are incredibly prevalent on the web, yet every implementation is different in some way. Dialogs are also really difficult to do in a way that is accessible, resulting in most dialogs on the web being practically unusable for users who don’t navigate the web visually.

    The new <dialog> element aims to change this, providing a simple way to include a modal dialog without having to worry about many of the pitfalls. I will write a separate, detailed article about how this element works, but here are the basics.

    The dialog is created using a <dialog> element:

    <dialog>
      <h2>Dialog Title</h2>
      <p>Dialog content and other stuff will go here</p>
    </dialog>
    

    By default, the dialog is hidden from view (and from DOM access) unless the open attribute is applied.

    <dialog open>
    

    The open attribute can be toggled by calling the show() and close() methods, which is available to any HTMLDialogElement.

    <button id="open">Open Dialog</button>
    <button id="close">Close Dialog</button>
    
    <dialog id="dialog">
      <h2>Dialog Title</h2>
      <p>Dialog content and other stuff will go here</p>
    </dialog>
    
    <script>
    const dialog = document.getElementById("dialog");
    
    document.getElementById("open").addEventListener("click", () => {
      dialog.show();
    });
    
    document.getElementById("close").addEventListener("click", () => {
      dialog.close();
    });
    </script>
    

    The <dialog> element already has support in Chrome, and is behind a flag in Firefox.

    Using the Payment Request API from iFrames

    The Payment Request API is a native alternative to checkout forms. It aims to provide a standardised and consistent method of making payments on the web for users, by moving the handling of retrieving payment information to the browser, instead of individual checkout forms on each website.

    Before HTML 5.2, these payment requests couldn’t be made from iframes embedded in a document. This made it essentially impossible for third-party embedded payment solutions (e.g. Stripe, Paystack), to take advantage of this API, since their payment interface is typically handled within an iframe.

    HTML 5.2 introduced the allowpaymentrequest attribute which, when applied to an iframe, will allow it to use the Payment Request API while the user is on the hosting web page.

    <iframe allowpaymentrequest>
    

    Sizes for Apple Icons

    To define web page icons, we use the <link rel="icon"> element in the head of our document. To define different sizes of icons, we use the sizes attribute.

    <link rel="icon" sizes="16x16" href="path/to/icon16.png">  
    <link rel="icon" sizes="32x32" href="path/to/icon32.png">
    

    This attribute, although purely advisory, allows user agents to decide which size of icon to use if multiple sizes are available, particularly since most devices have their own different “optimal” icon size.

    Before HTML 5.2, the sizes attribute was only valid if the link relationship was icon. However, Apple’s iOS devices do not support the sizes attribute. To get around this, Apple introduced a device-specific relationship, appple-touch-icon , which could be used to define the icon used on their devices.

    In HTML 5.2, the specification now allows the sizes attribute to be used if the relationship is apple-touch-icon, no longer only icon. This will allow us to provide different sizes of icons for different apple devices. Although, as far as I currently know, Apple devices still do not support the sizes attribute, this change will be useful for the future when they eventually do.

    Newly Valid Practices

    In addition to new features, HTML 5.2 has validated some practices in writing HTML that were previously invalid.

    Multiple <main> elements

    The <main> element represents the main content of a web page. While content that is repeated across multiple pages can be placed in headers, sections, or any other element, the <main> element is reserved for the content that is specific and unique to the particular page. Consequently, before HTML 5.2, the <main> element had to be unique within the DOM for the page to be valid.

    With the prevalence of Single Page Applications, however, sticking to this rule could be difficult. There may be cases in which there are multiple <main> elements in the DOM, but only one being shown to the user at any given time.

    With HTML 5.2, we can now have multiple <main> elements in our markup, as long as only one is visible to the user at any given time. Any extra elements must be hidden using the hidden attribute.

    <main>...</main>
    <main hidden>...</main>
    <main hidden>...</main>
    

    As we know, there are several ways to hide an element with CSS. However, any extra <main> elements must be hidden using the hidden attribute. Any other method for hiding the element, e.g. display: none; or visibility: hidden; will not be valid.

    Styles in the <body>

    Typically, inline CSS defined using the <style> element is placed within the <head> of the HTML document. With the increase in component-ized development, developers have seen the benefit in writing and placing styles along with the html element they are relevant for.

    In HTML 5.2, defining an inline <style> block anywhere within the <body> of an HTML document is now valid. This means that we can have styles closer to where they are used.

    <body>
        <p>I’m cornflowerblue!</p>
        <style>
            p { color: cornflowerblue; }
        </style>
        <p>I’m cornflowerblue!</p>
    </body>
    

    However, it is still noted that styles should preferably be placed in the <head>, for performance reasons. According the the specification,

    A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

    It should also be noted that, as shown in the example, the styles are not scoped. An inline style defined later in the HTML document will still apply to elements defined before it, which is why it may trigger repainting.

    Headings in a <legend>

    In forms, the <legend> element represents a caption for the form fields within a <fieldset>. Before HTML 5.2, the content of a legend had to be plain text. Now, we can include heading elements.

    <fieldset>
        <legend><h2>Basic Information</h2></legend>
        <!-- Form fields for basic information -->
    </fieldset>
    <fieldset>
        <legend><h2>Contact Information</h2></legend>
        <!-- Form fields for contact information -->
    </fieldset>
    

    This is really useful for when we want to use the fieldset element to group different sections of a form. In cases like this, it makes perfect sense to use headings, which would make these form sections more easily navigable for users relying on a document outline.

    Removed Features

    In HTML 5.2, a few elements were removed, namely:

    • keygen: Used to help generating public keys for forms
    • menu and menuitem: Used to create navigation or context menus

    Newly Invalid Practices

    Finally, some development practices have been made invalid.

    No inline, floated, or blocked children of <p>

    In HTML 5.2, the only valid children of a <p> element should be phrasing content. This means that the following types of elements should no longer be nested within a paragraph:

    • Inline blocks
    • Inline tables
    • Floated and positioned positioned blocks

    No Strict Doctypes

    Finally, we can say goodbye to the following strict document types:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    

    EDMdesigner | Free Responsive HTML Email Template Builder & Editor

    It’s time to get rid of hard to use WYSIWYG editors, tiresome email coding and testing. Create professional responsive emails in less time from less money with our do it yourself responsive email editor!

    Drag-and-drop interface

    Tired of outdated WYSIWYG editor? Or responsive email HTML codeing? EDMdesigner offers an extremely versatile drag and drop interface, so you can build almost any email design with it.

    You can use the various built-in templates and also create your own templates from scratch using basic building blocks like Text, Image, Button or advanced elements like a Video, Divider, or Image Group.

    Bulletproof responsive email code

    No more HTML coding ever! We spent 1000s of hours of research and development using Litmus, Email on Acid and own test devices to bring you the best responsive, which is compatible with over 90%+ of all desktop, mobile and web email clients.

    Always up-to-date service, fully tested HTML that’s what we guarantee!

    Easy to use building blocks and built-in templates for beginners

    You don’t have to be a pro to create an attractive email template. We have everything you might need to design professional responsive email templates without any hassle.

    Choose from the built-in template library, add your own images, text, CTAs, social icons, modify colors if needed and don’t worry about code quality or email testing, EDMdesigner takes care of that part automatically for you!

    Sophisticated enough for email designers

    Our goal was to build a really flexible email editor which can replace classic email coding in the long run and offers all functions for advanced users as well.

    EDMdesigner is the only email editor which offers pixel perfect padding / margin settings and also a really cool hide on mobile / desktop functions thanks to which you can differentiate your email designs easily among device types.

    Create once, reuse forever

    No need to spend time with recreating the same content again and again. With EDMdesigner you can not only save your email templates but also your favorite elements like a news block, branded header, or the unsubscribe information and reuse them in any of your future campaigns.

    Want to see the responsive email editor in production?

    Try the DEMO now and register for FREE if you like it!

    WordPress vs Static HTML: How Should You Build Your Site?

    In the past, we’ve talked about how WordPress squares up with other popular content management systems like Drupal, Joomla, and even Squarespace. But what if you’re trying to decide between WordPress vs static HTML for your website?

    At a basic level, this is kind of a general debate between using a database-driven content management system (like WordPress) or writing all of the HTML/CSS yourself along with possibly using a framework.

    To help you make your decision, we’ll explain what these terms mean and then jump into some of the pros and cons of each approach.

    Still looking for that perfect WordPress host?

    Try Kinsta’s premium managed WordPress hosting to experience your site without problems.

    Difference Between WordPress and Static HTML

    In the end, everything comes out as HTML on the frontend. That is, your site’s code is going to look something like this no matter if you’re using WordPress or a static HTML website:

    No matter which method you choose, your code will still look like this

    The important difference is in how that HTML comes into existence.

    With static HTML, that story is pretty simple. You, or your developer, writes the code (including your content). Then, once it’s on the server, it’s always like that. There’s no background processing going on – your site is always right there in its finished form.

    WordPress, on the other hand, is a content management system that uses PHP and a database. In simple terms, that means that when someone visits your WordPress site, your server “assembles” your site by:

    What Is a Content Management System, Then?

    Above, we told you that WordPress is a content management system, but we didn’t really explain what that means. A content management system, often abbreviated as CMS, is software that helps you create, manage, and modify content on a website without needing to interact directly with the code.

    For example, instead of needing to manually add your content by formatting it with HTML like you would for a static HTML website, you can just input your content using the WordPress editor and WordPress will handle displaying it on your site:

    The WordPress editor interface

    Similarly, if you ever wanted to edit that content at a later date, you could just go in and edit it using that same editor, rather than needing to directly edit the static HTML file on your server.

    Pros and Cons of WordPress

    We’ll get into some of the pros and cons of a static HTML website in a second, but let’s start with some of the reasons that over 32% of the entire Internet is now using WordPress.

    Code-Free Content Management

    The biggest benefit of WordPress is that it can almost completely eliminate code from the day-to-day management of your website. Instead, most of the actions that you’ll want to take can be performed using a graphic interface.

    With this graphic interface, you can:

    Unless you live and breathe HTML/CSS (and probably even if you do), this approach is going to make it a lot easier to manage every aspect of your website.

    Easy to Change How Your Site Looks

    Every WordPress site needs something called a theme. Your theme determines how your site looks on the frontend. To install a new theme, you basically click a button or upload a single file and your site instantly adopts that styling:

    How you add a new WordPress theme

    On the other hand, with a static HTML site, you control how your site looks using your own CSS. Not only is this time-consuming to set up in the first place, it will be similarly time-consuming if you ever want to radically change how your static HTML site looks in the future. Yes, there are CSS frameworks you can use to speed this process up, but it still requires more work and expertise to be able to manage.

    We know this first hand due to the fact that a majority of the Kinsta website was created with good ole Github commits. Yes, we utilize a WordPress theme and framework, and our code is wrapped in WordPress functions, but most of what you see on our site was created by our team. This can sometimes allow for greater flexibility, but it also requires having developers on staff. If you want to save time and don’t have full-time developers, going with a pre-built WordPress theme can drastically speed up your workflow.

    WordPress theme

    Additionally, you need to worry about making all of your CSS responsive (AKA look good on mobile), whereas almost every single WordPress theme is responsive by default nowadays.

    Easy to Add New Functionality

    WordPress also offers something called plugins that allow you to easily extend the functionality of your site. Want to add a contact form to your site? With static HTML, you’ll need to deal with validation and what happens with the data that a user submits. With WordPress, you just install a plugin…

    How you add a new WordPress plugin

    The difficulty gap gets even bigger with larger features. Want to add a forum to your site? Good luck doing that on your own. But with WordPress, you just need to install a forum plugin.

    You can even quickly tack on eCommerce or social network functionality.

    Rapid Development and Changes

    The combination of themes and plugins, along with WordPress’ general functionality as a content management system, mean that you can quickly spin up even complicated websites.

    Static HTML can be quick for a very basic site with just a few pages… but if you need any non-standard functionality, WordPress is almost certainly going to let you build a site faster.

    Want more advantages? Check out these 10 good reasons why you should use WordPress.

    Are There Any Cons to Using WordPress?

    You’ll find some people saying things like “static HTML websites load faster” or “static HTML websites rank better in Google.” But some of this should be taken with a grain of salt. While it’s true that PHP and a database introduces additional load time and delays, it’s not that difficult to get WordPress load times under one second – which is plenty fast.

    You should ask yourself, is having a slightly faster static site worth giving up the advantages WordPress has to offer? Also, PHP performance has improved drastically over the past five years. In our recent PHP benchmark tests, we concluded that PHP 7.3 can handle 3x as many requests (transactions) per second to that of PHP 5.6. 🚀

    WordPress 5.0 PHP benchmarks

    There are also ways you can easily negate PHP and database delays by using caching to serve static HTML versions of your pages. This means every page load can essentially load lightning fast, just as it would with a static HTML site.

    How much does caching impact a WordPress site? Here is a quick test on a WordPress blog before and after cache.

    Without Cache

    We first ran a test with cache disabled on the WordPress blog.

    WordPress site without cache (Pingdom test)

    As you can see there is a significant delay in the first HTML DOC load. This is due to it not serving from cache on the server.

    Without cache delay

    With Cache

    We then ran a test with cache enabled on the WordPress blog. Nothing else was changed.

    WordPress site with cache (Pingdom test)

    As you can see there is a massive improvement. In fact, simply serving up the initial page from cache on the server decreased the load time by 32.2%.

    With cache

    Kinsta automatically handles caching at the server-level for all WordPress hosting clients. This means you don’t have to hassle with third-party caching plugins.

    When it comes to the ranking rumors you might hear, there are great WordPress SEO plugins that let you control every aspect of your site’s technical and on-page SEO. If WordPress sites really performed worse than static HTML sites in the search rankings, you wouldn’t see it being used by massive platforms like The Wirecutter or TechCrunch.

    There are a few small disadvantages, though, and the first is maintenance. While choosing quality managed WordPress hosting can eliminate much of the worst maintenance, you’ll still be responsible for making sure that the WordPress core software, plugins, and themes are updated and compatible. This is fairly easy nowadays, but it is something that you don’t need to do with a static HTML website.

    The second disadvantage would probably be quality. Due to the extreme popularity of WordPress, there are a lot of bad plugins and themes out there. And free solutions sometimes just drop off the map entirely. Sorting through the bad to find the good can be time-consuming.

    Pros and Cons of a Static HTML Website

    You heard from WordPress – but now let’s dig into some of the pros and cons of a static HTML website.

    There’s No Underlying Software to Maintain

    We kind of talked about this a second ago, but let’s rehash it quickly here because it is one of the major benefits of static HTML.

    When you use WordPress and themes/plugins, you’re responsible for updating all that underlying code and making sure there aren’t any compatibility issues. While this is pretty simple (you usually just need to click a button), it is something that you need to do to keep your website secure and functioning.

    On the other hand, if you’ve written clean static HTML, you should be able to pretty much leave things alone and never worry about updates.

    Easier Access to the Underlying Code

    While WordPress lets you access all the underlying code to your site, a static HTML website will make it a bit simpler to input certain types of markup. Instead of needing to deal with theme template files and the WordPress loop, everything is right there in front of you.

    Struggling with downtime and WordPress problems? Kinsta is the hosting solution designed to save you time! Check out our features

    For example, while there are schema plugins for WordPress, you can more easily control schema markup on a static HTML website.

    What Are the Disadvantages of Creating a Static HTML Website?

    While a static HTML website is certainly fine for a basic website, the main issues come about when you try to scale up, either in terms of the amount of content or functionality.

    Most of these disadvantages are simply the opposite of WordPress’ advantages. Namely:

    Additionally, unless you actually know HTML/CSS yourself, all of these things will also require paying a developer, whereas WordPress would let you do them yourself, for the most part.

    Use WordPress as a Static Website Generator

    Static website generators differ from the above two options slightly as they take a content management system’s content, such as WordPress, combine it with a theme and generate static HTML pages. Jekyll is one of the most popular ones, which you can use to host your whole website or blog on GitHub Pages and push your new content with one command. The downside? It’s not easy (to say the least) to set it up, and even for developers, it can be time-consuming.

    If you have a free afternoon to learn more about Jekyll then take a look at this article by Mike Neumegen. Alternatively, a flat-file CMS like Grav can give you easier content management while still avoiding the need for a database.

    If you’re technically savvy, it’s even possible to get the best of both worlds and use WordPress as a static HTML website generator. However, you just have to remember that if you use WordPress in this way, you’ll have to make sacrifices:

    Essentially, everything that is server-side (PHP) generated will become static and updated manually. Static website generators will create a complete HTML page based on your content and once it’s done, no matter how many people visit your site, it won’t be regenerated; not unless you type in a specific command on your computer.

    Developers solve the commenting “problem” by either not using it at all or switching to JavaScript-based solutions, the most popular being Disqus or Facebook comments.

    There are a couple of WordPress caching plugins that you can use to create static HTML files of your posts and pages, but if you’re using Nginx as your web server (if you aren’t, you really should, but that’s a topic for another article) you can just flip the full page caching switch on and set it to expire in a day or a week. The longer period you can “afford” to set it to, the better.

    What happens next is that the first visitor will have the server generate the complete, cached HTML files and any consecutive visitors within the predefined expiration period will get served those files. Here a Kinsta, our servers use the  for page caching. How to set it up, you ask? Well if you manage your own servers here’s an extremely detailed guide by DigitalOcean that you can follow.

    If you’re a Kinsta client, this is automatic for every WordPress site and the cache by default expires every one hour. You can, however, open up a ticket with our support team within your MyKinsta dashboard and request a longer cache duration. Just please make sure you fully understand the consequences of doing so.

    Cloudflare Full Page Cache

    You can also utilize Cloudflare page rules with WordPress and serve your entire site from cache. WP Bullet has a great guide on how to set up Cloudflare cache for your WordPress posts and pages.

    This can be very beneficial for sites that are launching an event or are expecting a huge surge of traffic. Remember though, if you are serving entirely from cache, you will most likely run into issues with WooCommerce checkout, your WordPress admin toolbar, and other various things that you’ll need to either fix or find workarounds.

    We Provide the Best of Both Worlds

    We don’t generally recommend serving your entire site from cache unless you have time to properly test everything. For example, when it comes to WooCommerce: you can cache the “static” front page, categories, product pages (if you don’t change them too often) and then yes, it will load almost instantly! But as soon as someone clicks “add to cart” you’ll have to switch to a non-cached version otherwise they’ll see the cart always empty.

    Here at Kinsta, we have server-level rules in place for ecommerce solutions and blogs to ensure what should be cached is, and what shouldn’t, isn’t.

    A few examples include certain WooCommerce and EDD pages like cart, my-account, and checkout, are excluded from caching. And users automatically bypass the cache when the woocommerce_items_in_cart cookie or edd_items_in_cart cookie is detected to ensure a smooth and in-sync checkout process.

    This provides you with a fasting loading WordPress site, but without having to worry about things breaking.

    Cache component stack

    Don’t want to host your entire site with Kinsta, but want to take advantage of the dynamic functionality for your WordPress blog? You might want to look into loading your site over a reverse proxy. We support these types of setups.

    WordPress or Static?

    Now for the million dollar question… If you’re just building a small website that’s unlikely to change or require new content, static HTML is a fine approach. But for anything else, WordPress is almost certainly going to be a better choice. This is especially true if you don’t access to a developer.

    Its ease of use, combined with its extensibility, are the main reasons why it’s now powering over 30% of all the websites on the Internet. Now over to you – would you ever build a site with static HTML over WordPress? Or have you gone down the static website generator route?

    18 web design trends for 2017

    As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?

    Want to know what’s coming next? See what 2018’s web design trends will be.

    So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.)

    First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.

    ‍Sergie Magdalin, Chief Design Officer at Webflow

    1. Layouts that let content shine

    The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

    The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

    It’s been an amazing evolution to watch.

    And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

    That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

    Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

    2. Better collaboration between designers, and between designers and developers

    As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

    The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

    All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

    On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

    It is only a matter of time before design and prototyping tools replace front-end development altogether, seamlessly producing a high-quality front-end code base for your framework of choice.

    3. Improved design-to-development workflows

    As design and prototyping tools for the web gain maturity and sophistication, the traditional handoff deliverable has transformed from the aforementioned static files to more dynamic visualizations that range from animated Keynote files to fully functional websites. These more dynamic deliverables shorten the feedback loop, simultaneously improving design and dev team agility and lowering frustration. They also facilitate better communication with clients. In fact, for many users of Webflow, client meetings have become actual live working sessions, where designers are able to quickly bring ideas to life so everyone can experience them almost immediately.

    Next up, product designer Gadzhi Kharkharov:

    ‍‍Gadzhi Kharkharov, Product Designer

    4. Big, bold type

    As the design world comes to the consensus that our focus should be on content, more and more websites feature lines of resonant, inspiring copy set in type that’s just as big and bold as the statement itself.

    ‍The #MadeInWebflow Heco Partners
    ‍Pomerleau
    ‍Framer

    As you’ll have noticed from the sample screenshots, “big” and “bold” doesn’t necessarily refer to the weight of the font! Rather, it’s about dedicating significant screen real estate to a single, simple yet all-encompassing statement about the product or service. And, refreshingly, a lot of these statements seem clear and to-the-point, free of the bloviated claims to disruption and greatness we’ve seen a lot of lately. (Okay, “design the impossible” might be bloviated, granted.)

    In a world that’s as fast, busy, and information-overloaded as ours is, these concise yet powerful statements will become bread-and-butter for companies of all kinds.

    5. Complex layouts rooted in graphic design principles

    If we want to predict the evolution of web design (at least in visual terms), we should refer to the evolution of graphic design.

    For the past few years, web design layout has been constrained by CSS’s limitations, but new tools like flexbox and CSS grid (coming in March 2017!) will allow for much more expressive layouts on the web.

    Our main challenge now: understanding how these new web layout methods should work in the world of responsive design.

    You can see some examples of what we can expect here (as long as you’re using a browser that supports CSS grid, like Firefox Nightly, Safari Technical Preview, or Chrome Canary):

    The Experimental Layout Lab of Jen Simmons

    Note the Merz-esque style of her hero section, a clear callback to graphic design’s evolution, and its ongoing conversation with aesthetic movements.

    Grid by Example

    SVGs (scalable vector graphics) present web designers and developers with a lot of advantages over more traditional image formats like JPG, PNG, and GIF.

    The key advantages of SVGs come through loud and clear in the format name itself: scalable and vector. Instead of being raster or pixel-based, SVGs are composed of vectors: mathematical descriptions of the object’s shape. This means SVGs are resolution-independent, so they’ll look great on any screen, on any device type. No need to worry about making everything retina-ready.

    But that’s not all. SVGs also rock because they don’t require any HTTP requests. And if you’ve ever run a page-speed test on one of your websites, you’ve probably noticed that those HTTP requests can really slow down your site. Not so with SVGs!

    Plus, you can animate them!

    Now let’s hear from product designer Nathan Romero.

    ‍‍Nathan Romero, Product Designer

    7. Constraint-based design tools

    Responsive design has completely transformed how we browse and build for the web.

    But, oddly, it hasn’t really changed how design tools work, in general. With obvious exceptions like Webflow, most of the popular design tools require you to simply rebuild the same screen over and over for different device sizes and resolutions.

    In an industry that’s all about rapid development, ideation, and launches, that massive time sink just isn’t sustainable.

    Hence a new wave of design tools (such as Figma) that use the idea of constraints to lessen the amount of repeated work designers have to do when building cross-device layouts. These tools focus on the spatial relationships between elements and strive to preserve them as composite elements are resized by devices and users.

    Less work for designers for the win.

    And now, over to Ryan Morrison, senior visual designer. 

    ‍‍Ryan Morrison, Senior Visual Designer

    As movements like minimalism and brutalism came to the fore in 2016, designers sought ways to infuse more personality into their design work that still worked within those stripped-down aesthetics.

    And in at least a few cases, bright, bold color became the natural answer.

    Witness Asana’s color-drenched redesign.

    And the much-derided, but undoubtedly brand-revivifying, Instagram app icon redesign.

    Not to mention just about everything Stripe does.

    As you can see, it’s not just about bright, enthusiastic color either. Gradients also came back in a big way, blending and blurring those exuberant hues into spectra reminiscent of a noonday sky or a splashy sunset.

    There’s a sort of synthesized naturalism to this reemergence of bright hues and bold gradients, and I personally look forward to seeing more of it in 2017.

    Though maybe we could turn the brightness back down below 11 this time around? Looking at you, Asana.

    Animation has long played a key role in our digital interfaces, and there’s no reason to think that’ll abate in 2017. In fact, as designers get more and more visual tools to help them build engaging and smile-sparking animations, we’re sure to see them become both more prominent and more refined.

    The latter characteristic will become particularly important as it becomes easier to create animations. At 2016’s Design & Content Conference, animation guru Val Head stressed that designers should look to their brand voice and tone documentation when building animations to ensure that they reinforce the tone content creators are aiming for. This helps ensure that animations perform meaningful, on-brand functions for users, instead of just inspiring migraines.

    10. Unique layouts

    The year 2016 — much like the last several years preceding it — featured an ongoing debate about web design either dying, or losing its soul.

    Overdramatic as the web-design-is-dead argument may be, you can’t blame any creative for seeking innovative ways to present content to readers. And one of the most enticing methods for breaking out of the box-centric layouts many blame responsive design for is the broken grid.

    This approach seeks a way out of the meticulously aligned and “boxy” layouts we’ve been seeing a lot of lately with a variety of what might seem like visually jarring techniques. These include:

    Overlapping typographical and graphical elements, as seen on…

    The Outline

    Bauhaus-Archiv

    Seemingly random image and text placements, as seen on …

    Epicurrence

    Heco Partners

    Next up, Nelson Abalos, Jr., customer support hero and host of the Webflow Workshops

    ‍Nelson Abalos, Jr., aka, Mr. Workshops

    11. Flexbox

    If you haven’t dived into  yet, you’re in for a treat. This relatively “new” CSS layout module offers both incredible responsive-friendliness in its functionality, but also makes a lot of sense to visual designers used to manipulating objects on the canvas with the align and distribute tools offered in the likes of Sketch and Illustrator.

    And with every modern browser (and no, I’m not counting IE11) now fully supporting flexbox, there’s no reason not to dive in — as long as your audience isn’t full of IE diehards.

    Of course, flexbox can take some getting used to if you’re super comfortable with the other, very different layout modules. So if you need some help wrapping your head around flexible boxes, check out Flexbox Game.

    Okay, what do you think, Waldo Broodryk, customer happiness hero?

    Waldo Broodryk, Customer Happiness Beard … I mean, Hero

    12. Complex CSS grid layouts

    Coming up hot on the heels of flexbox in the race for newer, better layout modules is CSS grid. As Chris House, creator of “A Complete Guide to Grid” puts it:

    Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

    While flexbox helps us solve some seriously aggravating and long-standing web design problems like vertical centering, it really wasn’t intended for use in full-page layouts. (Though it’s certainly capable of them.) Grid, on the other hand, was built for full-page layouts. And like flexbox, it allows you to easily rearrange content order for different media queries.

    Grid isn’t yet ready for use in the wild, but that just gives you some time to familiarize yourself with the spec. Which is great, because it’s going to be big.

    If you want to start playing with CSS grid today, here’s how:

    • In Chrome, go to chrome://flags and enable “experimental web platform features”
    • In Opera, go to opera://flags and enable “experimental web platform features”
    • In Firefox, enable the layout.css.grid.enabled (or install Firefox Nightly)

    13. A focus on designing for content delivery, personalization, and conversion

    One consequence of an increased focus on design as a means of effectively delivering content will be a stress on delivering said content to the right person at the right time — all with an eye to increasing desired actions, naturally. (All good news for you content strategists out there!)

    Personalization of content has been an extremely hot topic in content circles for quite some time now, but no one seems to have perfectly cracked that nut yet. Essentially, the goal is to  serve up content based on characteristics like:

    • Demographics: Who is the visitor (professionally and/or personally) and where are they coming from?
    • Behavior: What is the visitor doing now? What have they done on your site in the past?
    • Context: What device and browser is the visitor using? How did they arrive at your site? Are they logged in or logged out?

    We’ve seen some interesting experiments in this direction across the web, many of which revolve around a manual personalization of content recommendations by the user, recommendation of “related” reads, and some algorithmic solutions more akin to what Facebook is capable of doing.

    Fubiz features manual personalization through its “Creativity Finder,” a conversational-style form that lets you pick from a range of predetermined options about you, your location, and what you’re looking for. It’s a bit “low tech,” but it does offer a feeling of agency most content platforms don’t really offer.

    Fubiz

    Redshift

    A step up from that is Autodesk’s new Redshift blog, which deepens the level of user agency by offering a range of manual customization options like:

    • Following topics and authors
    • Customizable feed
    • Highlighting for comments and sharing
    • Bookmarking

    It’s mostly stuff a savvy reader can achieve on their own, but Redshift dramatically simplifies those functions. And more importantly, it represents a shift away from a paradigm that views blog posts as the content version of vaporware, turning it into more of an evergreen learning resource.

    If a lot of Redshift’s functionality sounds familiar, it might be because it’s largely replicated from Medium. Unlike Redshift, though, Medium has the advantage of a much larger base of readers and writers, not to mention tight integration with Twitter — all of which boost its ability to algorithmically recommend content to you.

    All of these content personalization methods epitomize a view of product design as a method of finding the intersection between user needs and business needs. Readers want to be able to save, share, and customize the content they see — and the company can use that data in a host of ways. So, win-win.

    Of course, it’s worth remembering that conversions aren’t the only metric content personalization can drive. Personalization of help documentation can help lower support request volume. Educational materials can lower churn and improve lifetime value. But it’s not like conversions will ever not be valuable.

    And now for my two cents:

    Hi!

    You might call 2016 the year of the bot — though whether it’s been the beginning of the bots’ triumph or just a somewhat underwhelming launch is very much open to debate.

    That said, if the volume of bot-related launches on Product Hunt and Google’s deep integration of Assistant into Android are any indication, 2017’s going to see a lot more bots popping up across your life.

    But bots are really just a specific instantiation of a more abstract, and thus more pervasive, idea: that conversation is an interface. And we’re likely to see that idea shape a lot of 2017’s top design work.

    What this might mean, exactly, we’ll have to wait and see. But possible impacts include:

    • An even greater interest in “human” language (more good news for content strategists!)
    • Increased capacities for writers and content strategists to act as UX designers and bot developers
    • Even more investment in so-called “user-generated content,” creative communities, fora, etc.
    • More conversational/natural-language forms (at present, the form is the fundamental unit of product design — in 2017, we might see that paradigm shift from form to conversation)

    Hopefully, this continued interest in bots and AIs will help them better understand what the hell we’re talking about.

    15. The fight against fake news

    ‍Illustration by New Yorker cartoonist Joe Dator.

    The 2016 U.S. presidential campaign taught us all a lot about how the web can influence sociopolitical realities, and one of the foremost lessons was:

    Misinformation is fast, easy, and cheap to produce; super profitable; and capable of severely impacting public perception of candidates.  

    Obviously not something that (most of us) who create and distribute web content were excited to see revealed.

    But every problem represents an opportunity. And true to form, web designers, product designers, and developers worldwide have jumped at the opportunity to fix this particular broken window. Here’s just a small sampling:

    • Google and Facebook have both stated that they’ll limit the flow of ad dollars to fake news sites via their advertising tools.

    Ultimately, the more programmatic methods and monetary methods proposed by Facebook, Google, and the FiB team will prove the most scalable and effective. But more human methods like a stronger commitment to journalistic ethics and tools and resources designed to help people be better readers will undoubtedly be needed as well.

    Because as with any attempt to control the flow of information, there’s always the possibility of control being exercised the wrong way. And that means it’s ultimately up to us to stop the creation and spread of misinformation.

    Over the course of 2016, a number of design teams created and popularized their own blogs as a way to offer insights into process and, perhaps, humanize the brand to a certain extent.

    Content like this used to be focused primarily on recruitment — attracting new hires by conveying a sense of what’s it like to design, or engineer, or write within a particular company. 

    But in 2016, the focus appeared to shift in 3 new directions:

    • Brand
    • Humanization
    • Helpfulness

    These 3 strains can be pretty hard to untangle, and the most popular of these design blogs do all three with panache. They also tend to have a particular focus that sets them apart as more than “Brand X’s design team blog.” But again, it’s not always obvious.

    With the success of the following design-and-content blogs, brace yourself for many more in 2017:

    Facebook.design

    Several People Are Typing

    Foci: Slack, workplace productivity, and content strategy

    Google Design

    Foci: Google, process, tools

    Shopify UX

    Foci: UX (i.e., design, content, dev, research)

    17. A new designer deliverable — code — created in new ways

    Coding is going to look dramatically different in the future. In fact, the line between design and development may no longer exist.

    A conversation about the article sprung up on Twitter, where Austin Knight noted:

    Many designers and devs that I know would prefer to work visually, but work in code out of necessity.

    There are many drivers behind this emerging reality, including

    • The need for fast, iterative product development
    • User need for more equivalency between outputs and inputs (i.e., most painters don’t paint with code)
    • Increasing sophistication of code-free design tools

    And since Webflow’s one of the last, we’re all in on this future.

    18. Virtual reality … on the web

    Given our already firmly founded tendency to think of the web as a kind of alternate reality, this is a bit inception-y. But there’s no denying that VR is going to affect the web in a big way in 2017 — even if browsers won’t be ready to support it. If you’re eager to try it, check out the Web VR site.

    Ready to do your part to define web design in 2017?

    Then start building websites with Webflow! It’s free to get started, and you’re going to love the creative freedom it gives you.

    Top Dentists In NYC

    If you’ve misaligned teeth, then they’d advise you to go for Invisalign. Cleaning your teeth well at home is a significant part of a thriving oral hygiene routine. Solving problems like a busted tooth, misaligned teeth are the principal domain of restorative dentists. Healthy teeth and gums are crucial to a gorgeous smile.

    Deciding on a dentist is truly tough. When you locate a dentist that utilizes cosmetic procedures, have a look at their practice. When you must visit a New York dentist, be certain to get in touch with us and schedule your next appointment.

    Like Central Park South Dental Care, you should locate a dentist with a lot of experience in every procedure. Locating a dentist is rather difficult, given how dreadful it’s to go to one. You may wonder why you need to go to the dentist so often if you’re taking great care of your teeth and gums by yourself. Most dentists don’t want to experience the extra training and accreditation process that’s vital to sedate patients. Thus all you have to do is to realize an excellent Dentist in Wall Street NY, who has enough experience to deal with your dental troubles.

    Don’t prolong needed dental care, because the absence of dentistry can get very costly. Cosmetic dentistry is growing more popular. Read on and learn what it can offer you.

    Usually made from titanium, implants are set in the jaw bone and can be employed to support a crown, bridge or denture. Among all sorts of dental treatments offered in the regular dentistry, the dental implants have the maximum significance. During the last 20 years, they have become a desirable alternative to other methods of replacing missing teeth. They are changing the way people live.

    In our office, patients can be certain they will get the most innovative treatments utilizing state-of-the-art procedures and cutting-edge technology. If you’re a new patient I want to welcome you to my dental office. A number of our patients are professionals in the region. Even patients who want an MRI and are nervous, ask to get sedated.

    dentist nyc

    The Basics of Dds Nyc
    Quite often, people don’t consider their dental health when thinking of their general wellness. Good oral health asks a dentist that’s meticulous in the details and has the capability to give skill and attention in a manner that lasts. You deserve to relish excellent oral wellbeing!

    The individual who is having such dental troubles, the ideal choice is to receive the support of a professional Cosmetic Dentist Manhattan NY. Please browse through the site and remember to give us a call when you have any questions regarding dentistry in NYC or want to schedule an appointment. For those who have questions about any facet of your treatment program or our easy financing program, please ask us.

    dentist near me

    The true dental cleaning procedure begins after your X-rays. Each procedure performed is laser-assisted to generate the process simpler and not as painful for the individual. The dental cleaning procedure isn’t a huge deal whatsoever and we’ll force you to truly feel comfortable once you visit our NYC dental office.

    Introducing Dds Nyc
    The normal checkups can help you to maintain the wellness of your teeth. Regular checkups and cleanings are the best methods to stop cavities and to continue to keep your mouth healthy and strong. Routine dental checkups and cleanings, together with discussions with your dentist, are an essential part of maintaining excellent health.

    dental clinic new york

    Dds Nyc – Overview
    You truly do deserve to get treated like the special and special individual you’re especially in regards to something as essential as your smile. Perceptions of the great thing about the smile in various cultures The smile is among the important focus in cosmetic dentistry. Your smile is significant to us, therefore we use the most recent technology to keep it beautiful and healthy. There’s only your ideal smile.

    Rock Smiles cosmetic dentist New York offers you the smile you desire. Your smile says a good deal about you, so let’s make it unforgettable! Therefore, if you’d like to receive a pretty smile, follow all of the help of your dentist and allow him to recommend the best treatments to create the changes you want in your teeth. With the critical advancements in modern dental procedures today, it is possible to finally have a much healthier and more attractive smile in virtually no time.

    DBL07 Consulting & Website Design

    SEO is the driving force behind many of the world’s most popular websites. The success of your business depends on your SEO skills.

    If you want your online presence to make an impact on your consumer base, you need to perfect your SEO technique. Sometimes, it takes an expert.

    Here are some expert SEO tips that can turn your business around fast!

    Use Links Wisely

    Links are the best way to integrate your business with others in your network. They can also help you build credibility and direct more traffic to your website, but only if you use them correctly.

    You should create links to websites that feature essential voices, thought leaders in your industry that can educate your consumers while also directing them toward your products or services.

    Make sure that all links you make are tasteful. They should blend seamlessly with your content and not seem like gratuitous advertisements. If your audience respects the site you are linking to, they will respect yours as well.

    Follow Back End Rules

    Meta descriptions for your pages are essential for getting clicks. They often serve as the gateway for all your webpages.

    Those who search for your products or services online will look to your meta description to see if your site is worth visiting. If it does not provide them with enough information, they will move on to another site.

    You should also fill out alt-text fields with descriptive information about the images on your site. This way, they will show up in image searches, potentially doubling the traffic to your website.

    It’s very important that you use keywords throughout your website to boost your chances of ranking highly in search engines. But you need to make sure that you don’t use them too much.

    Keywords are meant to enhance your content. They shouldn’t be the focus of everything you write on your website. You should also be using keywords in your meta description.

    Write Useful Content

    The reality is that if your audience has no use for your content, they won’t care to visit your website. That’s one of the major benefits of great content; it keeps people coming back for more.

    Eventually, they’ll want to learn more about what your business has to offer them.

    Do thoughtful topic research and find out what people in your target audience want to read about the most. Make sure all of your content reflects real questions they have.

    Useful, informative content is also more likely to get a bump from social media, increasing your online impact exponentially.

    Measure Your Progress

    It’s important that you consistently measure your progress to ensure that you are on the right track with your SEO strategy. You don’t want to spend months focusing on a single strategy only to find out that it’s not working for your company.

    Be flexible, and be ready to adapt and push forward.

    Hire an Expert SEO Professional

    Proper SEO techniques have benefits for businesses of all sizes. But if SEO seems like a foreign language to you, consider hiring an expert SEO professional.

    For more information on the SEO services we offer, please contact us!