Portent: where all mobiles are welcome

If this still doesn’t convince you, remember that mobile traffic is likely already exceeding desktop traffic and that mobile visitors typically convert at a higher rate than desktop visitors. Mobile isn’t the way of the future or even the “next big thing.” Mobile is here and it’s been here for years.

Because of this, I grabbed a bunch of sites and ran them through Google’s own Mobile-Friendly Testing Tool that lets you know whether or not Google views your site as optimized for smaller screens.

Here are the 5 most common things that cause a seemingly mobile-optimized site to fail Google’s Mobile-Friendly Test.

1. Blocking CSS or JS Resources

This was one of the most common mistakes, and by far the most heartbreaking. You’ve spent all this time making a beautiful, responsive site. But what you don’t realize is that when Google crawls it, it’s just seeing this:

Noooooooooo

Google has already specifically stated that blocking Image, CSS, and JavaScript resources from their bots is against their webmaster guidelines and can negatively affect your indexation and ranking. But what’s worse, those are the elements that search engines need in order to render your mobile site. That means all of those painstaking hours you’ve spent making break points, image resizing instructions, and minimized design elements go completely unnoticed to the search engines.

The solution here is simple: don’t do it. Get rid of those meta robots instructions. Check your robots.txt files; especially if your resources are delivered via a CDN. Show off all those beautiful images and stylesheets to the search engines!

2. Using Too Small a Font Size

This one may seem obvious but it’s an easy thing to miss. Your text has to be big enough to read on tiny screens or else mobile visitors are going to give themselves headaches trying to read your new Top 5 Beyoncé Themed Holiday Dishes blog post.

Does that say 2 cups of glitter or 3?

This is a super easy one for search engines to check and, because of that, it’s a super easy rule to follow.

Google recommends using a base font size of at least 16 CSS pixels, then resizing based on the font’s properties. For detailed instructions, follow their actual guidelines here.

3. Placing Buttons Too Close Together

Another thing that Google looks at is how close your links are. Fingers are much clumsier than mouse pointers (especially if you’re me) and, because of this, Google uses the size and proximity of links as a mobile-friendliness factor.

To make sure your site passes the tap-test, be sure that important buttons have a height and width of at least 7mm (or 48 CSS pixels). You can make less important links smaller, but you need to be sure that there are no other links within 5mm (32 CSS pixels) of them. Again, Google has more detailed instructions on their own developer’s site.

4. Not Making All Pages Mobile-Friendly

This was the other common mistake I saw. Google’s “mobile-friendly” badge is awarded on a page-by-page basis. That means if your homepage is a shining example of responsive cross-device beauty but your product page still is full of tiny text, tiny images and tiny buttons, it’s all for nothing.

So, when you’re doing your next mobile-makeover, be sure to hit every page on your site. If you don’t, those internal pages are going to start losing out on all that precious, high-converting mobile traffic.

5. Content Is Wider Than the Screen

This last one, admittedly,  happened primarily with sites that didn’t seem to be going for mobile-friendly designs in the first place, but it’s definitely worth mentioning. Making sure you don’t have to scroll sideways to view your page may seem like a no-brainer but it was one of the most common flags that the Mobile Tester threw out.

Typically, your best solution for managing widths is proper use of the viewport meta tag. This allows you to instruct browsers  to display a page’s dimensions based on screen size. Out of everything described in this post, this is the most difficult to fix since this happens when you have an element that is larger the defined veiwport width. Fortunately, there are a few guidelines out there on configuring a viewport, including this one from Google.

Do you have any tips that weren’t mentioned here? Post your questions and advice in the comments below!

The post 5 Ways Your Site Might Fail Google’s Mobile-Friendly Test appeared first on Portent.

*****

If you’ve ever used Photoshop on a Mac, you’re probably familiar with this guy. Would you like to send him packing and never see him again? If you answered yes, strap on your Photoshop helmet and get ready for the blog post of your life.

For this blog post I am using Adobe Photoshop CS5 on OS X.

Need for speed

If you’re new to Photoshop, Adobe has included a lot of helpful tools and settings to keep you from flying blind. But I know that you’re a Photoshop superstar! You don’t need any of that stuff, so let’s turn it off!

General Preferences

Turn off Export to Clipboard

Export to clipboard is only useful if you’re copying things from Photoshop and pasting them into other applications. Why would you do such a thing?

Go to Photoshop > Preferences > General (Mac OS) or Edit > Preferences > General (Windows) and uncheck Export to Clipboard.

Interface Preferences

