Archive

Archive for 2016

How to Create a Rollover Effect in Adobe Muse

November 30th, 2016 No comments
Muse For You - How to Add a Rollover Effect - Adobe Muse CC

Add a Rollover Effect to your Adobe Muse website. No Coding Skills Required.

Adobe Muse CC Logo

Subtle animations and rollovers can really make a website more dynamic. Whether you are showcasing a product or giving more information about an image, rollovers can be very effective.

Adobe Muse makes it really easy to create a rollover effect via their states panel. The states panel consists of four different states. They are:

  • Normal
  • Rollover
  • Mouse Down
  • Active

For each of the states you can change the color, border, and image for the state. This allows for a unique rollover effect when applying to images. Also with the later versions of Adobe Muse the transition dialog was introduced for more fluid rollovers and transitions. So rather than a quick change when rolling over the image, the image can now fade in and out of another image.

Adobe Muse CC also integrates seamlessly with Adobe Photoshop CC so you can take different layers in Photoshop and apply them to the different states via the states panel. An example of this would be taking one layer in Photoshop and applying it to the normal state, and then taking another layer in the same Photoshop file and applying it to the rollover state. This will give you a nice rollover effect in Adobe Muse all from the same Photoshop file.

Via the Adobe Creative Cloud you can add vectors from Adobe Illustrator CC to your Creative Cloud library. You can then drag and drop those vector images as SVG files into Adobe Muse. Placing these images in rectangles allows you to create rollover states in Adobe Muse.

muse-for-you-how-to-add-rollover-effects-1-adobe-muse-cc-web-design-ledger

Images being prepared Adobe Illustrator CC

Muse For You - How to Add a Rollover Effect - Adobe Muse CC

Images added to different states in Adobe Muse CC

The steps are as follows:

1. Create a rectangle in Adobe Muse.

2 . Fill the rectangle with an image for the normal state. The image can be added by going to the “Fill” option in the upper toolbar and then clicking on “Add Image.” You can select any image or a Photoshop file. If it is a Photoshop file you can select which layer you would like to add for the image. You can also select the fitting and position for the image within the “Fill” section.

3. With the rectangle selected go to the “States Panel” in the upper left hand corner of the Adobe Muse interface. Here click on “Normal” and select “Rollover.” You are now on the rollover state for the rectangle.

4. Fill the rectangle with an image or Photoshop file for the rollover state.

5. You can also add a “Mouse Down” state or an “Active State.”

6. Go to File > Preview Page in Browser to test and preview the rollover effect.

7. Done.

In the video above I go over how to create rollover states in Adobe Muse CC using Adobe Photoshop CC and Adobe Illustrator CC.

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com. Happy Musing :).

Read More at How to Create a Rollover Effect in Adobe Muse

Categories: Designing, Others Tags:

How to use breadcrumbs (the right way)

November 30th, 2016 No comments

Bread crumbs…they bring up associations with the fairy tale of Hansel and Gretel, where Hansel leaves bread crumbs to help him find his way home again. Although the association with bread crumbs is perhaps still stronger in the realm of Grimm stories, that’s gradually changing as breadcrumbs in navigation help web designers create a better user experience for site visitors.

This graphical control element serves a very useful purpose as a navigational aid on a site, provided it’s designed intelligently. It can be a godsend for less-experienced visitors who need to rely on a trail to help them keep track of where they are on your client’s site.

A trail of breadcrumbs will keep track of and display every page that’s been viewed by visitors, sometimes in the order said pages were viewed, other times in different arrangements.

Here’s how to integrate breadcrumbs into your navigation meaningfully:

Three main types of breadcrumb navigation

There are three main types of breadcrumbs you’ll usually encounter on any given site, with two being more popular than the last one.

Location breadcrumbs

One of the two most popular kinds you’ll encounter, location breadcrumbs tell your users where they are in regard to the site’s hierarchy. Its straightforward organization that orients users in a clear-cut manner within the site makes this type very widely used.

Popular among sites that have numerous levels of content and layers of navigation, location breadcrumbs empower users to efficiently get back to previous, higher levels of content with a simple click. Also, location breadcrumbs are static (they never change), making them a reliable way of helping to reorient users.

1-800 Flowers provides the classic example of functional location breadcrumbs. Each time a shopper visits the It’s My Birthday floral arrangement page, he’ll see that he first had to click on the Birthday category after starting from the homepage. Of course, he can click on each higher level breadcrumb to get there instantly.

Attribute breadcrumbs

Attribute breadcrumbs are the second major type you’ll encounter. Unlike location breadcrumbs, these work sort of like filter choices in that they’re not static and continually change based on the preferences of the user.

They won’t tell you your location on the site, but instead display meta data about the page’s content. Attribute breadcrumbs are therefore popular with e-commerce sites where you’re able to customize what you want to buy, such as on car sites.

As a result, you can’t necessarily use this type of breadcrumb approach to find your way back to pages you already visited.

To see what I’m talking about, check out Cars.com’s breadcrumbs. When you search for cars by make and model, notice the breadcrumbs near the top-left of the screen, just underneath the site logo. The year, make and model all represent previous searches on the site, but they don’t provide a reliable trail to revisit old pages that you already viewed.

Note the difference between this type of breadcrumb and the location breadcrumbs, which allow you to revisit exactly the pages you recently visited.

Path breadcrumbs

Path breadcrumbs are the least popular of the three because, quite frankly, all they do is replicate what a browser’s back button already does! That’s not helping to improve UX at all; it’s rather quite redundant.

Also known as a history trail, path breadcrumbs really aren’t that helpful since they don’t give additional context or information to visitors who land on a page that’s already deep within the site’s hierarchy. An example would be a visitor landing on a product page because he found a search result that he clicked on.

