The following is a guest post by David Attard of DART Creations. David is going to introduce us to AMP (no idea what that is? read on) as well as how you might go about converting an existing site to an AMP site. Hint: it’s for big performance gains. AMP is becoming quite a thing. WordPress is doing it. I’ve got Google telling me to do it and that Analytics supports it.

If you have your visitors interests at heart, you’ll know that a fast website is one of the main factors of a good user experience. Speedy websites go a long way in making your users happy and coming back. Determined website administrators will always chase those few milliseconds of speed improvements.

Those milliseconds make a real difference.

One big new method for making your website fast is called
Accelerated Mobile Pages (AMP), a project spearheaded by Google. Mobile data is unlike our home WiFi connections. It’s slow. AMP aims to help fix that, in a rigidly prescribed way, by ridding sites of their most inefficient parts.

Let’s take AMP for a spin!

We’ll see how to convert an existing web design to AMP. Then we’ll measure the difference it makes.

Why Accelerated Mobile Pages?

Phones on mobile networks typically experience latency issues.

Even for simple articles with static content, pages can take a long time to load the text. Scripts, images, video… all that takes even longer. Perhaps ads come in even later, and the page adjusts itself to reflect the newly loaded content. Not exactly a pleasant loading experience.

AMP wants to change all of that. Publishers and technology companies have come together to establish best-practices which will make pages render quickly.

This is a non-trivial problem. The initial focus of AMP is on static content that allows for more radical optimization.

For now, AMP is an open-source proof-of-concept. In fact, we’ll come across some limitations which show that this technology is still in its infancy.

What makes AMP faster than a traditional web site?

AMP has very rigid rules for the source in order to get the big speed gains it’s going for.

The founding principles of AMP are:

1. Only asynchronous scripts. Non-async scripts block DOM construction and delay page rendering.

   In fact AMP restricts the usage of JavaScript at all. Scripts are only allowed within custom AMP elements which are carefully designed for performance. Example of custom AMP scripts include Google Analytics, Facebook, Twitter and YouTube.

   3rd party scripts (such as ads, or 3rd party services) are kept out of the critical path and are only allowed in iframes. Once again, this will not block the rendering of the page.

   More on scripts later.

2. External resources need to have set dimensions. Things like images and iframes need to have sizes to ensure that AMP knows the size of the elements before they are downloaded.
3. Don’t let anything block rendering. Simply put, nothing stops AMP from rendering. External elements are included in iframes. AMP will create the iframe box without even knowing what it will contain.
4. CSS must be inlined and size bound. AMP takes the opposite of the normal choice of linking CSS in an external file. AMP obliges inline CSS, for the same reason as scripts: because CSS blocks rendering and page load.

   There is a maximum of 50 kilobytes of inline CSS to make sure it is used efficiently.

5. Font loading must be efficient. Web fonts can be quite large and can severely impact performance. In normal circumstances, browsers are blocked from downloading fonts until scripts and stylesheets have been downloaded and are ready. This creates a long initial wait time until the large font starts to download.

   In AMP, CSS is inlined, and scripts are asynchronous. So the browser does not have to wait for these to complete before downloading the fonts.

6. Only run animations on the GPU. Some animations require page layout updates done by the browser rather than the GPU. AMP limits animations to transform and opacity so that page layout updates aren’t required and all animations are kep on the GPU, where they are fast.
7. Resource loading is prioritized. AMP optimizes downloads of resources such that the most important resources are downloaded first. Images are only downloaded if they are likely to be seen by the user.
8. Pages are loaded in an instant. The PreConnect API is used to prefetch, render and download resources which are likely to be used by the user. This is done efficiently: content is pre-rendered and downloaded only if it is likely to be requested (such as “above the fold” content).

The Parts of AMP

There are a number of “changes” to standard HTML, CSS and JS which give pages optimized using AMP a speed boost.

• AMP HTML: These are HTML tags extended with custom AMP properties
• AMP JS: a library which ensures that AMP HTML pages render fast
• AMP CDN: delivers the HTML AMP pages using HTTP 2.0 for maximum efficiency

The Steps to Convert a Page to AMP

Since I was completely new to AMP, I followed their recommended checklist.

I wanted to start with an existing normal (non-AMP) page, so I chose a Pen from CodePen: Example Article Layout by samyerkes.

1. Add the amp attribute to the tag

   <html amp lang="en">

2. Add a canonical link element

   <link rel="canonical" href="index.html">

3. Changed the charset tag. Note that this is different from the ALL-CAPS UTF-8 and AMP is touchy about this.

   <meta charset="utf-8">

4. Add the meta viewport tag

   <meta name="viewport" content="width=device-width,minimum-scale=1">

5. Add AMP Project CDN script at the bottom of the

   <script async src="https://cdn.ampproject.org/v0.js"></script>

