moccosk

New Post has been published on http://mocco.sk/comics-of-the-week-209/

Comics of the week #209

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

You don’t want these unique visitors

  The eternal question

  Doing research

Can you relate to these situations? Please share your funny stories and comments below…

Over 500 Colorful Christmas Illustrations – only $17!

New Post has been published on http://mocco.sk/weekly-web-mobile-creativity-n-39/

Weekly Web & Mobile Creativity n.39

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

Fall in Tennessee

Smoking Lung

Citi Bike

A Formula One History

Rook

Drexler

Home Turf

nclud

The Converted (iOS App)

You may also like to browse the Web & Mobile Creativity Archives.

Weekly Web & Mobile Creativity n.39

New Post has been published on http://mocco.sk/blueprints-for-web-and-print-specctr-a-free-adobe-illustrator-plugin/

Blueprints For Web And Print: Specctr, A Free Adobe Illustrator Plugin

   Have you ever submitted design files to a development team for production and a few weeks later gotten something back that looks nothing like your original work? Many designers and design teams make the mistake of thinking that their work is done once they’ve completed the visual design stage.

A design is more than a simple drawing on a canvas in Illustrator, Fireworks or Photoshop; it is a representation of function. “Form follows function” is a well-known principle, first coined in 1896 by the architect Louis Sullivan. How will the website work? How will that section fold? What happens when you hover over this button? How does that menu function?

Designers also know that the details will make or break a product’s usability. But designers are also responsible for not letting those details fall through the cracks in production. Yes, those 5 pixels do matter! The development or production team also needs to understand how the product will work and what it will look like in every scenario and variation of the product’s use. Annotating all of these scenarios can be a nightmare, but this is where Specctr can help.

Specctr is a plugin for Adobe applications. (Currently, versions are available for Fireworks, Illustrator and Photoshop, the first of which you can read about in “Blueprints for the Web: Specctr Adobe Fireworks Plugin”.) Specctr transitions a visual design to production by enabling you to specify form (spacing, width and height, colors, fonts, etc.) and function (hover states, transitions, user flows, etc.). It automatically generates a specification and creates a blueprint for the design, which saves time.

Note: The Specctr plugin for Adobe Illustrator has two versions, Lite and Pro. The Lite version is free for everyone but has some limitations. The Pro version is more powerful, is paid and has an “Expand Canvas” feature, and you can change the font in which the specification is displayed. Specctr Pro has other advanced settings that can be configured in the “Spec Options” tab in the panel, including options for the colors in the three types of specifications, the color mode (RGB, CMYK, HSL, HSB), etc.

Overview Of Specctr For Illustrator

Adobe Illustrator is a favorite tool of many designers because of its flexibility and versatility. Whether you use Illustrator for Web, print, identity or packaging design, Specctr may be useful to you, and in this article we’ll show you how. This plugin includes:

the width and height of elements;

text specifications (font family, font size, font color).

The main tab of the panel, the “Select Details” panel tab and the “Spec Options” panel tab in the Specctr Lite version. (see larger preview)

The width and height of elements as well as the text-specification abilities are most common to a designer’s workflow, which is why we included them in the free version. These two features alone should save you a lot of time. Additionally, the free version has the “Expand Canvas” feature and the option to change a specification’s font.

Requirements and Installation

Specctr Lite can be downloaded for free from our website (search for “Try Specctr Lite”). To use Specctr for Illustrator, you will need:

a Mac or Windows machine;

a copy of Adobe Illustrator CS5, CS5.1, CS6 or CC (Creative Cloud version).

The installation process is pretty straightforward:

Download the Specctr installer.

Double-click the downloaded ZXP file. The Adobe Extension Manager will open. Click on “Install.”

Restart Illustrator.

In Illustrator, go to Window → Extensions → Specctr in the menu to open the Specctr panel.

Note: If you are using Windows Vista+, you might need to launch the Adobe Extension Manager as an administrator, or else the extension could fail to install (this is a known limitation of the Adobe Extension Manager).

A Quick How-To Guide

After you install Specctr, you can spec a document in a few easy steps:

Adjust your settings in the “Spec Options” tab.

Select the options you want to display.

Make room for your specifications (optional).

Spec away!

The process of working with Specctr Lite and Pro is quite similar. The only difference is in functionality (Lite has fewer features).

1. Adjust Settings in “Spec Options” Tab

First, it’s a good idea to customize how the specifications will look. You can do this in the “Spec Options” tab in the Specctr panel. There, you can do the following:

Control how your specifications will look by adjusting font, color, size and line weight.

Set the color mode in which you want to spec: RGB (both rgb() and HEX modes are available), CMYK, HSL or HSB.

Assign different colors based on the type of specification: type object, shape object, and spacing and dimensions.

2. Select the Options to Display

In the “Select Details” tab in the panel, you can define (using simple checkboxes) which properties of objects to spec.

For example (as mentioned earlier), for shape objects, the following properties (or specification) can be generated by Specctr: fill color, fill style, stroke color, stroke size, opacity. And for text objects, the following properties (or specification) can be generated: font family, font size, font color, font style, text align, line height, letter spacing, opacity.

3. Make Room for Your Specifications

Optionally, you can expand the size of the artboard (or canvas) to make more room for the generated specifications. Use the numeric field next to the “Expand” button to increase the size (in pixels).

4. Spec Away!

Simply select any object(s) on the artboard, and then use one of the specification buttons: “Shape / Text,” “Width & Height” or “Spacing.” Specifications will be generated automatically for the elements selected on the artboard.

You can select two objects (by holding down the Shift key) to spec the space in between them. If only one object is selected and you press the “Spacing” button, then the distance from the object to the artboard’s edges will be displayed.

Here’s a brief screencast of this workflow:

Other Features

For maximum time-saving, you can spec multiple text and shape objects with one click. Simply select multiple (or all) objects and hit the spec button.

For better readability, line endings in Specctr will change depending on what you are spec’ing: a filled dot for text, an outlined circle for shape, and brackets for distance.

Line endings automatically adjust based on shape, text and distance.

Your specifications are automatically organized and grouped into layers so that you can quickly turn their visibility off or delete them.

Specifications organized into layers.

If many objects are close to each other, then there is a chance that specifications might overlap. To fix this issue, simply move and spread the specifications out. The arm that connects them to their object will always remain connected to the object, no matter where you move them on the artboard.

Please note that if you update an object after you’ve spec’d it, then the specification won’t update automatically; you must spec the object again. You don’t have to delete the old specification, though, because it will update with the new properties and remain in its current position.

A Note About Units

Specctr will use distance-based units based on the user’s settings in Illustrator (Edit → Preferences → Units). For Web documents, Specctr will always use pixels.

Illustrator’s “Preferences” dialog: Units.

Different Specification Scenarios

Web Design

There are plenty of reasons to use Illustrator for Web design. (Read Vincent Le Moign’s article “Productive Web Design With… Adobe Illustrator?” to hear some of the arguments.) Illustrator is fast, reliable, reusable and especially useful for designers who create both wireframes and final designs.

Specctr was created with Web designers in mind because of the myriad of screens flows that have to be created and spec’d. Although spec’ing is usually a process that only large design teams do, I’ve found the plugin to be helpful on small teams as well. With technology advancing and our capability to create more complex graphics, transitions and animations growing, there is an increasing demand for designers to spec their work. Interactions, responsive design and hover states should become clearer with a few notes and annotations attached.

Here follows an example of a one-page Web design made in Illustrator and spec’ed using the Specctr plugin. The first screenshot shows the large-screen version, and the second shows the mobile-screen version.

Example of a Web page spec’d with Specctr. The artboard contains the large-screen version; below it are shown three states of the same button (normal, :hover and :focus, and pressed). (View larger version)

Example of a Web page spec’d with Specctr. The artboard contains the small-screen (i.e. mobile) version. (View larger version)

Note: In Illustrator, you can use multiple artboards to create variants of the same Web page for different screen types; for example, desktop, tablet, mobile, etc.

Make sure to set up your document correctly for Web design work. Create Web documents with the “Align new objects to the pixel grid” option activated; always use whole pixel sizes for all objects; and select the RGB color mode. The “Align new objects to the pixel grid” option is especially important.

My recommended settings for Web documents in Illustrator. (View larger version)

Print and Packaging Specification

Unique print pieces (die cuts, special folds, etc.) require detailed instructions. Here is an example of a custom folder that was spec’d using Specctr for Illustrator.

A print design example. (View larger version)

Setting up your document correctly for print design is important, too. Here are the settings that I often use:

My recommended settings for print documents in Illustrator (View larger version)

Branding Guideline Book

A brand is the public face of the company. It conveys the mood and tone of the company and covers every detail of its communication with the public. A branding book is a vital step in a branding project because it establishes the rules and teaches collaborators how to use the new visual language; a rebranding campaign is only successful if it is used consistently and widely.

A brand book usually includes the logo, fonts, colors, textures and patterns, photographic and image styles, language and tone. The guidelines can get quite detailed and long.

Here is an example of a very brief brand book that uses Specctr for the nitty-gritty details:

Specctr for Illustrator can help you create a brand book.

Here are a few brand guidelines:

“Identity Guidelines,” Office of External Affairs and Communications, University of Cambridge

“Brand Assets,” MailChimp

“Brand Standards,” Nike Football

“Brand Manual” (PDF), University of Massachusetts Boston

“Adobe Corporate Brand Guidelines” (PDF), Adobe

“Branding Guidelines” (PDF), Barbican

To learn more about branding, I recommend Kat Neville’s article “Designing Style Guidelines for Brands and Websites.”

Conclusion

Being a successful designer takes not only creativity and design skills but the follow-through to see a project come alive just as you imagined it. A designer may create a well-crafted website or a beautiful logo or an elegantly packaged product, but chances are they won’t be the one bringing it to life.

Communicating and explaining your design both verbally and visually is a requirement for precise and successful results. This is especially true for large teams spread out over the globe. We hope the Specctr plugin for Illustrator helps you with this important task.

Plans for the Future?

Here’s what the Specctr team is working on next:

CSS exporting (the objects you spec will be the ones that are added to your CSS export);

Relative (i.e. percentage-based) spacing, to help you with responsive design tasks;

More options for iOS and Android design specs.

Please let us know which features you would like to see added to the next version of Specctr’s panels! You can also leave a comment here. We’d appreciate your feedback.

(mb, al, il)

New Post has been published on http://mocco.sk/how-smartphones-are-revolutionizing-diagnostic-medicine/

How Smartphones Are Revolutionizing Diagnostic Medicine

We have covered how smartphones can greatly enhance our lives, not just by being our lifeline to the online world, but also in changing aspects of our physical lives. After investing so much in keeping our smartphones safe, perhaps it is time that we utilize them to keep us safe and healthy.

In this post we are going to look at how medicine is harnessing the power of smartphones, to help detect damage, problems and diseases better, faster and cheaper. Some utilize the built-in cameras and GPS location feature, while others bank on the connectivity of the device to send feedback to professionals for diagnosis.