Because of these UX problems that this type of breadcrumb causes, it’s getting increasingly rare to find it on sites today.

Which type is most appropriate for what site?

The breakdown of the three main types of breadcrumbs begs the obvious question, which is most suitable for what purpose?

Let’s start off with the one you likely shouldn’t bother with anymore: path breadcrumbs. At the very least, this doesn’t help the UX; the worst-case scenario is that users might actually get confused by path breadcrumbs since they don’t show the proper hierarchy of different levels within the site.

Now that we have that out of the way, let’s focus on just the location and attribute breadcrumbs.

Location breadcrumbs are more appropriate for bigger sites that have very deep and levels of content. An excellent example of this is eBay, which is a huge store because of all the items that are up for sale or auction. Accordingly, location breadcrumbs are perfect for this depth of content, as visitors can clearly use the extra orientation.

Now let’s turn our attention to attribute breadcrumbs.

As seen in the above example with Cars.com, eCommerce sites that offer shoppers many customizable options will greatly benefit from having this type of navigational aid. Sites with various customization options can be overwhelming to shoppers. That’s why giving them these filters makes more sense than location breadcrumbs since shoppers will want to keep track of the various changes they’ve made to their search results and orders.

Best practices for breadcrumbs

In general, when you follow these tips when designing breadcrumb navigation for your client’s sites, you can’t go wrong:

  • Ensure that there are no duplicate elements in your trail of breadcrumbs (read: pages that fall into multiple categories or levels of content) since that can actually confuse users.
  • Use the greater-than sign (>) to break up the links in your breadcrumbs, as this is what users are already expecting from years of site familiarity and conventions.
  • Use keywords that you want to actually rank for in SEO when deciding on the names of your different categories within your breadcrumbs, as this helps SEO.

Breadcrumbs: great idea, but not always used properly

As with many concepts in design and UX, a great idea that can be very helpful to users becomes a difficulty if it’s not implemented correctly. That’s what this brief guide is for: to equip you with the knowledge to empower you to design breadcrumbs to optimize UX instead of making no impact or even hurting it.

While not an absolute necessity on every kind of site, breadcrumbs can provide users with an extra layer of navigational help when they’re either faced with many layers of content or a lot of options that they’d like to filter. Either way, the usability derived from breadcrumbs ultimately comes down to how designers implement them on their clients’ sites.

By making sure that you understand the purpose behind each type of breadcrumb navigation, you assist yourself in making the right choice for the type of site you’re designing. And when you choose intelligently, you’ll have satisfied users, happy clients, and good referrals, so take some extra care the next time you’re dealing with breadcrumbs.

Build Websites and WP Themes Faster with Pinegrow Web Designer – only $24!

Source

Categories: Designing, Others Tags:

Christmas Wallpaper Calendars: December 2016

November 30th, 2016 No comments

New month, new wallpapers! To get you in the right mood for December, designers and artists from across the globe got their ideas bubbling and created unique and inspiring Christmas wallpaper calendars to deck your desktop. This monthly wallpapers mission has been going on for eight years now, and we are very thankful to everyone who challenges their artistic skills and contributes to it each month anew.

This post features desktop artwork for December 2016. Each wallpaper comes in versions with and without a calendar and can be downloaded for free. Now you only need to decide on your favorite!

The post Christmas Wallpaper Calendars: December 2016 appeared first on Smashing Magazine.

Categories: Others Tags:

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

November 30th, 2016 No comments

Almost five years ago, I had the honor of writing a post on Smashing Magazine about my Photoshop panel GuideGuide. Since then it has seen wild success as the most installed third-party Photoshop extension, an achievement I’m quite proud. In that time, I’ve added some powerful features and, most recently, expanded it to Illustrator. This post will give you a taste of how GuideGuide can change the way you use guides in Photoshop and Illustrator.

If you’re one of the many people who already use GuideGuide, please read on. You may discover some unconventional uses that are not immediately apparent. I’ll provide a overview of the major features, and then give some examples of advanced and unusual ways it can be used to make you a more efficient designer.

The post Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator appeared first on Smashing Magazine.

Categories: Others Tags:

How Web Hosting Can Impact Page Load Speed

November 29th, 2016 No comments
web hosting page load

Page load speed is a very important factor when it comes to the overall success of a business’s website or blog. And it is something that should not be taken lightly. It can affect almost everything; from your conversions, SEO and rankings, time on your site, bounce rate, and the entire user experience. If you dip in all of those areas, this could easily result in loss of revenue and customers. Today we will explore just how much page speed is impacted by certain web hosts and why you might want to reconsider using a cheap shared host.

Speed is a Ranking Factor

Google announced way back in 2010 that page load speed is a ranking factor. What that means is that sites with a faster page load speed could in turn rank higher in search engine results pages (SERPs). In Google’s Site Performance for Webmasters video, Developer Programs Tech Lead Maile Ohye, states that “two seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half-second.”

And fast forward to today and we now have Google launching the mobile-first index. This means that the ranking factor is also heavily looking at mobile optimization. You can almost guarantee that whatever weight they placed on the speed ranking factor before that it will be increasing. So you need to ensure that you have a fast responsive loading site, along with possibly an AMP implementation.

You can use free tools like Google PageSpeed Insights or Pingdom to test your website’s page load speed. They will inform you how fast your website is and offer suggestions on how to improve it, such as leveraging browser caching or minimizing redirects.

pingdom speed test

Page Load Speed Can Affect Conversions

A slow page load speed can also affect your conversions and sales. For an e-commerce site, the last thing you need is to be losing revenue simply because your website is too slow. According to research from Kissmetrics,

“A 1-second delay in page response can result in a 7% reduction in conversions.”

2-speed-affects-conversions

