Source: Adriano Gasparri

Source: Adriano Gasparri

Spam is a pain in the butt, but we bloggers have to deal with it on a daily basis. WordPress is as bad about spam as any other CMS, but there are a variety of options to help weed out the spammy nuisance. The most popular plug-in is Akismet, which most WordPress bloggers already take advantage of, but it doesn’t do near as much as most of us would like.

Instead of relying on Akismet, it is best to have a multifaceted defense that helps keep spam of all sorts out of the picture. Cats Who Code recently shared a list of snippets and “hacks” all aimed specifically at erasing spam management from your WordPress responsibilities. I’m sharing the different ways you can deal with the spam issue that have been highlighted in their article, but if you want the code for a specific solution, they are all available on their blog.

One method involves targeting any and all comments with extra long urls. If you haven’t noticed, most spam comments come with super long urls, which make them easy targets once you know what you’re looking for. But, there is a code you can paste into your functions.php file that marks any comment with a url over 50 characters as spam.

Similarly, you may also notice that most legitimate commenters are perfectly happy to not include any url at all. They are there to join the conversation, not sell their own site after all. This means you can fight spam simply by removing the url field from your comment form. Some commenters won’t be too excited about the change, as it is nice to get an added boost to your site simply by sharing your expertise on other blogs, but most won’t be too hurt by the decision.

Spammers are very predictable, and the most common trick they use is targeting specific keywords. As such, creating a keyword blacklist that uses the most frequently targeted keywords for spam will allow you to mark any comments using a mess of the target keywords as spam. It is a more focused approach than those above, but it can also affect commenters who just happen to use important keywords in their responses.

You have many more options when it comes to fighting spam, but it is best to take a look at the spam you’ve already been dealing with, so that you will know exactly what you’re dealing with before you start blocking tons of comments for every spammy tactic. You don’t want to accidentally weed out legitimate commenters while you’re on your anti-spam war path.

Flat Design Text Screenshot

It is no secret that flat design is the biggest trend right now, and it has raised many questions from designers trying to get caught up on the trend. One of the more common questions pertains to fonts, specifically which fonts “work best” with flat design.

Typographic focus in one of the biggest aspects to flat design and the attention to simplicity, so choosing which font you will be working with is an important step. Of course, the main point of good typography of all styles is that it is easy to read and matches the look and style of the page overall, so there is no way to suggest a font that will work in every situation.

However, for flat design you will usually be better off working with very simple fonts and font pairings, as flat design is inherently minimalistic and simple. Whereas past wisdom suggested maxing out at three font pairings per design or page, flat design streamlines it down to two fonts, and sometimes just one.

Because of flat design’s bright color schemes, lettering relies heavily on font weights and clean lines. Designmodo suggests using typefaces with even strokes that contrast against the color palette, and are bold enough to read. You also may want a dash of flair to really bring life to the page.

The trick with flat design is to not fall into boring patterns. The general trend suggests using sans serif typefaces, but it is also possible to work with novelty typefaces as well. The sans serif typefaces are popular for their easy to read nature and great contrast against backgrounds, while serif typefaces come off as formal and against the nature of the simple style, thanks to their usual embellishments.

Novelty typefaces can work well to draw visual interest to areas with bigger text that demands more attention, but it is discouraged to use these for smaller text blocks. Because of this, it is suggested to always choose a second sans serif font if your big text is in a novelty style.

The most forgotten aspect of using text in flat design is that the words you use are just as important as he typeface. Flat design demands simplicity, and overly wordy pages won’t sit within the trend. Use direct language that is brief but effective, and always cut to the point. You don’t need full sentences unless there’s a full paragraph of content. Otherwise, stick to simple word pairings.

There are other serious considerations for designers as well, such as how you use text against color as well as capitalizing on size and space opportunities within flat design. Carrie Cousins discussed those issues earlier this week in her article about typography in flat design, and she even suggested some fonts that lend themselves well to the trend.

More than a few web designers try to ignore it, but SEO is an incredibly important part of your website. Simply put, search engine optimization is the reason many people land on your site, and it can help you control who those people are to an extent. SEO should be an ever-present concern through your design process.

If you’ve managed to completely remain uninformed on SEO, it is the process of making your page as accessible and valuable to search engines as possible. It isn’t buying ads, which can attract traffic as well, but instead structuring your site in a way that reflects the preferred methods of the most popular search engines, so that they will see your website as being valuable enough to place higher up in their rankings.

