13 Spookiest Sites on the Web

It’s Halloween, and there’s no better way to enjoy it than to grab a flashlight and peer into some of the darker corners of the web.

The festival dates back to the ancient Celts, whose year began on the 1st of November. Later, the festival was merged with the Christian festival of All Hallow’s Eve, the first day of Allhallowstide; in which the dead, especially saints and martyrs, are remembered. Later still, it became a flimsy excuse for excessive candy consumption and risqué costumes.

If you’re looking for a few scares this season, then look no further than our collection of the 13 spookiest sites on the web. We’ve got something for everyone, from illustrations that would petrify Scooby-Doo, to real life shocks that would make Scrappy-Doo moult, to future events that will affect you in the future my friends…

Happy Halloween!

1. You’ll Float Too

One of Hollywood’s big hits this year is part one of the adaption of Steven King’s unsettling horror novel “IT”. As if the film isn’t enough to terrify you, now you can float too. This truly unsettling VR experience will have you drift through the sewers of Derry, and come face to face with Pennywise the clown.

Spookometer: 9/10 Enough to scare Freddie

2. The World’s Greatest Paranormal Investigator

If you prefer your monsters to be of the kitten-stroking nazi-punching variety, then look no further than the online portfolio of Hellboy creator Mike Mignola. The site features a whole cast of creatures from the folkloric, to the fanciful, as well as the BPRD’s premier occult detective.

Spookometer: 2/10 Will make Scooby-Doo scram

3. A Forgotten World

Abandoned in 1974, Hashima Island lies off the coast of Japan. The coalminers who deserted it left behind an eerie world of hollow buildings and atmospheric landscapes. It could be a real life Silent Hill. This site let’s you explore the mysterious locale with the help of Google Streetview.

Spookometer: 8/10 Could frighten Daphne

4. It’s 11:57:30

The Doomsday Clock is a symbolic clock used to publicise the likelihood that the human race is about to wipe itself out via nuclear war, or environmental catastrophe. When it reaches midnight, we’re all dead. This data explains how scientists calculate the time. Right now we’re 2 minutes 30 seconds from total global annihilation. Truly frightening.

Spookometer: 10/10 Flim-Flam will want to McScram

5. The Count’s Landing Place

In Bram Stoker’s Dracula, the ship carrying the Count to England washes into a harbor with the entire crew missing. The setting for this spooky event is the fishing town of Whitby. To commemorate the arrival of the world’s most famous bloodsucker, goths regularly congregate in the town to dress as Steam Punks and listen to Fields of the Nephilim.

Spookometer: 5/10 Sufficient to unnerve Velma

6. Epic Rampage

For those who think that when it comes to monsters bigger is better, there’re few cinematic treats to rival Japanese leviathan Godzilla. Mutated by nuclear testing in the pacific, Godzilla was created as a metaphor for Japan’s experiences at Hiroshima and Nagasaki. Hollywood has tried, but nothing matches the destructive terror of the iconic Japanese city-wrecker.

Spookometer: 3/10 Could make Thorn Hex tremble

7. The Master of Horror

Before the web became heavily commercialized it was made up of fan sites, like this one dedicated to the horror legend Boris Karloff. Karloff literally redefined Frankenstein’s Monster and this affectionate memorial, maintained by his descendants, is keeping his legend alive.

Spookometer: 3/10 Enough to give Vincent Van Ghoul a chill

8. Enter the Upside Down

Stranger Things has taken the net by storm, and with Season 2 now streaming on Netflix, it’s a great time to revisit this tribute to the show. Simply type in your name, and see it reproduced in the show’s iconic title lettering. Take a screen shot and it makes a cool Halloween social media banner.

Spookometer: 6/10 Dusk Hex will lose it

9. The World’s Worst Movie

Say what you like about Edward D. Wood Jr’s magnum opus, but none can deny that future events will affect you in the future my friends. You can watch the full movie of Plan 9 From Outer Space on YouTube, but if you want to be really scared check out the site for the remake: the terrifying truth? Yes, that’s Flash…

Spookometer: 2/10 Would dumbfound Scooby Dum

10. Hunting the Sasquatch

There are some deeply troubling experiences hidden away in the dark corners of the web, and none more terrifying than discovering that some people really believe in the X-Files. Yep, real-life Mulders are everywhere, and if you’ve got 15 minutes to spare head down the rabbit hole and check out the strangest theories, from aliens to bigfoot. The blog is out there.