Example: Let’s say your website loads in 3 seconds, and you have a product that sells for $200. On average you have 1000 conversions per week, equalling $200,000 in total sales. If you were to migrate to a faster web host and bring the page load speed down to 2 seconds, at 7%, that means you could potentially increase your weekly profits by over $14,000 a week!

Kyle Rush from the 2011 Obama for America campaign site showed through A/B testing that a 3-second page time reduction (from 5 seconds to 2 seconds) improved donations by 14%, resulting in an increase of over $34 million in contributions.

There have been countless studies proving that speed does affect your conversion rates.

Time On Site / Dwell Time

In Google Analytics, average time on site is a type of visitor report that provides data on the amount of time (in minutes or seconds) visitors have spent on your website. This is sometimes also referred to as “average session duration” or “dwell time.” The higher this number, generally the better.

average time on site

A couple ways to keep your time on site higher is to write better and more engaging content that will keep the visitor on your site. Another way to structure your site in an organized fashion so people kind find what they are looking for. But speed is definitely a huge factor in average time on site as well. If a visitor gets frustrated with how fast it is to navigate your site they will most likely leave immediately. Ensure not only your homepage is fast, but your entire site.

Bounce Rate

Bounce Rate is the percentage of single-page sessions (i.e. sessions in which the person left your site from the entrance page without interacting with the page). According to another study by Kissmetrics, a whopping 40% of people abandon a website that takes more than 3 seconds to load!

Here are some typical bounce rate averages according to types of content and industries:

  • 40-60% Content websites
  • 30-50% Lead generation sites
  • 70-98% Blogs
  • 20-40% Retail sites
  • 10-30% Service sites
  • 70-90% Landing pages

One of the easiest ways to keep people from hitting that back button in their browser is to simply ensure that it loads fast! This can include even diving into more advanced optimization methods such as improving your TTFB and initial HTTP request. A content delivery network (CDN) is a great way to improve TTFB as it will help cache your static assets closer to the visitor. But one of the primary factors in this is the configuration of your web host’s servers.

How Premium Hosts Stack Up Against Shared Hosts

There are countless ways to improve page load speed on your website, such as:

  1. Using a CDN to cache content closer to the user
  2. Improving TTFB
  3. Optimizing images
  4. Lazy loading content
  5. Caching
  6. Being smart with web fonts
  7. Optimize CSS code and delivery

But the number one factor that is going to drive the overall load times of your pages down is choosing a fast web hosting provider. And to be honest, it is one of the easiest. While it is great to save money, hosting is one area in which you should be very careful as choosing a bad provider could actually affect your revenue going forward. We recommend looking at hosting as an investment in your business/website and therefore skip the shared hosting route and go for a premium or managed host. You will be much happier in the long run.

Premium web hosts typically use a much faster technology stack based on the latest and greatest in the industry. Some things for 2017 that you will want to make sure they have are PHP 7 or HHVM, NGINX, MariaDB, HTTP/2, and premium DNS options. This combination has been shown to be very fast when it comes to loading any type of website, from a static site, to Drupal, and of course WordPress.

Speed Tests

To show you just how much web hosts differ when it comes to performance, we decided to run a few tests. Here is a comparison of Kinsta, a high-performance managed WordPress host, vs a 3rd party shared host. Both are configured in the exact same way and are approximately the same distance from Pingdom’s testing server.

Kinsta Speed Test

We did a fresh install of WordPress on Kinsta, nothing is configured other than SSL. It is running the default 2016 theme. We ran 5 speed tests on Pingdom and took the average. As you can see the fresh install clocked in at 386 ms, which according to Pingdom is 98% faster than all other tested sites.

kinsta fresh install page load speed

3rd Party Speed Test on Shared Host

We then replicated the exact same setup on a 3rd party shared host. We did a fresh install of WordPress and configured SSL. It was also setup with the default 2016 theme. We then ran 5-speed tests on Pingdom and took the average. As you can see the fresh install clocked in at 1.00 second.

shared host fresh install speed test

So in this scenario the premium host, Kinsta, had 61.4% faster page load speeds! Why is there such a large difference? Here are a few reasons:

NGINX

Kinsta uses NGINX whereas the 3rd party shared host was using Apache. NGINX has been proven to be lightweight and fast. Chris Lea said, “Apache is like Microsoft Word. It has a million options but you only need six. NGINX does those six things, and it does five of them 50 times faster than Apache.”

Here is a quick look at the top million busiest websites (see below). As you can see in the trending graph, Apache is losing market share while NGINX is rapidly growing. Large websites like upwork, themeforest, wordpress.org, quora.com, and dropbox all use NGINX.

websites using nginx

Img src: NGINX vs Apache

Server-Level Caching

Kinsta, like many premium WordPress hosts, use server-level full page and object caching to deliver pages lightning fast. The shared host we were using had no such technology in place. We could fiddle with caching plugins but then you should be looking at time involved hassling with this. With premium hosts it is a lot easier to just install and go! Joe from Human Made did a great comparison of the Batcache caching plugin vs Varnish, a server-level caching approach. As you can see under heavy loads server-level caching won by a mile!

server level caching

Premium DNS

Kinsta had Amazon Route 53, which is a premium DNS provider. The shared host was simply using their free included DNS. DNS works like a phonebook for the internet, as it is a mapping of your domain to an IP address. There are slower and faster DNS providers out there. Amazon of course is one of the faster ones since they have an enormous infrastructure and network. Faster DNS lookup times can further increase the speed of your site.


And don’t forget DNS Doomsday, besides performance, a premium DNS provider is also important when it comes to reliability and uptime for your site.

HTTP/2

HTTP/2 is a new protocol designed to speed up connections with better multiplexing, parallelism, HPACK compression with Huffman encoding, the ALPN extension, and server push. Because of browser support, SSL/TLS is required to utilize HTTP/2.