If you read up on SEO much at all, it becomes clear that SEO is also constantly changing and updating, but there are basics that any website owner can do to make their page attractive to search engines and all optimization is boosted when you consider it from the beginning of your design. If you take a few steps when you first get started, you will find that every page you design performs better and more people actually lay eyes on your hard work.

Content and Text

Once you know the topic, theme, or goals for your current project, designers should brainstorm a few keywords that best describe the content that site will be used for. If you are doing a site for design, the obvious choices are “design”, “web design”, “typography”, “css” and maybe even “tutorial”.

Once you’ve chosen the proper phrases and keywords, be aware of using them throughout the site in ways that feel natural. You can fit keyword into headers, headlines, links, and meta data on every page of the site, but you should be careful about over-populating the page with these words to the point where it appears unnatural. Search engines will punish those who are obvious about “keyword stuffing”, so just don’t overdo it.

Images

First off, what search engines see and what users are shown are very different, especially concerning images. Search engines only see text, not images, so it is important they are aware of what your images show. That’s why it is smart to use alt tags on every image of your site that gives a description of what viewers are actually seeing.

For designers, another option for visual elements of the page such as banners and selected graphics is to design them using webfonts, HTML, and CSS when possible. Search engines can read those banners as regular text when created through this, which means you don’t have to worry about the markup.

Another aspect of image SEO is preparing the image properly before uploading them to your site. Huge pictures will slow down page loading time, which causes many potential viewers to leave before they even see the finished page.

Site Map

Site maps are xml files that outline the entire structure of your website, and they are like cheat-sheets to your site’s navigation. Create one, and make it live on every website you work on. Make sure it is submitted to Google so that the crawlers can use it even easier. Users also like access to sitemaps as well, though they’ll be less interested in it if your navigation is done properly.

Conclusion

There is even more a designer can do to optimize their site from the start of their workflow. However, be careful before diving too far into the SEO pool, because there are many “tips” and “tricks” offered out there that are either out of date or outright improper in Google’s eyes. SEO isn’t immediate, and any site telling you they can teach you how to get your site to the top of the results quickly is probably selling snake oil.

Design Shack offered some other credible suggestions for optimizing your site from the design stage, as well as tools that can get you started.

Google’s Matt Cutts recently made it very clear that usability is going to be one of their most important ranking factors moving forward, as they emphasize site speed and quality design as the two aspects that aren’t getting the attention they deserve.

Google isn’t the first to pinpoint how important usability is either. It has been one of the most common discussions in web design since its inception, while slowly becoming more important to users.

Quality usability is also at the heart of the of all the biggest start-up success stories. Quality products can be ignored if people get frustrated with the website, while the good or great products that are easy to access or use only attract more people and cement the public perception of a given brand.

You would think usability would have been boiled down to a science by now, or at least be such common sense that it wouldn’t be a big issue, but if it was so easy there wouldn’t be so many of the same usability mistakes all over the web, from big companies to the smallest mom-and-pop shops with an online presence.

Christian Vasile deconstructed these popular mistakes last week and offered options for those that seem to be repeatedly rejecting all the currents standards. Most of these, you’ll notice as bad decisions before you’ve gotten past the headline, but maybe you’ll be surprised to find that you’ve been continuously implementing one of the most hated design techniques around.

Reading a BookOver the weekend, I got on a reading kick, but often the biggest challenge in those instances is picking the best book to start up. Of course, you could always try to trudge through A Song of Fire and Ice, or some other fiction, but lately I’ve been hoping to get a little more out of my reading.

Thankfully, there are practically an unlimited number of books for designers and developers that there is no shortage of information or discussion for me to choose from. The best part is, the most recent wave of books have almost entirely been ebooks that cut out all the production costs and are available for free.

You can look into any design topic you want and almost certainly find a book focused on that idea. Whether you want to learn a new coding language, research the latest trends, or learn some historical perspective to inform your designs, there is undoubtedly a book on it. Rather than making you do a lot of Googling and vetting to pick the best book for your interest, Paul Andrews put together a list of 19 free ebooks that cover everything you want to know.

Some of the ebooks are simple guides like Mobile Web Design Best Practices from Mobify which (as the title suggests) walks you through 50 of the best ways to build the best mobile site possible. Similarly, you could check out Web Design and Mobile Trends for 2013 from Awwwards if you are looking to catch up on what is all the rage right now.