Not only does this help reduce the costs of healthcare, some of these kits and apps allow for early and fast detection of diseases, and in the process even save lies with early treatment.

Recommended Reading: 30 IPhone Apps To Help You Watch Your Health

Detecting Eye Cancer In Newborns

When taking pictures, we usually come across the red eye problem. Many photo-editing and camera apps have the feature to reduce or remove red eye for you. So it didn’t worry Bryan Shaw much when his wife showed him pictures of their son with one red eye and the other, milky white.

(Source: popsci.com)

A few months later, Noah was diagnosed with a rare eye cancer called retinoblastoma. Only 8000 children under the age of 5 have it each year, half of which succumb to it. The cancer develops as a tumor at the back of the eye, and reflects off as milky white in digital photos. The condition is called leukocoria or white-eye syndrome.

Bryan found that the symptom had been showing up in Noah’s baby photos since Noah was 12 days old, and his doctor told him if the cancer had been detected then, Noah would have been able to save his right eye – he is otherwise a very healthy and bright boy. Bryan has since teamed up with his son’s doctors and published a paper on how digital photos can help catch the early onset of leukocoria in newborns.

A Mobile EyeCare Clinic

90% of the the visually impaired (and blind) live in poor countries. Most have little to no access to medical aid or hospital care but Dr Andrew Bastawrous has a plan. He is using an app called Peek to help get eye problems diagnosed without the patient having to to leave their homes.

Peek allows healthcare workers to visit folks living in rural areas and run check-ups on their eyesight. From running basic vision eye tests, to scanning the affected eye with the smartphone camera, workers can take, then transmit these images to eye specialists for a diagnosis. Information about the patient’s identity and their location are logged in using the smartphone’s GPS.

(Source: bbc.co.uk)

When a problem is detected, the patient can be located using Google Map then retrieved and transferred for treatment at a health facility. The idea is being tested on 5000 people in Kenya to see if the process can deliver accurate results. If it works, this will provide a much cheaper alternative (only £300 per phone) and increased accessibility to eyecare for millions of people.

Battling Visual Impairment

Another device is the NETRA, a $2 clip-on eyepiece that you can attach to any smartphone. Together with EyeNetra, an app that can help detect farsightedness, nearsightedness, age-related blurriness, astigmatism, this combination can help detect refractive errors in the human eye. It helps determine if you need glasses, without the need of the regular heavy-duty equipment.

(Source: mit.edu)

The individual will look through the $2 eye piece and will click on buttons to align patterns that he sees on the smartphone screen. The refractive error is determined by how many clicks the patient requires to align the patterns correctly.

Like Peek, it is being field tested in 14 countries. For more about the project, click here. The team also has one called CATRA which helps detect cataracts in patients.

Fundus Photography

The equipment required for fundus photography, where you take a photo of the interior of the eye, costs up to hundreds of thousands of dollars. However, it is necessary for opthalmologists to check patients for eye problems. Well, at least it was.

Researchers from the Massachusetts Eye and Ear Infirmary recently published a paper describing how they were able to take high-quality fundus images using an iPhone 4 or iPhone 5. Along with an app called FiLMiC pro, the researchers could combine an iPhone with a 20D lens and with or without a Koeppe lens to produce fundus images of a patient’s eye even under less than optimum environment settings. The technique is an inexpensive alternative for opthalmologists, and also easy to learn.

Self-Check With Your Smartphone

The fact that more than 1 billion people have smartphones also opens up possibilities to use a smartphone and an app to monitor our conditions. Some of these apps were developed by researchers for the purpose of detecting specific diseases.

Deteriorating Eyesight

FDA-approved myVisionTrack is a monitoring app to help patients of degenerative eye diseases to track their conditions from home. The app allows patients to check their vision using “shape discrimination tests”.  The tests are deemed to be more accurate than Snellen Charts that are used in clinics and results from these tests can be relayed to their eye doctor via the app, without making a clinic appointment first.

Kidney Damage / Diabetes

Researchers at UCLA have built a device to detect albumin levels in a patient’s urine. The device shines light at a urine sample mixed with flourescent dye; a smartphone app processes the light to detect albumin concentration in urine then transfer the results to the doctors. The whole process takes only 5 minutes and can help diabetics and patients with kidney damage. The device can be produced for $50-$100 per unit.

Urinary Diseases

A similar app called Uchek, lets you detect up to 25 different urinary diseases just by analyzing a picture taken of a color-coded strip soaked in a urine sample. The strips and guide to decipher the resultant colors go for $20, while the app is only $0.99. Aside from being able to detect diabetes, this system allow allows the detection of pre-eclampsia and urinary tract infections.

Wrap Up

These are just a few of the apps that you can use at home, to detect early signs of a disease, or actively monitor the progression of an illness. While they are not to be replaced by an actual doctor or healthcare provider, they can help provide consistent data which could contribute to better, more timely treatment. Plus, owning a smartphone is now more than just about taking that epic selfie.

Related posts:

The Past, Present & Future Of Smartphones [Infographic]

Are Smartphones Putting Your Data At Risk?

10 Ways To Turn Your Smartphones Into Credit Card Readers

New Post has been published on http://mocco.sk/6-valuable-tutorials-for-web-designers/

6 Valuable Tutorials for Web Designers

Advertise here with BSA

Designers always need to be on top of their game to deliver great projects. From keeping an eye on everything that is new to always improving your techniques, you certainly need to be tuned to ways you can keep improving. To help you on that task we gather a few tutorials that will certainly make your life easier. Check it out!

Building an amazing fullscreen mobile experience

Creating Non-Rectangular Layouts with CSS Shapes

How To Create Flat Style Breadcrumb Links with CSS

Killer Responsive Layouts With CSS Regions

Tetris & the Power of CSS

New Post has been published on http://mocco.sk/guest-blogging-3-fatal-mistakes-to-avoid/

Guest Blogging: 3 Fatal Mistakes To Avoid

Editor’s note: This is a contributed post by Jawad Khan, a freelance writer and professional blogger with a keen interest in content marketing, blogging and WordPress. He blogs at WritingMyDestiny.com and you can contact him on Google+, Facebook or Twitter.

For many small businesses and aspiring entrepreneurs, it often proves challenging in the beginning to generate regular web traffic, establish credibility and acquire clients. Even if you consistently post high quality content on your company blog, it may still take a while before you can actually build a loyal following of readers (or prospective clients).

One way I’ve found to be effective in speeding things up and achieving all the aforementioned objectives is guest blogging on other more established websites. Sounds simple, doesn’t it? It’s not. There are 3 very common mistakes that often lay waste to all the hard work you have put into your guest blogging efforts. Here’s how you won’t fall victim to them.

Recommended Reading: 8 Tips To Getting Your Guest Post Published

1. Not Having a Clear Objective

The phenomenon of aimless guest blogging has been especially apparent since Google algorithms started becoming more quality-oriented. Don’t jump on the guest blogging bandwagon just because you see everyone else doing it. For any marketing effort to succeed in the long run, you must first have a clear objective in mind.

Picking The Right Limelight

Let’s say you’re looking to introduce your products or services to a particular market segment. You should then cast your attention to some of the top blogs in the industry that most of your prospective clients are likely to visit. This would help with building a credible image for your brand and generating qualified traffic.

The same goes for client acquisition as well. Submit guest posts to some renowned blogs that your prospective clients will likely visit.

Now, if your objective is to get backlinks, then your selection of target blogs will obviously change. A freelance writer myself, I made the mistake of guest blogging frequently on freelance writing blogs in the hope of getting clients. I did get traffic and backlinks from those guest posts, but not customers.

The reason? My potential clients are small businesses, tech startups and web design companies, and not one of them visits freelance writing blogs. In short, you should develop strategic focus and be clear about your objectives because otherwise, your guest blogging efforts won’t give you much return.

2. Pitching Low Quality & Spun Content

There’s probably nothing more detrimental to your brand image than this one – it’s a real brand killer! You should spend as much time on creating guest posts, if not more, as you would for your own blog as a poor guest post can actually deal more damage to your brand image than a low quality post on your own blog.

Unfortunately, an increasing number of guest bloggers are pitching used or spun content in their writing. First of all, spun content is not that hard to detect these days, and even if it doesn’t get identified, it still usually looks bad enough to be rejected.

Go For Quality, Instead Of Quantity

In my view, this tendency stems from the belief that you need to write a lot of guest posts to achieve any significant results – this is just plain wrong. Ask any content marketing expert and he would probably tell you to focus on the 80/20 rule, i.e. 80% of your results should come from 20% of your most focused efforts.

One high quality guest post on a credible blog is indeed much better than 10 low quality guest posts on substandard blogs.

By credible blogs, I’m in no way suggesting that you should target only the top blogs. Look for the mid-range blogs in your target niche with loyal readers and an active social media following. Unlike the top blogs, these blogs wouldn’t ask you for epic guest posts, but of course they would also not accept any substandard work.

3. Wasting The Exposure

The moment your guest post goes live, you’ll start getting referral traffic to your website from the links in your author bio. However, don’t make that common beginner’s mistake of letting your guard down at this stage. You need to have a clear plan for capitalizing on the traffic and exposure you get from your guest post.

One great way of doing that is routing the traffic to a particular landing page where you can make the visitors take action. For example, if your objective is to get subscribers for your new eBook, then all your referral traffic should be routed to your eBook subscription page. Similarly, if your objective is to acquire clients, then the traffic should be routed to either a dedicated sales landing page or your own services page.

In any case, just bear in mind that getting your guest post published is not the end of your guest blogging cycle – it’s just the first step.

Conclusion

As Google places more emphasis on high quality content with each update to its search algorithm, guest blogging is bound to become more prominent in the near future. But in order to take full advantage of this highly effective marketing channel, you need to set your sights on the big picture instead of merely looking for short-term benefits.

Be clear about your objective(s) and avoid the mistakes we have looked at in this post, and you will increase your chances of success considerably.

Related posts:

Guest Posts: 10 Tips to Distinguish the Good from the Bad

Guest Posting: 8 Tips To Getting Your Submissions Published

Bloggers: 10 SEO Mistakes You Should Avoid

New Post has been published on http://mocco.sk/25-flat-ui-kits-for-web-designers/

25+ flat UI kits for web designers

If you’re a living, moving, breathing person, then the chances are very high that you’ve heard of the newest infatuation in the design world, flat design. If you’re unsure, here’s a quick crash course: it’s flat color. This means there are no (or very subtle) gradients and we are no longer making buttons and other parts of user interfaces look three dimensional.

The sudden rush to this type of design honestly makes flat design feel like a fad. Everyone’s talking about it and everyone is doing it. Whether this will stick or if we will be doing something new in 2014 remains to be seen. Whatever the outcome, flat design is in right now. It’s the last push away from what Web 2.0 was and into what the future holds.

If you aren’t using flat design, today we’ve gathered a boat load of free and premium flat user interface kits. Let’s go right ahead and jump in.