6. Changed all tags to and added width and height attributes. Example:

   <amp-img src="http://farm4.staticflickr.com/3595/3288866270_23cb40f37c_b.jpg" alt="Crashed plane vintage photo" height="1024" width="734"></amp-img> 

   You need to follow this syntax when using tags:

   • Must include an explicit width and height.
   • It is recommended to include a placeholder. The placeholder is immediately shown, so that there is “something” visible until the actual resource holds. For example, you could load a low-res preview of an image which is loading.

     <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
       <amp-img placeholder src="preview.png" layout="fill"></amp-img>
     </amp-anim>

   • Optional: layout="responsive". Read about other layout options.
7. Removed stylesheet and inlined all CSS using

The Results: Improved Loading Times

The test environment was a couple of subdomains created on a SiteGround GoGeek shared hosting account. Tests were run using GTMetrix and Pingdom tools and were run several times to remove any fluctuations coming from the external environments.

Test 1: Short article

The first test we ran was with the exact article as specified in the CodePen, where the article is relatively short.

You can see some fluctuation. If you look carefully at the waterfall graph, you’ll see the fluctuations are actually coming mostly from the AMP CDN. This is unfortunately a side effect of using a shared resource which could come under load.

Test 2: Tripled article length and included 3 times as many images

Interpretation of Results

Beyond the actual loading times, the number of requests in an AMP page are lower than in a normal page. By itself, that makes a page faster, due to the amount of requests being smaller and thus less latency waiting (each request is subject to latency).

Also, the total size of the page decreased significantly when pages were AMPed. Large articles with many images seem to benefit more from AMP.

In one early test we did, we tested a fairly short article with just a handful of images. This test was not very conclusive, so we upped the ante. In the test we’re presenting here, we tripled the length of the article, and tripled the number of images. Interestingly, although we tripled the number of images, in the AMP version of the article, the number of requests did not increase.

As far as I can understand, besides the actual efficiency of the AMP specification, AMP only loads the content above the fold (which explains why the number of requests stayed the same after tripling the images). It is only loading the first chunk of the article, the “above the fold content”, and that’s why the content is shorter, smaller and of course, faster.

A word about s

Quoting verbatim from the How It Works page:

One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page.

which is soon followed by:

With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.

In my opinion, a bit drastic.

Something’s gotta give, I understand. Increased performance comes at a cost. Even when optimizing normal websites for performance, you’re going to have to make some compromises.

Sometimes it’s the quality of the imagery of your site. High quality images come at the cost of large file sizes. Sometimes at the cost of removing functionality. Sometimes at the cost of removing third party scripts, such as social site integrations.

You’re always going to have to take some tough decisions based on your own priorities.

Completely eliminating scripts is a tad too drastic in my opinion. Libraries like jQuery, Bootstrap, Angular, React… essential building blocks of today’s web development.

Completely removing scripts is shooting AMP in the foot. It’s shooting AMP completely off the planet into a small world of its own.

It only becomes practical if you are willing to make very serious compromises in terms of the functionality you want on your web pages. Even in the realm of news websites, the initial focus on AMP, there are going to be some tough pitches.

Can we guess where AMP is headed?

It’s still the early days, and it’s hard to guess on the future of AMP. Speaking from the heart, I really want AMP to succeed. Web pages have become bloated and too little attention is given to performance. We need a real effort to make the web faster. HTTP/2 is a step in the right direction. So is AMP.

Unfortunately, AMP feels crippled with the lack of support for scripts. I hope web developers will come together to find a fair solution which keeps the web fast while enabling the functionality we need.

This is an invite to you. Spare some time to help on the AMP project. If you are not technical enough, read about it and test it out. Evangelize about it and get people interested. Who doesn’t want to be part of a better, faster web for everyone?

Having been following Google for a while, one can expect what Google might do to give AMP a boost. We might soon be hearing that AMP is a SEO ranking signal. You heard it here first.

AMP Resources

• AMP HTML (GitHub)
• AMP HTML Specification (GitHub)
• AMP Project
• How it Works

Taking AMP for a Spin is a post from CSS-Tricks

Since the advent of responsive web design, entrepreneurs, designers, hobbyists, prototyping startups, and design applications have been releasing tools to allow us to preview our designs at different breakpoints.

The latest to throw their hat into the ring is Google with their new Resizer project, designed to allow designers to preview responsive sites at different breakpoints.

The significance of Google entering the market with a solution is that through its sheer size, Google carries enormous weight within the design community. Whether it’s Google Fonts dominating font serving (a recent WebdesignerDepot poll showed 70% of our readers rely primarily on Google Fonts), or the supplanting of Flat Design by Material Design, anything Google says about web design is frequently taken as ‘best practice’.

So it’s a valid cause for concern when Google advocates an approach that’s contrary to established standards.

Google’s Material Design specification already offers guidance around breakpoints:

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

Resizer follows the same principle: it offers laptop and mobile previews at set breakpoints. Laptop (or desktop) screens can be 480px, 600px, 840px, 960px, 1280px, 1440px, or 1600px wide. Mobile screens can be 360px, 600px, 720px, or 1024px wide.