The performance of HTTP/2 is a lot better than that of HTTP/1.1. For example, with server push capability HTTP/2 allows servers to respond with a page’s full contents other than the information in the browser’s cache. Efficient compression of HTTP header files minimizes protocol overhead to improve performance with each browser request and server response.

http2

In our tests above, Kinsta was utilizing HTTP/2 on their servers which the shared hosting provider was not. You can easily see this by checking the header requests in Chrome Devtools network panel (as seen below).

HTTP/2 Supported (Kinsta)

http/2 kinsta

HTTP/2 Not Supported – Still Running over HTTP/1.1 (Shared host)

http/2 not supported

HTTP/2 is simply a must now for secure connections!

Overcrowding Issue

Another issue with shared hosting is that they overcrowd their servers. Typically shared hosts don’t make any money on actual hosting customers, due to the overhead of support. For example, the shared hosting plan being tested above only cost us $10 a year!

crowded servers

They make most of their revenue on upsells and 3rd party add-ons such as domain registrations, SSL certificates, etc. Due to the fact they have very low margins they will tend to put as many customers on the same servers as they can until it starts to slow down. You can guarantee that at some point your site will be affected. And unless you have a performance monitoring tool running you will never know at what time it happens.

With premium hosts they normally go a different route. For example, with Kinsta above, they use Linux containers (LXC), and LXD to orchestrate them, on top of Google Cloud Platform which enables them to completely isolate each WordPress site. This is much more secure and when it comes to performance the Google Compute engines allow them to sale the sites automatically. The overcrowding and scaling issue is simply not an issue at all.

Summary

As you can see, page load speed is super important, as it can affect everything from your SEO, time on site, bounce rate, and conversions. Choosing a premium or managed hosting provider can be one of the smartest decisions you make for your business or blog; as it plays one of the biggest roles in improving your page load speeds. The old saying “You get what you pay for…” comes into play here. Think of hosting as an investment and choose wisely, as they greatly differ in terms of performance and technologies being offered.

Read More at How Web Hosting Can Impact Page Load Speed

Categories: Designing, Others Tags:

How To Build A SpriteKit Game In Swift 3 (Part 1)

November 29th, 2016 No comments

Have you ever wondered what it takes to create a SpriteKit game from beginning to beta? Does developing a physics-based game seem daunting? Game-making has never been easier on iOS since the introduction of SpriteKit.

In this three-part series, we will explore the basics of SpriteKit. We will touch on SKPhysics, collisions, texture management, interactions, sound effects, music, buttons and SKScenes. What might seem difficult is actually pretty easy to grasp. Stick with us while we make RainCat.

The post How To Build A SpriteKit Game In Swift 3 (Part 1) appeared first on Smashing Magazine.

Categories: Others Tags:

Pure CSS Horizontal Scrolling

November 29th, 2016 No comments

The following is a guest post by Pieter Biesemans. Pieter is a front-end developer at Audience where he loves styling things with SCSS. He’s going to dig into what I’d call a bonafide CSS trick.

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!

I’d be nice if we could do something like this:

/* This isn't real */
div {
  scroll-direction: horizontal;
}

Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS.

That’s too bad, as at the company I work for this would be quite useful. We do quite a few web presentations. Presentations are a very horizontal thing – usually slides have a 4:3 or 16:9 radius. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. But if there’s one thing I like, it’s a challenge.

Another Use Case

The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible.

A Non-JavaScript Way

There are, no surprise, numerous ways to do this in JavaScript. Some of them are on this very site.

I was curious if it was possible to do in pure CSS. The solution ended up being fairly straightforward:

  • Create a container with items
  • Rotate the container 90 degrees counterclockwise so the bottom is to the right
  • Rotate the items back to correct-side up

Step 1) Set up the container

Make a

, and make a bunch of child elements.

In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. These are arbitrary sizes; they could be anything.

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

The height of the container will become the “width” and vice-versa. So below, the “width” of our container will be 300px:

.horizontal-scroll-wrapper {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

Now the children:

.horizontal-scroll-wrapper > div {
  width: 100px;
  height: 100px;
}

Step 2) Rotating the container

Now we rotate the container -90 degrees with a CSS transform. And there you have it: a horizontal scroller.

.horizontal-scroll-wrapper {
  ...
  transform: rotate(-90deg);
  transform-origin: right top;
}

There’s just one tiny issue: our children have rotated too, and now anything within is on its side.

Step 3) Rotate the children back upright

How would we go about getting the children upright again? Rotate them back using another, opposite CSS transform.

.horizontal-scroll-wrapper > div {
  ...
  transform: rotate(90deg);
  transform-origin: right top;
}

Step 4) Fixing the positioning

It’s starting to look alright, but there are still some issues.

By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it. The solution: shift it back with translateY.

Better. But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper. The easiest way I’ve found though is to add a top padding to the wrapper equal to the item width, creating a kind of buffer for the items.

.horizontal-scroll-wrapper {
  ...
  transform:rotate(-90deg) translateY(-100px);
  ...
}

Demo

See the Pen Horizontal scroll (simple example) by Pieter Biesemans (@pieter-biesemans) on CodePen.

Here’s another where you can see non-square children:

See the Pen Horizontal scroll (extensive example) by Pieter Biesemans (@pieter-biesemans) on CodePen.

Compatibility

I have tested on the devices immediately available to me.

Device OS Browser works?
Desktop Win10 Chrome 54 Y
Desktop Win10 Firefox 47 Y (w scrollbars)
Desktop Win10 IE11 Y (w scrollbars)
Desktop Win10 Opera 41 Y
Desktop Win10 Vivaldi 1.4 Y
Laptop (touch screen) Win10 Chrome 54 N
Samsung Galaxy S3 Android 4.3 Chrome Mobile 52 Y
Samsung Galaxy S6 Android 5.0 Chrome Mobile 52 Y
Nexus 6P Android 6 Chrome Mobile 52 Y
iPad2 iOS Chrome Mobile 52 N
iPad2 iOS Safari Mobile 9.0 N
iPad Air 2 iOS Safari Mobile 9.0 N