Spookometer: 4/10 Could frighten Scrappy-Doo

11. A History Lesson

For those that prefer their science to be flavored with facts, there’s Boscastle’s Museum of Witchcraft and Magic. Taking an academic approach to the history of the occult, the museum’s website features a comprehensive archive of its collection, sufficient to fascinate any budding anthropologist.

Spookometer: 5/10 Will leave Yabba-Doo jabbering

12. The Original

While many writers claim the crown as the king of horror, few have done more to define the genre than H P Lovecraft. With stories inspired by the flotsam and jetsam he found walking on New England’s beaches, his influence is everywhere. Needless to say there are numerous fan sites, run with passion and packed with scares.

Spookometer: 3/10 Enough to make Shaggy drop his sandwich

13. Jamie Lee Curtis

Halloween simply would not be Halloween without a mention of John Carpenter’s seminal work. The official site serves as a hub for the season’s greatest franchise, including the news that original star Jamie Lee Curtis is gearing up for one final scream.

Spookometer: 8/10 Will have Luna Hex hiding behind her popcorn


PowerPack Beaver Addons Review: 300+ New Modules and Templates for Beaver Builder

When it comes to WordPress page builders, Beaver Builder is one of the best options out there. It’s fast, glitch-free, and outputs about as clean code as you can expect from a page builder. With that being said, just because Beaver Builder is already a quality page builder, that doesn’t mean it can’t be made better. At least that’s the…. Continue Reading

The post PowerPack Beaver Addons Review: 300+ New Modules and Templates for Beaver Builder is written by Colin Newcomer and appeared first on WPKube.

3 Essential Design Trends, November 2017

If you’re a fan of this monthly design trends series, there’s a strong possibility you’ve seen a trend or two that you just didn’t like. And that’s OK.

This month, each of the three trends should be design conversation starters. While the visuals look cool, are they readable and usable? (Questions every website designer should ask when undertaking a project.) Take a look, see what you think about these trends and decide for yourself.

Here’s what’s trending in design this month:

1. Underlined Text and Elements

Underlined text is a trend that’s rather unexpected. Thankfully the underlines aren’t the standard underlining you might see from a hyperlink or default setting in a word processor.

The underlined text and elements trend uses color and lines to highlight specific information and bring focus to a certain content area. The cleverest uses of underlining combine the stroke with something else so make it feel like a seamless part of the design.

For underlining to be successful, it needs to look intentional without getting in the way. Underlining can be a distractive technique in many cases and even make text feel too tight or crowded. But using an underline in a part of the design with plenty of white space can alleviate that problem while drawing attention to underlined text.

Both Simon Lee Gallery and Hoohaa Design use a simple underline with plenty of space to pull the eye to certain text. For Simon Lee Gallery, the underline helps users focus on some of the smallest lettering in the design and provides a pause point while the next image in the slider loads. For Hoohaa Design, the underline is part of a balancing scale graphic element that puts emphasis on the site name.

Abel Design Group takes another approach with an orange line that is actually more of a center line than underline, but serves a similar purpose–to draw the text to the text connected to the stroke.

2. Obstructed Text

Seeing designs with obstructed or hard to read text isn’t something that you’d probably expect to see on this list, but a lot of designers are playing with the concept right now.

This can be a difficult technique to pull off and many designers have failed (and ended up as memes) because of lettering that said something unintended. Designing text with an obstruction lends itself to these kinds of issues. This is a real concern with responsive frameworks because of different breakpoints and movement of the text obstruction.

An obstruction can be an element that covers text or a lack of contrast between text and the background where the elements almost fade into each other.

But, when done well, it can lead to a pretty eye-catching design. (It’s hard to stop looking at the Root Studio design. The bright color and subtle giraffe movement over the letters is fascinating.)

To make it work you have to do a few things:

  • Ensure that the word is common enough to be understood, which is why “ROOT” isn’t a problem
  • Not cover too much of the word
  • Be aware of obstructions that can result in unwanted words
  • Use a super simple typeface so the lettering style doesn’t compete with the obstruction
  • Keep the rest of the design super simple so the user can focus on the word and reading it with as much ease as possible

3. Black and White Aesthetic

Sometimes design trends–especially when it comes to color–reflect the mood of the creators. Black and white color schemes are trending darker, more minimal and with less bright color accent than has been common in recent years. (Are designers feeling a little more gloomy these days?)