Whilst that is a good cross-section of sizing—although notably doesn’t come close to the full range of Android devices—there is a fundamental error in the approach: Good responsive design uses content breakpoints, not viewport breakpoints; it shouldn’t matter what size Samsung makes its next phone, what matters is at what size your content breaks.

Most site design applications—the latest Adobe Muse for example—correctly allow for custom breakpoints, which ensures that media queries are written for your content, not a hypothetical device.

Resizer is specifically designed to test for (some of) Material Design’s viewport breakpoints. The danger is that Resizer, with Google’s endorsement, will perpetuate the myth of responsive sites as a series of viewport sizes, rather than as fluid device-agnostic content.

2100+ Beautiful Graphic Design Elements with Extended License – only $25!

Source

Si le Soleil

Fashion Responsive Website Template

#2 Live Product Previews

Online presentation of physical and digital products has significantly evolved in recent years. Instead of static product previews, we can now see different goods in action, watch video tours and even play around with various components. Live product previews provide the users with a glimpse of how the stuff that they are going to acquire operates. The technique can be integrated not only into the product pages but also on the front page of a website, as in the example given below.

Webydo

Lingerie WooCommerce Theme

#3 Advanced UI Animations

Animations can make your website more interactive and entertaining. These can be used to enhance your site’s storytelling, distract the user’s eye with motion graphics while the page is loading, hover animation, background animation and videos, and so much more. It’s a well-known fact that animation is a better attention trigger than a static image.

The power of animation is so tremendous that we might expect this technique to become obligatory for traditional businesses as well. In the example below you can see how scrolling animation activates new windows to slide open, without the need to click icons or text links.

Avenir Clinic

Landing Page Theme

#4 Touch-friendly Design Elements

Taking into consideration the massive shift of web users from desktop to handheld devices, making your site responsive has become a “must”. However, it is not only the fluid adaptation of your site’s layout to various screen types and sizes that matter. The basic navigation elements should be no less touch- and user-friendly. When browsing a website from a desktop device, triggering very tiny elements with a mouse is not an issue at all. However, when it comes to tablets and smartphones, handling such small targets can be a challenging task. So, make sure that your icons, buttons, menus and other design elements are easy to swipe and tap on touchscreen displays.

NudeAudio

Responsive Website Template

#5 Material Design

Material design trend has moved far beyond mobile apps within the world of web design. This is a set of Google design standards introduced back in 2014. It’s all about creating more realistic designs using shadows, layers and the concepts of movement and depth. The trend is not new. However, with every New Year, it gains more traction among web designers striving to create clean, sophisticated looks for their web projects, with the primary focus on UX.

Material Interaction

Material Style Joomla Template

#6 Flat and Almost-flat Design

Since we have already mentioned the material design trend, it would be logical to continue with flat style. The two have often been confused. While material design is based on 3D and aims to bring some nice graphical elements to the design, flat style minimizes all the showy stuff that can distract the user’s attention. Flat style uses sharp edges, thin lines, and solid colors.

In 2016, the trend continues to evolve. Flat-styled websites are still experiencing significant demand. However, instead of the traditional flat style with a heavy emphasis on minimalism, we achieve this through a more playful variation. In 2016, almost-flat will rule the web. This variation of flat style features more eye-catching elements, hints of shadows and coloration.

Minimums

Flat Style WordPress Theme

#7 “Old” Vintage Style is Back in Fashion

If you reach a website built in pale colors, featuring vintage fonts, pixelated icons, and texts, galactic backgrounds, stars and planets moving in an interactive way, don’t be in a hurry to leave it. This is a new web design trend that revives the good old style of the 80’s and brings it back into today’s online projects.

White Frontier

Lacrosse Club Website Template

#8 Vibrant Custom Illustrations

The growing popularity of high pixel density retina displays has resulted in a bad performance of such standard image formats as .jpeg and .png on the last generation devices. The unintentionally pixelated look of such visuals (we are not talking about the vintage style here) can spoil the general presentation of your site, and make the users leave in search of something of better quality.

For this not to happen, web designers have shifted to Scalable Vector Graphics and icon fonts, which can adapt to any screen flawlessly and remain crisp at any resolution. With the purpose of providing a better delivery of their message to the audience and making all images match their brand identity, the companies are creating custom SVG illustrations and hand-drawn icon fonts that will look amazing on any screen resolution.

Ice & Sky

Web Design Agency WordPress Theme

#9 Less Rigid Grids

Pinterest-inspired grids are still in high demand among the web audience. Minimalism, flat style, and Bootstrap make integration of the technique into web designs a breeze. Just like many other trends on the list, grid-based layouts have evolved and now look more creative and interactive.

In addition to providing for a more captivating storytelling process, grids are typical for mobile-friendly designs. Allowing a more balanced look, they can also adjust smoothly to multiple display sizes.

Bernd Kammerer

Hair Care PrestaShop Theme

#10 Dramatic Typography