Flat UI Kit by Riki Tanone (free)

Here’s a nice free PSD kit of some widgets that are popular to use in web design. This one also has a wonderful color palette.

  Flat UI Kit (PSD) by Devin Schulz (free)

This is a more extensive PSD for flat colors that has a very simple color palette. It includes everything from navigational buttons to tag styles.

  Eerste UI Kit (free)

Eerste was obviously made with the idea of keeping everything as simple as possible. There are so many elements to choose from in this PSD to help create a wonderful website.

  Metro UI kit (free)

This Metro kit reminds me a lot of what Windows is doing with their Windows 8 user interfaces. If you’re looking for something that bold, try this PSD kit out.

  Ui Kit by Abhimanyu Rana (free)

Here’s another pretty simple UI kit that has some interesting pieces. Most notably, those buttons are really nice, and the forms are very well put together.

  Flat Ui Kit by Zachary VanDeHey (free)

Most flat kits are very reliant on a great color palette. Zachary did something fairly different here by going with a very light, pastel color palette. It works!

  FREE flat UI kit by Visualcreative.cz (free)

This kit will probably need some editing once you get it into your project, but there are some nice pieces to start with thanks to this kit. The media player is definitely worth checking out.

  UI Kit (PSD) by Piotr Kwiatkowski (free)

Flat design is all about flat color, but every so often, you find a kit like this. While there’s a very subtle gradient on these colors, you can’t deny where the basic principles of this kit come from.

  Vertical Infinity (free)

This is a flat UI mega kit that you’ll definitely want to download. It has the various states of your buttons and navigation and it just has so many pieces that you’d probably forget about. This is a great free PSD.

  Flat/UI Kit by Sebastiaan Scheer (free)

I like this kit because it features a very popular color and makes it a monochromatic color palette. The typography is delightful as well.

  Flat UI Kit by Jan Dvorak (free)

This is just a wonderful kit that has little bits of character all over. I really enjoy the icons, navigation, media player and the graph. Very usable stuff in this kit.

  Flat Design UI Concepts (free)

This one is also reminiscent of Windows 8′s user interface, however this kit seems to vale consistency in their palette a little more. This is another pretty big kit that has lots of elements, especially for a blog of some sort.

  UI/UX Kit (free)

This kit comes with a variety of colors for you to choose from. It’s not as predictable as most kits in its design and stylistics, but it’s definitely something for those interested in doing something a bit different.

  Flat Bold UI Kit by Simon Eramo (free)

I love anything dealing with basketball, so when I saw this one, I knew I had to include it. Otherwise, this kit is beautiful, simple and offers many variations of buttons. Great for news and statistics sites.

  UI Kit by Huseyin Yilmaz (free)

This UI kit is a pretty standard and very solid iteration of what we love about flat design. You’ve got a sign up, profile window and much more to start designing sites with.

  Splash of Color Premium Kit (free)

The folks over at Ice Flow Studios created a FREE premium kit that focuses on minimalism. They embraced white space and the smallest of details while also adding a splash of bold color

  Flat UI Kit by Design Modo (free)

Last but not least, check out the kit DesignModo.com created. There’s a PSD available for the PRO version as well. Get it now if you haven’t already!

  Drops Flat UI Kit ($5)

If you’ll be working with graphs and infographics in your web design, you’ll probably want to invest in this kit. This one comes with a $5 price tag but includes some very useful graph elements.

  Pixels Flat UI Kit ($9)

This $9 kit not only includes tons of buttons and forms and such, but also includes skins for things such as a YouTube player and Behance profile. I actually see this kit being used greatly for musicians and super creatives.

  Atom UI ($10)

This flat color kit features a very slick, yet detailed look perfect for back end and front end design. And it’s affordable and well worth the money spent.

  Night Sky Theme ($18)

This theme was created with the back end user in mind. It’s an administrators theme, but has some great flat color elements from bar graphs to buttons. Perhaps you can take pieces of this $18 HTML/CSS template, which also includes the PSD.

  Flat Stroke UI Kit ($8)

The cleaner the better is a mantra many designers live by. Flat design is pretty clean, but to make it cleaner, many designers are starting to use just outlines to create their interfaces. Here’s an example and a kit that you can purchase for $8.

  Square UI ($39)

Square was originally created to help us designers create prototyped websites quicker than usual. Come to find out, it’s a pretty great set of flat color elements as well as some other necessary elements for web design. For $39, you get many things that will help you design better and quicker.

    UI Kit – Flat Design ($8)

This $8 flat design kit not only includes elements great for the web, but also for app development as well. The quality and detail in this set is stunning and adds a bit of punch to our normal set of flat elements.

  Flat UI Kit ($6)

This kit includes a PSD and PNG version for our developer friends who aren’t too design-minded. The elements included in this $6 kit are great for web and apps, have buttons, sliders and much more.

  Ultimate Flat UI Kit ($6)

The designer for this kit had their eye set on one thing: mobile design and development. If you’re looking for a bunch of elements specifically for smartphones, this is the  kit for you.

  Flat UI Kit ($4)

Buttons, icons and infographics are a huge part of this wonderful kit. The color palette is great as well, but easy to change. For $4, this is a nice little kit to have on hand.

  Metro UI Responsive Admin Template ($16)

Here’s another administrators template for those of us who want to design for the backend. They admittedly drew lots of inspiration for the flat color stylings of Windows and created a wonderful template to be used.

  Conclusion

Flat design is functional and fits into our other favorite style, minimalism. As the web transitions into a place where there should be less fluff, less beautification and more of what’s important, it’s hard to see flat design evaporating any time soon. My suggestion is to get one of these kits, learn the style, and implement it as quickly as possible. Flat design isn’t only the “in” thing, but it’s the smart thing.

  Have you used one of these kits? Have we missed your go-to UI kit? Let us know in the comments.

Over 500 Colorful Christmas Illustrations – only $17!

New Post has been published on http://mocco.sk/seo-for-responsive-websites/

SEO For Responsive Websites

   When Google announced its preference for user-friendly responsive websites in June 2012, I immediately saw an influx of posts that equated responsive design with search engine optimization. This is unfortunate because, while responsive websites can be SEO-friendly, some responsive websites are not.

I’ve detailed some of the common errors that give responsive websites problems in search results in an article on Search Engine Land earlier this year, so it’s nice to be able to do a more in-depth SEO audit of a responsive website here on Smashing Magazine.

I know not everyone’s definition of SEO is the same, so for those of you who don’t know my work, it should be emphasized that fixing all of these issues with SEO will improve the user experience in general; and like most credible SEOs these days, I don’t believe in manipulating search engine algorithms for short term ranking benefits.

The website I’d like to audit today is the US version of Disney Junior. I’ve chosen this website for three reasons: it’s not run by a client or a partner; it exhibits a lot of the SEO issues of many responsive websites; and my two and four year olds are huge fans of the brand and often use my smartphone or our family iPad to visit it. Hopefully, Disney can use this free advice to make its website better for my kids and kids like them who search.

This audit of Disney’s beautiful but often frustrating website shows that mobile SEO doesn’t end once you’ve made a website responsive, and it gives Disney a framework to make its website more usable and findable on search engines.

Is The Website Indexed?

Disney Junior doesn’t seem to have any real issues with indexing; many of its pages have been indexed by Google. See for yourself with a simple site:domain.com search, or verify it in Google’s Webmaster Tools if you use it.

Google has indexed approximately 1,630 pages of Disney Junior. However, the descriptions indicate that we might have problems with content parity.

Obviously a website that isn’t in a search engine’s index will be invisible when people search for it. This is true for responsive websites as well as for websites that use dynamic serving or dedicated mobile URLs. That being said, this tends to be more of a problem with mobile URLs because of the common practice of intentionally nofollow’ing mobile websites in the robots.txt file in order to prevent the mobile pages from competing with the “canonical” pages for link equity.

This practice is misguided because bidirectional annotations (or switchboard tags) can harness that link equity and bring mobile URLs into search results, but that’s neither here nor there when it comes to responsive websites.

While Disney Junior is indexed, some responsive websites, such as Idis are not so lucky. Idis is responsive and innovative, yet only one page of the website has been indexed by Google. Because the website is dynamic and because _escaped_fragment_ hasn’t been used, the URL does not change when a user clicks on different website elements, thus depriving search engines of deep links to include in their indices. If anyone searches for text on any of these pages, they won’t find this interactive, award-winning website.

This could happen to any website that doesn’t have static URLs, of course, but mobile SEO isn’t done once the developer has decided whether to make their website responsive or use dynamic serving or use dedicated mobile URLs.

Is The Website Crawlable?

In order for any website, responsive or not, to be indexed, Google must be able to crawl the website — that is, to follow a link to every unique piece of content and then store that new URL.

To check this, run any website crawler, such as Xenu or Screaming Frog. I prefer Rob Hammond’s SEO Crawler for mobile SEO audits because it allows you to set the smartphone Googlebot as your preferred crawler. The number of URLs is limited but enough to give you a pretty good idea of any crawlability issues. If you own the website, verifying it with Google and with Bing is imperative. Both search engines have tools for developers that specify the crawl errors they encounter, and Google even lets you tell it to ignore certain parameters that might be causing problems. If you don’t own the website or can’t verify it, you can still identify most problems by crawling the website as described above.

When I crawled Disney Junior, it quickly became apparent that the content is hosted on several URLs: DisneyJunior.com, DisneyJunior.Disney.com, WatchDisneyJunior.Go.com and Disney.Go.com/DisneyJunior. This could hinder a search engine from assigning page authority, because a search engine’s spider has a limited crawl budget for every website, based on that website’s PageRank, so if you’re splitting your PageRank between four URLs and three domains, then you’re possibly presenting to Google a website architecture that is less than optimal. More on this later in the section about duplicate content.

Disney’s URLs themselves don’t seem to have any major issues with crawlability because they are mainly static URLs, which search engines have an easier time with. However, the site map could certainly be improved upon. Search engines jointly announced Sitemaps a few years ago as the convention for finding content on websites to index. DisneyJunior.Disney.com does have a site map, but there are a few problems with it, the biggest being that it’s a video site map that contains more than just videos.

Site maps are a way for site owners to communicate directly with search engines, so making the information as accurate as possible and not confusing search engines are imperative. Google has site maps for the many different kinds of content included on Disney Junior, so presenting separate maps for images, videos, HTML documents and so on would be best.

Crawlability is not a mobile-specific problem, but getting it wrong can harm a website intended for mobile users just as easily as it can harm a traditional website, and it needs to be done right regardless.

Recommendation

Disney should consider hosting all content on a single subdomain to ensure that search engines can properly identify page authority and to ensure that all relevant URLs are crawled efficiently.

Disney should also consider breaking down its single video site map, which contains all types of content, into individual site maps for HTML content, image content, video content, etc.

Is The Website Readable Without Images, Flash Or JavaScript Enabled?