The current version of the black and white design trend is different from what has happened in the past as well in that the lack of color isn’t just being used for photography portfolios. The examples below include a furniture design company, a website design agency and stories and information about mental health.

They all have the same mood in common though, due to a lack of color.

When working with black and white, there can be concerns about text placement and readability, as well as how to include color in certain parts of the design. Designers can struggle with creating something that’s engaging despite the starkness from a lack of color.

One technique that can warm up a black and white design is to use a richer color mix for the dark tones. A rich black can have a red, blue, green or other color undertone that helps create a slightly different mood.

Rich black is made up of multiple colors when looking at HEX codes. Hex #000000 is made from no color at all. True rich black is #004040. Anything else is a “richer” black. A richer black can serve as a transition between black and white and more colorful design elements.

For example, Crafton, below, uses a rich black for the design with subtle color around the ghost style button and other accents. The richer black feels more warm and inviting than some other designs because of this color choice. While the website does not contain a lot of color below the scroll, there are some more colorful divots and design elements that connect fairly seamlessly because of the richness of the black and color accents on the home screen.

The other benefit to a rich black, or richer black, is that it can enhance contrast between text and background elements, making everything a little easier to read.


All of the trending designs this month make text a little more difficult to read than what most of us are used to. It’s one of those design concepts that can be effective when used exceptionally well and only for certain projects. But that can be tough to accomplish. 


p class=”p4″>What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.       


Popular Design News of the Week: October 23, 2017 – October 29, 2017

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

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

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

Is the Static Logo Dead?


Bootstrap 4: Everything You Need to Know


UX for the Next Billion Users


Coda — It’s a New Day for Docs


Yet Another Logo Generator


Stripe Atlas Guides to Running an Internet Business


This Light Bulb Confuses Smartphone Cameras to Protect your Privacy


A/B Testing – You’re Doing it Wrong


The Bastard Child of UX: Microcopy


Old eBay, We Bid You Adieu


How to Create your own Local Premium URL Shortener Service


Sketching Interfaces


Alphabet Inc. Plans a Beta City


Designers Solve Problems, They Don’t Push Pixels


Behind Simoncini’s Glasses


The Battle Between Design-centered and User Centered


How Our New Design Principles Have Shaped the Way We Work


Google Calendar Gets a Fresh New Look


Revue, an Insight into my Process


Confessions of an Impostor


Designing Glue: How to Mind the Gap


Designed by Engineer


While Apple is Taking Away Buttons, We Found a Way to Add One


The Anatomy of a Thousand Typefaces


Interviewing Design Interns at Facebook


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


5 Ways to Design With Accelerated Mobile Pages

The mobile web keeps growing at a rapid pace.

Smartphones continue to sell strongly, with Apple alone forecasting to bring in $180 billion from its smartphones by 2021. There are over 224 million smartphone users in the United States, making the mobile web an essential focus for any website owner.

The continued growth of mobile web users makes it important for designers and front-end developers to grasp proper design for accelerated mobile pages.

The practice of accelerated mobile pages emphasizes design choices that align with what search engines perceive as friendly, including a defined audience, high-quality content, proper formatting and seamless mobile compatibility. You will notice a variety of accelerated mobile pages when browsing Google in mobile by the abbreviation AMP in search results.

Accelerated mobile pages still use HTML, though they incorporate special elements that prioritize speed on mobile devices. AMP technical requirements are established by the AMP Project, with the standards worked on alongside major traffic influencers like Google. The project was created in response to clunky user interfaces and slow load times when browsing sites on a mobile device.

AMP emphasizes instant speed and a familiarized appearance, giving creators the ability to style their pages within the AMP framework. The boilerplate-centric design on most AMP pages gives a similar feel of navigation, despite differences in content presentation and color schemes.

The result is a faster, more cohesive browsing experience that improves drop rates, increases reader engagement and ushers in mobile web browsing as a mainstay.

With the power and potential of AMP so evident, it’s practical for designers to regard the tips below to help optimize the AMP experience, so their clients will benefit in a variety of ways.

1. Consider AMP-Carousel for the Homepage

Make an impression on the page most of your visitors will begin with. Static content can be displayed on AMP to showcase available products, piquing interest for e-commerce sites as well as those displaying general content.

The AMP-carousel feature enables designers to display multiple similar pieces of content on a horizontal axis. After importing the carousel component in the header, you can utilize type=”carousel” to show up a list of images, appearing as a continuous strip. It’s an eye-catching feature that’s ideal for the front page when you’re trying to hook visitors into seeing something beyond the homepage.