There are also much more in-depth texts you can dig into such as Learning JavaScript Design Patterns by Addy Osmani. The ebook teaches designers how to write beautiful, organized, and most importantly, maintainable JavaScript through the application of classical and modern design patters to the language.

Whether you’re looking to pick up a new skill or refine and improve your existing ones, there’s an ebook that will take you from start to finish with half the headaches of digging into a myriad of tutorials and online articles from a whole bunch of conflicting sites and writers.

Trash BinEveryone makes mistakes. It is a part of life. Sometimes we catch those mistakes before they get out into the public, but sometimes we spend endless time and energy on something and it just doesn’t work out. That happens with our web designs as well. We spend months working on our next big project, putting in research and extra hours until we think it is perfect. Then, it goes live and nothing happens. Months later, and your site may as well be flat-lining.

Just imagining that scenario can make a designer feel sick to their stomach, but you can’t let mistakes like those get you down. Design is very much about trial and error, and sometimes you have to make a lot of errors before it works out. But, there are some things you can do when a site doesn’t work out. Catalin Zorzini recently posted some steps you can take to get your design back on track.

  1. Ask for Opinions – Sometimes we get a little stuck in our own worlds and inspiration that we forget we aren’t designing for ourselves. We are designing for others, and the best way to find out what they think is by asking. If you have people within your friend or co-worker circle that fits the demographic you are looking for, ask them their opinion. They’ll get you out of your own brain and back on track.
  2. Simplify – Sometimes when we get driven to create a truly great site, we go overboard. It can be exhilarating to combine all your skills all into one amazing page, but when you combine graphics, images, videos, text, and animation all onto a page, it can get pretty jumbled and unattractive. Less is more, especially online.
  3. Make Your Call To Action Clear – What do you want people to do when they come to your site? Do you want them to purchase something or subscribe to a newsletter? Either way, make it clear and easy for your potential customer to do what you want from the moment they enter the page. You don’t want to annoy them with it, but you want it to always be more available than not.
  4. Build Your Credibility – The internet has more than its fair share of cons, misrepresentations, and shady dealers. These people create websites every day, and people are always on the lookout for them, so you have to make it clear when they reach your site that you are a reputable member of your community. Whether you join an organization within your physical community or online industry, having others who will back up your credibility will help your potential customers trust you.
  5. Use Social Media More – Social media is a big force online now, and every company needs to have an established social presence. Not only do you gain an easy way to interact with customers and find out what people think about your brand, you also gain credibility by widening your online foundation.

Flat Design WindowsYou’ve no doubt heard about it. All the blogs are talking about it, the big companies are using it, and there has been a visible change on the internet over the past year. Flat design is in, and it appears to be here for the foreseeable future.

Still, unless you’ve been keeping up with the most recent writings about design, it is likely you haven’t even heard of flat design. What does it really mean? Conceptually, the style is all about designing for the screen rather than simulating an increasingly irrelevant physical world.

In the eyes of flat design proponents, skeuomorphism, or design replicating the three dimensional world, was used as a crutch to make computers usable to those unfamiliar with them. At this point, that introductory style design is less needed because children are growing up with technology present in their lives.

Flat design isn’t just a conceptual style though. It has very distinct visual characteristics as well. According to Carrie Cousins, there are five things that make a design “flat.”

  • No Added Effects – Flat design is so-named because it strives to depict two-dimensionality. This is best achieved through a style that rejects all embellishments that have long been used to replicate three-dimensions such as drop shadows, bevels, embossing, and gradients. In flat design, every elements is crisp and and without shadows or feathered edges that blend it into the page.
  • Minimalistic Approach – Flat design attempts to be as simple as possible and thus it is usually accompanied with an overall minimalistic approach. The designs don’t use tons of flash animation or any other over the top design elements. Many sites rely almost entirely on color and text, but others include simple high resolution photography to set the mood.
  • Simple Elements – To create a simple and clear visual hierarchy, flat design uses many simple user interface elements, like buttons and icons. The trend has been using simple shapes such as rectangles, circles, or squares, and allowing each shape to stand on its own. Every UI elements is simple to understand and easy to use, striving for an intuitive experience.
  • Focus on Typography – Flat design is deliberately simple and crisp, which means the designs rely heavily on typography. Luckily, typographical design is also hugely popular at the moment as the internet has made using creative and interesting text much more possible than it ever was in the past. The typeface should always match the design scheme, but also simple, bold, and worded efficiently. Art or vintage fonts work well as embellishment, but it is important not to go overboard.
  • Focus on Color – Because of the simple styling, flat design also relies heavily on color. Pastels gave been very popular within the trending style, but most importantly flat design color palettes are more bright and colorful than other design styles. There is also the possibility to use more colors within a design than is usually utilized on a page. Many sites mostly use two to three colors, but flat design palettes can consist of up to eight equally used colors.