Typography is one of the key elements that should be making a strong statement on your site. As web design trends evolve, so do the techniques and approaches of presenting the written data. Fonts of extreme size (either too big or too small), artistic typefaces, as well as creative use of simple fonts are in vogue this year. These styles can also be mixed within one design to create a more breathtaking visual palette.

Fake Music

7 Level WordPress Theme

#11 Dynamic Storytelling

This is a company story with the presentation of products or services being organized into a creative yet easy to follow way. Commonly achieved utilizing graphics, accompanied by text, it guides visitors through the entire story step-by-step, while clicking or scrolling. The technique can be organized into a timeline, with a perfect balance of graphics and text. An over-abundance of each of the components can make the UX overwhelming and confuse the visitors.

New Jumo Concept

Houston WordPress Theme

#12 Personal Branding

It’s all about visuals, ideas, concepts, and perceptions that distinguish one brand from another. The way you present your company, promote your products, work and communicate will make you distinguishable from others. Regarding web design, colors, custom fonts, your company logo, visuals and other unique elements can make your brand recognizable. Keep it consistent and unique, and people will start talking about you.

Swirls

Monstroid Multi-purpose WordPress Theme

#13 Hidden Menus

The Hamburger menu remains one of the most convenient ways of showcasing your website’s content in a concise manner. While being widely used in mobile designs, the technique can also make a desktop version of your web page more usable. While being widely recognized, the 3-line icon, placed in the upper right corner of your site, will provide the users with quick access to the rest of your pages, without distracting their attention when reading a text, viewing your portfolio, etc.

Sampedro

Home Electronics Magento Theme

#14 Microinteractions

As the name implies, the technique is all about micro-interactions that will make up the ultimate positive user experience on the site. These can be either active (like entering your password or clicking a ‘like’ button) or passive (like an audio notification when a new message arrives).

Being indispensable for a user-friendly UX, micro-interactions can be filtered by their purpose.

• The ones that are intended to accomplish a task (registration, login, sending an email). /
• Synchronization between devices, sites or apps.
• Managing site settings.
• Data feedback (obtaining real-time data in response to a request).

Brand Junkie

Reebo PrestaShop Theme

#15 HD Backgrounds

HD visuals are going to become stronger in 2016. The rise of HD displays will dictate new web design fashion. Standard JPEG images will no longer appeal to the users. Today, we need something that can scale up and down to any screen size. This is where HD backgrounds come in handy. As a rule, these are made in SVG format and are divided into the three broad groups: images, videos, and animation.

• HD images commonly have a full-width or hero placement. Known as great attention-grabbers, HD image backgrounds should be better paired with minimalist design elements, in order not to make your page look overwhelming.
• HD videos will help you create emotional connections with the audience. If you decide to opt for this choice, there are several basic rules to follow: 10-30 second loops in order not to slow down page loading; sound off to avoid annoyance; minimize video loading as much as possible, still keeping the quality at a high level. /
• HD animation is something in between the previous two options. For animation to look organic within your design, try to keep it simple. Design it in colors and with fonts that are used in your interface. And pay particular attention that you build it using vector type. Otherwise you might have a problem with its display on different screens.

Flipboard

Supreme WordPress Theme

#16 Functional Minimalism

“Less is more” – this is the fundamental concept that we bear in mind when speaking of minimalist web designs. Created in a clean and concise manner, these are not rich in multiple design elements. On the contrary, every detail is integrated to serve a particular function.

The best thing about minimalism is its ease of integration with other web design trends, like flat style, the use of white space and dramatic typography, integration of simple navigation or adding hero images to the site, etc. The key philosophy of the minimalist trend is to place the minimum number of elements on the page, thus making your objective more easily understood by the target audience.

Apple

Creative WordPress Theme

#17 Long Scroll

This is one more trend that was profoundly influenced by the growing use of mobile devices. Such a tendency means that web designers are faced with a challenge to become more creative in their works. This was when scrolling replaced clicking. The benefits of the long scroll are numerous. Here are just a few of them:

• Makes storytelling more creative and interactive than page-by-page navigation.
• Facilitates navigation on touch devices.
• Enhances the visual appeal with the parallax scroll, animations, smooth transitions, etc.

Samsung

Landing Page Template

#18 Split Screen

The vertical divide of the page allows you to present two elements at a time. The technique will be of particular interest to businesses that have two equally important things to promote at the same time. On the other hand, you can use it to demonstrate some catchy visual stuff on one side and accompany it with brief explanations on the other.

Killing Kennedy

Business Joomla Template

#19 Single-page Websites

Single-page websites are the preferred option for enterprises that want to emphasize simplicity and speed of their web projects. Commonly used to present a certain product or service, single-page sites are rich in visual effects and animation. This can be literally everything – from parallax scrolling to scroll jacking. A long scroll technique is especially applicable to such web resources, making all content loading hassle-free on any device.

The Cook App

Responsive Landing Page Template

#20 Monochromatic Schemes

