On a daily basis I’m struck by the fact that no number of degrees—or titles, or companies, or years experience, or apps shipped, or books published, or Twitter followers—matter when you’re facing down a situation that’s completely new. You think it through, you consult your trusted advisors, you do your best, and maybe you write down what you learned. That’s just about all you can do. Because you don’t know what you’re doing, and neither does anyone else.
The thing I find funny about Imposter Syndrome is that the symptom is you feeling inadequate, but knowing about the syndrome is a relief.
Most people think that their WordPress website was safe just because it doesn’t have any content worth hacking. Unfortunately, that is not true. Websites are often hacked to distribute spam emails, for example. Or the core and theme files are filled with malicious code to infect and hack your website visitor’s computers. It’s possible that you only notice the damage when Google has already removed you from the index. Don’t let this happen, and consider my tips for the perfect wp-config.php.
There are many ways to protect your WordPress-based website from getting hacked. The optimization of the wp-config.php can be considered to be an important part of a proper security strategy. Of course, the site won’t turn into the Bank of England, but you’ve made it a little harder for the hackers.
To optimize the wp-config.php, so-called constants are used. WordPress has a lot of constants that can be employed. But what is a constant? PHP.net describes constants the following way:
A constant is an identifier (name) for a simple value. As the name suggests, that value cannot change during the execution of the script (except for magic constants, which aren’t actually constants). A constant is case-sensitive by default. By convention, constant identifiers are always uppercase.
Constants are embedded in the define() function, and look like this: define('NAME_OF_THE_CONSTANT', value);
The wp-config.php is the control file for WordPress. It is loaded before all other files because WordPress needs to set up a database connection. The required information is located in the config-file. When changing the value of a constant, or adding a constant, you also change the behavior of WordPress.
Before the Work: Please Create a Backup
Before, editing the wp-config.php, create a backup of this file. Your website won’t work with wrong or missing entries.
Important: Always Update WordPress and Plugins Immediately
You’ve probably heard this a couple of times already. But this aspect is so important that I can’t repeat it often enough. Tons of websites got hacked because WordPress or the plugins weren’t up to date. Updates are the best insurance against hacking!
If you happen to be using my “optimal .htaccess” file, you are not in danger. There, the great 6G firewall, which can fend off this type of attacks.
The Preparation:
For all the following work, you’ll need an FTP program, as well as an HTML editor. The wp-config.php is downloaded to the desktop, edited within the HTML editor, and uploaded back to the server afterward.
1 – Use the Security Keys
Security keys in WordPress are critical, as the encrypt things like the login information in cookies, for example. Even when your wp-config.php already has security keys, changing them can’t hurt. When the keys are changed, all still outstanding logins of your users are signed out. Subsequently, you’ll be able to log in regularly, using your username and password.
However, if you’ve been hacked already, you should first remove the malicious code from your website. A guide on that can be found in the additional information on this aspect. Afterward, visit the WordPress Generator for security keys, and copy a new set. Replace the old part with the new ones – view screenshot:
The Security Keys in the wp-config.php.
If you haven’t implemented security keys yet, this is the right time to do so.
An SSL certificate encrypts the connection between your website and the visitor’s browsers. HTTPS makes it impossible for hackers to trap and steal personal data. If you already have an SSL certificate for your website, you can force the use of HTTPS instead of HTTP. This increases your site’s security significantly. If you don’t have an SSL certificate yet, you should strongly consider using one.
You don’t have to be afraid of major costs, as SSL is also available for free.
The following entries should be used when your website already uses SSL. The uppermost entry is meant for the secured login, while the lowest one forces the browser to make the admin area of WordPress usable with SSL only.
The database prefix is also known under the label “table prefix.” This prefix is used as an extension of every database table generated by WordPress. Here, the standard is wp_. This standard should be changed to something else. The more cryptic, the better. Don’t worry; you don’t need to remember what you enter here. This value is only placed once.
Thinking about it, the possibility of an SQL injection is not very likely. But it is possible. Thus, alter the value before installing WordPress. Use something like hdr7rf_, for example.
Attention: If you change the value of an already existing WordPress installation, the website is not accessible anymore!
If you want to change the table prefix of an existing WordPress website, the plugin Acunetix WP Security could help you. It lets you change the value easily, and all you have to do afterward is log back in. Nonetheless, you should still create a backup in beforehand.
4 – Turn Off the Plugin and Theme Editor
In every WordPress installation, it is possible to edit theme and plugin files directly within the admin area. Under the menu items “Design” and “Plugin,” you’ll find the respective editor for each file. This editor is very dangerous if it happens to get into the hands of a hacker. Data can be destroyed, and viruses, trojans, spam, and other malware can be added. But the editor is also important for a website’s admin. A single mistake, a single missing semicolon is all it takes for the infamous white pages to show up, and nothing will work anymore.
Changes to theme or plugin files are generally made via (S)FTP, as it is much safer. Thus, the editors need to be deactivated. A single line in the wp-config.php is enough to safely turn off both editors:
The wp-config.php is the heart of your website. All relevant data, including the database passwords, are entered there. That’s why it is imperative to keep this file as safe as possible. There are two approaches for this. The first one is an access block via .htaccess-file. The second approach moves the file to a different spot, where a hacker would not expect it to be.
Moving it may be problematic if the website is in a sub-index, and you are using a cheap shared hosting.
It can also become tough if you have a lot of websites in custom directories. If neither of the constellations applies to you, you can move the file.
If you have adjusted the path to the wp-config.php correctly, your website should work afterward.
6 – Force the Use of FTPS
If your web host has activated the File Transfer Protocol Secure (FTPS), you can force the use of FTPS for the transfer of files. This will encrypt the connection between the visitor and your server. Now, it is impossible to access the data on the server with the unsafe FTP protocol. FTP is unsafe, as the access information is transferred to your server unencrypted. Thus, if possible, only use the safe connection via FTPS. Your web host can tell you if an FTPS connection is possible.
Instead of the FTPS protocol, some hosters have activated the SFTP protocol for data transfer. Here, the connection between the user’s FTP program and the server is encrypted as well. The following line of code lets you force the use of SFTP:
If you have activated the WordPress debug mode for development purposes, it is vital to turn it back off. In some circumstances, an activated debug mode may pass on sensitive data that could help hackers do their thing. That’s why an activated debug mode is extremely dangerous on a live system. I have made this small, dumb mistake already; humans quickly forget things. That’s why you should take a quick look, just to check. This is how to deactivate the debug mode:
If for some reason, you need the debug mode to be activated, I recommend turning off the public display of error messages. The relevant error messages can also be written into a log that is not accessible to the public. This is the much safer, and more elegant option. This constant is required to leave the WordPress error mode on, and to suppress the public error display:
As I have already mentioned earlier, immediately updating the WordPress core, and all plugins is crucial for the security of the system. With every release of a new WordPress version, the security gaps of its predecessors are made public. This gives a hacker a solid foundation to be able to hack your website. Thus, these weaknesses should be removed as fast as possible.
Since WordPress version 3.7, smaller security updates are conducted automatically. However, this is not the case for primary versions of core upgrades. Main versions still need to be updated manually. However, activating automatic updates for all WP versions is very easy:
By the way, it is also possible to make plugins update automatically. However, that’s connected to a bit of work. It requires the creation of a plugin:
This plugin has to be moved into the folder /wp-content/mu-plugins/. If the folder doesn’t exist, just create it. The folder /mu-plugins/ contains the “must use” plugins. Its content is loaded by all other plugins.
Automatic theme updates can be done the same way. For that, the plugin needs to be extended by the following line:
Please inform yourself about these automatic plugins in advance, and only use the code if you know exactly what it does. Of course, the two filters are only able to keep plugins and themes up to date that originate from the official WordPress index. Themes and plugins from a different source won’t be updated.
All of these aspects together will already increase the safety of your WordPress by a lot and should be part of a good security strategy. The fact that WordPress is the world’s most popular Content Management System attracts many hackers. The situation could be compared to the computer OS Windows. On Windows, you install an anti-virus software, and WordPress takes a bit of manual work. But the safety gain definitely makes up for the small work effort.
I don’t have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format us an input mask. I thought I’d just line up a few demos for really easy reference.
I tested the current version of Inputmask, and this is still an issue. Estelle’s version doesn’t do this as the mask is shown via placeholder, not the actual value of the input.
Add a Rollover Effect to your Adobe Muse website. No Coding Skills Required.
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.
Images being prepared Adobe Illustrator 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 :).
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.
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!
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.
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.
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.”
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.
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!
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.
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.
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.
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.
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!
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.
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 Not Supported – Still Running over HTTP/1.1 (Shared host)
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!
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.
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 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.
.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.
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.