2. Show Related Posts and Products

Encourage site visitors to dig deep into your content. You can accomplish this by showing a list of related products or posts to the one they’re presently viewing. You can statically publish a list of relevant content, accomplishing it instantaneously by using <amp-list>, which populates a CORS request into an amp-mustache template to result in dynamically generated content relevance you can personalize to your specific preference.

If visitors enter a landing page that doesn’t align with their requests, they will either leave the site or look further for what they’re seeking. The suggestion of product alternatives is an excellent method to accommodate the user’s search process, at the very least drawing them more into the site. Even if they do not find what they are searching for exactly, they may find an alternative that does the job just as well.

3. Use AMP-Analytics to Find Areas to Improve

It’s important for any website owner to know how visitors are interacting with the content. The <amp-analytics> component can be used either directly or integrated with a third-party analytics platform, including Google Analytics. Within the <amp-analytics> tag, add the “type” attribute and set the value to your vendor of choice, of which there are many options. The <amp-analytics> component will help website owners have a clearer picture of what pages and design elements are resulting in conversions and which components are experiencing low user engagement.

It’s important to keep in mind when analyzing analytics that, with AMP, smart caching is naturally embedded. The result is that you may view less traffic than usual. Just keep the caching element in mind when analyzing your numbers initially.

4. Use the Built-In Validator

Ideally, designers will never get something wrong, but it can happen. To ensure everything is working properly on a page, use AMP’s built-in validator by adding #development=1 to the end of the page URL. If you open Chrome dev-tools and see the message “AMP validation successful,” then everything is working. If not, you can dig in deeper until the issue resolves. You can also use Chrome dev-tools to verify that all external resources, ranging from images and videos to custom fonts and iframes, are loaded properly.

Additionally, you can validate metadata by using Google’s Structured Data Testing Tool, either by fetching a URL or inserting a code snippet. These tools can help ensure everything is validated, so search engine crawling is enabled. On the note of search engine crawling, also double-check your robots.txt file, to verify that “Disallow: /amp/” is not present in any line. If it’s there, crawlers will not be able to access your AMP files.

5. Implement Ads Within AMP

Another benefit of AMP is a preexisting framework for implementing ads. The amp-ad, or amp-embed, component is a container to display an ad. The ads load alongside all the other resources, with the <amp-ad> custom element.

JavaScript is nonexistent inside the AMP document. Instead, AMP load an iframe from an iframe sandbox. You can set width and height values within <amp-ad>, with the “type” argument specifying the ad network displayed. The “src” attribute loads a script tag for the specified ad network, with various data attributes available to accommodate further configuration from ad networks.

You can also set a placeholder or option for no available ad, via the placeholder attribute. Video ads are also possible with native support, with thorough media component support.

Accelerated mobile pages help increase search engine visibility among mobile users, especially now that Google is embracing AMP pages in its search results.

Additionally, quicker loading times, flexible personalization and visual components that seek to improve bounce rate make for a better mobile user experience than ever.

Accelerated mobile pages provide a fantastic framework for the continuing growth of mobile web users.


7 Ways to Keep Your Site Alive

Once upon a dark, stormy night, when all was quiet, a lone web designer was designing away. He had Sketch open, a coffee nearby, and a cheerful tune in his wired earbuds, because Bluetooth is weird and has a delay that bugged the heck out of our Hero. Ahem, anyway…

During a lull in the music, our intrepid designer saw a notification on his phone. It was an email from his favorite customer, and he smiled. That smile disappeared when he read the contents. There were three broken links in the client’s site. Three!

“It’s okay.” he thought. “That happens someti…” But the list went on. The slideshow was broken. The layout looked a “little bit weird, somehow”. And worst of all, the contact form didn’t work.

In a panic, he scrambled to type in the URL. Everything looked fine. No, it looked pristine. He’d just fix the broken links and… no. He was thorough and diligent. He opened up ChromeFox* to see how the site looked in the client’s browser of choice.

It was as though staring into the mouth of Hell, and this portal to damnation was three pixels off-center. But all is not lost, dear Reader. Our fictional designer might be shamed, but we can help you avoid this. New web designers would be wise to follow this list, and save themselves from incredible awkwardness!

* All names have been changed to protect imaginary browsers.

1. Check Your Links