Bold, vibrant web design colors have become one of the most noticeable trends in recent months. Bold colors are especially popular among monochromatic schemes that use varying shades of the same colors in their designs. In the example below you can see how design, built in different shades of green, creates an aesthetic and visually pleasing effect when used within one minimalist design and accompanied by dramatic lettering and ghost buttons.

Exo-Skills

Communication WordPress Theme

As you may have already noticed, many of these 20 web design trends are not new. With the flow of time, most of them have evolved into something new, somewhat different, but no less usable. We hope that our post will help you create a smart website that keeps pace with current web design trends and stands out from the competition.

Now, we’d like you to speak up and share your suggestions on other cool web trends that are worth being mentioned in this publication. What do you think about the themes that we have shared? Are they good to start a website with? Your feedback is always appreciated!

About the Author

Katherine Crayon is a copywriter reporting on tech news and all aspects of the web design industry. Anyone looking for more inspirational posts, tips and advice or simply the latest industry news, meet her in person on

Time changes, and so does the web. In 2016, we are ready to meet and adopt new techniques, which we never came across before. Of course, some trends of the past year will still keep on dictating web fashion during the next 366 days. However, none of them will be left without changes. So, what are the key web design trends on which we should keep a close eye in 2016? Let’s find out in this post.

Just before we proceed to the compilation, I think that it’s worth mentioning that each of the 20 trends listed below is illustrated by means of an active website (where a certain technique is implemented) and a ready-made website template/WordPress theme/landing page template, which will help you attain similar results in no time.

#1 Card-based Layouts

Card-based UIs are now one of the fastest growing web design trends. Presented by Pinterest and then popularized by such social media platforms as Facebook and Twitter, the organization of content into separate containers can bring your site more value than you expect. Card-based UIs are pleasing to the eye and well balanced. However, this is also very practical regarding mobile designs. These types of layouts are very flexible and dynamic. They allow for a consistent experience across a variety of devices.

Si le Soleil

Fashion Responsive Website Template

#2 Live Product Previews

Online presentation of physical and digital products has significantly evolved in recent years. Instead of static product previews, we can now see different goods in action, watch video tours and even play around with various components. Live product previews provide the users with a glimpse of how the stuff that they are going to acquire operates. The technique can be integrated not only into the product pages but also on the front page of a website, as in the example given below.

Webydo

Lingerie WooCommerce Theme

#3 Advanced UI Animations

Animations can make your website more interactive and entertaining. These can be used to enhance your site’s storytelling, distract the user’s eye with motion graphics while the page is loading, hover animation, background animation and videos, and so much more. It’s a well-known fact that animation is a better attention trigger than a static image.

The power of animation is so tremendous that we might expect this technique to become obligatory for traditional businesses as well. In the example below you can see how scrolling animation activates new windows to slide open, without the need to click icons or text links.

Avenir Clinic

Landing Page Theme

#4 Touch-friendly Design Elements

Taking into consideration the massive shift of web users from desktop to handheld devices, making your site responsive has become a “must”. However, it is not only the fluid adaptation of your site’s layout to various screen types and sizes that matter. The basic navigation elements should be no less touch- and user-friendly. When browsing a website from a desktop device, triggering very tiny elements with a mouse is not an issue at all. However, when it comes to tablets and smartphones, handling such small targets can be a challenging task. So, make sure that your icons, buttons, menus and other design elements are easy to swipe and tap on touchscreen displays.

NudeAudio

Responsive Website Template

#5 Material Design

Material design trend has moved far beyond mobile apps within the world of web design. This is a set of Google design standards introduced back in 2014. It’s all about creating more realistic designs using shadows, layers and the concepts of movement and depth. The trend is not new. However, with every New Year, it gains more traction among web designers striving to create clean, sophisticated looks for their web projects, with the primary focus on UX.

Material Interaction

Material Style Joomla Template

#6 Flat and Almost-flat Design

Since we have already mentioned the material design trend, it would be logical to continue with flat style. The two have often been confused. While material design is based on 3D and aims to bring some nice graphical elements to the design, flat style minimizes all the showy stuff that can distract the user’s attention. Flat style uses sharp edges, thin lines, and solid colors.

In 2016, the trend continues to evolve. Flat-styled websites are still experiencing significant demand. However, instead of the traditional flat style with a heavy emphasis on minimalism, we achieve this through a more playful variation. In 2016, almost-flat will rule the web. This variation of flat style features more eye-catching elements, hints of shadows and coloration.

Minimums

Flat Style WordPress Theme

#7 “Old” Vintage Style is Back in Fashion

If you reach a website built in pale colors, featuring vintage fonts, pixelated icons, and texts, galactic backgrounds, stars and planets moving in an interactive way, don’t be in a hurry to leave it. This is a new web design trend that revives the good old style of the 80’s and brings it back into today’s online projects.

White Frontier

Lacrosse Club Website Template

#8 Vibrant Custom Illustrations

The growing popularity of high pixel density retina displays has resulted in a bad performance of such standard image formats as .jpeg and .png on the last generation devices. The unintentionally pixelated look of such visuals (we are not talking about the vintage style here) can spoil the general presentation of your site, and make the users leave in search of something of better quality.