Turn off Drop Shadows and Tabs

Now that you’re in the preferences pane, select Interface.

There are three dropdowns here for Standard Screen, Full Screen with Menus, and Full Screen. Set the border to None on all of them. Drop Shadows around your window just add unnecessary visual clutter and probably a small performance dip, too. We don’t need any of that noise.

This is a personal preference, but I don’t like the tabs feature in CS4, CS5, and CS6. I like to see all of my windows open at once.

Uncheck Open Documents as Tabs and uncheck Enable Floating Document Window.

File Handling Preferences

Turn off Image Previews and set Maximize PSD Compatibility to Always/Never

Now Switch over to the File Handling panel. The first thing in there is the Image Previews setting.  Image previews are a thumbnail version of your file. They are useful when you’re browsing through folders in finder/explorer, but they also slow you down every time you save. Go ahead and set it to Never Save.

Maximize PSD and PSB File Compatibility is a dialog box that pops up the first time you save something in Photoshop. If you choose yes, it will make it easier to open your files in different versions of Photoshop, but it will also add a fair amount of bloat to your file.

If you work with other people who have different versions of Photoshop, you want to set this to Always. If you are working by yourself, set it to Never. Either way, you won’t have to see that annoying pop-up anymore.

Performance Preferences

Get more RAM

Now we come to the most important panel in the preferences window with regards to speeding up Photoshop. Select the Performance Panel, and take a look at the Memory Usage box.

RAM is the workhorse of Photoshop. If you don’t have any RAM, you’re gonna have a bad time. Drag the slider as high as you can without breaking the rest of your computer.

Use fewer History States and set Cache Levels to 1

History States allow you to go back in time and undo your mistakes. If you’re terrible at Photoshop, you probably need a lot of these. But we talked about this already. You’re a Photoshop samurai, so cut that in half.

While you’re at it, set the Cache Levels to 1. This will allow you to open your Photoshop files faster. If you set the Cache Level higher, files will open slower but Photoshop will be more responsive while editing larger files.

Buy an SSD

When Photoshop runs out of RAM, it will write to the hard disk.  This is called your scratch disk. For best results, get another hard drive besides the one Photoshop is installed on.

If you can, get a solid-state drive and use that as your scratch disk. Solid-state drives are more expensive than hard disk drives, and you get less space, but the write speeds are incredibly fast.

Type Preferences

Turn off font previews

Finally we arrive at the Type Preferences Panel. If you don’t have any idea what font you’re using, I suppose this would be useful. But let’s be honest, you’re only using Helvetica.

Set the Font Preview Size to NOTHING (uncheck it).

Obligatory conclusion

If you followed the steps above, Photoshop should now be running as smooth as butter. You’ll never have to see the spinning beach ball again. Do you think I missed anything? Do you want to fight about it? Let me know in the comments.

The post Make Photoshop Faster with These Simple Settings appeared first on Portent.

If you want to call yourself a web designer these days, you’d better be ready to keep up. Daily study is required or you’ll be left in the dust.

I follow countless blogs, listen to podcasts during my commute, and work on random projects at home just to try out new things.

When I start talking about design, my friends’ eyes gloss over and they suddenly need to go home – but what can I say? I’m really into this stuff.

That being said, I have a confession that might make the modern web design community cringe a bit: I care about the fold.

The what?

“The Fold” is a dated concept originally stemming from printed newspapers. If you wanted your headline to pop, it needed to be no more than halfway down the page: the point where newspapers were “folded” for display.

When digital media burst onto the scene, the average screen resolution was 1024×768 (or if you lived on the bleeding edge, 1280×1024). Consequently, designers determined that the safe digital equivalent of “the fold” was 600px from the top of the page. If your content was below this point, it was less likely to be seen.

Now, things are a bit different.

In the future, that chart’s only going to become more fragmented. We’re already browsing the web on our phones, tablets and TVs. Pretty soon we’ll be browsing the web on our bathroom mirrors.

So, the fold is dead, right?

A few years ago, I was riding high on the “Fold Is Dead” bandwagon, preaching about how “users these days know how to scroll!”

But working at an Internet marketing agency that deals in real stats and analytics knocks you off that bandwagon real quick.

It’s still true: content above the fold gets looked at more than anything else.

But a couple of other things are also true:

1. Users are comfortable scrolling (especially on small / mobile screens).
2. The traditional approach to a quantifiable pixel number representing “the fold” is no longer relevant.

The fold is not dead… but you also shouldn’t be trying to force everything important above some arbitrary line.