Flat Design IconsFlat design doesn’t seem to be going away. The popular use of pastel colors and minimalistic layouts is getting bigger every day, and even the biggest proponents of skeuomorphism (ahem, Apple) seem to be caving to the new focus on designing for the screen rather than designing based on the physical world.

For many designers, this might mean an entire overhaul of your site if you are trying to stick with the trends. However, before you go banging your head against the wall about having to build your site from the ground up, remember that any big web design trend probably has tons of free resources already available to help speed up the conversion.

This is obviously the case with flat design, and while there are scripts to help with making a flat web site responsive or managing navigation, there are also free sets that will help you fill out the details of your site with any icon you need in a style that will match your new page.

Speckyboy recently compiled twenty free icon sets that will help with navigation, social sharing, or payment methods that your users will be seeing. Designmodo also created their own personal set of icons they shared wih their readers designed specifically for social media and sharing.

The icons are all high quality, resizable PNGs or PSD files, and you won’t have to worry so much about the tiny details while you’re working on the bigger picture of your site. Oh, and don’t be confused if you think many of them look like app icons. Rounded corners and geometric shapes are a big part of flat design.

Adobe_Photoshop_CS4_icon.svg

After all these years and new Adobe programs, Photoshop is still the tool for designers. It is the tool of the trade no matter what style you like, whether you do digital painting, sign style design, or photo manipulation. But, Photoshop is to us like the scalpel is to surgeons; in skilled hands it is a great tool, but it can be dangerous if misused.

Unlike when a surgeon makes a mistake, it can sometimes be hard to tell when you are misusing Photoshop or creating a design others aren’t going to respond to. When you’re learning the program, there is so much at your fingertips it can be tempting to use everything, even when you don’t quite know what it does. It also offers many different solutions to problems – some better than others – so it is easy for the uninitiated to complete the task they wanted without getting the right results.

Jay Adrianna, writer for Onextrapixel, recently wrote about thirteen incredibly common Photoshop mistakes designers and photo editors make, as well as easy ways to fix them. Whether you are a beginner, or someone more used to the program looking to refine your techniques and improve your finished products, it is almost guaranteed there is something you can learn from the tips offered. As always, the key is moderation.

iOS7 concept by Andre Almeida

iOS7 concept by Andre Almeida

It appears that flat design is taking the lead over skeuomorphism, as Apple’s new iOS is rumored to be receiving a huge overhaul in the near future. The most recent speculation claims that the new iOS look is going to be largely monotone and understated, as well as abandoning the textures and “realistic” drop shadows of the past.

Web Designer Depot reported the claims which have also been going around most design blogs, which also state that the new mobile OS is rumored to be announced at the Apple WDDC on June 10th, where there is also speculation about a new iPhone announcement.

One of the leading reasons many designers have been slowly migrating is that it is incredibly easy to make a flat design also responsive, especially compared too skeuomorphic designs. Flat design follows the ideology that effects simulating the 3D world such as drop shadows or textures that mimic real objects are not only deceitful, but becoming increasingly irrelevant in an online world.

This isn’t to say that skeuomorphism is completely dead; there are still many designers promoting the strategy. But, Apple has long been cited as one of the biggest proponents of the trend, with their iconic mobile OS styles.

The rumors all started when Apple tapped Jonathan Ive to head the design of iOS7. Ive, Apple’s Vice President of Industrial Design and the man responsible for the iPhone, iPad, and iPod touch hardware, is known to have a strong dislike of skeuomorphic design, which was heavily promoted in the company by Steve Jobs and former iOS head Scott Forstall.

No one will know for sure what is coming with the Apple conference until the 10th, and many skeptics claim that Apple is likely to be implemented incrementally rather than suddenly with an iOS update.