A search engine cannot factor what it can’t see into the overall relevance of a page. And while Google can do some amazing things with optical character recognition in Google Glass, Google Drive and Google Goggles, it still only reads text for Google Search. As it says in its “Webmaster Guidelines”:

Create a useful, information-rich website, and write pages that clearly and accurately describe your content.

Think about the words users would type to find your pages, and make sure that your website actually includes those words within it.

Try to use text instead of images to display important names, content, or links. The Google crawler doesn’t recognize text contained in images. If you must use images for textual content, consider using the “ALT” attribute to include a few words of descriptive text.

Is Disney’s responsive website text-based and information-rich, and does it include terms that people would actually use when searching? Not really. If we look at the website through a simple text browser, like SEO-Browser.com, to get a better sense of how a search engine sees the website, then we get a much different picture than accessing it in a browser:

Unlike websites that embed keywords in images or in Flash, search engines aren’t blocked from seeing relevant content here — there’s just not a lot of relevant content to see. The website isn’t readable in this case because there are no words to read.

If we look at a deeper-level page, we’d see some graphic text that search engines would have a hard time accurately processing.

The text beginning with “Watch Sam Sandwich…” is accessible, but the words in the logo “The Bite-Sized Adventures of Sam Sandwich” are not because they are embedded as a graphic.

Recommendation

At the very least, Disney should make embedded text accessible as alt text.

When the text is substantial, the developer should consider making it accessible in a Web font, rather than as an embedded graphic.

Furthermore, the volume of relevant keywords, such as “games for kids” and other non-brand words, should be increased. This could be done by slightly expanding the text block on each page or, ideally, by designing the page to include some scannable text, keeping progressive enhancement in mind.

Is The Website Easy To Link To And Share?

Many websites, both responsive and not, have URLs that don’t seem to be intended for human consumption. This is detrimental to SEO, of course, mostly because the URLs aren’t memorable and are difficult to share. Given how important search engines view sharing and linking when ranking pages, the more we can do to facilitate linking and sharing, the better off we’ll be in search results.