Every so often, go back and click on every link in your website. Every. Single. One. You should definitely do this after making any major changes to your site, obviously, but not only then. Servers can be weird sometimes. And if you link to outside sources of information, you need to check to make sure they’ve not been broken, removed, moved, or simply been eaten by some computer error.

Few things look as amateur as links that are no longer relevant, or don’t work.

2. Update Your Content

Out-of-date content doesn’t look great. It’s not as bad as a broken link, but it can make people decide to leave, and not come back. Up-to-date information is relevant information.

God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date

Now, if you have a brochure site for a small business, and the prices are not often subject to change, it can be fine to mostly leave the content alone. But if you have any sort of blog, media feed, or what-have-you: keep it up to date. Update once a month at the least.

If you offer useful information, tutorials, or reference information, keep that up to date, too. Go back and make edits when stuff happens. You might even want to publish new editions of entire articles when things change. God knows how often I’ve been looking for information, only to have Google’s top results be four or five years out of date.

3. Test On New Browsers And Devices

When a new browser comes out, test your site. If you friend gets a new phone or tablet, ask to borrow it so you can test your site. New version of JavaScript comes out? Test your site with it. Get a new TV that can browse the web? You get the idea, I’m sure.

4. Double Check All JavaScript Interactions

This is actually a big one. So many sites now rely on JavaScript for basic functionality. This is a practice I’ve never condoned; but I’ve decided that I dislike beating my head against brick walls. Scripters gonna script. Large swathes of content, and even entire websites will stop working if their JavaScript stops working for any reason.

Even if you didn’t build your site that way,

5. Double Check All Forms

It’s one thing if a small widget stops working. That’s not ideal. Forms are another matter. Forms are typically used for contacting people, or buying things, and other very essential functions. They are one of the primary ways that users provide websites with vital information. If they’re willing to fill out a form, that means they’re at least partially willing to commit to whatever you have to offer.

Forms can stop working for a variety of reasons. Maybe the form has JS, and it stopped working (see above), or maybe the PHP version on your server got upgraded. Maybe the email account your contact form is sending messages to stopped working for whatever reason. Maybe it’s getting flagged as SPAM. Whatever the reason, check the forms regularly, so you don’t lose business.

6. Update All Hacks And Workarounds

Okay, sometimes, when you build a site, you use hacks. You use workarounds. When things get dire, you use polyfills. This is normal, and everyone does it; because no matter how ugly the hacks might be, your site must be beautiful.

But browsers get updates, browser market saturation changes, and CSS gets updated, too. At least once a year—and whenever you hear of any big changes to browsers that might affect your site—you should check to see if any of your hacks and workarounds are now obsolete. If they are, they could actually slow your site down.

7. Have A Backup Plan

No, I mean that literally. Have a plan for backing up your entire website. Now, any decent web host should be handling backups for you, for the most part. However for smaller sites, it’s totally worth it to make regular manual backups yourself.

Large sites are another thing entirely. People with data caps (now those are spooky) could easily run into trouble when downloading gigabytes of data regularly. In this case, look into a third-party backup solution. It costs money, but it’s worth it.

And that’s it. Regular testing and considerable preparation are what it takes to make sure you are never shamed by a site that fails to work, or even “Just looks wrong”. Good luck!


3 Ways Justinmind Helps UX Teams Work Together

Communication breakdowns between designers and developers are the prime culprit for productivity stalls, scope creep, and missed deadlines. For years, designers have handed off a PSD to a developer and crossed their fingers that what arrived in the browser bore some resemblance to the original. But a simple PSD just won’t cut it any more.

Designers who want to communicate the nuances of their design, simply, and with no room for error, choose a prototyping tool like Justinmind.

Justinmind is an all-in-one prototyping tool for websites and apps, that keeps you on the same page as your developers, and keeps them on your side in three key ways.

1. Communicate with Developers in Their Own Language

Justinmind allows you to create incredible, world-beating user experiences, and hand them off to your developers fully confident that the final product will match your creative vision.

With Justinmind’s new canvas, your developers will see exactly what they need to build: By selecting an element on the canvas they can see the precise settings, such as position, dimensions, and even CSS properties like font-size; for quick reference, layout position and whitespace, is shown on hover. Each element has a set of CSS values that can be copied and pasted from Justinmind straight into your developer’s preferred IDE.

For large projects, developers will rely on inheritance, and even object orientated methodologies. Justinmind communicates your project in a complementary fashion, by structuring screen hierarchies in a tree mode.