Alright, I’m pulling my hair out now. What should I do?

Calm down, for starters.

The purpose of defining the fold was never to cram every possible thing above it. Because if everything is important, guess what? Nothing’s important.

Let’s go back to the fundamental: the whole purpose of considering the fold is to entice your audience to continue reading or, in the context of the web, scroll. Take a look at one of my favorite examples:

Life, Below 600px

Notice how there’s almost nothing above the fold on this page, yet it screams “scroll down and continue reading.”

Whether it’s the headline suggesting there is something interesting below or the giant glacier submerged just below the cutoff, you’re compelled to read more. Additionally, simple design and large typography make it less intimidating for the user to dive down into more content. This is how you use the fold.

What I’m hearing is that I should stop trying so hard…

Exactly.

Perfection (in design) is achieved not when there is nothing more to add, but rather when there is nothing more to take away. – Antoine de Saint-Exupery

I love the web’s current explosion of screen resolutions and form factors. It’s whipping a wicked curveball right to the high inside corner of all these “rules” – rules that have evolved over time into completely skewed versions of what they were originally intended to be.

Some of your “above the fold” content is inevitably going to be cut off.

The resolution of screens viewing the web is constantly improving. No one can predict what your site may look like on some Internet-capable washing machine or car dashboard of the future, so don’t blindly obey hard and fast design “rules” without question. The fold is a guideline, not a mandate.

If a user starts scrolling down your main page, the fold has accomplished its goal. Now all you have to worry about is the rest of the site! (No pressure or anything.)

Have you come across any great examples of sites using the fold correctly? Let us know in the comments.

The post Into The Fold: Why Web Design is More than One “Rule” appeared first on Portent.

Good design doesn’t just mean pretty, it means functional too. Sometimes a website is born that combines those two things seamlessly. It’s like a miracle. Or more likely, people worked hard and communicated with one another, allowing design, functionality, and content to come together and deliver a clear and helpful message.

A functional website satisfies two important needs:

• People who’ve never heard of you before should be able to figure out what you do in less than thirty seconds, without clicking on anything.
• People who know about you should be able to get to what they want in 1-3 clicks.

A well-designed site must allow both to happen, while being aesthetically pleasing and providing relevant information. If you’re stomping your feet and whining that you don’t want to have to do all of those things at the same time, the Internet should be taken away from you and your bad web design. You can have it back when you’ve had some time to think about what you’ve done.

So, in no particular order, let’s see some good design!

Ript Apparel

Ript Apparel is a clothing company that specializes in made-to-order t-shirts that feature original pop culture designs contributed by independent artists. With the exception of a few reprints, the designs are only available for 24 hours, making each shirt they sell a limited edition collector’s item.

If you didn’t know any of that before now, it’s at least immediately clear from their homepage that they’re an apparel company and you can get a rad shirt with featuring a pirate-esque Super Mario water-skiing on a couple of Koopas

Due to their unique business model, they have no need for any kind of category page, so nearly all of their content can be reached within 1-3 clicks from their homepage. While there is, admittedly, not a lot of content on the homepage, everything above the fold is relevant and useful, and everything below the fold is devoted to engaging their users in a discussion.

Camera+

Camera+ starts off with the bare minimum of what you need to know – it’s an app, it takes pictures, you can buy it for $1.99. Mission accomplished. To add some icing on that cake, the image of the phone plays a little video that shows you how to use the app, and if you want a more in depth tutorial there’s an intro video linked right above the ‘buy now’ button.

You could argue that it loses a little functionality by lacking any sort of navigation – if you want to know more about the product you have to scroll down, getting into finer and finer detail the farther you go, but there’s no way to go straight to the information you’re looking for without skimming all the information available. Still, the page isn’t that long – it tells you everything you need to know without being verbose, and it does so using excellent photography and consistent attention to spacing.

Crowdrise

Crowdrise holds a special place in my heart because the entire site is laced with humor, which as we’ve mentioned before, rules the internet. This is another site that knows how to keep things simple. Nearly any information that you could be looking for is available in one of those top five drop-down menus (though they could probably stand to make it a little more obvious that those are, in fact, drop-down menus).

And if you don’t know what Crowdwise is about, the navigation and slideshow text is full of keywords to clue you in that their mission is, as the tagline says, to give back. Crowdrise is an easy, secure way to raise money for good causes, and they provide that service with a great sense of humor.

Strawberry Jam

These guys break the 1-3 click rule a little bit – but you don’t actually have to click the big pink button to find out what they do, you can just scroll down. And to be fair, the big pink button is – you know – big. And also pink.