Desktop

Since the styling of scrollbars is currently only supported by WebKit/Blink, Firefox and IE still show the ugly gray ones. You could sniff this out with JavaScript and hide them completely, but that’s stuff for another tutorial.

Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though. Both the touchscreen and the touchpad acted as though the div was not rotated.

Mobile

I was kind of surprised to find that Android actually understood that the container had been rotated, and let you scroll sideways by swiping left and right.

iOS on the other hand did not play nice. It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive. Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue.

Conclusion

According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.

Beware of using this in production, though. I have tested this on some devices, but not at all extensively or in depth.

The greatest issue is with touch inputs that requiring you to swipe up and down to go left and right. A possible solution would be to include a message on your site explaining this, but you’d have to rely on people actually reading your message. And even then it’d still be counterintuitive. Another possible solution would be to capture the touch input with JavaScript on those devices, but then you’d be better off just doing the whole thing in JavaScript and foregoing this CSS hack completely.


Pure CSS Horizontal Scrolling is a post from CSS-Tricks

Categories: Designing, Others Tags:

Experimenting with Color Fonts

November 29th, 2016 No comments

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about his experience building a color font and described the problem that they intend to solve:

Typography on the web is in single color: characters are either black or red, never black and red.

So, with a color font, type designers can now embed multiple colors within the glyphs themselves. Then, a web designer can pick one of the options available with the font-variation-settings property in CSS. Below, I’ve made a demo that shows how this works with Trajan Color, a new font made by Adobe and now available with Typekit:

See how different parts of those glyphs, ABC, have different hints of color inside?

What this means is that when it comes to emoji and display type, designers will soon have more interesting choices at hand. For now, browser support isn’t that great but Adobe has provided everyone with a heads up over on the Typekit page designed by Nick Sherman:

Browser support for color fonts is still evolving, but exists in Firefox and Microsoft Edge (IE), and we expect more browser manufacturers will adopt the format before long. In browsers that lack color font support, they will fall back to regular monochrome glyphs.

I think that final point, about how color fonts fallback, was best illustrated by Roel Nieskens, which ought to be the perfect, progressively-enhanced thing that could happen in this situation:

Here are some examples of color fonts that you can experiment with today:

But beware! There are a few problems with this approach. The most troublesome being the size of the font file in my demo above: it’s 593 KB in all. Although, to be honest, in most projects we probably won’t need to load every variation of the color font which will greatly reduce the size of the font file we serve.

Secondly, it doesn’t appear that in CSS it’s possible to change the various colors inside a color font. So for a while, we’re stuck with whatever styles type designers provide for us in the font files themselves.

Regardless of those two pain points, though, I’m still very much excited by the emergence of color fonts and what that could mean for typography on the web. I can see old woodtype styles in particular coming back thanks in part to this new font format.

Make sure to check out the demo below (with Firefox or Edge) to see the color font effect:

See the Pen Color fonts demo by Robin Rendle (@robinrendle) on CodePen.


Experimenting with Color Fonts is a post from CSS-Tricks

Categories: Designing, Others Tags:

The ultimate guide to CMS, part 1

November 29th, 2016 No comments

Gather ’round friends, and I’ll tell you a story that is pure fabrication on my part, and also probably how it happened: Once upon a time, around 1995 (as far as I can figure out from searching around the web), some poor guy who worked as the “webmaster” for some large company was putting nearly every written piece of marketing content they had online. He was doing this because someone in management figured it couldn’t hurt, and he didn’t have that much else to do.

As he wrote endless lines of HTML code by hand, he thought, “There has got to be an easier way to do this.”

He began to imagine a system that could, perhaps, manage content more efficiently, and take some of the pain out of his job. Since he knew some basic scripting, he started to lay the groundwork for what would become the first Content Management System.

That’s how a lot of humanity’s problems get solved: people get bored, and sick of their work. In response to this stimulus, or lack thereof, we now have more CMSs than I personally care to count. They’re everywhere, and they can do just about anything. Now, the problem with this kind of endless choice is that, well, people don’t know where to start. How do you pick a CMS anyway?

That’s what this article is about. I’ve tried to make it as easy as possible to understand what a CMS does, and what kind of CMS you’ll need for different kinds of websites.

What is a CMS, exactly?

Think about a website. Any website. What’s on it? Stuff like words, pictures, videos, maps, contact forms, quizzes, polls, and more. All of that stuff (which we call “content”) needs to be organized.

It needs to be made available, and easy-to-find for the people who actually run the website, and for the users who browse it. It also needs to be easy to add more content, delete the stuff you don’t want anymore, move it around, or rename it.

Most CMSs allow only a select few to manage content. Community CMS like forums and social media sites allow every user to manage their own content, and then make that content available to everyone else.

Yes, you could do all of this manually. For many smaller websites, this is exactly what people do: they mess about with files and folders, and edit their pages in a plain text editor (like Notepad, but they usually use something more complex). If you only have, say, five pages, and you know what you’re doing—or can pay someone who does—then you’re set.

You probably don’t need a CMS.

But if you can’t afford to hire a professional, don’t have the time to do it yourself, and/or need a site that is larger and more complex, a CMS is worth it. It simply isn’t practical to build a website that big without something to automate at least a part of the process.

If you need to have more than one person contributing to a website, you absolutely need a CMS. Giving people access to the raw files would be a recipe for catastrophic user errors. Better to give them a system that allows them to add content without accidentally destroying anything important.