But that’s not all, Justinmind is a well rounded UX tool, and isn’t limited to what you see. Advanced interactions can be designed and communicated, as well as mobile gestures, transitions and animations. You can even simulate the dynamic behavior of your future website or app with business logic and conditional navigation.

When you supply a developer with a Justinmind project you’re giving them not just a visual design, but a full blueprint on exactly what you’re tasking them with building.

2. Involve Developers Early, and Often

One of the best ways to ensure an efficient build process is to bring in developers early. Nothing sucks more than getting a design signed-off by a client, only for your developer to say, “No, I can’t do that.” By communicating with your developers early, and often, you ensure that what you’re designing can actually be built.

Most developers work in teams, so Justinmind have included unlimited Developer Role user accounts. Whether you need to guide a senior developer, a back-end engineer, a front-end coder, the intern who does the data entry, or all of them at once, Justinmind keep your whole team on the track to success. The benefits are especially keen when you’re part of a remote team, when communication issues frequently crop up.

You can publish your wireframes and prototypes and gather feedback from stakeholders, developers, and even other designers.

3. Enable Developers to Access the Assets They Need

Successful projects, that deliver on both quality, and on time, need you to supply developers with two things: good visual specifications, and good asset management; Justinmind delivers both.

Developers can use your prototype to quickly check the CSS code of UI elements. Element values for text are particularly beneficial if you’re outsourcing your development offshore, as text can be copied and pasted without fear of mistranslation. You can even share assets with all of your colleagues, helping your whole team output brand consistency. As if that weren’t enough, Shared Prototypes even allow you to work on the same project as your co-designers, at the same time!

When it comes to pulling it all together Justinmind lets developers export assets themselves, right from the prototype—no more endless “Save for Web”, and no more emails about missing icon files.

Amazingly, you can even export a specifications document right from the prototype so that your sales team can carry it into client meetings.


Justinmind is the best solution for designing for the mobile web, helping you streamline web, iOS, and Android projects, without ever needing to know a single line of code. Just pick a template and start customizing with the intuitive drag and drop interface. UI kits allow you to get more interactive. And testing your UX is as simple as a click.

Justinmind helps you communicate better, clarifying your intentions, and helping your developers do their jobs efficiently.

With Justinmind, you can be sure that the design you produce, is the product that gets built.

Download the Justinmind app for free, and discover your team’s improved workflow today.


[– This post is an advertorial on behalf of Justinmind –]


7 Free Tools For Testing Responsive Layouts

Every modern website needs a responsive design. This does require more effort but the end result is worthwhile.

I actually recommend testing your ideas with responsive design tools to see how your site looks at each stage. You can look for usability issues on different screen sizes all from one handy tool.

And these free tools are my top picks for responsive testing since they’re all super easy to use. Best of all these support many device sizes so you can get a good feeling for how your layout should look from smartphones to desktops.

1. XRespond

The XRespond app calls itself a “virtual device lab” and I’d say that’s pretty spot on.

With this site you can preview how any website looks on a variety of devices. The site works in a long horizontal style where you have to scroll sideways to see all the screen formats.

The label above each screen tells you the exact size and which device it matches to. Plus from the dropdown menu there’s a wide selection of smartphones, tablets, and laptops for testing specific devices.

That dropdown even supports a custom width/height setting if you want to see how your site appears on specific monitors. An excellent testing tool for responsive design and it supports a lot of variety in device styles.

2. Responsinator

One similar app you also might enjoy is Responsinator.

Instead of using a horizontal scrollbar this site lists each device preview in a vertical column. This way you can scroll down through each device and preview the site on each one.

Devices include the most common iPhones and the Android Nexus devices, both with portrait and landscape previews. You’ll also find iPad device previews also in portrait and landscape.

Another cool feature is the switch between HTTP and HTTPS. Responsinator offers both types for previewing sites depending on the URL you enter. It’ll automatically match whatever site you’re previewing to avoid SSL errors.

3. Responsive Design Checker

Need to quickly check if a website really is responsive? Then try using this Responsive Design Checker made specifically for custom screen sizes.

Once you enter a URL you have full control over the responsive testing space. You can alter the width/height however you want and even use it to match certain screen ratios if you use an aspect ratio tool.

In the sidebar you’ll find a ton of predefined screen sizes for common devices like Nexus tablets, Kindles, and even newer phones like the Google Pixel.

The site also supports large screen sizes with desktop monitors up to 24″ wide. Surprisingly these large sizes work well even on small monitors because the preview pane resizes based on ratio, not total pixel width.