Strawberry Jam combines all your social media feeds so that, for example, if you’re friends with all your coworkers on Facebook and/or Twitter and they all suddenly decide to share the same link to the same article at the same time, you only have to see it once. And if you already knew that, you need only fill out the form to sign up for the beta. One click and done.

Trip Lingo

This is another app – which you can see from the handy pictures of it shown on both i-Phone and Android screens. For newcomers, all the basic info about what the Trip Lingo app does – it helps you learn other languages so you can communicate with locals while you travel – is right there when you arrive on the page, no clicking necessary. For people who already know what it is and simply need to have it now, there’s a big shiny button to get you started. And if that’s not enough for you, there’s a big ol’ features section right below the fold.

Foodzy

Foodzy is another addition to the craze of turning diet and exercise into a fun social networking game. The site combines fun, colorful, retro-style illustrations with a clean, to-the-point design. Their purpose is laid out in three steps at the top of the page, there’s a cute video to watch if you’re still not sold. If you’re already shouting sign me up there’s a big green button at the top, just for you.

Louise Fili

Louise Fili specializes in packaging design for restaurants and food products, which is what it says in that big red bar. Her work is divided into clear categories which are listed along the top, and she combines beautiful photography with a minimalist design to showcase her art. This is another example of a website that’s lacking a lot of text content, but portfolio sites are one of the few cases where that’s not terribly necessary. Portfolio sites should be carried by the work you’re presenting – if you have to mince words to convince people why they should like your art, you’re doing something wrong.

GOOD

Editorial sites often have a problem with spacing; they get caught up in trying to fit as many interesting headlines on the page as possible and forget that if they aren’t easy to read, no one is going to read them. GOOD doesn’t fall into that trap. The site is pretty and easy to read, there’s a nice balance of images, content, and negative space, and the title changes from ‘Good Morning’ to ‘Good Afternoon’ depending on what time it is, which is nifty.

Evernote

It’s hard to explain what Evernote is, since there isn’t really anything else like it out there (it’s not quite a blog and not really a social network), but they do a pretty good job of presenting the basics. If you already know what Evernote is and want it, the download button is right there in the middle of the page. Plus the logo cleverly combines an elephant (because they never forget) with a standard page icon, and I’m a sucker for clever logos.

Squarespace

These guys don’t do anything terribly fancy as far as visuals, but they don’t need to. Squarespace is a site creation software and they follow the rules to the letter – the who, what, and why are spelled out for you above the fold and the call-to-action is the first thing you see (as it should be). Any other information you desire is available within 1-3 clicks and overall, their site reflects the clean, elegant professionalism of the product they offer.

And that’s it! Ten beautiful websites for you to fawn over and strive to emulate. If you have any that you think should have been featured (or any good design, not just websites but logos, posters, email blasts, etc.), let us know!

The post Good Design Roundup appeared first on Portent.

We spent a good ten minutes going through each page and discussing what the art should be in a vague, Friday afternoon sort of way, which mostly just meant that ten minutes later I still had no idea what to do.

In a desperate attempt to get me out of his office, Tracy went over the pages again to try and make things clearer, and he ended up saying this to me:

So I drew a dinosaur.

The post Creative Art Direction at Portent appeared first on Portent.

Recently I was poking around a few design blogs and noticed something interesting. It seems like the trends and styles that were so popular only a year ago are starting to fall out of favor. Smashing Magazine and Web Designer Wall have all but declared web 2.0’s glossy style dead. Last year, or maybe two years ago, I got a lot of inspiration from this page, as I’m sure many others did. If you’re wondering what I mean by web 2.0 (and yes, I hate those words, but what else do you call it?), read that page. Looking at it now, it does seem a little dated. What happened? Overuse, mostly. The simplicity and ease to which you can design a website in this style has lead many a novice to replicate it. All you have to do is grab a shiny button Photoshop template, slap a gradient down, and voila, web 2.0! For me, the death knell was sounded when I went to start a new account with Qwest and was greeted with this:

What words come to mind when you look at this? Corporate? Safe? Sterile? Neutered? Not to knock whoever designed the website, it does look very professional and very… Qwesty. But it doesn’t look that great. It looks like a door knob: functional and appropriate, but completely lifeless. Come to think of it, it looks like Windows Vista. Not that anyone has ever looked to Qwest for setting trends in design.

But wait, you say, isn’t this the same style that Apple, Mozilla, et al. use? Not really. Not anymore, anyway. The glassy buttons do look almost exactly like Apple’s did; two years ago. Likewise, Mozilla used to be the poster child for this style, but look at it today.