Who is this for?

This article is for web design clients, business owners, and other people whose eyes glaze over when you start throwing acronyms around. Designers and developers can look these things up for themselves, and will usually know what the buzzwords mean.

But if you’ve ever gone CMS shopping and thought, “Well that all would sound very nice if I knew what the heck they were talking about…”, then this article is for you.

I suggest having a read, narrowing down your list of options, and bringing it to your designer and/or developer to figure out which is the best option for you. If you’re in a large enough company that you have a whole design and development team, you should probably let them narrow down your list of options.

Types of content management systems

Now, the thing about building websites is that nearly everybody has different needs. Sure, you could try to build a CMS that can meet every single one of these needs. Plenty of people have tried.

…choose a CMS that meets your specific needs as closely as possible

These platforms tend to be massive, slow, riddled with security issues, complex to use from both the front and back ends, and a general pain in the rear. Also weirdly popular. And actually, no, I’m not talking about WordPress.

So the generally smarter solution is to choose a CMS that meets your specific needs as closely as possible. We’ll be talking about that more, later. First, we should talk about the kinds of content management systems that you’ll find out there.

I’ve come up with a list of the most common categories of CMS. Not only are there more CMS than I can actually list, there are more kinds than I can list. This is because there are custom CMSs out there made for every conceivable need that someone might have.

For the sake of your time, and mine, I’ve stuck with the most common categories.

Managed vs Hosted

Before we move on to categories like “blogging software”, or “e-commerce”, you need to choose where you want your CMS to be hosted. Some CMSs are provided as a service, and everything technical is handled by a third-party company.

These are called “managed CMSs”, or “managed platforms”, and often “SAAS platforms” (software as a service). Examples include Shopify, wordpress.com, and site-builders like Squarespace.

They have several advantages, including active support, constant development, and you never have to worry about updating the software yourself. Security is handled for you, too. There’s a lot to like.

Their disadvantages include a lack of control over certain things. You may not be able to make your site look or work exactly how you want it to. You don’t necessarily own your own data. If the company developing the platform decides to ditch a feature you like, you’re on your own. If they have to shut down operations for any reason, you’re on your own.

That said, many of these services have thousands, sometimes millions of happy customers. You could be one of them.

On the other side of the coin, we have “hosted platforms”. This kind of software can go on your own server, or a third-party server that you rent from someone else. Examples include the hosted version of WordPress, Magento, and Concrete5.

The primary advantage of these options is control. You can make everything work exactly how you want. You can often even extend the functionality yourself by building your own themes and plugins. If it’s an open source CMS, or you’ve bought the right kind of commercial license, you can even alter the basic functionality of the software itself, though this is usually inadvisable.

Updates can tend to undo all of your hard work.

The other advantage is the price. Managed platforms usually cost a monthly fee. Hosted platforms usually have a one-time cost, or no cost at all.

The disadvantage is that you’re on your own right from the start. You, or someone who works for you, have to install the software, keep it updated, and look after every technical detail, including security. You may find yourself paying for some sort of commercial support in any case.

However, for those people and organizations that want to retain full control over their experience with the software, their site’s functionality and aesthetics, their data, and the underlying technology, there’s nothing better than a hosted CMS.

Databases vs flat files

It’s worth noting that hosted CMSs also get divided into two types. In this case, they’re divided by the way they store the site’s settings, content and other information. This section is going to get more technical than business-oriented, but understanding this information will help you to make more informed decisions about the CMS you choose.

The most commonly-used CMSs, for the moment, all run on databases, which are managed by database servers. In this context, the database server is just a separate program that is designed to efficiently organize information, not necessarily a separate computer. Though… it can be on a separate computer, because, you know, nothing’s ever simple.

Basically, database servers are made to organize a bunch of information inside of a single file, and retrieve specifically requested information at a moment’s notice. They’re fast, efficient, and logical.

Once upon a time, this was the preferred method of organizing all information on a site because it’s a bit easier on the actual hardware. However, with advancements like caching and content delivery networks (CDN), this is no longer the case.

The alternative to using a database is to keep all of your information in “flat files”. The difference here is that all of the site’s content—pages, blog posts, etc.—is kept in a hierarchically organized set of text files. The content is stored and retrieved directly by the CMS, without an intervening database server.

Grav is one of the more popular new flat-file CMSs.

This approach is becoming more and more popular with content management systems for small-to-medium-sized sites, and static site generators (more on those later). These systems are sometimes easier to install, but the main advantage is that they can be used on more types of servers and web hosts.

Also, using flat files instead of a database server can sometimes reduce the cost of hosting. This is especially true if you’re using platform-as-a-service (PLAAS) hosting like Amazon Web Services, Microsoft Azure, or Heroku.

Framework CMS

A framework CMS is designed to handle just about any task you care to throw at it, so long as you have some programming skills, or a developer on the team. What it does is provide a basic, well… framework… for you to build your own CMS, usually with the help of modules or plugins made by the developers and the community.

The most well-known example is Drupal.

This is the kind of CMS you choose if you have specific, custom needs, but don’t want to build everything (especially the admin UI) from scratch. It is not the kind of CMS you pick if you want to get up and running fast. Framework CMS are often chosen by large organizations that need as much flexibility as they can get, and that have big budgets, or in-house design and development teams.

Blogging CMS

One of the more popular kinds of CMS, blogging systems are everywhere. Nearly every developer who wants to try their hand at building a CMS builds a blog engine at some point. Most of these don’t take off, but once in a while, you get a big hit.

There are blog engines for every programming language and hosting platform. There are blog engines designed for every possible form of blogging you could imagine. There are quite possibly thousands of hosted blog engines, and easily hundreds of managed blog platforms.

Some blog CMS, like the aforementioned WordPress and the newer Ghost, have both hosted and managed versions.