So if you’re struggling to test 1920px monitors on your smaller MacBook screen this tool is well worth bookmarking.

4. Google Mobile Test

Google is full of great tools for webmasters and their Mobile-Friendly Test is one such example.

This testing tool isn’t really a previewer and it doesn’t help you spot UI bugs. Instead it’s a dedicated mobile tool for pinpointing issues within your site on mobile.

Once the test runs you’ll either pass or fail as a mobile-friendly site. This is a little too generic for designers but Google offers tips based on problem areas & page elements that could use improvement.

Keep this saved as a trustworthy mobile testing tool. It’s not a complete resource for responsive testing but it’s a great place to gather info and it comes from perhaps the most authoritative company on the web.

5. Matt Kersley’s Responsive Tool

Designer & developer Matt Kersley released his own free testing tool for responsive layouts. This one’s a lot simpler than others and doesn’t have many frills.

Instead it’s a plain inline site previewer with 5 fixed widths: 240px, 320px, 480px, 768px, 1024px.

The preview panes do feature scrollbars so you can move through content effortlessly. However you can’t click any links or browse through other pages within the panes, so this is really best for testing singular pages.

But for a simple tool that gets the job done this works great and it’s one of the few testing tools that offers a 240px width by default.

6. Am I Responsive?

You probably won’t need this tool if you’re looking for pixel-perfect accuracy.

Instead the Am I Responsive? website works best for quick checks and previews on a few common device types.

You simply enter a website URL and it’ll load into four device preview panes: a smartphone, tablet, laptop and desktop. These are not to scale so you’re only looking at the site as a ratio.

But this is really cool for grabbing screenshots of your site to showcase how it looks in various devices. The rendering is accurate to scale and it relies on your browser for proper rendering.

Plus this tool lets you run localhost addresses so you can even check projects you’re building locally on your computer.

7. Designmodo Responsive Test

One other tool I really like is the Responsive Web Design Tester created by Designmodo. This free tool again lets you preview a site in your browser based on certain widths.

But the one cool addition to this tool is the grid-based page setup. You can check your page for pixel points and even study the page’s grid using this webapp.

Alongside the predefined device widths you can also drag the preview pane to fit whatever screen widths you’re testing. It has inputs for the width/height if you need to enter sizes manually too.

But each device icon in the top-right corner lets you select from dozens of common screen sizes making this tool perfect for checking any device you can imagine.


11 Fastest Lazy Load Image Plugins For WordPress

If you’re looking to improve your site speed then lazy loading is sure to help. This technique delays HTTP requests for content lower on the page so it only loads when the user scrolls down. In turn this lowers the page’s total size which gives you a faster page load time. Anyone familiar with WordPress should know about its massive…. Continue Reading

The post 11 Fastest Lazy Load Image Plugins For WordPress is written by Jake Rocheleau and appeared first on WPKube.

How Spoiling the Ending Improves UX

It has often been asserted by fans of pop-wisdom that there are only two distinct plots in the whole of western culture: a person goes on a journey, and a stranger comes to town.

A brief flick through your bookcase will disprove the rule—unless you permit metaphorical journeys, in which everything fits—but the frequency with which the idea is repeated, and the sense it seems to make, speaks volumes about the centrality of the unknown in western ideas of narrative.

In both plots, a person is introduced to something new and unexpected, the only variation is the point of view from which the narrative speaks; in both cases, the story arc is the unknown becoming the known. When Clint Eastwood rides into a broken down town in 1800s Idaho, our curiosity about his identity is what drives our engagement. When we read Tolkien’s Lord of the Rings trilogy, we’re never in any doubt that Frodo will eventually make it to Mt Doom, the interest is in what happens along the way.

The key to story-telling is that there is an unknown, and that the unknown will become known.

Designers Aren’t Story-Tellers

Numerous designers have referred to themselves as story-tellers, but this is simply a kitsch way of referring to communication. To tell a story, we have to foster the unknown in preparation for a big reveal, and the major obstacle to this approach is that web experiences—and I would argue most encounters with design—are non-linear and open-ended.

Design is in fact far closer to poetry. Poetry typically exists in bite-sized chunks, and in which themes are explored that are open to interpretation.

Far from constructing a story, a designer’s job is to clarify as unintrusively as possible.

Using Spoilers in Microinteractions