For this not to happen, web designers have shifted to Scalable Vector Graphics and icon fonts, which can adapt to any screen flawlessly and remain crisp at any resolution. With the purpose of providing a better delivery of their message to the audience and making all images match their brand identity, the companies are creating custom SVG illustrations and hand-drawn icon fonts that will look amazing on any screen resolution.

Ice & Sky

Web Design Agency WordPress Theme

#9 Less Rigid Grids

Pinterest-inspired grids are still in high demand among the web audience. Minimalism, flat style, and Bootstrap make integration of the technique into web designs a breeze. Just like many other trends on the list, grid-based layouts have evolved and now look more creative and interactive.

In addition to providing for a more captivating storytelling process, grids are typical for mobile-friendly designs. Allowing a more balanced look, they can also adjust smoothly to multiple display sizes.

Bernd Kammerer

Hair Care PrestaShop Theme

#10 Dramatic Typography

Typography is one of the key elements that should be making a strong statement on your site. As web design trends evolve, so do the techniques and approaches of presenting the written data. Fonts of extreme size (either too big or too small), artistic typefaces, as well as creative use of simple fonts are in vogue this year. These styles can also be mixed within one design to create a more breathtaking visual palette.

Fake Music

7 Level WordPress Theme

#11 Dynamic Storytelling

This is a company story with the presentation of products or services being organized into a creative yet easy to follow way. Commonly achieved utilizing graphics, accompanied by text, it guides visitors through the entire story step-by-step, while clicking or scrolling. The technique can be organized into a timeline, with a perfect balance of graphics and text. An over-abundance of each of the components can make the UX overwhelming and confuse the visitors.

New Jumo Concept

Houston WordPress Theme

#12 Personal Branding

It’s all about visuals, ideas, concepts, and perceptions that distinguish one brand from another. The way you present your company, promote your products, work and communicate will make you distinguishable from others. Regarding web design, colors, custom fonts, your company logo, visuals and other unique elements can make your brand recognizable. Keep it consistent and unique, and people will start talking about you.

Swirls

Monstroid Multi-purpose WordPress Theme

#13 Hidden Menus

The Hamburger menu remains one of the most convenient ways of showcasing your website’s content in a concise manner. While being widely used in mobile designs, the technique can also make a desktop version of your web page more usable. While being widely recognized, the 3-line icon, placed in the upper right corner of your site, will provide the users with quick access to the rest of your pages, without distracting their attention when reading a text, viewing your portfolio, etc.

Sampedro

Home Electronics Magento Theme

#14 Microinteractions

As the name implies, the technique is all about micro-interactions that will make up the ultimate positive user experience on the site. These can be either active (like entering your password or clicking a ‘like’ button) or passive (like an audio notification when a new message arrives).

Being indispensable for a user-friendly UX, micro-interactions can be filtered by their purpose.

• The ones that are intended to accomplish a task (registration, login, sending an email). /
• Synchronization between devices, sites or apps.
• Managing site settings.
• Data feedback (obtaining real-time data in response to a request).

Brand Junkie

Reebo PrestaShop Theme

#15 HD Backgrounds

HD visuals are going to become stronger in 2016. The rise of HD displays will dictate new web design fashion. Standard JPEG images will no longer appeal to the users. Today, we need something that can scale up and down to any screen size. This is where HD backgrounds come in handy. As a rule, these are made in SVG format and are divided into the three broad groups: images, videos, and animation.

• HD images commonly have a full-width or hero placement. Known as great attention-grabbers, HD image backgrounds should be better paired with minimalist design elements, in order not to make your page look overwhelming.
• HD videos will help you create emotional connections with the audience. If you decide to opt for this choice, there are several basic rules to follow: 10-30 second loops in order not to slow down page loading; sound off to avoid annoyance; minimize video loading as much as possible, still keeping the quality at a high level. /
• HD animation is something in between the previous two options. For animation to look organic within your design, try to keep it simple. Design it in colors and with fonts that are used in your interface. And pay particular attention that you build it using vector type. Otherwise you might have a problem with its display on different screens.

Flipboard

Supreme WordPress Theme

#16 Functional Minimalism

“Less is more” – this is the fundamental concept that we bear in mind when speaking of minimalist web designs. Created in a clean and concise manner, these are not rich in multiple design elements. On the contrary, every detail is integrated to serve a particular function.

The best thing about minimalism is its ease of integration with other web design trends, like flat style, the use of white space and dramatic typography, integration of simple navigation or adding hero images to the site, etc. The key philosophy of the minimalist trend is to place the minimum number of elements on the page, thus making your objective more easily understood by the target audience.

Apple

Creative WordPress Theme

#17 Long Scroll

This is one more trend that was profoundly influenced by the growing use of mobile devices. Such a tendency means that web designers are faced with a challenge to become more creative in their works. This was when scrolling replaced clicking. The benefits of the long scroll are numerous. Here are just a few of them:

• Makes storytelling more creative and interactive than page-by-page navigation.
• Facilitates navigation on touch devices.
• Enhances the visual appeal with the parallax scroll, animations, smooth transitions, etc.

Samsung

Landing Page Template

#18 Split Screen

The vertical divide of the page allows you to present two elements at a time. The technique will be of particular interest to businesses that have two equally important things to promote at the same time. On the other hand, you can use it to demonstrate some catchy visual stuff on one side and accompany it with brief explanations on the other.

Killing Kennedy

Business Joomla Template

#19 Single-page Websites

Single-page websites are the preferred option for enterprises that want to emphasize simplicity and speed of their web projects. Commonly used to present a certain product or service, single-page sites are rich in visual effects and animation. This can be literally everything – from parallax scrolling to scroll jacking. A long scroll technique is especially applicable to such web resources, making all content loading hassle-free on any device.

The Cook App

Responsive Landing Page Template

#20 Monochromatic Schemes

Bold, vibrant web design colors have become one of the most noticeable trends in recent months. Bold colors are especially popular among monochromatic schemes that use varying shades of the same colors in their designs. In the example below you can see how design, built in different shades of green, creates an aesthetic and visually pleasing effect when used within one minimalist design and accompanied by dramatic lettering and ghost buttons.

Exo-Skills

Communication WordPress Theme

As you may have already noticed, many of these 20 web design trends are not new. With the flow of time, most of them have evolved into something new, somewhat different, but no less usable. We hope that our post will help you create a smart website that keeps pace with current web design trends and stands out from the competition.

Now, we’d like you to speak up and share your suggestions on other cool web trends that are worth being mentioned in this publication. What do you think about the themes that we have shared? Are they good to start a website with? Your feedback is always appreciated!

About the Author

Katherine Crayon is a copywriter reporting on tech news and all aspects of the web design industry. Anyone looking for more inspirational posts, tips and advice or simply the latest industry news, meet her in person on G+ and Twitter.

(dpe)

Mandrill, the popular transactional email service, has recently announced that it will discontinue its free tier plans soon.

After March 16, new users will be required to create their accounts through MailChimp, whereas existing users will be required to merge their accounts with MailChimp. Essentially, this means users might need to pay $20 or more per month for transactional emails. The deadline for this is April 27.

Of course, the other plans at MailChimp will continue to be on offer. In essence, Mandrill will now be a paid add-on for MailChimp, wherein you can use this addon to send transactional mails. Here is how they are defining transactional emails:

Transactional emails (are) like password reminders and the myriad email notifications you get after making changes to online accounts.

Many web developers use Mandrill to deliver such emails on their projects, such as WordPress websites. This ensures that server resources are not wasted in sending emails and handling spam, etc.

However, after this announcement, most developers who are on a budget might be forced to seek an alternative. Amazon SES is one such service, that lets you send 62,000 emails per month, as long as you send them via an Amazon EC2 instance.

There are other options out there as well; but Mandrill has so far been the most popular one, with superb integration among other services (such as WordPress plugins).

If you are a Mandrill user, how do you intend to handle this new change? Will you be paying for transactional email delivery (assuming you were on the free plan)? Or are you in pursuit of an alternative? Share your views in the comments below.

Read more about the Mandrill to MailChimp transition here.

Inspiration lies everywhere: in a conversation, a walk through a foreign city, or, in other people’s works. To fuel your ideas, we celebrate the beginning of each month with what we found to be the best source for daily inspiration: desktop wallpapers that are a bit more distinctive than the usual crowd. This creativity mission has been going on for almost eight years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features their artwork for March 2016. Each wallpaper comes in two versions — with and without a calendar — and can be downloaded for free. It’s time to freshen up your desktop!

The post Desktop Wallpaper Calendars: March 2016 appeared first on Smashing Magazine.

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Mistakes I Made While Learning to Code

Ethical Web Development

7 Tips for Delighting Users with Great UX

How Creativity Can Kill a Good Website Design

Why We Don’t Surf the Web Anymore ­And Why that Matters

Efficient Responsive Design Process

Unsplash 4.0

Top Designers Share their Secrets to Beating Creative Block

The Two Career Paths for Developers (likely Designers Too)

Building a Site Entirely on Github.com

Gutenberg: Web Typography for Everyone

The Elephant in the Room: Work has Dried Up.

Website Design: Instrument

Why is the Heart Symbol so Anatomically Incorrect?

Unflattening Design

Why Minimalist Design Can Benefit your User Experience

The Hidden Homescreen

The New Web Typography

Website Design: Wonderland Industry

Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?

Stripe Atlas a New Way to Start an Internet Business Anywhere.

Spotify Moves its Back End to Google Cloud

The Met Explains its Controversial New Logo

The Next Phase of UX: Designing Chatbot Personalities

What Google’s New Layout Means for Search Marketers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Fall in Love with the Valentine Font Bundle: 9 Lovely Typefaces – only $24!

Source