The print and video URLs for Disney Junior fall into this category, adding random characters to otherwise memorable paths (http://disneyjunior.com/print/stethoscope-4e4e43e2e8368d71cf2086da). For the most part, though, the URLs include keywords and are easy for users and search engines to understand.

The website could go one step further and include social bookmarklets to enable users to share content on social networks. Disney Junior has an active presence on Facebook, Twitter and YouTube, so its creators must understand the value of social media. But they might not understand that leveraging social media is becoming important to organic discovery and search. And given that 78% of Facebook’s user base is mobile and that mobile users spend more time on social networks than PC users, then helping mobile searchers share content whenever they’d like makes sense.

This isn’t a tutorial on how to make social buttons work on a responsive website, but Facebook’s mobile “Like” button works on responsive websites. However, for performance considerations, it’s a good idea to use social sharing buttons or SocialCount that use lazy loading to load the actual social scripts on click. If you use a third-party plugin, such as AddThis, there are ways to make those compatible with a responsive website as well.

Recommendation

To increase referrals from social networks and to facilitate content discovery, Disney Junior should incorporate social-sharing buttons that are responsive, that add to the overall experience but that don’t significantly increase page-loading time.

Does The Website Display Content For Users’ Needs, Regardless Of The Device Used?

Those who champion “content parity” have a worthy cause in making websites accessible to everyone, regardless of device. Unfortunately, the issue is a little complicated. Making content available on all platforms is sometimes good for users, other times not.

Disney Junior is fairly representative. It deprives users of relevant content, fails to connect relevant content to users who need it, and gives users content that they have no chance in the world of ever using. Unfortunately, in my experience this is fairly typical of responsive websites, many of which don’t go far enough to make all content accessible, regardless of device, and which provide content that’s unusable on mobile devices.

Google sees one weakness so often on mobile websites that it has threatened to penalize for it in smartphone search results: unplayable videos. In June 2013, Google said this:

“We recommend using HTML5 standard tags to include videos and avoid content in formats, such as Flash, that are not supported by all mobile devices. Regardless, try your best to offer smartphone users the best experience possible to make sure that the videos are playable on as many devices as possible.”

So, when I encounter many screens like the following when trying to play Disney Junior videos, I get a little concerned:

Not supporting a piece of content for mobile users could lower your ranking in smartphone search results.

In some cases, though, Disney Junior goes too far with content parity. The four main sections of the website are games, videos, printables and a live feed. The problem is that unless a user is not only aware of Google Cloud Print but is one of the handful of people who has it installed on their device, they won’t have any way to print the coloring pages or other printables.

I have no idea how many people have actually printed these PDFs from mobile devices, but I’m guessing that the vast majority of people who attempt to access this content leave in frustration. I have no evidence that Google actively penalizes a website for unplayable videos, but it announced that it would more than four months ago, and it could start any day. Regardless of the impact on ranking, fixing this issue would make the website more usable to whoever visits.

One quarter of the content on Disney Junior is inaccessible on mobile devices.

No doubt, printables and coloring pages are a popular feature on desktops and laptops, and users actively look for such content. On mobile devices, it’s an entirely different story.

According to Bing Ads Intelligence, which lets you see search volume by device, less than 5% of the total search volume for “coloring pages” comes from mobile devices. The reason is that most mobile devices aren’t connected to a printer, thus rendering such content unusable.

It’s worth noting that Disney has made huge strides on its responsive website at Disney.com since I addressed this issue in April 2013. None of its Flash games had been accessible to smartphone users, and it’s since made most of them compatible with HTML5. So, fixing these issues that plague both responsive and dedicated mobile websites is possible, but it won’t happen by itself.

Making this content available to all users is fine, but if Disney is going to do this, then it needs to explain that, before printing it from a mobile device, the user will have to download Google Chrome and/or the Google Cloud Print app and connect their device to a printer. If Disney doesn’t do that, then a lot of confused and unhappy kids will be left staring at a PDF on their mobile device, wondering how to print it. Disney could also consider making the feature less prominent on its home page for mobile users.

Finally, what’s missing from Disney Junior’s responsive website is any mention of the mobile content that is actually available. Assumptions on user behavior are always tricky, but in this case it’s quite safe to assume that mobile users would be looking more for apps and mobile games than for printables. However, the first search result for “Disney junior apps” in Google takes the user to a non-responsive page, before giving them an error message due to the absence of Flash.

“Dad, what is this?!” says my four-year-old son as he tries to watch Disney Junior on my smartphone but is redirected to a page that tells him to download Flash.

What’s more, when it comes to “mobile games,” a phrase that people search for more than 12,000 times a month, Disney is nowhere to be found. It’s a shame, because Disney’s games, being compatible with smartphones, are relevant to the term, but they won’t be found in relevant search results because the term isn’t included. And not appearing in relevant search results is definitely not search engine optimization.

These figures for search volume of Disney-related keywords by platform show that mobile users often search for different things and at a different frequency than users on desktops and laptops.

Recommendation

Disney Junior has three opportunities to improve the accessibility and relevance of its responsive website:

Ensure that all videos and games are playable on most smartphones before Google makes good on its promise to penalize websites for unplayable videos. This will also improve the user experience and reduce the number of frustrated visitors.

Rethink the website’s information architecture. Highlighting printables and coloring pages for mobile users doesn’t make sense if these users have no way to print them from their device.

Ensure that the website contains all relevant keywords, regardless of platform, so that the many people who search with platform-specific keywords, like “mobile games” and “iphone apps,” can find relevant content on Disney Junior.

Does The Website Load Quickly?

When I echoed the claim of Guy Podjarny, Akamai’s evangelist, in Search Engine Land that responsive websites are often bloated and slow, I was met with a lot of hostile comments. Many thought I was saying that responsive websites cannot be fast. Of course they can be made fast; unfortunately, most are not (PDF).

This is not just bad for performance, but can be detrimental to SEO as well. When Google pointed out common mistakes that it might soon penalize for, it put slow-loading pages on the hit list. Fortunately, Google has given developers many resources to make their websites faster, including the PageSpeed Insights tool. Following the recommendations made by this tool will go a long way to making your website load in one second or less, which is what Google recommends for optimum mobile performance.

Disney Junior takes more than seven seconds to load on average, and Google gives it a score of 71 out of 100 for page speed.

Akamai’s Mobitest tool is great for showing how long a page takes to load on mobile devices.

Google’s PageSpeed Insights follows the color coding of stop lights to indicate the priority of its recommendations.

Much has been written in the design community about the performance of responsive websites. At the very least, a responsive website should follow Google’s guideline of loading in less than a second.

Recommendation

Disney Junior should follow Google’s PageSpeed Insights and optimize its images, eliminate render-blocking JavaScript and CSS in content above the fold, and reduce page-loading time overall to one second or less.

Does The Website Try To Get You To Download An App Instead Of Showing What You Asked For?

WTF Mobile Web lists many websites that attempt to get users to download an app, instead of immediately showing them relevant content — a technique known as a door slam. Rotten Tomatoes is typical:

An app interstitial is shown to smartphone users who access Rotten Tomatoes’ website.

This used to be merely annoying to users — until June 2013, when Google added it to its list of things to penalize websites for. Now it should annoy all website owners, too.

These door slams usually happen when the website detects the user agent to be a mobile device. They’re rarer on responsive websites, in my experience, because most owners of responsive sites are happy to let users freely access their content, instead of trying to persuade them to switch to the app experience.

Disney Junior is the exception to the rule. If you attempt to watch one of its videos on your mobile device, the page will redirect you to an app. If you’re on an Android device, you will be redirected to an app that doesn’t exist:

Android users who click on the “Watch Disney Junior” link on the home page are greeted with this message.

If you include app interstitials on your responsive website, then now is the time to consider whether their business value outweighs the prospect of not appearing as often in Google search results for relevant queries on smartphones. As far as I can tell, Google hasn’t yet begun to penalize for this infraction; however, as with unplayable videos, it’s only a matter of time before it does.

Recommendation

Disney Junior should remove the app interstitial or at least turn it into a banner that is not disruptive. Smart banners are available on Android and on iOS as replacements for app interstitials.

Including a smart banner on iOS is as simple as adding the following meta tag to the head of the page, with the relevant App Store details:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Adding a smart banner on Android is not quite as simple, but it can be done through AdMob. Some developers have simulated iOS’ banner on Android using jQuery.

Does The Website Contain Duplicate Content?

Duplicate content has been preventing relevant pages from ranking for given queries long before smartphones came around. Now, it gets even more complicated. In case you don’t know, duplicate content is a single piece of content that exists on more than one URL. It makes a page less competitive because its PageRank indicators are dispersed.

Mobile subdomains are usually the culprit of duplicate content, as my case studies demonstrate. However, just because a website is responsive doesn’t mean that duplicate content is not possible. In fact, checking for it is important for any website, mobile-friendly or not. Neglecting it means letting Google itself identify the canonical page for a given piece of content, which doesn’t always end well for the website owner.

We shouldn’t take chances. Instead, we should ensure that search engines can understand which pages are intended for users and which pages are just copies of canonical pages. We can give search engines as many signals as possible to alert them to canonical pages (such as by including canonical tags, by adjusting the handling of parameters in Webmaster Tools, and so on).

As mentioned earlier, Disney Junior has quite a bit of duplicate content. But according to the source code, it has added canonical tags to tell Google and Bing which pages to rank. So, we have no recommendation for Disney on this one.

If you’re not familiar with canonical tags, it’s as simple as adding the following tag to the head of any duplicate page:

<link rel="canonical" href="http://www.disneyjunior.com"/>

The URL referenced in this tag should be the canonical URL for the given content. Some of Disney Junior’s properties do have a slight problem of duplicate content. Chuggington.com, for example, has equivalent content on DisneyJunior.com/Chuggington. If Disney wanted to set Chuggington.com as the canonical URL, it would simply add the following tag to DisneyJunior.com/Chuggington:

<link rel="canonical" href="http://www.chuggington.com"/>

Does The Website Take Advantage Of Mobile Devices To Deliver Extra Value?

Disney Junior doesn’t show anything unique to mobile devices. This might or might not be intentional, but it ignores opportunities to delight the consumer with device-specific content.

Back in 2008, one analyst predicted that mobility would create an entirely new Internet, filled with voice-recognition apps, GPS and scannable content, and hosted on .mobi domains. He called it the mobile ’net and thought that it would be separate from the Internet as we knew it.

It reads a little like science fiction today, with silver mylar-clad people jetting around in flying cars and on hoverboards, but the author was spot on with one thing. He basically predicted Uber, the mobile ride-sharing app that is disrupting the taxi industry. And the article foreshadows the purchase of mobile-first photo app Instagram by Facebook for $1 billion in April 2012. Smartphones and tablets have different properties than PCs, and they are often used in situations where a PC would be impractical, thus instilling behaviors and patterns that previously did not exist on the Internet.

GPS enables users to find things around them with Google and Bing, and search data is showing that users are taking advantage of it, using terms like “navigate to,” “closest” and “near me” primarily on smartphones and tablets. Shopping-related searches are two times more likely to happen in-store now, and 70% of mobile searchers call businesses directly from search results — something they can’t really do on a PC. Granted, many people search for the same things on their mobile devices as they do on their desktop computers, and they often do it when they’re not on the go. However, 17% of them are on the go, and all of them have access to things like GPS, the camera, the accelerometer and the phone, which aren’t available on desktops and laptops.

Today, these mobile-first experiences are sometimes built on the Web (i.e. not a separate mobile Web) and more often in apps. From an SEO standpoint, they make the most sense on the Web. In its “Webmaster Guidelines,” Google says, “Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.” And it echoes this sentiment in its “SEO Starter Guide” (PDF), saying that “creating compelling and useful content will likely influence your website more than any of the other factors discussed here.”

In short, great content that people find useful will be linked to and shared, which will alert Google to its quality. But an app probably won’t appear in search results unless the user types the word “download” or “app” or the app’s name in their query, and Google cannot process or index deep links within apps. The way to make content as accessible to mobile users as possible is not to put it in an app, but to put it on the Web.

The problem is that doing this with a responsive Web design, as Google defines it, is difficult. Many responsive websites make great use of geolocation (such as Starbucks’), but most use JavaScript or server-side components to accomplish it, which is beyond Google’s scope of a responsive website.

Still, some websites do offer content that would be very useful to someone on a smartphone or tablet, which might differentiate those websites just enough for Google to rank them higher than competitors. One of my favorite examples is Sears, which uses dynamic serving on its mobile website to give smartphone users a scanner to compare competitors’ prices with Sears’ online prices. This empowers consumers to find the best price, while combatting the practice of “showrooming” by making it easy for people to find the best prices at Sears.

Sears’ mobile website enables smartphone owners to scan items to compare against Sears’ prices.

Another great example is Lowe’s, which provides an in-store map on the location-related pages of its mobile website. It’s a small addition, but it helps users find what they’re looking for faster once they get to the store, and it potentially differentiates the brand.

Lowe’s provides an in-store map on the location-related pages of its mobile website.

Recommendation

Disney Junior should consider mobile-specific opportunities to differentiate its content from that of competitors and to add value for users.

Conclusion

Unfortunately, creating a responsive website alone won’t be enough to be properly optimized for search results. If you’re keeping score, more than half of the content that Disney Junior’s responsive website highlights is unusable on smartphones. The website is beautiful, to be sure, and Disney deserves credit for trying to make its content accessible to users, regardless of device. But can a website like this really be called “responsive”? It contains all the ingredients of a responsive design; however, responsive means “reacting quickly and positively,” which this website fails to do in many ways.

User-friendly responsive Web design is preferred by Google, and Google doesn’t (intentionally) send traffic to websites that frustrate users, or to websites that don’t contain the keywords that people are including in their queries, or to websites whose content is not more compelling than that of competitors. Hopefully, this audit has taken you beyond just thinking about mobile configurations when tackling mobile SEO. And hopefully you feel equipped to really make your own responsive website competitive in search results.

Start with these basic SEO tips, which many responsive websites do not follow:

Make sure your responsive website has been indexed by doing a site:domain.com search in Google and Bing. If it hasn’t, then merely making the website responsive will not improve its visibility.

Ensure that search engine spiders can crawl your website and that they index every unique piece of content once. Responsive websites should have static URLs, without difficult-to-crawl characters such as hashbangs, if possible.

A site map will make your website more crawlable. But use the proper type of site map for the content, and follow protocol.

Include enough plain text that search engines can understand what the website is about, without needing access to image- or Flash-based content. Progressive enhancement is a useful method of building pages that are accessible to search engines. Use SEO-Browser.com to check your work.

Try to include relevant keywords in your URLs, and make pages easy to remember and share by avoiding long strings of human-unreadable characters.

Include responsive social bookmarklets to help mobile users share your content on their social networks. But keep an eye on page speed.

Don’t highlight content that users can’t access on their device. Content parity is great, but serving device-specific content to the wrong devices goes too far.

Don’t make all of your content adaptive. Users often look for device-specific content (such as mobile games, apps, mobile coupons, etc.). Including relevant keywords is the only way to get traffic from search engines.

Make your responsive website load in less than a second, using Google’s PageSpeed Insights and Akamai’s Mobitest. Not doing so could hurt you in search results for smartphones.

Use smart banners to promote your app, instead of the more disruptive interstitials.

Identify content that exists on more than one URL, and use canonical tags and permanent redirections to tell search engines which pages to show in search results.

Make sure that adaptive content and responsive Web design are really the best way to serve your users. Not every website is a traditional publication, and sometimes users have needs that are difficult to address with a single information architecture.

If responsive Web design truly is best for your users, then enhance your adaptive content by adding useful features (such as a scanner or GPS locator), using server-side components.

(al, ea, il)

New Post has been published on http://mocco.sk/retinize-it-photoshop-action-to-optimize-images-for-ios/

Retinize It – Photoshop Action To Optimize Images For iOS

One of the peeves of a web designer’s daily routine is to sit down and do repetitive image slicing, and making sure the images are web-compatible. With more and more gadgets supporting high-definition display, this situation adds more workload to an already boring job as designers have to produce 2 sets of images: one for regular resolution, the other for high-definition resolution.

If you are one of the designers who face this problem, here’s a handy tool that you might just be interested in: Retinize it.

Recommended Reading: Convert PSD To CSS3 Easily With CSS3Ps

In a nutshell, Retinize It is a photoshop action. Create by Artiom Dashinsky, this free plugin slices and scales images (repetitively) for HD screens. It will save you hours on the job, if not days.

Using Retinize It

To use the plugin, hop over to Retinize.it to download the plugin, then double-click the file to add it into Photoshop.

Go to the Windows > Actions panel in Photoshop and you will noticed that two actions, "Slice it!" and "Retinize It!" have been added. And here’s what they each do:

Slice it – As it’s name suggest, this action slices layers down to web-compatible images.

Retinize It! – This other action on the other hand, does two things. First, it saves images in normal size, then it scales images to two times larger (2x) for high-definition screens.

To see how Retinize It fares, we tested it with this weather icon set by Adam Whitcroft. We selected one of the layers and ran the Retinize It! action.

The first process saved the image in normal size, as expected.

After first image is saved, it proceeded to run the second action, scaling the image 2x bigger for the Retina display. As you can see in the screenshot below, the icon has been scaled up by 200%.

We inserted @2x in the filename before the file extension. Apple uses this suffix to pick up higher-resolution images and serve those in Retina display. (You can also use Retina.js in conjunction, which does a similar task – serve image with @2x suffix in high-definition screen.)

Note: It is highly advisable to use Shape or Smart Object layers in order to retain the image quality.

Final Thought

Retinize It is a recommended tools for web designers. It will reduce the workload when it comes to slicing and creating images for high-res use. For more on this subject, you can head over to the following references.

Supporting High-Resolution Screens In Views – iOS Developer Library

Towards A Retina Web – Smashing Magazine

Related posts:

How to Set Keyboard Shortcuts for ‘Play Action’ in Photoshop

Fresh Resources for Designers and Developers – June 2013

Retina Display Ready with Media Query

New Post has been published on http://mocco.sk/creating-an-rss-feed-using-php-and-pdo/

Creating an RSS Feed Using PHP and PDO

Using an RSS feed on your website is a great way of letting your visitors, search engines or directories, get a hand on your content. RSS feeds are common practice on most blogs and CMS platforms including WordPress, Joomla and evenly the newly released Ghost. If you’re using a CMS or similar platform, the likelihood is that you won’t need to implement an RSS feed yourself.

So when might you want to add an RSS feed manually? Let’s take the example of a developer who has put together a bespoke web software application, their own CMS or potentially, you’ve put together a little blog/news section for a client you may have. You may want to add the ability to publish your content to a variety of directories or news and feed websites. Well now, it’s simple. Below you’ve got the step-by-step process to create anything from the simple, standard-compliant RSS feed – up to the more advanced.

The additional tags that will be covered in this article include the category and image elements. Both of which can be expanded on to provide an RSS feed dedicated to sorting data into specific categories; you could take the guid element and match a unique ID to a given collection of categories. Or similar, you may have a photo-focused website, perhaps an image sharing tool? You can bunch your image tags together and send them over in an RSS feed allowing others to subscribe easily to your updates!

What is an RSS Feed?

RSS stands for ‘Really Simply Syndication’ and it is the family of web formats to publish frequently updated content. An RSS feed can then be read by a feed reading software or by another website that may wish to display the content of your feed.

An RSS document is built using XML and implements a handful of standardised tags that allow us to output certain information about our content. This is a little snippet from the RSS feed from my site at ALJT Media:

<?xml version="1.0" encoding="UTF-8"?> <rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"> <channel> <title>ALJT Media</title> <link>http://www.aljtmedia.com/</link> <atom:link href="http://www.aljtmedia.com/blog/feed/" rel="self" type="application/rss+xml"/> <description>Latest blog articles from ALJT Media</description> <language>en-gb</language> <item> <guid>http://www.aljtmedia.com/blog/so-what-is-pantone</guid> <title><![CDATA[ So, What Is Pantone? ]]></title> <description><![CDATA[If you don&#039;t know already, you should. Pantone&nbsp;is&nbsp;the&nbsp;way for designers to communicate printed colour. It is the standard language for colour communication from designer to manufacturer to retailer to customer.]]></description> <link>http://www.aljtmedia.com/blog/so-what-is-pantone</link> <dc:creator>Adam Churcher</dc:creator> <pubDate>Sun, 03 Nov 2013 08:36:48 -0500</pubDate> <category><![CDATA[ Colour ]]></category> <category><![CDATA[ Design ]]></category> <category><![CDATA[ Pantone ]]></category> <category><![CDATA[ Print ]]></category> </item> </channel> </rss>

With search engines and the likes of Google and Yahoo pushing and driving forward the focus on unique content, an RSS feed is a great way to distribute and allow others to easily get hold of your content. We’ll be looking into implementing the Dublin Core tags and additional tags you can implement to provide search engines with more of a ‘structured data’ feel to your content.

Creating Your RSS Feed

To create an XML file, we have to dynamically loop through the data we want to display and output our XML tags. To do this, we’re going to focus on implementing unique search engine optimized tags into our RSS feed, however you’re able to take advantage of free PHP RSS feed writer classes that are widely available.

In this example, we’re going to assume the very simple database schema and that we have setup a database connection using the PDO class (it’s very easy to recreate the example in MySQL, but I’d highly recommend using a non-deprecated SQL class).

/** * Setup our database instance. * Full details on why you should be using PDO: http://aljt.in/3j */ try # MS SQL Server and Sybase with PDO_DBLIB $DBH = new PDO("mssql:host=$host;dbname=$dbname, $user, $pass"); $DBH = new PDO("sybase:host=$host;dbname=$dbname, $user, $pass"); # MySQL with PDO_MYSQL $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass); # SQLite Database $DBH = new PDO("sqlite:my/database/path/database.db"); catch(PDOException $e) echo $e->getMessage(); # Create the RSS feed $rssfeed = '<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"> <channel> <title>Your RSS feed Title</title> <link>http://www.example.com</link> <description>This is an example RSS feed</description> <language>en-gb</language> <copyright>Copyright (C) 2013 example.com</copyright>'; # Let's query our data $statement = $DBH->prepare("SELECT * FROM data ORDER BY date DESC"); $statement->execute(); $statement->setFetchMode(PDO::FETCH_ASSOC); # Check we've got some results if($statement->rowCount() > 0) # Loop over the rows while($row = $statement->fetch()) $rssfeed .= '<item> <title>'.$row['title'].'</title> <description>'.$row['description'].'</description> <link>'.$row['link'].'</link> <pubDate>'.date("D, d M Y H:i:s O", strtotime($row['date'])).'</pubDate> </item>'; # Close RSS feed $rssfeed .= ' </channel> </rss>';

In the code above, we’re fetching the information required from our table using the PDO execute option. We set the ‘fetch mode’ as an associate array so we can map our column names on each row to their values. The example will use a simple while loop that’ll keep checking if we have any more data to output. The query can be adjusted to display the latest 15, 30, etc.. records by altering the SQL query.

Implementing Dublin Core

Dublin Core is a widely used Ontology that allows us to express more information about the content we’re outputting. To begin, we need to add some XML namespaces to our XML tag. This lets the XML document know what information we’re describing by using the consequent namespace schema. The schema will specify the data type, format, accepted values, range constrains, etc.

Our new code will look like this:

# Create the RSS feed $rssfeed = '<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/"> <channel> <title>ALJT Media</title> <link>http://www.aljtmedia.com/</link> <atom:link href="http://www.aljtmedia.com/blog/feed/" rel="self" type="application/rss+xml" /> <description>Latest blog articles from ALJT Media</description> <language>en-gb</language> <copyright>Copyright (C) 2013 aljtmedia.com</copyright>';

Now we want to adjust the loop section. In this, we’ll be adding the encoded tag from the content schema (content:encoded) this allows us to output the entirety of the content data. We can use this to append ‘ShareThis’ or ‘AddThis’ buttons so that RSS feed readers will pick up and display the icons to share the content. Additionally, we’re going to add creator information from the Dublin Core ontology, this will allow search engines to identify the resource owner.

$rssfeed .= '<item> <title>'.$row['title'].'</title> <description>'.$row['description'].'</description> <guid isPermaLink="true">'.$row['link'].'</guid> <link>'.$row['link'].'</link> <pubDate>'.date("D, d M Y H:i:s O", strtotime($row['date'])).'</pubDate> <content:encoded><![CDATA['.html_entity_decode($row['content'], ENT_QUOTES, 'utf-8').']]></content:encoded> <dc:creator>'.$v['author'].'</dc:creator> </item>';

Adding Image and Category Information

We’ve now got some understanding of what the content is about through the description and encoded content. We’re also going say who the creator and author of the content is. But how do we associate the data with an image, say a featured thumbnail or article image? And how do we assign the data to particular categories?

For the categories, I’m working off the assumption that categories will be stored as a comma separated value (for ease of simplicity) though you’re able to normalize the data in your database schema and take advantage of the group and concatenation functions available in SQL.

$rssfeed .= '<item> <title>'.$row['title'].'</title> <description>'.$row['description'].'</description> <guid isPermaLink="true">'.$row['link'].'</guid> <link>'.$row['link'].'</link> <pubDate>'.date("D, d M Y H:i:s O", strtotime($row['date'])).'</pubDate> <content:encoded><![CDATA['.html_entity_decode($row['content'], ENT_QUOTES, 'utf-8').']]></content:encoded> <dc:creator>'.$v['author'].'</dc:creator> <image> <link>'.$row['link'].'</link> <url>'.$row['image_source'].'</url> <title><![CDATA['.html_entity_decode($row['image_title'], ENT_QUOTES, 'utf-8').']]></title> <description>'.$row['image_caption'].'</description> <height>'.$row['image_height'].'</height> <width>'.$row['image_width'].'</width> </image>'; # Get our categories # Assuming: RSS,Feed,Example,PHP if(!empty($row['categories'])) $categories = explode(',', $row['categories']); if(!empty($categories)) foreach($categories as $tag) $rssfeed .= '<category>'.$tag.'</category>'; $rssfeed .= '</item>';

Now you’ve got your media, category, author and content details pulled in – success!

Linking to your RSS Feed

Once you’ve saved, setup and tested your feed you’re able to easily link to it from within your HTML head. Simply add this one line of code: (we’re assuming you’ve made a directory called feed and saved it as index.php)

<link rel="alternate" href="/feed/" title="RSS feed" type="application/rss+xml" />

Hopefully you’ve now got your own RSS feed setup and working correctly.

If you’ve found this tutorial helpful, please comment below or give us a thumbs up and share the link onwards and upwards.

Creating an RSS Feed Using PHP and PDO

New Post has been published on http://mocco.sk/deal-of-the-week-alana-pro-script-font/

Deal of the week: Alana Pro script font

The constant geometric precision of screen-based design is enough to dehumanize any design project. The best way to counter that is with a typeface that screams “hand written!”

That’s why we’re delighted that our sister-site, MightyDeals.com, has been able to arrange a huge discount off Laura Worthington’s Alana Pro.

Alana Pro is an award winning typeface, having received the MyFonts Best Fonts of 2011, Ascender Fonts — Best Fonts of 2011, Typographica’s Best of 2011, and 2012 Communication Arts awards.

Named for Worthington’s little sister, the typeface oozes feminity and affection. It is inherently formal, but breaks out into spontaneous moments of playfulness, especially in some of the 341 alternates, that are so important to any handwriting font.

Alongside the standard characters, there are 62 ornaments providing some charming hand-drawn illustrations of leaves, flowers and birds.

Look closely and you’ll see that all of the glyphs — characters and ornaments — have been treated to a rough, uneven edge giving the design a wonderfully earthy and wholesome feel. If you’re working on a design for a healthfood shop, a yoga class, or even your local surf school, this is a great place to start your design.

You can add this tremedous font to your toolkit for just $14, that’s an incredible saving of 71% off the full retail value. And for just $5 more you can grab the desktop and web versions. Head over to MightyDeals.com to take advantage of this offer right now.

  Have you use Laura Worthington’s Alana in a project? What uses do you envisage for it? Let us know in the comments.

Over 500 Colorful Christmas Illustrations – only $17!

New Post has been published on http://mocco.sk/one-coin-to-rule-all-your-credit-cards/

One Coin To Rule All Your Credit Cards

There are many digital wallet systems that work with our smartphones today, but sometimes, having the physical card to swipe at the counter can be more convenient and takes much less time. Besides, not all shops will accept the type of digital wallet you use. That said, lugging around your credit cards, debit cards, ATM cards, gift cards, etc can be a drag.

We have here a handy alternative called Coin.

Despite its name, Coin is a card, and it carries a magnetic stripe like all your other cards. It works like them too — you can swipe or scan it like you would your loyalty cards, membership cards, credit cards etc when you make your purchases. The difference is, you just need this one master card to do it all.

Recommended Reading: Digital Wallets – 10 Mobile Payment Systems To Take You There

Inserting Card Information

To use Coin, first you need to insert your card information into it. To do this, you’ll need its smartphone app (available on iOS and Android) along with a smartphone credit card reader.

Just swipe your card through the reader (dongle) and take a picture of the front and back of that card. The information will be sent to Coin via Bluetooth 4.0 and you can store as many cards as you want.

To use a card on a purchase, select the appropriate card to use via the button on Coin. Coin will display the cards you have stored in there one at a time. Pick the card you want and swipe away.

According to the official website, the card selector button is stiff, which means that no accidental card changes will occur when you hand it over to the cashier.

Security Features

You might feel that the idea to store the details of all your cards in Coin a little unsafe, but there are a few built-in security features that can help ease your mind.

Coin is paired to your smartphone with Low Energy Bluetooth 4.0. Whenever it gets separated too far away from your smartphone, an alarm will be triggered to notify you that your Coin has been misplaced.

If Coin gets stolen and leaves the connectivity period of your smartphone for too long, it will automatically deactivate itself, rendering it useless. How far or how long Coin is separated before this is triggered can be set via the app.

Your online Coin account, mobile app and the device itself use 128-bit or 256-bit encryption for all storage and communication to ensure your card information is safe. Coin also doesn’t display your entire credit card number — together with its encryption, this makes it harder for your card to get skimmed.

Limitations

Batteries in Coin can last around two years of daily usage, and you will have to replace it with a new one if you want to continue using Coin. Coin can work outside of the U.S. but users are advised to bring their cards as backup, just in case. Coin does not support chip and pin cards, however, future generations of Coin will include EMV.

Coin is available in two colors (Snow and Midnight), and is currently available for pre-order at a price of $55 (inclusive of shipping fee). It will reach you during the summer of 2014. The current introductory price of $55 is limited to early birds as Coin will retail at $100.

Related posts:

10 Ways To Turn Your Smartphones Into Credit Card Readers

Mobile Payment Systems: The Era Of A Cashless Future

5 Rising Alternatives To PayPal For Online Transactions

New Post has been published on http://mocco.sk/deal-of-the-week-versatile-alana-pro-script-font-60-ornaments-only-14/

Deal of the Week: Versatile Alana Pro Script Font & 60+ Ornaments – only $14!

There’s just something about calligraphy, isn’t there? The flourishing motion of each word. The constant curves. It instantly adds an aura of authenticity to any project.

The neat thing about calligraphy is that if done a certain way, it can turn into a more casual, fun, and relaxing font. Combine the two and you’ve got one terrific typeface!

That’s just what we’ve found with the Alana Pro font designed by the wonderfully talented Laura Worthington. This beautiful and unique font has such versatility that you could end up using it on a number of different projects. Not only that, but for a limited time only you can save over 70% through this fontastic deal!

Grab this Deal Now →

Alana Font Highlights:

Natural-Looking Script Font Based on hand-drawn lettering, the friendly and quite unique Alana is a real natural-looking, semi-connected script face. Don’t be surprised if people do a double take, thinking that your projects were completely done by hand.

Casual Yet Formal As a script-type font, Alana is also incredibly versatile. Depending upon the rest of your layout and design, this typeface can instantly transition from casual to formal.

340+ Alternate Letters In addition to a full breadth of characters from the standard Latin Western alphabet, this deal features 341 alternates. Your download includes two additional uppercase letter sets and hundreds of alternate lowercase letters. 

Bonus: 62 Ornaments Need to add a little flair or ornamentation to your text? You’re in luck! This deal also includes a set of 62 ornaments all created specifically to coordinate with Alana’s hand-drawn script style.

Mac and PC Compatible Whether you’re on a Mac or Windows machine, you can rest easy knowing Alana works just fine on either. Your font files arrive in both OTF and TTF formats.

Versatile Font Whether for print or online, Alana is ready to impress! It’s perfect for printed posters, banners or signs, as well as logos or website highlights.

Royalty Free Your purchase of this deal grants you a royalty-free license to the Alana font. That means you can use it on any personal projects or client work without having to grant any attribution at all.

Sisterly Love Alana was named after the designer’s little sister. Beyond being a sweet gesture, you just know that the font is jam-packed full of love!

Pricing:

This beautiful script typeface normally sells for $49 (for either the Desktop of Web Font), but for a limited time only, you can get Alana Pro Desktop with the Ornament Set for just $14! That’s a spectacular savings of over 70%! OR get BOTH the Desktop and Web Fonts together for just $19! (regular $98)

Click the BUY button to choose your preference and bring some flourish to your next design project.

Grab this Deal Now →

Deal of the Week: Versatile Alana Pro Script Font & 60+ Ornaments – only $14!

New Post has been published on http://mocco.sk/shopping-at-taobao-8-things-you-need-to-know/

Shopping at Taobao: 8 Things You Need To Know

Taobao is the biggest consumer-to-consumer (C2C) e-commerce platform based in China. You can get clothes, accessories, gadgets and even computer hardware at very low (dirt cheap) prices. However, because the website is 100% in Chinese, this may be a barrier to those who want to shop but can’t make heads or tails navigating through the shopping process.

Well, we’re here to help. Here are 8 things you need to know when shopping at Taobao. We’ll cover how you can navigate this Chinese site, giving you a rough idea of the feedback system, how to use a Toabao agent (middleman service), and other factors to consider when purchasing an item.

Recommended Reading: E-Commerce In China – The Multi-Billlion Dollar Game-Changing Industry

1. Communication & Translation

Taobao’s navigation, item listing and overall user interface is in Chinese. One way to make sense of it all is to Google Translate the page. Even then, be prepared for odd and incomprehensible translated results.

The good news is that some sellers understand that there’s a market outside of China. These sellers will include English keywords on their listings so, when you search for international brands like "Nexus 7" or "iPhones", you will get some results from the search engine.

2. Get Better Search Results

Like most search engines, you can sort results based on certain criterions (filters). At Taobao, you can sort results based on: Popularity, Sales, Seller’s Reputation, Newest Additions, and Price.

There are other seller-related service criterions that you can search for: Consumer Protection, 7-day Return Policy, Genuine Product, WangWang Live Chat, Overseas Product, Cash on Delivery, and Accepts Credit Card.

Within an item’s listing, you can sometimes choose an option (color or other specifications) as shown below, marked 1. You can also tell the amount of stock the seller has left, marked 2.

3. choosing A Reliable taobao seller

Just like on Ebay, you would want to pick an experienced seller who is trustworthy. One way to figure this out is to find out how many transactions they’ve processed, and successfully delivered. This can be viewed at the seller’s profile. This seller, for instance, has processed 129 units of this item and sucessfully delievered 99 of them (marked 1 below).

Sellers can also be ranked by buyers. The lowest ranks are hearts, followed by diamonds, blue crowns, and finally yellow crowns. A seller has to earn 5 of each rank before ascending to the next rank. As you can see, the seller below has 2 blue crowns (marked 2) which is quite a good rating.

You can also tell when they started their shop and the amount of positive feedback they’ve received throughout that time. This can be found under the rating with the date (in this case 2006-09-18). The figure 97.69% refers to the positive feedback received.

4. Understanding The Feedback System

In most online shopping sites, customer feedback and reviews are a great source of reference before one makes a purchasing decision. Similarly, Taobao also has a place where you can check the feedback of previous buyers at the bottom of a product page.

The quality of the product is rated by previous buyers who have received the particular item you’re looking at. The system uses stars and a rating from 1 to 5; so if that product is rated with 5, you can assume it is of quality.

However, if there are no reviews of that particular product, you can check out the seller’s overall feedback by clicking on the seller’s rating (heart, diamond or crown). Scrolling down, you’ll see the feedback given by people who have bought any of the seller’s items. This gives you a grand idea of whether the seller is trustable or not, before you purchase an item from him/her.

5. Payment

Chinese Yuan (RMB) is used in every transcation on Taobao. Alipay (think of it like PayPal) can also be used for payment. You can also pay via online banking or buying a money recharge slip for your Taobao account from a post office in China.

On top of the item and shipping fee, other fees like insurance, shipping of sensitive items, additional payment fees and commissions might add to your total cost. You also have to take into account the exchange rate.

6. Shipping

If you can communicate with the seller, it is important to ensure that your item can be shipped internationally (or be forwarded by mail) before making payment. This is because most Taobao sellers do not ship overseas due to the language barrier and the lack of experience on the subject.

Ocassionally you may find a seller that speaks English and can accept international or online payments, but all of those extra benefits come with a cost and you might end up spending more than you need to. You may need to take note of certain shipping restrictions in your country that you have to conform to, like what items are restricted or taxable upon entering your country.

7. Shipping Duration

Taobao works similarly to buying a $0.99 item from China on Ebay. After the payment is made, it’s all about the waiting game as your item might take 7-40 working days to reach you. Items usually take 3 weeks or more to enter the country. Then another week or more to clear your local customs. You will then have to wait a few days for your local postal service to deliver it to your doorstep. So, 3-5 weeks is a conservative estimate.

Shipping duration also depends on the delivery option you’ve selected. DHL can deliver within 5-10 days, EMS (also known as China Post) may take 10-28 days and China Air Mail from 14-40 days. Of course, you will need to pay more for a speedier delivery.

8. Taobao Agent

The use of a Taobao agent is highly encouraged for buyers outside of China. The agent’s role is to act as a middleman between you and the Taobao seller. The agent will help you communicate, pay and handle shipping of the item from China to your doorstep; they can sometimes also help you search for something and explain the details of your desired item.

(Image Source: Budybuy)

Because Taobao is gaining limelight outside of China, you could probably find a local Taobao agent in your area to help you purchase something from the marketplace. Looking for a local agent also means that you’ll save on shipping because the agent will have the seller send items to their location first before forwarding it to you.

Payment

Different Taobao agents will charge for their services differently. Some might use a higher exchange rate (then keep the excess sum), while others may charge a percentage of your total purchase or a flat fee for their services. These agents may take PayPal or direct bank transfer.

Shipping

When it comes to shipping, some of these agents have an inside contact that can navigate through the shipping procedures, to ensure that your parcel reaches your doorstep. This may get your parcels delivered to you faster than other agents that consolidate purchases from multiple buyers before shipping them, to lower shipping costs. If you are living outside of China, it is worth paying an agent to handle these procedures allowing you to shop, hassle-free.

Note: Taobao also has their own User Shopping Guide which you can find here as well as an FAQ section (which is in Chinese) to help with you start shopping.

Related posts:

How to Buy And Ship From Blocked Shopping Sites

20+ Coupon Sites for the Best Shopping Deals and Bargains

Beginner’s Guide to Selling Your Unused Domain Names

New Post has been published on http://mocco.sk/6-factors-to-consider-when-you-physically-move-your-freelancing-business/

6 Factors to Consider When You Physically Move Your Freelancing Business

Advertise here with BSA

After you’ve been freelancing for a while, you may decide to move. And of course, wherever you go, that’s where your freelancing business is.

While local moves probably won’t affect your freelancing business much, there are definitely some factors to consider when you move to a new city or even a new state.

In this post, I list six factors that may affect your freelancing business when you move to a new area. If you like this post, you may also like How I Kept My Freelance Business Intact During Relocation.

Factor 1: Your Clients

If none of your clients are local, they probably aren’t used to meeting you face-to-face. It probably doesn’t matter to them where you are located as long as you continue to meet your deadlines and turn in high quality work.

In fact, some successful freelancers are completely location independent, meaning that they travel regularly and still maintain a freelance business.

Of course, if you have any clients who physically mail you a check or send you a 1099 through snail mail, you need to tell them your new address.

However, if you do have some local clients who you meet with face-to-face on a regular basis, you have some convincing to do. Here are some concerns you may need to address with your local clients:

Reassure them you will be just as responsive to their needs in your new location. You may even want to provide an alternate, inexpensive way for them to contact you such as a toll-free number.

Address their quality concerns. Assure them that the high quality of your work will continue and that you will continue to meet their deadlines on time.

Let them know how much you value them as a client. We often don’t tell our clients how much we appreciate them, but it’s a good way to strengthen the relationship.

Consider traveling. If they are a large client and you do a significant volume of work for them, you may be able to offer to travel to their location once or twice a year.

Whatever you do, don’t just change addresses on your local clients without letting them know. Communication is important.

Factor 2: Legal Concerns

If you are moving to a new area, it’s important to learn the local laws concerning small businesses. Depending on your location, you may be required to get a General Business License to do business in your city. You may also need to get a Home Occupancy Permit. Check the local laws for doing business where you are going.

Many local governments keep a list of business names (a DBA, or “Doing Business As” list), so you may need to register your business name in your new location.

Finally, your taxes may change if you move from a state or city where you do not have to pay local income taxes to a state or city where you do. Don’t wait until taxes are due before finding out how your new location will affect your taxes.

If you are unclear about anything, or can’t find the information you need in your new area, contact a local attorney or income tax professional for assistance.

Factor 3: Safeguard Your Equipment

If you’re like many freelancers, you probably have a small investment in office equipment for your freelancing business. You probably have at least one desktop or laptop computer, possibly a tablet, printer, phone system, and maybe some specialized software or hardware.

All in all, your investment is probably worth several thousand dollars. You want to make sure everything makes it to your new home in good working condition. After the expense of a move, the last you thing you want is to have to purchase new equipment. You also want to be able to get back to work as quickly as possible after the move. These tips can help:

Pack your freelance equipment separately. Don’t mix your household items with your freelance items. Trust me, you won’t remember that you packed your mouse inside that box of socks.

Label each box clearly. Make sure that the boxes containing your freelance equipment are marked clearly. Write “Home Office” or “Freelance” on each box.

Consider moving expensive or delicate items yourself. If you are using a moving service, do you really trust them with your high cost equipment?

Unpack your office quickly. The longer your office equipment sits around in boxes, the more likely it is that it will be damaged.

Factor 4: A Business-Friendly Home

Most freelancers work from home. If this is true for you, you’ll want to choose a business-friendly home.

Ideally, a business-friendly home provides an environment that allows you to do your freelancing work free from distractions. Here are some things to look for when you select your new home:

Quiet neighborhood. If you spend a lot of time working from home, you’ll want a relatively quiet place to work. This is especially true if noises bother you. You can probably rule out a home next to the football stadium or beside a busy railroad track.

Separate work area. While many freelancers start their freelancing business on their kitchen table or in the corner of the family room, it’s always helpful if you have a space you can dedicate to your freelancing business. An extra room with a door on it is a bonus.

Connectivity issues. Most modern residential neighborhoods do have Internet access. However, if you are moving to a rural area, Internet connectivity could still be an issue. Make sure that there is a local Internet provider nearby before you move.

Electrical Plugs. This may seem to be a minor detail, but older houses often do not have enough electrical plugs to accommodate all of the modern technology that we count on. Sure, you can use extension cords, but make sure the house’s wiring can handle the extra load.

Factor 5: Change Your Address

In the U.S., first class mail will be forwarded from your old address to your new address for about a year. Do you really want to risk that something important that was sent to your old freelancing business address will be lost?

The best thing to do is to make sure that all correspondence and subscriptions associated with your business are transferred directly to your new address. The best way to do this is to contact the sender directly and request a change of address. Here is a list of places to contact with your new address:

Clients who send cash or tax information.

Professional publications.

Software companies that mail updates.

Professional organizations.

If you’ve set your business up on Google places, you need to make sure the listing reflects your new address.

Also, don’t forget to change your business address on your website, stationary, and business card.

Factor 6: Take Time Off

Last, but not least. Make sure to schedule enough time for your move. Make sure that your clients understand that you will be unavailable for a few days. Don’t try to move and somehow work at the same time–that’s a recipe for disaster.

Schedule enough downtime to cover packing up your current home, traveling to your new home, getting your new home set up (including turning on the utilities), and unpacking.

If you’re not sure how much time you will need, it’s better to allow yourself an extra day or two.

Your Turn

Have you moved since you started freelancing? How did the move affect your freelancing business? What tips do you have for other freelancers?

New Post has been published on http://mocco.sk/10-useful-sites-for-learning-how-to-code/

10 Useful Sites for Learning How to Code

Computer programming has always maintained an air of mystery, seen by many as a complicated language, understandable to only a select few. However, perceptions are beginning to change, and coding is fast becoming a highly-desirable skill in the job market.

As a result, many sites have sprung up on the web, offering tutorials and guides to people who want to learn how to code. Some provide access to theoretical articles, while others have developed interactive tools and projects. All of them offer top-quality information – so regardless of your preferred learning style, there will be a site available for your needs. We’ve rounded up ten of the best sites.

Useful Coding Tutorial Sites

Codecademy

Codecademy is one of the best sites available for those who want to learn how to code.

The site has built up a cult following, drawn to the service by the promise of free, straightforward guides. Users can learn how to use JavaScript, HTML, CSS, PHP, Python, Ruby and APIs, by working their way through a series of carefully explained exercises.

The interface is simple and clean, and the step-by-step instructions are easy to follow, even for complete beginners. For those who already have some experience at coding, Codecademy allows you to skip the basic lessons, and get stuck into more complicated concepts.

Code School

Code School offers four ‘paths’ of learning –Ruby, JavaScript, HTML/CSS, and iOS. Users learn how to code by following a blend of screencasts and interactive tutorials.

Code School is similar to Codecademy in many aspects. The main difference is the price – where Codecademy is completely free to use, Code School operates as a “freemium” service. The basic tutorials are free, but more complicated concepts require a subscription to access.

Code Racer

Code Racer is an innovative concept for learning code, developed by Treehouse. In their own words, Code Racer is a ‘real-time multiplayer game’, which involves creating code in HTML under timed conditions. The service matches you with other players, who you then race against to finish coding challenges.

It’s a quick and fun way to learn the rudimentary skills of HTML, although complete beginners may want to research the basics on Treehouse before tackling the game.

Code Avengers

Code Avengers belongs to the Code Racer school of thought – make learning to code fun. This is a useful site for beginners of all ages, although the theme tune and branding are aimed towards a younger audience.

The instructions are easy to follow, and there are helpful prompts available at all stages. The site also allows users to play a mini-game after every ten lessons completed. Currently the site only offers lessons in HTML/CSS and JavaScript, but that’s set to change in the future.

The team behind Code Avengers also run real-life “Code Camps” for children up to the age of 18, with the goal of getting more young people interested in coding.

Udemy

Udemy is part of an online learning revolution, designed to bring world-class education to the masses. Experts post lessons and courses – some free, some not – on any topic imaginable, and visitors to the site can then access the information.

A popular topic for instructors on Udemy is coding. There are reams of high quality videos and tutorials available on the subject, ranging from short, brief overviews to hours of in-depth analysis.

Depending on your existing skill level, time limits and ambition, you can choose the course that best suits you – as there’s no over-arching subscription fee, you only pay for the content you want to access.

Khan Academy

Khan Academy is similar to Udemy, offering online classes and courses on a variety of subjects. However, there are two main differences. Where Udemy offers a broad selection of topics, Khan Academy currently focuses on technology, science and mathematics. They have also boldly pledged to provide their services for free, forever.

There is an extensive computer programming section, including videos, tutorials and articles. There’s also an exciting feature in the interactive coding interface. With most of these sites, users write a code and press ‘run’ to see the results. With Khan Academy, this process works in real-time, so you can see changes happening as you make them.

MIT Opencourseware

Another site which offers online courses in coding is MIT Opencourseware. This is a scheme run by the Massachusetts Institute of Technology – one of the top universities in the world – to make their course contents freely available to users all around the world.

As you’d expect of MIT, the courses are all of a very high quality, and the computer programming tutorials are some of the best available on the web. The “Introduction to Computer Science and Programming”, for example, contains a huge number of resources, such as lecture videos, handouts, slides and quizzes.

Learn Street

Learn Street is a relative newcomer on the online code-teaching scene, and currently offer beginner courses in JavaScript, Python and Ruby.

Some coding websites guide users through their exercises, but don’t impart enough knowledge to help them apply what they’ve learned in the real world. Learn Street are doing their best to tackle this problem – a glossary of technical terms and a summary of key concepts accompany the user interface at all times.

There’s also ample opportunity for users to practice their new-found coding skills. Learn Street has devised a series of projects – ranging from creating a game of Snakes and Ladders to an Income Tax calculator – graded depending on difficulty.

Mozilla Developer Network

Many of the sites on this list provide a hands-on, immersive learning experience for the user. However, they often don’t explore beyond the basics of coding.

The Mozilla Developer Network offers a more theoretical, reading-based approach to learning how to code. It contains a vast number of documents, guides and how-tos for the aspiring programmer, written by some of the world’s leading authorities on the subject.

Although there are plenty of basic articles, this is the ideal resource for those who already have some experience, and want to improve their skills by reading in-depth information.

Dash

Dash, run by General Assembly, is a fantastic tool for learning the basics of programming in HTML, Javascript and CSS. Rather than working through a series of unrelated tutorials, Dash teaches the user how to code by working through a series of projects.

The user is guided step-by-step through each project, which range from building a small website for a fictional friend to coding a robot, powered by CSS. As you make progress, the skills you’ve learned are “unlocked”, and explained in greater detail.

Conclusion

Consider your learning style before choosing a site. If you’re more of a hands-on learner, choose an interactive service like Codecademy or Dash. If you’d prefer to study the theory first, then explore the resources available on the Mozilla Developer Network, or MIT Opencourseware.

New Post has been published on http://mocco.sk/20-creative-envelope-designs-that-impress/

20 Creative Envelope Designs That Impress

Everyone’s on emails and messaging apps these days, which makes receiving mail in the post something of a rare occasion. When you do receive snail mail, the first thing you will notice is the envelope design. More often than not, in doing business, we underestimate the power of the envelope design as a branding or marketing tool. Fact of the matter is, an impressive envelope will definitely leave an impression on a client or customer.

In this post, we have a collection of 20 creative envelope designs that feature beautiful color combinations that are not only eye-catching but also will stand out from the pile. Does this give you new ideas on how to get more out of your written correspondence? Tell us in the comments below.

Recommended Reading: 20 Minimalistic Business Card Designs For Your Inspiration

Telemobisie by Gosia and Wojciech Zalot

Patterned Envelope Liner by Kimberly Munn

Circles Stationery Pack by Abra Design

ChickChirik / Identity by a n a b o l i c

Masterskaya Vkusa / Identity by a n a b o l i c

Tadawi Hospital Identity / Branding by Mohd Almousa

Missy Jean Photography by Elyse Taylor

Em Cartaz | Branding by Kempeli Design e Comunicação

Dod Creative / Diego Ornato Design by Diego Ornato

Branding / Identity Mockup by BlueMonkeyLab

CMPLAIN Branding by Leonardo Zakour and CMPLAIN

K+L Wedding Invitations by Loren Klein

ConductCare | Brand Identity by Kempeli Design e Comunicação

Envelope by Colin Grist

SicolaMartin Stationery by Oen Michael Hammonds

CROSSFIT Collingwood by Nebojsa Matkovic

CV & Self-Branding – 1 by Faridz Design Suite

2012 Christmas Card by Joseph Veazey

Logo e Identidade Visual: Mobilaris by Clemilton Barreto

Max&More by Delia Goh

Related posts:

20 Minimalistic Business Card Designs for Your Inspiration

20 Creative Headphone Designs For Audiophiles

20 Creative Coffee Cup Designs You Need To See