What’s the most engaging element in Jaws? Is it Brody arguing with the mayor? Is it Quint telling the story of the Indianapolis? Is it Hooper’s affair with Ellen Brody (yes really, read the book!)? No. It’s the music. As soon as that shark starts playing the cello we know it’s coming, its arrival is literally heralded. [Incidentally, Jaws is an interesting example of a film in which both a stranger (the shark) comes to town, and then a man goes on a journey (to sea).]

We can create engagement in design by continually dropping spoilers, hinting at what’s coming, with cello music of our own. To do so, we use microinteractions—simple UI components, featuring a trigger and feedback. The feedback portion of the microinteraction is the place to insert your spoiler.

It works by previewing data that would, in a linear experience, be introduced at a later stage. The key is to bring data forward.


Let’s start with something familiar: the classic example of bringing information forward is the thumbnail. A thumbnail is a preview of a larger element, a visual guide to what to expect on the other end of a link.

Jacky Winter is a talent agency for artists, illustrators, and animators. With a diverse range of talent, the best way to browse work is with traditional thumbnails.

Thumbnails don’t have to be traditional. Alexandre Nacache is an art director and interactive designer whose site uses previews of project elements, rather than reproductions of a design in miniature.

Bao is a Taiwanese restaurant with three locations in London. Their location illustrations act like thumbnails, suggesting not just a look for the restaurant, but a possible experience.

A Day Out is a Glasgow-based design studio. The thumbnails on their site form a major component of the art direction and establishes their own brand aesthetic.

The 5 Minute Read

Back in the day, the only way to know how long reading an article like this would take, was to check the time, read the article, and check the time again.

Based on its uptake, one of the most successful UI elements of recent years is the helpful little indicator that tells us how long an article will take to read. Popularised by sites like Medium, there’s no eye tracking involved, or reading speed calculated, the “5 minute read” estimate is based on word count—125 words is expected to be read in 30 seconds or thereabouts. But even this grossly generalized data is sufficient to allow users to make informed decisions about their commitment to a site, article, or product.

The monotone of Australian Design Radio is broken only by the contrasting red used for hover states. The only element that employs the red without interaction? The playhead that features position, and total length.

Sequoia is a California-based venture capital firm. Profiles of tech companies occupies their landing page. Each profile features a numbered position, and the slider’s animated timer draws your attention to exactly where you are in the process.

Vimeo features some of the best videos on the web. They could have displayed any information they wished—producer, subject, title—when hovering over their thumbnails. They chose duration.

Cinelli is Italy’s coolest bike brand. Their product slider features numbered ‘next’ and ‘previous’ buttons. Arrows alone would be enough to convey meaning, but the designers brought data forward with a simple addition to the buttons.

Qualifying Data

One of the simplest ways of enhancing an interface, is to qualify data with a meaningful context. The key to this is not deliver too much information, just a simple summary that can be read at a glance.

Help Scout is a customer service SaaS. Their dashboard displays key metrics like total conversations, which would be meaningless without the addition of an arrow and a percentage indicating whether that’s an improvement, or a setback.

Booking a ticket from Lyon to Bordeaux is made simpler when Trainline displays a bar beneath the journey time, to give a visual indication of both duration, and the number of changes.

Maps and Reassurance

When we anticipate journeys, especially a journey into the unknown, we often demystify the experience with a map. In the real world, a map is very much like a thumbnail of a destination. In user interface design, the maps we use clarify information architecture.

Labels are one of the most complex areas of information architecture because they tend towards jargon, often company-exclusive jargon. Adding jargon-free microcopy previews the destination for users, and helps them find their way to the right information.

Lattice is a performance management SaaS, but their products are very company-centric. They solve this problem by signalling the key feature of each product in their menu.

Thriva helps you track your health with blood tests you can take at home. They have three levels of product that are clearly explained in their menu.

Financial transactions are technically complex. Plaid offers a variety of API products for developers. Their menu not only explains the key feature of each product, but previews two potential solutions based on product combinations.

The Key to Effective UI Design Is Spoilers

Telling stories is the antithesis of effective design, because stories by their nature, pander to the unknown elements in an experience. Design, by contrast, seeks to eliminate the unknown by clarifying.

When we bring data forward in a design, we typically do so in a simple fashion. A single piece of well selected data can clarify an entire process. Microinteractions are the ideal way to insert these ‘spoilers’, which empower users to create their own experience, whilst always knowing precisely where they are within the wider context.

 By revealing more than a linear story would, we engage users far more effectively, and design experiences that are robust, and enjoyable to use.