The big three kinds of blogs are text-based blogs, photo blogs, and video blogs. I won’t go into too much detail on this as the names are fairly self-explanatory. Most blogs are text-based, which can obviously have embedded images and video as well. The difference is mostly about the focus of the blog. In other words, if photos are the majority of your content and the primary attraction for your users, it’s a photo blog.

An example of a Ghost blog.

Community CMS

Some CMSs aren’t just about publishing your own content for your audience to see. There are many that are designed to encourage more user interaction, with a strong focus on building a community of regulars. These come in three main varieties:

Forums

If you spent any time just browsing the Internet in the pre-Facebook era, chances are that you’ve run into one of these. For everyone who was doing real-life stuff at the time, or is just very young, forums came before Facebook pages, and are infinitely better, if you can get people to stick around.

Basically, it’s a CMS that allows any member to start a discussion with other people. These discussions are usually sorted by topic or categories set up by the site’s administrator and/or moderators. It’s slower than a Slack channel, but the entire conversation is there for everyone to see, and it gives people more time to formulate replies.

Due to their past popularity, there are many, many software options for people who want a forum (heck, there are forum plugins for WordPress), but only a few big ones. Invision Power Board has been the leading commercial solution for years, and phpBB is the biggest open source alternative.

News boards

These are a bit like forums, only instead of people starting discussions with their own words, they submit news stories. Users can then leave comments on the news board itself.

Once upon a time, Digg was the big news board in town, especially for the tech crowd. In time, that mantle passed on to Reddit. If you’ve never been to a news board, you should check out Reddit to see how it works. Or if you want something more design-focused, check out our very own Web Designer News.

Most of these sites seem to have custom CMS. The most well-known consumer option is Telescope, which is free and open source.

Social networks

That’s right, you can make your very own Facebook clone with any one of a variety of managed services or hosted CMS. Or, you could build a dating site like OkCupid. Mind you, managing a social network of any kind is hard work, and you’ll likely never get as big as the big names.

Most people who build their own social networks these days have a very specific theme or central cause in mind, much like those who build their own forums and news boards. So, all of these are great options if you have a niche. Or, you know, just start with a Facebook page.

Like news boards, most social networks are custom-built. The best free/open source option I’ve found so far is Dolphin Pro. If you don’t mind paying someone to take care of the technical stuff, you can build a social network on the Ning’s managed platform.

E-commerce CMS

E-commerce systems are usually massive and complex by design. I mean, sure, the idea is simple: they let you sell things online. The reality is naturally a lot more complicated, as you might expect when running a business.

The big-name e-commerce CMSs don’t just show your products on the front end of a site, and put a “buy” button on the screen. They help you handle inventory, shipping, currency conversion, payment processing, taxes, customer service, and anything else you can imagine. They’re built to handle business, which can easily be as complicated online as it can be in person.

The three big names in e-commerce systems are Magento (Community Edition is free), ZenCart (fully open-source), and Shopify (a paid, managed platform).

This Magento demo is courtesy of IDW.

General CMS

General CMSs have a little bit in common with bare-bones CMS in that they’re made to handle a variety of needs (usually business needs), and are quite customizable. They are also usually extended or altered with plugins and modules.

The difference is in the user-friendliness. General CMS are made to be handled by non-programmers. Sure, coding expertise is helpful, but even a basic knowledge of HTML and CSS will take you a long way. Even that’s not entirely necessary though, as they’re usually designed to be fairly newbie-friendly.

Plugins often include simple things like basic blog modules, image galleries, add-on commenting systems, and that sort of thing.

There aren’t many big names in this category, because these CMS are, in a way, the spiritual children of the old, massive Portal CMS (see below). This category began as a sort of movement to make content management simpler.

Initially, things got very simple, as in the case of Wolf CMS (Yeah, it’s still around, and semi-active!) Nowadays, Pagekit (free and open source) looks like the epitome of a general CMS.

Portal CMS

Portal CMS hail from a time when every website wanted to be the next Yahoo(!), or AOL. This was back in the day when, rather than trying to get everyone signed up to the newsletter, every webmaster with ambition wanted their site to be your home page.

These sites were usually designed to show loads of information at once, anything you might possibly want from around the web. Thus, they were called “portals”. Most were custom-built, but of course people wanted ways to build their own.

One of the early options for this was Mambo, an open source CMS that died off a few years back. Now, many businesses swear by its successor, a fork of Mambo named Joomla.

Nowadays, portal CMS have been pared down a bit, as have most websites in general. They’re used to power websites for large companies who need their CMS to do literally everything. Joomla, for example, has modules for just about everything you can think of.

Naturally, this results in incredible complexity, and portal CMS often have quite the learning curve for administrators, designers, and developers alike. I personally have an aversion to that sort of complexity, but there are cases where it is necessary, and even invaluable.

If you are going to use a portal CMS, a developer is not absolutely required, but you should hire one anyway. Better yet, get one that specializes in the CMS you’ve chosen.

Site builders

Site builders have a lot in common with general CMS, in that they are designed to simplify the whole process of dealing with content for the site’s administrator more than anyone else. The difference is that they are also designed to make designing your own websites easy for anyone.

Think of these as more modern, and usually much less frustrating, versions of Dreamweaver and Frontpage. If that sent a shiver down your spine, don’t worry. Site builders have gotten a lot better.

They largely adhere to best practices and web standards. Even if they’re usually not as customizable as a site built from scratch, they usually offer more than enough options for the average website owner.

Of course, that depends on the site builder. They range from the dead-simple, template-dependent Wix, to the far more complex and customizable SquareSpace, to tools like WebFlow, which are all about designing your site from scratch, albeit with point-and-click tools.

Static site generators