Some things are so foreseeable that I am having problems to understand why anyone would expect things to turn out the unexpected way. Just a few days ago I met a developer I hadn’t seen in a while. And that was one of these moments that left me puzzled.

As we hadn’t spoken for quite a while, I asked him what he had been up to recently. With a fair amount of pride, he told me that he had been learning native app development in recent months. Now he had reached a stage of professionalism that allowed him to release his first app into the app stores of the globe.

He accepted my congratulations but then went on far less proud than before. His app would not live up to his expectations, he told me. Downloads would be homeopathic, sales even worse. Practically no-one would decide to make the in-app purchases he had figured out would make him a wealthy man.

At this point, I asked him what kind of app it was that he had created. Immediately his pride was back, and he told me enthusiastically that his app was a todo approach and that it was easily comparable to the other great apps already on the market, namely Wunderlist, Todoist and others. He would even charge the same price.

Surprisingly all this would not help. I was too surprised to say anything more than “Are you serious?”.

P.S.: This recent post describes another aspect of the problem.

By the way, we have numerous cartoons for you here.

Responsive web design has established itself as the way of modern web development for a while now. The increasing mobile internet usage makes it necessary for a website to be recognizable even on small displays. This is always a challenge for web designers and developers. Where do I put the complex navigation? How do I provide photos and graphics? What do I do with wide, multi-column tables? To the latter question, there are multiple answers. There is not just one correct solution for all responsive tables.

Making Tables Scrollable

A relatively easy way out would be making tables vertically scrollable. Here, the table is unaffected in its width. With a little CSS, it’s secured that the table doesn’t mess with the width of the layout, and instead, the visible area is cut down to the display width, or the layout width. You can use your finger to slide the table to the left or right.

1
2
3
4

table {
  display: block;
  overflow: scroll;
}

To make a table scrollable, all it takes are two CSS attributes. For one, you need to turn the table into a block element via “display”. Then, via “overflow”, you need to make sure that everything that exceeds the width of the web layout is not displayed. This area will still be accessible via vertical scrolling, however.

Scrollable Table

Additionally, you should either assign set width to the table columns or prevent an automatic wrap via “white-space”.

1
2
3

table th, table td {
  white-space: nowrap;
}

Otherwise, the table will always be cut down to fit the width of the layout, causing many ugly word wraps.

Displaying Table Columns Below Each Other

The first variant has the advantage, that it’s easy to execute, and that you’ll always end up with one entire column in the visible area. However, depending on the displayed data, it can make more sense to have the entire content visible in one row instead. For this, there’s also a solution, which is a little harder, but still works without JavaScript.

The second variant will completely break up a table to display each line with the respective column labels as a block below each other. For this, it’s necessary to add a line to each of a row’s cells via data attributes.

1
2
3
4
5
6
7
8
9
10
11
12

<table>
  <tr>
    <th>Name</th>
    <th>Street</th>
    …
  </tr>
  <tr>
    <td data-th="Name">Manfred Mustermann</td>
    <td data-th="Straße">Examplestreet 1</td>
    …
  </tr>
  …

In the example, the label of the first column is assigned to a row’s first cell via “data-th”, and the second column’s label is assigned to the second cell. This has to be repeated for all table cells.

Table Rows Displayed Underneath Each Other

Afterwards, the rows and cells need to be displayed as block elements, and the headline mustn’t be visible anymore.

1
2
3

table td, table tr {
  display: block;
}

1
2
3

table th {
  display: none;
}

Then, integrate the pseudo element “::before” to place the value of the attribute “data-th” in front of each cell’s content.

1
2
3
4
5
6

table td::before {
  content: attr(data-th)":";
  display: inline-block;
  font-weight: bold;
  margin-right: 0.25em;
}

Via “content”, the value of the data attribute as well as a colon are assigned to the pseudo element. Then, you have to display the whole thing as an inline block element.

You should also place all of the CSS definitions within a media query so that they are only given out for certain resolutions. The second solution works in all modern browsers. Only the Internet Explorer 9 and older versions struggle with it.

Conclusion and Examples

Both solutions can be justified. The first one creates a good overview when it comes to displaying single columns. The second is optimal when it’s important to have an overview of the content of single lines.

• Scrollable Responsive Tables (Example on Codepen)
• Responsive Tables as a Paragraph (Example on Codepen)

(dpe)

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Now that you mentioned it…

More than enough

Occupation hazard

Source

We often run across marketing competitions, giveaways, and raffles, but sometimes it’s a little difficult to know a good one when you see one. Well, I’m happy to let you know about one we’re helping to support that can get you Online Hosting from Inmotion Hosting, for an entire year for free. With hosting prices going up as online demand increases, and physical server space decreases, a service we recently reviewed here. Whether you’re tired of misleading and unhelpful support, or need a service that won’t demand your first born as payment for mediocre service, a year of free hosting the superior levels of service is a big deal whether you’re just starting out, or have an established website in need of stable hosting and a reduced cost, this is the giveaway you’re looking for.

Read More at Win a Free Year of Hosting Giveaway