Very different! Trends in web design, as in everything, are fleeting. What looked good yesterday rarely passes muster today. This is why I never purchase web design books. However, there are a few web 2.0 design conventions that have always looked rather stale to me, and I’m glad they’re slowly disappearing. Here are a few things that are best to avoid, and if you do use them, use them sparingly.

Glass Buttons

Glass buttons: bevel & emboss’ high class, snooty cousin.

Glass buttons are quickly becoming the bevel and embossed buttons of yesteryear. Ever since they first appeared on Apple’s navigation the internet has been inundated with tutorials on how to make those cool, jelly tabs, and every twelve year old with a pirated version of Photoshop has followed suit. They will never be as ugly as bevel/emboss, but their increasing prevalence has started to make them look tired and old hat.

Gradients

Gradients: Rather dull.

Gradients. Gradients gradients gradients. A long while ago, gradients started to replace the flat, solid colored backgrounds of old. I don’t think gradients will ever go away. In fact, we use a gradient background on this site, and it looks fine. There’s nothing wrong with gradients, per se, but they are everywhere! A lot of sites nowadays are moving in a more illustrative direction, which may be inappropriate for our site, or Qwest’s site, but that doesn’t make the designs any less beautiful.

The screen comes to life.

The average user’s internet speed is rapidly increasing, allowing for larger, more detailed images. I particularly enjoy the emphasis on hand-drawn elements, which easily separates the real artists from the stylists. If you are a designer and you can’t draw, it might be a good time to start learning.

Like I said, styles like these may not be viable for every company, but they are another option to consider besides the good old gradient or solid color. Never settle on the first solution that comes to mind. Try a pattern, a drawing, or a photograph as a background. And never use gradients on every element of your design.

Glass Table

This effect doesn’t look bad, and in fact, Apple and other companies still use it. But like the other devices in this list, it is becoming overused. My main problem with this trick is that turning something upside down and fading it out is not really what a reflection looks like. If you are going to use it, try looking at an object on a real mirror and attempt to replicate that effect. You can even render the reflection or shadow in a 3D program. In this way you will separate your designs from the amateurs. To illustrate this point, take a look at this image I swiped from Nike’s website. I created the first, wrong image. Nike did it correctly.

Stripes

Stripes done poorly. These stripes create a visual ‘buzzing’ effect that distracts from the real content of the page

A lot of websites use stripes in some way or another. There is even a tool to create these for you. Without the learning curve of Photoshop, I expect we’ll be seeing many more websites using stripes in the future. There’s nothing wrong with stripes, but can you think of a more interesting way to use them than as a tiled background?

Digg, RSS, Delicious icons

These have become almost de rigueur in recent years. Every website has some RSS, Digg, StumbleUpon, or Facebook icon somewhere. Before just slapping the icon on your site, consider other methods of displaying them. You are not required by law to use the little orange RSS button (though I do think you should keep it orange). Try different variations on the theme, while still keeping the icon recognizable. Here are some clever examples:

Digg icon

Twitter Icon

RSS Icon

Make the icon a part of your design, rather than an extraneous element.

Sans-serif fonts

When I was in school, they taught me that sans-serif fonts were for the screen and serif fonts were for the books. But what I’m realizing now is that serif fonts can look just as gorgeous as their footless cousins. Take a gander at the I Love Typography site. I have no trouble reading the type and it’s all in serif. You can’t make your whole site in Adobe Garamond, but how about using it for a logo or your headers?

Serif fonts look just as good.

Badges/Stickers/Star Flashes

The beta Sticker – a crime against humanity.

Just don’t use these. Ever. If you have used them in the past, I pardon you, just like Ralph Fiennes pardoned that kid in Schindler’s list.

In Summation

Before you throw your Web 2.0 out the window, remember that there are some trends that will never fully vanish. What aspects of the web 2.0 era will endure? The clean, simple layouts; the larger, more readable text; the bright colors, the emphasis on the user and not the designer. Always put the needs of the client and the end-user before your own artistic preference. If glass buttons are what Qwest wants, that is what Qwest will get. But there is always a way to do a fresh take on an old recipe. Be aware of trends, but do not allow them to dictate your own style. Otherwise, you will quickly become yesterday’s news.

Jarrod is an interactive designer at Portent Interactive, a Seattle internet marketing company. He looks nothing like the picture at the top of this article

The post Does Web 2.0 still look good? Did it ever? appeared first on Portent.