Static site generators are not for the faint of heart, and almost always require some form of programming knowledge to implement. They usually don’t come with a user-friendly admin interface. Typically, content is created and stored in text files, often formatted in Markdown, and compiled into a static site for the server.

The upside to this is that static sites can be hosted on just about any kind of server. You don’t need server-side technologies like PHP, Ruby, or NodeJS to run them. They put less strain on the server itself, and often load quicker.

On the admin side, you get a lot of the data management features of a regular CMS. The data you store can be called up and displayed in a variety of ways, you can use templates, and so on. This allows you to manage blogs, or large and complex sites with a minimum of hassle, compared to hand-coding everything yourself.

The obvious downside is that whoever manages the content and updates the site will need to be comfortable putting all the content together in text files. They may also need programming knowledge.

There are dozens of semi-popular static site generators out there right now. The most well-known, at the moment, is the Ruby-based Jeklyll.

Wiki

That’s right, you can get your very own wikis up and running, and for free. Most of the best wiki software is available under one open-source license or another, including Mediawiki, the software that runs Wikipedia.

Naturally, these are large, often very complex CMS, with advanced systems for determining who is allowed to edit and change what. Their use case is rather limited by definition: a wiki is a massive, encyclopedia-style collection of information, usually used for reference.

That said, you can make a wiki on any subject, and large organizations often use them to display support-related information for their products.

Enterprise CMS

These are designed, well, for enterprises. They’re huge, they’re complex, they’re meant to handle massive amounts of information. I’ll be honest, having never worked in an enterprise-level company, I’m not entirely sure how they all work.

The general idea, as I understand it, is that they rarely have much to do with customer-facing websites. Enterprise Content Management (or ECM) handles all of the documents relating to the processes that a company uses to get things done. They serve primarily as a resource and reference point for employees.

They are also being used to store documents, both those regarding the company, and the customers. For example, if you handle a lot of contracts, you might store digital copies of them in an ECM, sorted by customer, for easy access. ECM, then, acts a lot like a digital file room.

Those times when they are used for customer-facing sites, those sites tend to be massive, as enterprise CMSs are designed for handling that amount of information. Think of University sites, government portals, and other sites like them.

Custom CMS

Last, though certainly not least, we have the custom-built CMS. These come in every shape and size, and are designed for every conceivable purpose.

The pros are fairly obvious. You get exactly what you want, and only that. This usually results in a smaller, faster CMS that just does what you need it to. However, if you have the need, and the budget, you can always have your favorite developer build more functionality on top.

The downside is that your support options will be severely limited. If the original developer is no longer available, a new developer might have trouble making sense of the old code.

Also, when server technologies get updated, a custom CMS will sometimes need to be adapted to them. CMS developed by a dedicated third-party will be updated automatically. If you have a custom CMS, you’ll need to hire a developer to do it.

Custom CMSs are often best suited to companies that have their own in-house development team to work on updates, upgrades, and security fixes.

How to Choose a Typeface Poster – only $15!

Source

Categories: Designing, Others Tags:

Start Here: 6 Large Collections for Founders, Designers, Marketers, and Other Web Workers

November 29th, 2016 No comments
startupcollections

Google is not always the best tool when looking for specific information. If you just went freelance, there’s a whole stack of collections that accumulate a lot of the things you need in one place. You’ll be set with three or four of these collections. Today, I’ll show you a few more.

Startup Collections

Startup Collections is a website that curates tools, and other resources, for founders, designers, developers, and marketers. Differentiating about this service is the task-orientated approach. The categories are not called “photos,” “videos,” and so on, but rather “Create a Prototype,” “Smart Management,” or “Be Productive,” for example. The presented services are not necessarily available for free.

The operator focuses a lot on completeness, but of course, he was not able to achieve that yet. Well, to be fair, the service is very young.

Marketing Stack

marketingstack

Marketing Stack is a curated index that fully focuses on marketing. Here, you’ll find everything that has the slightest ability to push your business or brand forward. You have to think broadly here. For instance, you’ll find tons of content such as eBooks, and other publications, but also writing tools (think about content marketing), and more. Digging through the Marketing Stack is a feature-length event, but only if you don’t click anything. If you do, it’ll take a lot longer.

Startup Stash

startupstash

As to be expected due to the name, Startup Stash aims at founders that could use some help in all aspects of their startup business. Hundreds of products from 40 categories are waiting to be found by those in need ;-). Once again, you won’t find free services only, but also solid commercial offers, like consulting and hosting businesses.

According to the operator, Startup Stash has already supported more than 400,000 founders on their way. Like all the collections in this article, Startup Stash itself is free to use.

Makerbook

makerbook

Makerbook by Craig Barber is all about the creative branch, hence the name. Craig tries to accumulate all services that offer tools and resources for creative workers on Makerbook. He only includes providers that offer their services entirely for free.

makerstock

On Makerbook, he also runs an additional curated photo collection with free, and completely free to use images, that are especially helpful for founders, called Makerstock. The photos are handpicked, and, according to Craig, taken from over thirty different photo providers.

Freebie Supply

freebiesupply

Freebie Supply by Ali Mese from Singapore became one of these overnight successes. Originally, he simply put his favorite tools and resources into a default Squarespace template and made it available as a website. The extensive curation quickly spread among the web. The success surprised the maker.

Freebie Supply focuses on completely free offers as well, and, by now, it contains over 400 according links. Freebie Supply is not limited to elements for creative workers but also provides links on business topics or productivity. Of course, you’ll also find design resources.

Newsletter Stash

newsletterstash

The “stash concept” attracts increasing attention. Newsletter Stash is a service that collects the best newsletters on different topics, like design, management, and so forth, while also providing the respective subscribe-buttons. You also get to view an example for each listed newsletter, as well as access to the respective entire archive.

Categories: Others Tags: