XYDO.COM: Web Development

BuddyPress: BuddyPress at Newham Bridge Primary, UK

This post was written by Adam Heward, a member of the BuddyPress community and ICT Manager at Newham Bridge Primary School. Facebook is an endemic problem for UK schools. Issues from outside of the classroom are being brought into school as a result of Facebook interactions and schools are powerless to do anything about it. I found out on my first day in my new job as ICT manager in a primary school in Middlesbrough, UK when I was asked “What can we do about Facebook?” Our school had experienced everything from name calling to death threats, doctored pictures to stolen identities; all of this from users who were still at least 4 years short of Facebook’s (all too easy to avoid) minimum age requirement of 13 years old. We needed to steer our students away from Facebook and toward something the school could police, and make sure we catch the others before opening Facebook accounts. That’s where BuddyPress came in. BuddyPress enabled us to start our own school-oriented social network, where children can communicate with their classmates in a safe and monitored environment. Every child was given a username and password as well as training on how to use the platform. We encourage responsible use of the Internet through teaching our children how to be good e-citizens. Our social network is treated like the children’s school books where the children should produce their best work at all times. This is imposed to produce an environment of high quality writing (typing) which in turn breeds good writing habits both online and in the rest of their school work. Our social network is hosted on the Internet rather than any internal school server and so it is easily accessible to the children at home which has further encouraged participation. The children have really enjoyed engaging with their classmates, and even their teachers, on the school social network; sharing brief conversations about both in school and out of school matters. Teachers are able to set tasks for whole class groups or give encouragement to individual learners. It’s a valuable tool to enhance communication between teaching staff, reminding colleagues of events, sharing resources for lessons, and taking care of administrative and social notices. The basic functionality of BuddyPress can be further extended through the use of the ever expanding Plugins library. We use BuddyPress Docs where children can collaborate on a shared piece of work and teachers can make comments and suggestions to help the children to enhance it. We also have the CubePoints for BuddyPress plugin to encourage participation on our social network. Children are awarded points for logging in daily and posting comments and a chart showing to top users is displayed in the sidebar. Points can also be deducted for any issues both online and offline. In addition to the masses of free plugins that are available, we have a paid subscription to WPMUDEV’s BuddyPress Calendar Plugin to help us to plan events in the school calendar such as Sports Day and Summer Fairs, or for individual groups such as fixtures for the school football team. BuddyPress is the perfect fit for our school. The flexibility and extensibility of the WordPress platform, the continually updated plug-in environment, well documented support, and the fact it’s all free, leads me to the conclusion that it can be just as successful in all other schools as it has been with ours. Thank you for the opportunity to share our story!

Alex King: Carrington Core and Globals

Carrington Core1 loads template files through a function rather than including them directly within the global scope. This means that global variables need to be explicitly brought into scope rather than just being there and available to you. I’ve considered this a feature, because it means that you’re much less likely to stomp on an important WordPress global variable from within a template, and having the explicit declaration of which variables you want available makes things a bit easier to follow. However, it also has drawbacks. For anyone already familiar with WordPress theming, there is a “this is broken” reaction when trying to access $post doesn’t work until they declare global $post;. I’m on the fence about which approach is better (enforcing better development best practices or making the platform more accessible to new devs), but I’ve been exploring some options (in case we decide a more accessible platform is better). View the code on Gist. You’ll see the three approaches I’m considering in the comments at the start of the function. Each has pros and cons. Option #1: Selectively bring in globals. This was my initial solution. It makes a reasonable set of global variables available. However, if someone needs to hit a global we didn’t choose to include, I think that becomes more confusing. If the global $post was already in scope (without having to declare global $post;), why would they need to declare global $_wp_using_ext_object_cache; to get that variable? Option #2: Bring all globals into scope. I think this is an interesting idea, but likely not a good solution. Developers would assume that these variables are global and run into surprises when they find out they aren’t. Option #3: Bring in all globals. I’m leaning towards this, but it just feels wrong to me – likely due to an overall aversion to globals. It basically makes all templates loaded by Carrington Core work like standard WordPress templates. There is potential for confusion here since all of the globals are present and a developer can interact with them just like their template file is being loaded into the global scope; with a pretty big exception that variables created in the templates are not created in the global scope. There is also a concern about this change causing problems with existing Carrington powered sites. Previously variables set in template files wouldn’t pollute the global scope or stomp on global variables. With options #1 and #3, this would be a possibility. So I’m soliciting feedback. Fellow WordPress developers, what say you? Anyone have a “silver bullet” solution? Perhaps no action is the best action? Carrington Core is a template selection engine for WordPress sites. It helps you easily create custom views that are used for various data conditions (I want this header for this category, add this author bio information for posts written by anyone with an editor role, etc.) without writing conditional PHP code in your templates. There are more details here. ↩

WordPress 3.4 Release Candidate

The first release candidate (RC1) for WordPress 3.4 is now available. An RC comes after the beta period and before final release. We think we’re done, but with millions of users and thousands of plugins and themes, it’s possible we’ve missed something. So if you haven’t tested WordPress 3.4 yet, now is the time! Please though, not on your live site unless you’re adventurous. With more than 500 tickets closed, there are quite a few changes. Plugin and theme authors, please test your plugins and themes now, so that if there is a compatibility issue, we can figure it out before the final release. If you are testing the release candidate and think you’ve found a bug, please post to the Alpha/Beta area in the support forums. If any known issues crop up, you’ll be able to find them here. To test WordPress 3.4, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip). If you’d like to know which levers to pull in your testing, visit the About page ( → About in the toolbar) and check out the list of features! You’ll definitely want to try the live theme previews. Bonus: Happy birthday WordPress — nine years old today.

4 Options To Find Great Free Domain Names

So you have decided to create a new website, be it a personal blog, a website for a local sports club, or a new web service that you are about to launch. The only thing missing is a domain name, preferably short and up to the point. But no matter how hard you think about it, you do not come up with a fitting name that is still available. The following four options may aid you in finding next-to perfect domain names for your projects.1. Expiring Domain NamesIt is first necessary to distinguish between expiring and dropped domain names. Expiring domain names are still registered by someone, who has not yet paid the yearly fee to keep in possession of the domain name in question. Dropped domain names have expired already.Lots of services are available on the Internet that auction off or sell dropped or expiring domain names. Here are a few places to get you started.Namejet – Pretty big site that offers detailed search options to find the domains you are looking from. From entering a term that you want included to filtering out domain names by extension, category, and the maximum number of characters.Godaddy Auctions – Auctions for sites expiring at one of the largest domain registrars in the world. Filters are pretty good, and you get additional information like traffic information or valuations.Just Dropped – Offers to display results from multiple registrars, again with extensive options to filter the results listing.Expiring domains can be a great option if all suitable domain names have been registered already. While you still need to be lucky to find a suitable one here, it offers a chance to get a great domain name for a small price. Keep in mind though that you should background check the domain name before making an offer. This includes finding out what was offered on the domain before, and whether the webmaster or a SEO agency ran campaigns that may have got it penalized in the search engines.2. Domain Name Suggestion ToolsThese online tools generate domain names based on terms that you enter. Some may let you add prefixes, suffixes or other optional terms as well.DomainsBot – Enter a main word and synonyms and wait for the results listing to be populated with options. The service can search Sedo and Godaddy for you, or only display domain names that you can register right away. Additional options include selecting TLD extensions, using prefixes and suffixes, different languages, and specifying the domain length.Domainit – Enter one or multiple keywords, select domain extensions, the maximum length, and whether you want the service to add its own suggestions to the resulting domain names.Ubersearch – Enter a search term or phrase and get suggestions displayed on the same page. You do not have as many options as the other two services offer, but it is pretty fast and displays the availability right away on the screen.3. Buy a domain nameIf a domain name is not available, you can try and contact the current owner to broker a deal. This obviously won’t work for domain names like Google, Amazon or Microsoft, but may work for domain names not in the possession of large organizations.Instead of contacting the owner directly, you may also try your luck at sites where you can buy domain names and web projects directly.Flippa – Probably the biggest site of its kind. On Flippa, you find domain names and web projects. Most websites on offer are sold in auctions, while you may find some listed for buy it now prices or no price at all (which means you must negotiate). The popularity of the site means that many sites will be priced on the high-side of things. Not broker-high, but still pretty high.Namepros – A webmaster community forum with a strong focus on domain names. You can buy domain names here, get appraisals and domain related news.Sedo – A domain market for domains without content and web projects. It is one of the most respected marketplace in this vertical, and often pretty expensive.4. Get Personal RecommendationsYou can ask friends, family and co-workers for suggestions, and while that may sometimes result in you finding a great domain name that you did not think about before, you more often than not won’t. Recommendations can however come in other forms.Picky Domains – For a fee of $50 you can ask users on the site to provide you with domain name suggestions. The winning user gets part of the money, while the site operators get some of it as well. It is important to use a good description and enter keywords that you find suitable for the site. You can furthermore select domain extensions, the maximum length and other factors.Squad Help A similar service with more pricing options and fees on top of it. Service begins at $50 plus a fee of $39. You can take a look at active naming contests, which usually receive more than 100 entries.Closing WordsFinding a suitable domain name for a new project can be a time-consuming task, especially if you want it to be perfect, and not just suitable for the project. One thing that I often do is to get a list of about five suitable free domain names, and ask close (webmaster) friends to pick their favorites. It is still up to you though to make a decision in the end.Are you using different tolls or web services to find free domain names?

Setup an Additional Phone Number on a Android Smartphone or iPhone

When you get an iPhone or Android based smartphone, like any other cellphone, you activate the line with a specific phone number. However, what if you want to have an additional phone number for your phone? Using the iPhone’s/Android’s required data plan in combination with an app, you can setup a secondary phone number that Post from:Setup an Additional Phone Number on a Android Smartphone or iPhone

Collective #13

Inspirational Website of the Week With its interesting thumbnail shape, subtle animations and great color scheme, Julien Renvoye’s portfolio becomes our pick of the week. Check it out Compass2CSS Compile Compass into CSS using this awesome online tool by Brian Gonzalez. This can be useful in a situation when you don’t have the power of Sass/Compass, or if you are simply curious to see how Compass implements certain functions. Check it out Gumby Framework Gumby is a new responsive 960 grid CSS framework that comes with many amazing features. It has support for all of the new HTML5 goodness and you can customize it for your needs. It’s great for prototyping since it comes with styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns and more). Get it Meteocons Alessio Atzeni gives us this beautiful icon set for free. Meteocons is a set of weather icons which contains more than 40 icons in various formats: PSD, CHS, EPS, SVG, Desktop font and Web font. Get it The CSS3 Flex Box Specification Johnny Simpson dives into the CSS3 Flex Box Specification and shows us usage examples and how it simplifies layout design. Read it WordPress Meet Responsive Design On the new and great Code Poet, a superb resource for WordPress designers and developers brought to you by the very developers of WordPress, you can find this short e-book where Chris Coyier, Ian Stewart and Sara Cannon talk about strategies for designing WordPress sites responsively. Read it Two Free Fonts: Tikal Sans Medium + Medium Italic Miguel Hernández created this wonderful font family with 20 weights, two of which are free: Tikal Sans Medium and Tikal Sans Medium Italic. Get them vert.x If you are developing asynchronous applications, you will find vert.x interesting. It’s a framework which takes inspiration from event driven frameworks like node.js, combines it with a distributed event bus and sticks it all on the JVM – a runtime with real concurrency and unrivalled performance. Vert.x then exposes the API in JavaScript, Ruby, Groovy and Java. Try it ddSlick.js A free light weight jQuery plugin by Prashant Chaudhary that allows you to create a custom drop down with images and description. Get it On Responsive Typography Some interesting thoughts by Indra Kupferschmid about how there are several important aspects to typography when it comes to “responsive typography”. Read it Example of getUserMedia and CSS Filters A really great practical example of getUserMedia, the fantastic HTML5 feature that let’s you access the user’s audio and video devices. Taking it one step further, Raymond Camden adds CSS filters to create a registration form that makes the taken picture become sharper after filling the inputs. Read it superscrollorama After creating scrollorama John Polacek gives us superscrollorama, the jQuery plugin for supercool scroll animations. Get it HTML for Icon Font Usage What is the best markup for using icon fonts when considering semantics and screen reader friendliness? Chris Coyier covers some useful techniques with those considerations in mind. Read it Free Keynote Mockup Templates Keynotopia shares some free Keynote Mockup Templates for prototyping mobile, web and desktop apps. Get it Fontello Iconic Fonts Composer If you did not know about it yet: with Fontello you can combine iconic webfonts for your project; adjust glyphs collections, merge symbols from different fonts and access large sets of open source icons. Try it A New Take on Responsive Tables With all the hype around responsive design, one important element seems to get left behind: the table. A new playround piece of ZURB shows how to create responsive tables with JavaScript and CSS. Check it out Free Ultimate Blurred Background Pack At WeGraphics you can get this free PSD which contains 20 soft blurred background textures. Get it Bariol Regular Free Font Atipo gives us one member of this exquisite font family for free: Bariol Regular. Get it Ember.js Framework Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. Get it

14 Ways Your Website May Be Giving You a Bad Reputation

When people come to your site, you’re implicitly asking them to believe in you. You may want them to feel secure enough to buy your product or to hire you, or to understand that your reviews are balanced and honest. Even if you have nothing to sell, you still need new users to know that what you write is credible so that they will become regular visitors.The trouble is, it’s all too easy to send wrong signals to users. Here are some subtle – and not so subtle – ways your site might inadvertently be doing that:1. Your Site Takes Too Long To LoadSuppose there are two cab companies – one uses a fleet of sleek BMWs, the other some battered old Fiats. Which would you trust more?So it is with site loading time. A fast loading site feels like it’s going somewhere and that the people behind it know what they’re doing.Image Source: High Speed Internet via ShutterstockThe FixUsing a cache system will greatly speed up your site by reducing the number of database calls needed to serve each page. Recommended plugins for WordPress include Total Cache, WP Super Cache and Quick Cache.You can reduce site loading time enormously by combining a cache plugin with a second plugin to minify (compress) your HTML code. This feature is built-in to Total Cache but isn’t activated by default.Image intensive sites will also benefit from compressing image size using a system like WP Smush It which can shave off 10% or more from image filesizes.Bonus: All this is great for SEO too. If you’re using Google Analytics keep an eye on Content > Site Speed to see how your site speed improves.2. There Are A Bazillion Widgets In Your SidebarAll those shiny widgets may look pretty but if they’re using Javascript (and most do) they’re slowing your site more than you think. In any case, too many widgets just screams MySpace 2002 at users.The FixHow about going cold turkey on the widgets? Do you really need them? Are they helping you communicate with your users? If not, they really should go.3. Broken Links and Images That Don’t LoadNo one intentionally puts a broken link on their site, but stuff gets moved around and links get broken. The same can happen with image links.The FixGet into the habit of checking for broken links once a month or after a major site redesign. I use Link Examiner, a free program that spiders an entire site and generates a report of broken HTML or image links along with the page they’re on. It doesn’t look pretty but it gets a vital job done.4. You Have No Contact FormNot having a contact form – or at the very least a page with your contact information – sends the signal that you’d rather be anonymous. Subconsciously, visitors will wonder why you don’t want to be found.Image Source: Contact Us via ShutterstockThe FixAdd a contact form and test it thoroughly to make sure it works. Don’t forget to include other ways you can be contacted like Skype and messaging services if that’s your style.If you’re not up to building a contact form yourself, there are some easy-to-use WordPress plugins that can do the hard work for you.5. No Images of the Writers, Owners or ContributorsUnless you’re a typographical genius, a website without pictures looks weird.People like to know who they’re dealing with. That’s especially true if you’re an ecommerce site. Users cannot help but wonder, “Who are these people I’m giving my credit card info to?”.But it’s also true if you’re selling services or want clients to hire you. Potential customers are reassured when they can see who’s at the other end of the website.The FixSprinkle some good quality people images around your site, but be careful not to make the images too big as that can look egotistical.A human photo is a useful reassuring presence on support pages and order forms, implying that someone is around if something goes wrong.6. You Have No ‘About’ PageNot having an ‘about’ page is another blunder that sends the subconscious signal that you’re trying to hide something.The FixA good ‘about’ page isn’t necessarily a long one. Just a couple of paragraphs will let potential customers know who you are and how you might be able to help them. It’s also a great place to introduce the members of your site or business with a mini bio and photograph.7. Site Design GlitchesEven if you’ve spent a lot of time refining the design, it’s easy to miss something that diminishes the trust you’ve built up through your content.The FixCheck for problems that may be small but can derail the visual flow of your site. The problem could be as simple as a header image that doesn’t quite line up, or a font size that’s too small to be easily read – especially when used in footer links to privacy policies and other legal type pages. Too small a font makes it look like you’re trying to hide something.8. Too Much Design With A Capital ‘D’Everyone loves a beautifully-designed site, but when it looks like you’re using design to hide a lack of content, you’re in trouble.The FixBe honest with yourself. Is your design so big it makes your content look small? If so, scale it back a little bit.No one’s saying make it boring, but users need to be able to easily find the basics like site navigation and the content they came to your site for.9. Too Many AdsUsers accept that websites need advertising to survive, but too many ads make you look like a desperate, begging salesperson.The FixIt may be counter intuitive, but more ads doesn’t always mean more money. Be a bit more sophisticated with your use of ads and you might well find they perform better.One full ad showing above the scroll is not a bad guideline.Hang on, you say, this very website has a lot of ads running in the sidebar. That’s true, but they’re positioned in such a way that they don’t intrude on the content, which is the key thing.10. Spelling Mistakes and Grammar MishapsThis is one of the quickest ways to lose all credibility – bad writing makes you look like an idiot and no one wants to be involved with one of those.Image Source: A List of Homework to do via ShutterstockThe FixRun everything through a spell checker but then check it manually. No spell checker will tell you when you’ve written there when you meant their. Ask someone you trust to check your content – another pair of eyes will usually find something you’ve missed.If you can’t do that, print the content out on that old-fashioned stuff called paper. Seeing it in a new form often means you’ll see mistakes you’ve become used to skipping over when you’re seen your writing on the screen for the 98th time.11. The Comments Section Is Empty or Full (Of Spam)What users see in the comments section they will assume is a reflection of the kind of people hanging around your blog.No one wants to hang around a bunch of spammers, and an empty comments section on an established site makes visitors wonder why you’re so unpopular.Image Source: Keyboard with Word Spam via ShutterstockThe FixNew blog? Only a very small percentage of readers actually comment, so consider turning off comments until you get a bit of traffic to avoid the ghost town effect.To kill spam, make sure you’ve got Akismet or another anti-spam plugin installed and set up correctly. If you’re getting particularly targeted by spammers, consider automatically closing comments on posts after a certain time. WordPress users can go to Settings > Discussion to do this.12. Your Popup Overlays Popup Too MuchThe Problem: You get to a site and are just getting into what looks like some pretty good content when the page dims and up pops a newsletter subscription box.You click it off. No harm done. But then it happens again on the next page. And the next.Many marketers say their conversion rate is sky high with overlays, but once per visiting session is probably enough. Even better, why not set it to appear after a second page view or for returning visitors? They’re both signs of engaged users who are those most likely to sign up.13. Ban The Brochure SpeakAre you, “Facilitating innovative solutions to help clients achieve a new paradigm”? Yes? Then stop. Stop it right now.Even if you’re representing a corporate entity, you’re still a human talking to another one, so you need to write like one. Otherwise you won’t make a connection with the reader, which is vital for gaining trust.The FixAsk someone else if they understand what you’ve written. Sometimes what’s obvious to you is confusing to someone else.Keep your writing simple and to the point. That won’t make it less business-like but it will be a lot more readable.14. Your Site Doesn’t Have A PersonalityWe can’t help but prefer to buy things from people we like. Even if you’re not directly selling a product, you’re selling yourself as reliable consultant, freelancer or source of information.If your site doesn’t reflect something of your personality, you’re missing a chance to be likeable.The FixDon’t be afraid to show a little of your personality in your content. Some types of site will lend themselves more to this than others, but anything you can add to help users feel they are getting to know you will boost the confidence they have in you.A little sprinkle of light humour, if that’s something that suits you and your site, can go a long way.

Mike Little: WordPress is Nine. Happy Birthday WordPress!

Today is the ninth birthday of WordPress (the anniversary of the first release). WordPress still continues to astonish me in its phenomenal growth. Comparing to this time last year, WordPress now powers more than 74 million sites, accounting for more than 16% of the internet. I’m looking forward to the next year in the world of WordPress. As usual there are lots of exciting things ahead. The first WordPress App Store launched recently, and I’m sure there will be more (it looks like WPMU Dev’s updater/dashboard now lets you buy). WordPress is really maturing and as a platform and as an industry. There is much more to come and I can’t wait.

Meteocons – Free Weather Icons Set In Multiple Formats

Advertise here with BSAMeteocons is a set of free icons that is focused on a single subject: the weather. The set contains 40+ items covering most of the weather conditions, new items are added time-by-time and it is offered in many formats: PSD, CHS, EPS, SVG desktop and web-font This handy icon set is completely free for both personal and commercial projects. Advertisements:Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.Professional XHTML Admin Template ($15 Discount With The Code: WRD.)SSLmatic – Cheap SSL Certificates (from $19.99/year)

Anime

AnimeA new wallpaper has been posted to the Anime gallery on Desktop Nexus.Uploaded By: KayumixchanCategory: OtherDate Uploaded: 05/26/12Native Resolution: 1280x924Points: 0Download Count: 0View This Wallpaper Now

WordPress Skeleton

At my “Scaling, Servers, and Deploys — Oh My!” talk (slides) at WordCamp San Francisco 2011, I talked a bit about my ideal WordPress repo setup. In the spirit of sharing, I’ve now made that skeleton setup into a GitHub repo. What you get is a WordPress repo starter kit. WordPress is in a subdirectory (/wp/), content is in a custom directory (/content/), and uploads are mapped to /shared/content/uploads/, which is a Git-ignored location. Re-symlink as appropriate, or alter your deploy script to do the symlinking on the fly. You get a nice clean wp-config.php with a few of my tips and tricks already implemented (like local-config.php support for local development). .htaccess is ready to go with WordPress rewrite rules for anyone running on Apache. I don’t really expect people to use it exactly the way I have it set up (though feel free!). What’s more likely is that people will fork it, and then make it their own. For instance, you may want to add mu-plugins drop-ins that you frequently use. Have fun!

Favicons Next To External Links

I've had this JSFiddle from CSS Wizardry open for like 2 weeks in my browser. I kept thinking about it, because before that I got an email from someone asking about essentially the same thing and it stuck in my head. They were wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily. The "I Wish" CSS Only Technique What would be nice is if you had simple semantic HTML like this: GitHub And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon. /* Fair warning, this doesn't work */ a[href^="http"]:before { content: url(http://g.etfv.co/ + attr(href) + ); } Maybe the syntax wouldn't be exactly like that, but something like it. The point is, you can't mix up the url() syntax into parts like that in CSS. Google's Favicon Service Google has it's own favicon service you can use. For example: http://www.google.com/s2/u/0/favicons?domain=css-tricks.com The trick is you need just the host name and TLD and nothing else. I searched around and found a simple regex for getting that from any URL. We'll need that because links aren't always (or even usually) the root of sites. function getDomain(url) { return url.match(/:\/\/(.[^/]+)/)[1]; } Using these things, and jQuery, we'll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are more robust methods here if need be. $("a[href^='http']").each(function() { $(this).css({ background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) + ") left center no-repeat", "padding-left": "20px" }); }); Then @travis reminded me that you can just use this.hostname instead of the fancy regex. So: /* Nothing else needed */ $("a[href^='http']").each(function() { $(this).css({ background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname + ") left center no-repeat", "padding-left": "20px" }); }); I'm not sure what the browser support is for hostname, whether it's just as good as href or less so, not sure. getFavicon Method @seanodotcom showed me another similar service galled getFavicon. It's hosted by Google AppEngine, but it's not Google's own service. I did find it a bit slower. But the advantage being that you don't need to deal with host names at all, you just give them the full URL. So then it becomes: $("a[href^='http']").each(function() { $(this).css({ background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat", "padding-left": "20px" }); }); View Demo Performance? As I'm sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each. @yuritkanchenko pointed out to me a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request. For instance: http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com I'm afraid I didn't go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I'm sure you could whip that up pretty quick if you really needed it. Favicons Next To External Links is a post from CSS-Tricks

Facebook, Washington e operazioni segrete: il lato oscuro del social network

L’argomento è spinoso. Quantomeno delicato e controverso. La tesi, tutta da dimostrare, circola strisciante da tempo nei siti internazionali di controinformazione. Quelli che, per capirci, fanno delle cospirazioni tramate dal “Sistema” l’unica verità storica ammissibile. Vale la pena parlarne, ma con i giusti piedi di piombo. La storia. Siria, marzo 2011. Durante gli scontri della Primavera Araba che infiammano il Medio Oriente, nel Paese scoppiano sanguinose rivolte contro il regime del presidente Bashar al-Assad. Gli oppositori reclamano diritti democratici. Il regime risponde con la forza contro i ribelli che si organizzano in gruppi armati. Secondo le Nazioni Unite, dall’inizio della rivolta, i morti, nella quasi totalità civili, sono più di undicimila. Veniamo alla cospirazione. Facebook sarebbe direttamente coinvolto nei piani di Washington per rovesciare il governo siriano. Le modalità collaborative semplici e discrete. Tolleranza alla presenza sul social network di gruppi definiti “terroristici” che condividono sulla piattaforma di Zuckerberg nomi, foto, indirizzi e dettagli sulle abitudini di vita di alcuni personaggi scomodi che appoggiano il regime di Assad. Spesso si traducono in vere e proprie sentenze di condanna a morte, materialmente eseguite utilizzando quel genere di informazioni. Il Governo siriano avrebbe reclamato più volte la cancellazione di tali gruppi che metterebbero a rischio la vita di centinaia di persone. Le rogatorie internazionali per la rimozione dei dati dai sever di Palo Alto appaiono complesse e senza esito. Da Damasco accusano, nessuna risposta da Facebook. La CIA e l’NSA che monitorano costantemente il social network chiudono un occhio e lasciano correre per un mero calcolo utilitaristico d’interesse nazionale. I rapporti tra Stati Uniti e Siria, di certo, non brillano. Il risultato è che tali gruppi continuano a rimanere attivi con tutte le conseguenze del caso. Dicevo all’inizio, andiamoci coi piedi di piombo. La storia è tutta da dimostrare. Per evitare facili fraintendimenti, per chi non conoscesse un minimo la faccenda, c’è da sottolineare che il governo Siriano non scherza. Sta reprimendo in un bagno di sangue l’esasperazione di un popolo. La democrazia spazzata via con le armi e piegata alla logica di regime. Non voglio addentrarmi in questo discorso. Provate però ad applicare la stessa logica di sopra ad un qualsiasi altro contesto. Immaginate, se tutto questo fosse vero, quali potrebbero essere gli impatti su scala globale dall’utilizzo distorto di Facebook. La considerazione è semplice. Tutti i dati condivisi sul social network sono di proprietà di Palo Alto. Per la proprietà transitiva, sono di diretto accesso da parte dello Stato sovrano, gli Stati Uniti. Se davvero esistesse una connivenza non dichiarata con le agenzie governative come CIA, NSA, FBI nella gestione arbitraria di alcune informazioni per scopi d’interesse nazionale (non necessariamente in linea con quelli di altri Paesi) gli Stati Uniti avrebbero tra le mani il più prezioso archivio che la storia gli abbia mai regalato. Magari è solo la trama non troppo riuscita di un romanzo ispirato ai best sellers di Robert Ludlum. Ma Zuckerberg e company dovrebbero rifletterci. Sempre se, la cosa, non gli sia già sfuggita di mano.

Gamification: Convert Your Traffic Into Loyal Readers

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!So, you’re a website owner with several thousands of visitors monthly. Quite possibly you have asked yourself “how do I make my readers interact more on my website?” The answer? It could be through the use of gamification. Website has a lot of traffic but only few people engage in it? Do you want to convert traffic into an active community? Do you want to make your website more fun? Why not gamify it? I mean, convert your website into a game! Do You Have a Big Audience but With Little User Interaction? “I have tens of thousands of visitors but there are only 10 regular commenters” “Among my several thousand visitors no one clicks the Like button :(“ “I have the means to make big changes on my website and try things out!” “ What’s wrong with my website?” “I want to make it more fun for my loyal readers..” If you catch yourself thinking these about your high-traffic website, then something is definitely wrong! Visitor interaction is important if you want your website to improve! I regularly visit several websites that have thousands of very loyal readers, many of whom came for entertainment. It is not very different for 1WD and other web designing blogs, we have lots of regular readers but only a handful actually spend a minute of their time to comment and share. We understand, of course, that not everyone who visits should drop a comment. I am guilty of this myself when visiting other blogs. But what makes me comment and enter the discussion, along with the rest of humanity, is that rewarding feeling at the end of the comment. What is Gamification? The essence of gamification is to convert a website’s still community into a lively carnival. You may have 100,000 visitors on your website every month, but do you have an active community? A community where people actually discuss things, where they feel they are a part of your website, where people know who the top contributor is, who gives the best opinions, and who is the most loyal? Nope? Did you just realize that the answer is…nope? Well, that can easily be solved by gamifying your website. By awarding readers points and badges you are turning your website into a place where people will actually strive for the reward. It is proven that people love free things, and human nature dictates that having a higher number than others is better. Because, seriously, who doesn’t want to be on the leaderboard of top commenters? Or Loyal Readers? Basically, you’re awarding points. You can, of course, shake your pocket once in a while and enable points-to-gift conversion. Even I would salivate and roam your website for several hours if you do this! Is Gamification for You? Hold your horses! Before doing anything else, you need to know if gamification is for you. Gamification can work for every type of website, as long as there is huge traffic involved and high-quality content is available. Gamification is right for you if: If you want to leverage that huge traffic. If you want to reduce your website’s bounce rate. If you want to create a community. If you want to host regular gift-givings as a sign of giving back to the community that made you successful. If you are willing to spend money for the gamification systems subscription and prizes. If you want to make your website more fun. Top Gamification Systems Badgeville Badgeville is one of the biggest gamification platform that makes it easier to convert readers into loyal readers and one-time visitors into regulars by rewarding specific behaviors like reading articles, commenting, sharing posts, and simply by just visiting. It’s all about rewards! As of October 2011 The Next Web, one of the leading news websites out there about technology and business and culture, onced had BadgeVille installed their website. BigDoor BigDoor is another gamification system whose goal is to help developers, publishers, and marketers make their visitors engage more and develop a solid community. It is easy to install, with a free widget that anyone can use for a test run. I actually tested BigDoor a couple of months back and landed on a problem but it was taken care of almost instantly by their team. They kept me in loop of what their discussion about my problem was and how they solved it. Talk about awesome customer support, even when it’s free! For bigger websites, there is a paid version loaded with extra features. PunchTab Through PunchTab, loyal readers earn points for every visit, likes, share, by becoming a fan, through commenting, and by tweeting. Website owners can then specify prizes that readers can “cash out” on using their points. I tested PunchTab too and the installation is pretty easy, anyone can use it. There’s also a very useful control panel where you can check the leaderboard, set prizes, and a lot more. 5 Ways Why Gamification Works Online forums were one of the first to use this system to encourage their users to be more active. I’m pretty sure that by now you already know what I’m talking about. In every forum system there is a “class” system where posters receive a rank whenever reaching a specific post count. There’s also “reputation” and “thanks” on some systems signifying that “this user can be trusted”. And in the online world, being trusted while maintaining anonymity is a treasure. So, how does gamifying your website actually work? By providing points for every engagement (share, comment, or when a user reads a certain number of posts). By awarding badges to loyal users, or users with high number of points. By having a private section that only users with high points can enter. By giving high-level users important tasks for the community. By making the points convertible to gifts. Successful Cases Have you heard of the social news websites Reddit and Digg? They are basically the same website, but I will talk about Reddit here. Reddit has a point system called “karma” which is acquired in two ways: through comments or through link submissions. Believe it or not, a lot of people spend several hours on Reddit just to amass thousands of karma. Imaginary points! But it works. I’ve been laboriously trying to study Spanish using Memrise for a month now, not continuously though. The idea is to first present you with common words that you should memorize. As you get to memorize the words you are then awarded with seeds, which you can “plant” on your brain by revisiting the test. Then as things progress the seeds begin to grow into plants. The more plants you get to grow the larger your vocabulary becomes. Facebook is not so different with the Like button and Share. Admit it, isn’t it fun to see hundreds of people like your witty post? Makes you want to post more, right? That’s how it basically goes. Gamification, it its basic sense, is all about making you feel important. Because you are! What Do You Think? Personally, I think gamifying 1WD would bring more people to browse and actually read every post we publish. I’m also guessing that the number of comments and shares, tweets, and +1s will increase dramatically. I mean, you know, we have over 3 million unique visitors monthly! What do you think? Would it work? Tell us!

Microsoft so.cl Social Network Review and Tour

Facebook and Google + have quickly established themselves as being some of the best social networks on the web. Now, Microsoft has entered the ring with their very own so.cl network. Social network, of course is a very broad term that refers to an online community. The last thing some people may want to do Post from:Microsoft so.cl Social Network Review and Tour

Bela garota

Bela garotaA new wallpaper has been posted to the Anime gallery on Desktop Nexus.Uploaded By: reginexusCategory: OtherDate Uploaded: 05/25/12Native Resolution: 1920x1200Points: 0Download Count: 0View This Wallpaper Now

Garden

GardenA new wallpaper has been posted to the Nature gallery on Desktop Nexus.Uploaded By: rosarinaCategory: FlowersDate Uploaded: 05/25/12Native Resolution: 2746x1855Points: 0Download Count: 0View This Wallpaper Now - View Wallpaper Comments (1)

Why You Should Test Your CSS

Comments

WP iPhone: Version 3.0 Available and What’s Next

Swipe to moderate comments It’s that time again. Version 3.0 of WordPress for iOS is out and adds some exciting new features. Most of the changes have been under the hood so we can now start giving you great updates fast. Let’s jump into it. What’s new? Push Notifications for WordPress.com. If you have a WordPress.com blog added to the app, you’ll now be able to opt in to receive push notifications of new comments, which makes it easier than ever to keep up with your readers and moderate comments on the go. Swipe-to-moderate Toolbar. Swipe over any comment in the Comments list to bring up a moderation toolbar – no need to use bulk moderation or go to the comment permalink. It’s right there, and it’s fast. Another nifty change is the highlighting of new comments in the Comments list when you’ve refreshed, it makes it easy to see what’s new. Vastly improved performance, especially for iPad. Version 2.9.6 was the most stable version of WordPress for iOS ever, until now. Over 44 bugs and crashes were fixed in this release. Translations added for Chinese (Taiwan), Hungarian, and Polish (thanks for the translation help!) Download version 3.0 of WordPress for iOS today. Contributors The following contributors have worked on this release of WordPress for iOS: koke, irbrad, aerych, daniloercoli, mrroundhill, rhc3, boctor, isaackeyet - are you next? What’s next? Here’s what the rough road map looks like, find more and discussions on the dev blog. Version 3.1 This release is tentatively scheduled for the end of June. Sliding Panels are currently being implemented for iPad. This will allow for faster management and an easier overview of everything in the app – from posts and pages to comments, stats, settings, web dashboard access, and WordPress.com features. A slide-out iPhone/iPod Touch Menu will allow for quicker access to the things you do the most in the app, and provide a great overview. Post Formats is being added to the post editor so you can easily change the appearance of your published posts if your theme supports it. A better Welcome screen to get you started quickly with the app and learn more about what it can do. More iPad Stats than ever before, fully leveraging the screen space. Version 3.x These are some of the features/changes we’re considering for the upcoming versions of WordPress for iOS. Image settings in post editor to set Title, Description, Alignment, Size, and more. Simple visual editor for text formatting options. Support for Galleries. Improved post/page Preview. Simpler access to Save Draft and other publishing settings. Quick Photo with “advanced” fields such as tags, categories. Push notifications for self-hosted blogs through Jetpack. Support for setting Featured Images. You should get involved right now. We’re looking for feedback on the planned features and help testing the releases with a new and active Beta Team. If you’re a developer you can get involved directly to help get these great features out quicker – learn more about how to get involved by visiting the Development section. What are your thoughts on WordPress for iOS and the future? Tweet us @WordPressiOS or leave a comment below.

Matt: Pando Notes

The video from last night’s PandoMonthly interview isn’t up yet, but there have been five blog posts that came out of it on their site if you want some of the highlights: Facebook, You’ve Got a Friend: Matt Mullenweg Thinks You Own the Future of Advertising; Distributed Workforces are All About Results; Matt Mullenweg and the Cult of WordPress; I’m Worried That Silicon Valley Might Be Destroying the World; WordPress and Tumblr are Complementary, WordPress Founder Says.

Perché a Mark Zuckerberg serviva un miliardo di dollari per compare Instagram

Palo Alto, California. La sera dell’8 aprile 2012, la voce di una mega acquisizione aveva cominciato a serpeggiare nei corridoi del quartier generale di Facebook. A parte una cerchia di pochi intimi del ristretto entourage di Mark Zuckerberg, erano in pochi a conoscere i dettagli dell’affare. Si vociferava roba grossa. Pacchi di dollari in contanti e stock option. Ventiquattro ore dopo, l’annuncio. Abbiamo comprato Instagram. Un miliardo di dollari. Facce allibite condite da espressioni incredule. Qualcuno avrà pensato che il boss fosse impazzito. Un miliardo di dollari per un’app di photo sharing? I conti avrebbero fatto fatica a tornare. Almeno fino a ieri. Ieri Facebook ha lanciato Camera. E’ un clone copiato spudoratamente da Instagram. Non è roba a cui Zuckerberg e company hanno lavorato negli ultimi due mesi. Il progetto risale a diverso tempo fa. Forse addirittura prima che le trattative con Kevin Systrom, CEO di Instagram, venissero avviate. Immaginatevi che figura da pirla avrebbe fatto Mark se avesse presentato Camera con Instagram ancora sul mercato. Il colosso dei social network che, non essendo in grado di competere nel mobile, copia di tutto punto un’applicazione gestita da una decina di persone in tutto che gode di un successo strepitoso. La stampa prima e gli investitori poi gli sarebbero saltati alla gola. Certa gente i soldi non è che te li regala per niente. L’innovazione è una cosa. Scopiazzare è un’altra. Comprare Instagram era l’unica soluzione per salvare la faccia. Fosse costato anche dieci volte tanto. Fossi stato Systrom avrei tirato di più sul prezzo. La mano al portafoglio, Mark, chiuso in un angolo, l’avrebbe messa lo stesso. L’assegno firmato in bianco, a qualunque cifra.

10 Things I Learned While Interning at YUI

For eight months, I had the opportunity to intern with the YUI Team at Yahoo, while I was completing my engineering degree. Today, I’d like to share the top ten things that I learned from my experience with YUI. A Bit of Background The YUI Team is primarily responsible for the development and maintenance of the YUI Library. The library is a collection of user-interface components, class management tools, and utilities written in JavaScript and CSS that make it easier for developers to create web applications. Unlike other libraries, YUI is not just about DOM manipulation; it has a rich set of class management tools and a robust event system that makes it easier to develop in JavaScript. Apart from that, the YUI Team is also responsible for YUI Theater, a very popular resource for web developers, along with a myriad of smaller tools such as YUI Builder, YUI Compressor, YUI Test and more. My role at the team was to primarily help develop components for the library, although I helped out a little bit with YUI Theater as well. 1. Understanding the Library When I walked into Yahoo on my first day, I had zero real-world experience with YUI. I was familiar with JavaScript, jQuery, HTML/CSS and PHP, but that was basically it when it came to web programming. I’m sure many of you are or have been in the same boat as me. My first task was to learn the syntax and architecture behind YUI3. Fortunately, I had a good understanding of raw JavaScript, and this helped immeasurably. A lot of front-end engineers know certain libraries really well, but many don’t know how they works under the hood. To build plugins or modules on top of a library (such as YUI3 or jQuery), it’s useful to have a fundamental understanding about how that library works, and in this case, how JavaScript as a language works. What I learned: Having a fundamental understanding of raw JavaScript (no libraries) forces you to understand the language better and makes you a better developer in the long run. Think about it. Each JavaScript library is different and has its own idiosyncracies. The only commonality is that they are rooted in JavaScript. Doesn’t it make sense to understand the idiosyncracies of JavaScript first? Take some time out to build something small without using a library. You’ll be glad you did. Js Fundamentals Links A Re-introduction to JavaScript by Mozilla Code Conventions in Javascript by Douglas Crockford 11 JavaScript Mistakes You’re Making by Andrew Burgess JavaScript Fundamentals Course 2. Using Git in a Team The YUI Team relies on Git as their primarily version control system and the project is hosted on Github. Previous to my internship at YUI, I used Git for my own small projects, and this generally consisted of the following steps: git pull origin master git add "" git commit -m "" git push origin master I’m sure many of you have done what I just described. Generally, as the project time gets longer, the commits get harder to understand! However, in a large team with a dozen developers, this method breaks down really fast. Firstly, master in YUI3 (and many other large projects) is considered to be stable code that has been unit-tested, so commits generally do not go there until a later stage. Generally, each developer works on a separate branch and merges into master once they are confident in their code. What I learned: You don’t have to be a guru, but understanding the basics of Git (branching, merging, reverting and solving merge conflicts) can go a long way to keeping your repos clean and organized. A lot of things are possible to do with Git and I’ve found that, rather than learning them ahead of time, it’s more useful to research when you need to do something in particular. More importantly, my experience has taught me to be careful when experimenting with Git. It’s better to ask someone when trying a new command or trying it on a mock repo instead of messing up the commit history of the live repo. :) Git Basics Links Basics of Branching and Merging 25 Tips for Intermediate Git Users 3. Modular Architecture for Web Apps Separating code into different JavaScript files to maintain a modular architecture can be painful for new developers. As a result, we often see large JavaScript files with hundreds of lines of code in them. This introduces tight coupling between objects and isn’t good practice when it comes to object-oriented programming. Even worse, you may have global variables that makes your app fail in unexpected ways. We’ve all been guilty of this in the past. Luckily, libraries like YUI can help you with this. What I learned: When writing an entire web application in JavaScript, it’s very important to have well-organized code; maintaining a spaghetti-coded project will only cause you headaches and nightmares. One of the most important aspects of YUI3 is its modular nature. As a developer, you only pull down the code that you need. This reduces coupling, keeps file sizes small, and improves your code’s readability. For instance, you could do this in a file called counter.js: YUI.add("counter", function(Y) { //Write code specific to my counter object }, '1.0', {requires: ['node']); //Say what my counter object code needs to run. YUI will pull these in first. And then in a separate JS file, such as app.js: YUI_config = { modules: { 'counter': { fullpath: 'path/to/counter.js', requires:['node'] } } }; YUI().use('counter', function(Y) { //Pull down my counter module. var counter = new Y.Counter({…}); //Create a counter instance }); Instead of having one big file called app.js, we’ve split it up based on functionality into counter.js and app.js. 4. NodeJS and YUI on the Server The growing popularity of NodeJS made me want to start building some stuff with it. Being a front-end engineer, I like being able to use JavaScript on the server. Although NodeJS is not suitable for everything, it’s worth learning. JS on the server does not have the same limitations as client-side JS because there is no DOM, but a library such as YUI can still help you with software architecture on the server – things such as class and object management, and custom events. What I learned: YUI 3 is not all about DOM manipulation — it also contains a robust set of class/object management tools, not to mention our powerful custom events. All of these tools are immediately useful in server-side programming. Being on the YUI Team, I was able to explore Dav Glass’ NodeJS-YUI3 module, which wraps up YUI functionality for use in a NodeJS environment. Remember that, apart from web sites, NodeJS is a useful tool for creating command-line utilities as well. Having good software architecture is always a big plus! It comes down to code management If you aren’t a YUI3 user, I still recommend finding a set of tools to help organize your JavaScript on the server. Due to the inherent async nature of JavaScript and its propensity for callbacks, you need to be careful or you’ll quickly end up with spaghetti-code. 5. Hacking Using YUI What I learned: Stay focused and keep hacking. Hacking is one of my favourite things to do when I am trying to learn something new. When trying to learn a new tool, there’s nothing like sitting down and building something with it. Similar to jQuery, YUI3 has a distinct set of widgets, utilities and CSS frameworks. On one of the Yahoo Hack Days, I had the chance to sit down and try some of these out. As I’m a fan of cricket, I made a mobile web app called Crictainment. Let me outline some of the parts of YUI that I found to be particularly useful for hacking. Y.ScrollView Hacking a web app using YUI is pretty straightforward. For example, if you want a scrollview that is flickable with your fingers: YUI().use("scrollview", function(Y) { var scrollview = new Y.ScrollView({ srcNode:"#scrollable", height:"20em" }); }); And in the HTML:

AC/DC
Aerosmith
Bob Dylan
Bob Seger

The scrollview module figures out whether it should be horizontal or vertical based on the width and height of its container. More information on the YUI3 scrollview is here. Y.Anim Another useful utility when hacking something is the Animation utility. It helps to spruce up your application with some nice animation that leverages CSS on capable browsers, and defaults to JS timer-based animations on older browsers. var myAnim = new Y.Anim({ node: '#demo', to: { width: 0, height: 0 } }); myAnim.on('end', function() { myAnim.get('node').addClass('yui-hidden'); }); Y.YQL Another really important tool that is great for hacking is YQL – Yahoo Query Language. I’m sure most of you have used it, but for those who haven’t, think of it as a way to access a whole host of different APIs using a standard syntax. YUI and YQL work really well together through the Y.YQL module. For instance, here we are getting the recent activity from Vimeo: YUI().use('yql', function(Y) { Y.YQL('select * from vimeo.activity.everyone where username="basictheory"', function(r) { //r now contains the result of the YQL Query }); }); Try out this query here. I use YQL regularly to access different APIs in a consistent manner. Regardless of whether you are using YUI, jQuery, or any other library, building something with it is a great way to become familiarized with your development toolbox. When hacking, don’t worry too much about the technical details – just set a time limit and just build it! 6. YUI App Framework One of the newer additions to YUI has been the App Framework. It’s similar to Backbone.js, but with YUI’s sophisticated event infrastructure under the hood. The App Framework made it easy for me to build MVC-style web applications. Just like any other tool, I built something with the App Framework to understand how it worked. Once again, I can’t stress the benefits of hacking on products. For the App Framework, I built TopForty with a friend of mine. The Model The YUI App Framework is built on the MVC design pattern. Let’s start with the model. If you aren’t familiar with MVC, take a look at this tutorial. For TopForty, we were able to get a large JSON array of the most talked-about songs from Twitter. Each object in the array looked like this: { "title": "PayPhone", "position": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artist": "Maroon 5", "duration": 232, "images": […] } We wrapped this up in a Y.Model subclass called Y.SongModel. Here’s the class definition: Y.SongModel = Y.Base.create('songModel', Y.Model, [], { initializer: function (config) { } }, { ATTRS: { title: {}, artist: {}, images: { value: [] }, nowPlaying: { } } }); This allowed us to listen for events whenever one of the ATTRS in the model changed and take appropriate action. For example, if the current song being played was changed: //When the model's isPlaying attribute changes, call the handleIsPlayingChange function. this.model.after('isPlayingChange', this.handleIsPlayingChange, this); The View Each model was represented visually by a View, which is essentially just HTML. For TopForty, we had a SongView that looked something like this:

Turn on the lights

Future

We wrapped this up in a Y.View subclass called Y.SongView. Each View requires a render() method that is called when displaying the view on the page, and a initializer() method where events are subscribed. If you want, you can establish a relationship between your view and a Model or Model List instance by attaching event handlers to them in a custom initializer() method like we see below: Y.SongView = Y.Base.create('songView', Y.View, [], { initializer: function (config) { var model = this.get("model"); model.after('change', this.render, this); model.after('destroy', this.destroy, this); }, render: function() { }, destroy: function() { }, showSongOverlay: function() { } },{ ATTRS: { container: Y.one("#songContainer") } }); By doing this, we were able to have songview specific methods such as displayNowPlayingIndicator() and showSongOverlay() on the Y.SongView instance rather than as separate functions. The Router The Router, formally known as the Controller, is what makes everything connect and work. Remember that in classical MVC, all user actions traditionally go through the controller. In web apps, the router uses HTML5 history to change URLs and controls the state of the application. For example, in TopForty clicking on a song changes the URL to the song’s ID. The URL change is picked up by the router, which loads the YouTube video for the song in question: Y.AppRouter = Y.Base.create('appRouter', Y.Router, [], { // Default route handlers inherited by all CustomRouter instances. index: function (req) { // handle the / route, load up the UI, etc. }, loadSongFromUrl: function (req) { // handle the /song/:songId' route //Get the youtube video from the model with an id of :songId and play it. } }, { ATTRS: { // The specific routes that we are interested in listening to: routes: { value: [ {path: '/', callback: 'index'}, {path: '/song/:songId'', callback: 'loadSongFromUrl'} ] }, } }); What I learned: Leveraging the MVC design pattern can help you create anything from simple non-interactive views to rich applications. I hope I have been able to give you a taste of what is possible with the YUI App Framework. For a more thorough walkthrough, I recommend the following links. If you aren’t a fan of the App Framework, I recommend you look into the equivalent jQuery alternatives. Backbone.js in particular has a large following with good documentation. YUI App Framework User Guide Github Repo of a YUI App Framework Project Slides from App Framework YUIConf Talk 7. Test Driven Development and YUI Test For developers, writing code is often the easy and fun part. The hard part is figuring out how old, buggy code works and trying to fix past errors. To minimize this, a lot of organizations including Yahoo emphasize the importance of Test Driven Development (TDD). With TDD, you write the tests first, then add the functionality until all your tests pass. Want to add a new feature? Write a new test, then code the feature. I was new to TDD when I joined the YUI team. Unfortunately, JS does not have the best testing suite. User interactions in particular are hard to test. Furthermore, we have to test in all the major browsers. One of the primary ways we conduct unit-testing is through YUI Test. What I learned: Following test-driven development principles makes you more productive as a programmer. YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as well as functional tests to be run in web browsers. Here’s how you set it up: // Create a new YUI instance and populate it with the required modules. YUI().use('test', function (Y) { // Test is available and ready for use. Add implementation // code here. }); Now, we can start writing some unit tests! var testCase = new Y.Test.Case({ name: "TestCase Name", //--------------------------------------------- // Setup and tear down //--------------------------------------------- setUp : function () { this.data = { name : "Tilo", age : 23 }; }, tearDown : function () { delete this.data; }, //--------------------------------------------- // Tests //--------------------------------------------- testName: function () { Y.Assert.areEqual("Tilo", this.data.name, "Name should be 'Tilo'"); }, testAge: function () { Y.Assert.areEqual(23, this.data.age, "Age should be 23"); } }); YUI Test supports equality assertions (areEqual()) which uses ==, sameness assertion (areSame()) which uses ===, special value assertions such as isFalse(), isNotUndefined(), mock objects and more. After writing our tests, we can run it as shown below. The results of the test can be outputted as XML, JSON, jUnitXML, or TAP. Y.Test.Runner.add(testCase); Y.Test.Runner.run(); Don’t forget to test, regardless of what you use. If you don’t use YUI Test, that’s fine. However, I want to stress the importance of testing your code. I’m guilty even today of writing code without writing tests and it’s probably okay if it’s your own small personal project. All of us cut corners sometime. However, if you’re programming for a client or an organization, following TDD principles will save you (and your clients) from a headache. 8. Minifying and Linting Your JavaScript Serving up JavaScript files without any minification or lint step can be risky. Minification can often compress the file-size by over 30%, making your page load faster for the end-user. Linting is a good way to ensure your JavaScript follows good coding practices so that errors are minimized. During my time at Yahoo, we used YUI Compressor and YUI Builder to compress and build our code. The build step includes concatenation and linting through JSLint. I’m sure most of you have used JSLint at some stage, and I do believe it helps improve your coding style. What I learned: Ask yourself if a certain practice reduce your possibility of errors and if so, follow it. Now, I’m not going to talk in depth about YUI Compressor and Builder because those may not be the tools of your choice. Usually for my own projects, I use the JSLint NPM Module to check my code. What I want to stress on is the need to perform these steps prior to pushing code out to production. As JavaScript does not have a compilation step, many developers are accustomed to pushing their JavaScript out to production, comments and all included. Again, this is okay for small projects, but perhaps you should consider minifying and linting your code to ensure users get the best experience. Additional Reading Grunt, The Build Tool for JavaScript Phing Build Script JSLint NPM Module YUI Builder YUI Compressor 9. Coding with the User in Mind The YUI Team has a great following of friendly, active, and knowledgable developers just like most large open-source projects. As developers working on open-source software, I learned that I can’t sit under a rock and code all day, even if I want to. Developing is as much about writing code as it is about making sure the code you write is actually helping someone solve a problem. This took me a while to learn, but it’s an important lesson. When writing software, the goal isn’t to use the coolest technology or the latest stack or the hottest language. It’s about the user. When writing OSS, the users are often other developers who build on top of your product. Small things such as weekly updates, tweets, and IRC communication can actually help you more than hours of coding. What I learned: It’s not about the technology or the stack or the language, it’s about the user. In my first month of interning at YUI, I wrote about 500 lines of code which I had to scrap because most of it was repetitive and did not address the end goal. I was guilty of coding too early without figuring out the requirements of the project. A good rule is to spend a third of your time gathering requirements, a third of your time writing tests and the final third implementing your software. 10. “When all you have is a hammer, everything looks like a nail.” I want to conclude by sharing the most important thing that I think I learned in my internship. I consider it to be more important than any technical knowledge that I gained. By working on a library that is not the most popular, I realized the importance of diversifying my skills and being flexible as a developer. I’ve seen how much work it takes to maintain an open-source project and have gained a lot of respect for everyone who release their well-written code for free. What I learned: Choose a library because it’s the right one for the job, not because it’s your favourite. Understand that different pieces of software serve different purposes, and sometimes understanding the difference is tough.

Ashtrays in Airplanes?

This is the conundrum that Matt Simmons noticed during a period of being a frequent flier. His blog post details brilliantly just much airlines hammer it into your heads to not smoke … and then the confounding ashtray in the bathroom (with a no smoking sticker on it, no less!) So why would they do such a thing? It turns out that having an ashtray in the bathroom an aviation requirement, based on human behaviour. After a 1973 flight crashed with 123 fatalities due to an improperly discarded cigarette, airline authorities realised the need to ensure that anyone wanting a cigarette would dispose of it safely. Even now. So if you do smoke in a plane, you’ll probably get booted off and fined, but at least you should be able to get rid of it without endangering the safety of the plane. Simmons suggests that this is all about affordances (and if you don’t know much about this, you should check out Don Norman’s Design of Everyday things for more), and behaviour (he recommends reading Nudge if you haven’t already). This story reminds me of the behaviour encouraged by the infamous Schiphol airport fly urinals as well. Read Simmons’ post for the full explanation. That said, there is one less place where you’ll see that sign. Notice how the one above your seat never goes off? Some modern planes now use that space to tell you when you can have your electronic devices on and off. ——– Image NC-CC by roychung1993

Responsive Typography - iA

Comments

Ramit Sethi Explains How You Can Earn More Money As A Freelance Web Designer

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!Ramit Sethi is the New York Times best-selling author of I Will Teach You To Be Rich and the author of the popular personal finance blog www.iwillteachyoutoberich.com, which hosts over 250,000 readers per month. Ramit’s advice has been featured in the New York Times, the Wall Street Journal, FORTUNE, NPR, ABC News and CNBC. Ramit graduated from Stanford and co-founded PBwiki, a venture-backed startup. Please introduce yourself to our readers. My name is Ramit Sethi. I run a website called I Will Teach You To Be Rich. I wrote “The New York Times” best selling book “I Will Teach You To Be Rich”, which focuses on how to manage and automate your money using psychology and systems.. And for the last few years, I’ve been teaching people how to earn money on the side using the skills they already have (e.g. web designers, photographers, project managers..). What is your own experience with freelancing? My experience has been pretty varied: I’ve freelanced as a writer. I’ve freelanced as a marketing consultant. I’ve done some freelance work for venture capital firms. I’ve even freelanced as a private consultant. Over the last few years, I’ve raised my rates from around 20$/hour to 3000$/hour. Why did you decide to teach people about freelancing? I didn’t plan to teach material on freelancing, but.. I went on a book tour on 2009. I visited a lot of different cities across the United States. In almost every single place that I went to I met my readers and asked them “What do you wish I wrote more about?”. Almost all of them said “I want to earn more money. Yeah, I want to invest and do all that stuff, but I also want to learn how to earn more money”. I went back to my team and we started researching all the different ways to earn money (..negotiating a raise in your current job, getting a better job, freelancing, creating products and selling them online..) and from this research, as well as from my own experience, I think that freelancing is the most effective way to earn more money (especially on the side). It’s also interesting, because a lot of people have this delusion of passive income. They believe “Oh, I don’t want to trade my time for money! I just want to make passive income!”, but if you ask these people “Alright, so how is it going, how much have you made?”, almost none of them had made any significant amount of money. However, with freelancing you can actually take your existing skills and earn a fairly significant amount of money, like many of my students who are earning thousands of dollars a month on the side while having full time jobs. How exactly do you help your students who are web designers? A lot of web designers feel frustrated. They’re getting these terrible clients who don’t want to pay and are saying things like “Why would I pay you, I can just go online to some theme site and get it for 20$”. They’re getting these terrible projects that require a ton of work for not that much money. Moreover, they spend most of their time chasing new clients. As you can see, it’s very frustrating for them. What I help my students to do is to first narrow down who they’re targeting. Many web designers have a funny idea that they should target as many people as possible, cast the widest net, because then they can potentially get more clients, but, counter-intuitively, it’s much more effective to really narrow down who you’re going after. I’ll give you an example. Let’s pretend that you’re a new mother. Let’s pretend that you just had a beautiful baby son and you want some photos taken of you and your new son. Who are you going to hire? Are you going to hire John Jones, who takes photos of babies, animals, barnyards and cars? Or are you going to hire Richard Johnson, who specializes in baby boys between the ages of one week and three months. Who are you going to hire? It’s obvious that you’re going to hire the person who specializes in that and you’ll be willing to pay more, because the second photographer understands all the particular unique challenges and ways to make a baby boy look beautiful. The same thing is true in web design: if your client just wants a random web designer, that’s probably not a good client for you. It’s hard for people to get that it’s okay to say no to the wrong clients, but once you’ll really internalize this, you’ll be able to focus on better clients, work with fewer clients and charge them more.. And they will be happy to pay! Agota’s note: Here’s a case study about one of Ramit’s students, a 20-something web designer Mike, who earned extra 6000$ in eight weeks by using some of the Ramit’s techniques. Okay, so before we get into the freelancing stuff.. A lot of people, especially creative types, hold this belief that “money is evil”, which prevents them from earning more and living the life they deserve. What would you say to people who want to overcome this limiting belief? My suggestion is: Look, think about something that you have paid for that you love. Maybe it’s that lipstick you buy. Maybe it’s that restaurant you go out to. Maybe it’s somebody who helps you clean your apartment, or does your laundry, or makes the product you love, whatever. Think about how happy you feel when you pay. You know, there’s always one or two things in our lives that we’ll pay anything for, right? Well.. Why can’t that be you? Your clients will be delighted to pay you if you can help them solve their problems, make more money, save time or get more clients. When we have these invisible beliefs we often believe that we’re cheating someone and that there’s only a limited amount of money in this world, so we’re taking it away from someone. However, if you’re actually helping your clients, if you’re putting them at the center of your business, you’re actually helping everyone create more. Not scarcity, abundance! You’re actually helping them get more clients, create more revenue, save more time. They’re happy to pass a small percentage of that to you. Get three really high value clients and watch and observe as they’re more than happy to pay you, because you are solving their problems. Also, in order to conquer this limiting belief, study people who are successful and don’t surround yourself with people who think that money is evil. ..by the way, I cover this in a lot more details in my Chase Jarvis video, you can watch it here. Okay, great, so back to freelancing.. Most people who have full time jobs and family responsibilities are crazy busy already and they don’t want a second job on top of all that. How can these people find time to freelance? Honestly, is it even realistic for them? This is a great question. In my research of over a hundred thousand people, when it comes to earning money, there are two biggest excuses that people have: Excuse No.1: “I don’t have an idea. I don’t know what I should do to earn more money.” Excuse No.2: “I don’t have time.” Honestly, I don’t accept that excuse. Most people can easily scrape together 5-10 hours, even if they have families, even if they have full-time jobs. I’ll give you three ways how you can do it, three ways how you can freelance even if you have a family, even if you have a full time job: 1. Implementing The Retainer’s strategy. One of my students, Dean Soto, actually has a very demanding full-time job in a technology industry, as well as a family with children. He didn’t want to take away from his family time, but he also knew that he wanted to earn a little bit more money to provide a better lifestyle for them. He took that Earn1k module on pricing, where we talk about how to charge in different ways, and he implemented The Retainer’s strategy. Now, what this does is he basically works with the best clients, who don’t need him at any particular time, they just want him to get things done. This way, Dean gets to come home from work, play with his family and still earn money on the side by spending about an hour every couple of nights working for his clients. He can do that early in the morning, he can do that late at night. His clients don’t care:they only want him to get things done. That allowed him to earn thousands and thousands of dollars. That’s one way, implementing The Retainer’s strategy. 2. Optimize your time. The second way is to optimize your time. We teach this in Earn1k. Most of us waste hours and hours per day. HOURS! Did you know that the average American watches several hours of TV everyday? Needless to say, there are a lot of ways to optimize our time. There’s a whole bunch of time management strategies that we outline, but in general, I’ll just say, could you find a way to save 30 minutes a day? Are there certain things you could do, for example, could you batch certain things, so you would do them all at once instead of spread out? Could you cut back on one thing that you’re doing that is not very productive? Could you wake up 30 minutes earlier? Maybe you could pay someone in order to outsource something that you do? Let’s assume you’re making 50$/hour (I’m just making up a number here). Paying someone 10$/hour to do the same thing, or to do, let’s say, your laundry, can be a very effective time arbitrage. So that’s No.2, optimizing your time. 3. Work for higher end clients. This is what I push my students to do. Many of web designers reading this (I know, because I’ve spoken to so many) know that it can be really frustrating to have to spend hours and hours every day on a project when you’re only getting paid a tiny amount for the work that you’re doing and you’re not getting paid what you deserve. Well, part of the reason for that is that you’re working with the wrong clients. My students who are successful and go through the program find that they’re spending the same amount of time (or even less), yet making far more money. Why? Because they’re working with clients who are happy to pay them their asking rates. So, it all comes back to how you’re helping the right clients find success. ..so you’re saying that it’s possible to earn a decent amount of money with only 5-10 hours a week (decent being more than 100$/week) ? Absolutely. Oh, much more, depending where you live, much more than 100$/week. My students are doing exactly that. You can see it for yourself here, it’s a list of some of my students who have earned a significant amount of money on the side. Let’s get into “how-to” part. What is the very starting point for someone who has a full time job as a web designer and wants to start earning money on the side (..and maybe someday switch to full time freelancing)? What’s the very first thing to do? Start by understanding what skills do you have that someone would be willing to pay for and who these people might be. This is a big foundational thing that many people miss. They start off by saying “Oh, I have this idea, I’m gonna start by getting business cards and setting up a website!”. This stuff happens much later. What matters first is being able to find those clients that might pay and really talking to them, listening to them, finding out what their big challenges are. This is where customer research comes in. This is why my students are able to charge so much: a lot of them go from charging 10$/hour or 15$/hour to charging over 100$/hour. The difference is that they start doing a really deep research. They ask questions like (let’s say they’re looking for web design clients): “Why do you want a web designer?”, “Have you already hired one in the past?”, “Did it work out?”, “Did it not work out?”.. They’ll also do a research on their market: “Who are the other designers who are doing what I want to do?”, “How much do they charge?”, etc. They’re not just walking and talking about their idea. The client doesn’t care about you and your skills: the client cares about how can you help them hit their business goals. You need to focus on what THEY want and what you can do for THEM. You can use my Briefcase technique for that. Once you can do that, something amazing happens: price becomes a mere triviality. A lot of people are concerned: “Oh my God! How can I charge 25$/hour when everyone else is charging 10$/hour?!”. Well, when you can figure out what the clients want better than they know it themselves, you can charge a tremendous amount and the clients is actually happy to pay. Those are the first steps that you take. How can web designers niche it down and define their ideal customers? How niche they should target? That’s a great question. In general, they should niche it down more than they are. When I ask you “Who’s your ideal client?”, you can’t just say “Someone who needs a web page or a small business owners”. That doesn’t mean anything. That’s everyone. How are you supposed to find those small business owners? However.. What if you said: “I want to find small business owners who run information product marketing companies, doing revenues between 100k – 1mil per year.”? Well, guess what? It’s much easier to find those people and, by the way, those people are willing to pay, because you have skills that can help them earn more revenue. We have this technique called Pay Certainty technique when it comes to niching it down. It’s a very simple principle which you can use right now. You know how a lot of web designers don’t know who they’re serving, so they’re just serving everyone? Or you have web designers who will say: “Oh, I want to go do web design for non-profits”..and they almost never make any money? That’s because they haven’t used something like this. Here’s what web designers can use right away: I’ll come to you and I’ll say: “Who’s your customer?” You say: “I want to serve non-profits who want a new web design”. Okay, great, we have two questions to ask: 1. Do they have the ability to pay? 2. Do they have the willingness to pay? Let’s try to test this. Do the non profit clients have the ability to pay? No! They really don’t’ have that much money, so probably not. Do they have the willingness to pay? No! They don’t want to pay someone for web design, really. They want to trade or barter or just get it for free. So they fail the pay certainty technique. ..but what if you say: “Hey, I want to find a company who needs an improved design, they’re a small business in an automobile industry and they need an improved design to sell more cars. Oh, and they do revenue between 100k – 500k a year.”. Do they have an ability to pay? Yes, they make 500k a year. Do they have the willingness to pay? Yes, they want to make more money! They’re willing to pay a little bit. THAT is how you start niching it down..and that’s how you spend less time getting more clients. What would you say to people who are just starting out as freelancers and are afraid to lose opportunities/lose customers by niching it down and think that they should take everything that comes their way? It’s a classic fear and it’s one of the quickest reasons why most web designers don’t really earn what they should. My simple answer is: try. Try it for one or two months and see if it works. Just try it, if it works, great! However, if it doesn’t work, if you find it challenging to find clients who are willing to pay what you’re asking and you find it difficult to raise your rates, then perhaps it would make sense to try a different way. I can tell you that this isn’t just something that I’ve used, this is a classic marketing principle and thousands of my students have also used it to earn significant amounts of money. It seem counter-intuitive, because you’re saying “No” to people, but.. Think about it in a different way . Think about as if you are looking for a relationship. Do you just go out and say: “I want to marry EVERYBODY!” or are you a little bit more selective? You don’t go after anyone who has two eyes and a nose. You say, “You known, I’ve certain values, certain things that I look for in a man or a woman”. You try to find out whether you are a good fit for each other. I think so many web designers try to focus on everyone instead of focusing on the right people because they lack self-esteem, as well as marketing skills. ..by the way, I do this with my own courses. One thing I do is I don’t try to appeal to anyone: I actually don’t allow people who have a credit card debt to join my flagship courses. Almost nobody does that. Not allowing people with a credit card debt join my courses costs me hundreds of thousands dollars per years. I do this because of these two reasons: 1. I think it’s the right thing to do. I don’t think that people with my credit card debt should be joining my very expensive courses. I think they should use my book or my free material to pay off their debt first. 2. It shows people that I don’t want everyone’s business, I just want the right business. When you do that, you actually stand for far more than just money..And, ironically, you can actually charge much higher rates by focusing on the right people. You always say “Get your first 3 paying clients!”. How can web designers do that? How do you actually go and get those clients? There are three most important things: 1. Eliminate time wasters. So many web designers just waste their time. They do things like get on Twitter, create a Facebook page and make business cards. How does any of those things help you get clients? They don’t. In most cases, none of these things help you get clients. You think client is going to randomly find your Twitter page and then decide to pay you thousands of dollars? That’s not how it works. I know, I have over 30 000 Twitter followers. So, eliminate time wasters and focus only on the things that are going to get you your first three paying clients. When you start setting something up, ask yourself: “Is this going to help me get 3 paying clients?”. No? Skip it. Do it later. ..for example, a lot of people want to build a massive website that’s going to take them three months. Skip it! You can set up a simple page or not even have a website. Well, web designers probably need websites and they need portfolios, but for other folks, they don’t need that. Do you really need business cards or can you just point them to your website? You get the idea. 2. Do your homework. Many people are guilty of what I call the “I, I, I” syndrome. They walk up to their clients and say “I can do this, I can do that..”. The client doesn’t care about you. They care about themselves, so what can you do to help them? Have you studied their business? Have you already come up with a list of suggestions of how you can help them? One of the most powerful ways to get a client is this: you walk into a meeting, ask about their challenges and then pull out a sheet of proposals that you’ve made from studying their website. This is called The Briefcase technique.. And it has closed people massive contracts. 3. Reach out to them directly. Don’t wait for them to come to you, go to them! Once you’ve identified your clients ( as in “Information product marketers who are doing 100k-1mil in revenue every year”,etc.), then you know where to find them, what they read, what sites they are on.. You can reach out to them directly and say: “Hey, I’m a web designer, I wanted to see if there’s any possibility of me helping you out with few things, I’m more than willing to give you some suggestions on how to improve your copy..by the way, I have done this for another clients, who recorded a 55% increase in revenue.”. Whoa, that’s pretty compelling! The clients will definitely take your call and now you can talk to them, listen to them and perhaps make some suggestions. That’s how you can go about getting your first three clients. ..by the way, there was this concept of features vs. benefits which has helped me tremendously in getting new clients. Maybe you can explain it to our readers? Most people focus on features. They say: “Here’s what you get with my web design service: you get a hosting account, you get ten pages design, you get this, you get that”. Well.. The client doesn’t care! What do the clients want fundamentally? They want to make more money, they want to get more clients, they want to spend less time, they just want it handled.. You can find this out by talking to them and doing research. ..by the way, this is a survey that I actually used to drive well over a 100k in revenue, your readers can check it out here. This is where you start doing your homework. You figure out what it is that they want and use it to present your services as a benefit. So, instead of saying “You get 10 web pages”, you say: “Look, my goal is to help you increase the number of subscribers by 25%” or, better yet, “My goal is to help you increase the revenue by 15%”. That is a benefit. Nobody cares about how many pages it is, or how much time you’re going to spend on it or what software you’ll use. They don’t care about all that. They want more money, more clients, in less time. Focus on what THEY want, not what you want. Many freelancers find it very challenging to decide what to charge for their services. When to work for free, when to charge and what to charge? Let’s start by talking about working for free. You know, I actually believe that working for free can be great if you do it for the right reasons. I’ve worked for free for many people and it has helped to accelerate my career a lot, but.. We’re all too well aware how often creative people get taken advantage of. You know, they’ll go and work for someone for free and they’ll get nothing out of it. Moreover, the free guy wants more and more and more and he gets mad when you don’t deliver. It doesn’t make any sense. So, here’s what I would suggest.. Here are a couple of good reasons to work for free: 1. When you want to build up a portfolio. Here’s what you can say: “You know, I normally charge 75$/hour, but I really like your project and right now I’m looking to build a portfolio, so I’m happy to work on this for free for two weeks. All I ask is if in at the end of those two weeks I do an extraordinary job, that we discuss going back to my normal rate”. That’s a good way of positioning yourself as a trusted high end provider, but also doing some free work to let them see how good you are. 2. When you want to work for someone who’s a connector. A connector is someone who you might do some free work while you tell them upfront: “Look, I’m willing to work for free, but my goal is if I do an extraordinary job for you, I’d like you to recommend me to three of your friends”. People have actually done that for me and I’ve sent them so much business that they didn’t know what to do with it. The same thing for some other of my friends, somebody worked for them for free, these connectors connected them to multiple clients. However, you always have to be upfront. ..so you’re saying that it’s better NOT to work for free indefinitely, without that upfront agreement? Correct. Okay, so the next thing is how much you should charge. You can find this out by finding out what your competition is charging. Again, if you think that your competition is every web designer in the world, you have to go much narrower than that. It pays to know who your competition is and what they’re charging. I explain how to do this in my Earn1k course. Also, focus on the value. For example, if you come to me and say: I’m going to increase your sales by 15%”, you can charge me anything!.. and I’ll pay it, as long as you actually deliver. So, the better you are, the more examples of successes you have in the past, the more you can charge. Let me just put it this way: I told you what my hourly rate is, right? I’m not charging that to everybody, in fact, I turn away a lot of people who can actually afford that, because I only work with people who I think I can add a lot of value to. Think of your favorite restaurant. The restaurant where you go and there’s always a line at the door. They probably could squeeze in few more tables, but they don’t, because they don’t care about serving everyone, they want to only serve the clientele they want. When you start positioning yourself as that, not just a commodity designer, but someone who these clients are lucky to have because you’re so skilled at what you do, then you can start at the top of that range to let them see how good you are. You’ve mentioned that you’ve increased your own rates significantly over the last few years. How can freelancers increase their rates over time? I bet a lot of people are scared to raise their rates. It’s interesting how many of the questions are about fear, isn’t it? There’s fear in charging a reasonable rate, there’s fear in raising our rates, there’s fear in focusing on niche customers and turning away other clients.. However, fear is not a good way to run your freelancing career. The very best freelancers know precisely who they are targeting and they’re very comfortable with saying “You know what, you’ re probably not the right fit for me”. Isn’t it interesting that so many web designers run their careers instead of actually studying people who have done it really well? I mean.. Let’s just challenge you: when was the last time that your freelancing friends systematically studied the best freelancers in their field:talked to them, took them out for coffee, studied their websites to learn how they charge and position.. When was the last time they did that? ..I think they haven’t done that all.. Yes. They’re governed by fear instead. It’s not a good way to go through life and certainly not a good way to go through your career. Here’s my suggestion how to raise your rates over time: I had a young woman who worked for me. She started by doing some pretty basic stuff, but over time, she was so good at what she did that she started asking me: “Hey, what else are you doing, what else is going on in your business, how else can I help?” and she started doing several other things. Over time she added so much value to my business that of course I ended up paying her more, I ended up paying her tens of thousands of dollars more. Why? Because she added value to me, the client. She made my life easier and she showed the ROI. Here’s something I want to say to freelancers and web designers in particular: you’re not just designers, you’re solving their problems. So, for example, if you find that they need help with their copy writing, either you can do it or you can refer them to someone who can. You’re solving their problems. Maybe they need help setting up and e-mail management software. You say: “Oh great, I know how to use Aweber” (or whatever you can), set that up and of course charge them. They’re happy to pay. Remember, you’re not tricking them. They’re happy to pay. Somebody who talks about it very well is a guy named Jay Abraham, he’s one of my mentors, he says: “Don’t just talk about YOUR services, put THE CLIENT at the center”. So, if they need something, figure out if you can offer it or if you know someone who can. After you do this time and time again, your client will think about you as their problem solver .. And that is an enviable position to be in. Is there a way to systematically expand your client base once you got your first 3 paying clients in order to make sure that there’s always freelance work available? There’s a way. It takes a lot of work, but there is a way. The best freelancers I know always have a waiting list of clients. They actively turn people down, because they’re not the right fit, or they’re not willing to pay, or they just don’t have time. Now, I don’t want this to sound intimidating, because if you’re first starting out, it can seem insane to have a waiting list of clients. However, all of this are simple steps taken day after day and applied systematically. So, how do you do that? 1. You get those 3 paying clients. 2. You decide whether you want to charge your existing clients more or you want to get more clients. 3. You ask your clients for referrals. “Hey, I just did a terrific job, helped you increase sales by 15%, or helped you to hit that deadline on time, I’d like you to introduce me to 3 other clients, can you help me with that? I’d really appreciate it.” That’s how you get more clients. There are several other sophisticated ways, like partnerships, referrals, constant lead generation, etc. Anyway, there are plenty of ways to get more clients once you got 3, 5, 7, clients. It’s actually much easier to go from 10 to 20 clients than to 1 to 3 clients. We cover all this in Earn1k. Talking about clients.. Many freelancers, especially those who are just starting out, waste a lot of time and energy working for really bad clients. Is there a way to know in advance that a client is going to be a time waster? What are the danger signs? Well, first of all, a lot of creatives get taken advantage of by people and yes, we can blame them, but really, we need to blame ourselves. When was the last time someone in a creative world, like web designers or photographers, actually took time to learn how the business works? Instead ,a lot of creatives insist “Oh, I just need to get better at my craft and then the money will come”.. Well, that’s not how it works! I made these mistakes too, but if you simply expect the right clients to find you.. That’s not how the world works. That’s why I teach what I teach: I’m so frustrated of creative people getting taken advantage of. Here are three ways how you can recognize and avoid bad clients: 1. Observe whether the client is clear about the project. Bad clients often spend enormous amounts of time talking about the project instead of actually focusing on what needs to be done. What I suggest is that you have a very clear questionnaire and a set of guidelines for your potential clients. This actually comes from studying the most successful freelancers. The best people have limited time, so they ask potential clients to fill out a questionnaire which shows that a client is serious. Don’t get on the phone for no good reason, just to chat about the project! 2. Mention the ballpark of certain work you’ve done in the past. It’s okay to mention the work you’ve done in the past and what you’ve charged for it, because if you are charging 15 000$ for a project and the client has 500$ budget in mind, you need to find that out relatively soon. It doesn’t mean that you have to put it on your website or that you need to ask about it on your first call, but you need to be honest with them about the type of work you do. 3. Be very clear about what you’re going after. It always comes back to your clients. Are you going after anyone? Or are you using things like Pay Certainty technique to eliminate 90% of time wasters and find people who have the ability and willingness to pay? When you can do that, you’re working with a much smaller group of people who are way more qualified. I’ll give you a simple example: I have 300 000 readers a month. However, when I did a launch a couple of years ago, I made something like 80% of my revenue from my small list of 2000 people. Let me say this again: I have 300 000 readers a month, but when I did this launch, I made 80% of my revenue from my small list of 2000 people. In other words, going after the right people can be dramatically more effective than going after everyone. I bet quite a few people would love to eventually become full-time freelancers. How can someone go from having a full time job and freelancing on the side to freelancing full time? Good question. I love the idea of freelancing on the side because it’s not as risky as jumping out and starting something on your own. I think that if you have a full-time job, it’s a great idea to spend little more time getting some clients on the side, because you can actually de-risk your own situation. Think about it: if you have a full time job and you’re fired or laid off, that’s it, it’s 100% of your income. However, a lot of my students have 4,5,6 sources of income, so even if they’re laid off, they still have have revenue coming through the door.. Also, they can still manage their time very well, because they’re working with their best clients and putting in as much time as they want. Here are the three things I’d suggest in regards to making the transition from having a full time job and freelancing on the side to becoming a full time freelancer: 1. Get more clients. I want to de-risk my situation before I make the jump from a full time job to a full time freelancing. That means I want multiple clients: not one, not two, but three or more clients paying regularly. 2.Have money in the bank. I want to have money in the bank. I want at least a few months worth of money for those cold winter days, because sometimes you just don’t have any clients, so what are you going to do? You need some savings. 3. Make sure there’s a consistent upwards trajectory. Well, if I only had three clients for the last six months and I can’t get a fourth one, that’s not a good situation. I want to get more and more clients paying more and more to me and me delivering more and more value, because that means that I really understand how to get more clients and deliver more value. Last, but not least, maybe you could tell our readers a little bit more about your course on freelancing? Who is it for and who it is not for? What they should expect? Where they can find more information about it? “When I went on tour to promote by book, the question readers asked again and again, in every city, was ‘How can I earn more money?’ I committed to teaching my readers the system I used to make money on the side and raise my rates to $3,000 an hour. Like successful personal finance, the way to earn more money on the side is to follow a step-by-step system that other freelancers and businesses have already proved works. I developed my course to help people to get their first three clients and earn $1,000 a month on the side because I knew from my psychology research those first steps were the hardest. Since then, I’ve tested the course on thousands of students who followed the steps to earn more money, pay off debt, and even quit their day jobs and go into work for themselves. If you want to learn more, check out http://earn1k.com/ where I give away my Idea Generator Tool and show people how to take the first steps toward making extra money on the side. The tool is free if you subscribe to my newsletter.” Thank you very much for sharing your insights with us, Ramit!

Inspiration from Print Ads

Advertise here with BSAIt’s really good to have different types of media to count on when you need to look for inspiration. You can find inspiration browsing through typography galleries, videos, packages, ads and much more. Today we will show you some inspiring print ads we found on Ads of the World so you can check out some nice colors, textures, type and copy. Betadine: Roller Skating Accident It shouldn’t hurt twice. Pain free antiseptic. Fight For Peace: Favela Who enters the drug dealing has nowhere to go. Contribute to social inclusion. Philadelphia: Celery Keurig: Cup of the Day, Courage Brew a cup of Courage before your big interview. We all know how important coffee is to us. Each of us drink coffee for different reasons. Share what Keurig brews for you each day at cupoftheday.com One Young World: Wash Fighting the world’s big problems at the same time. Pedigree Dentastix: No bite, no info — Sneakers Dogs use their mouths as humans use their hands. When they bite into something, they do it because they want to understand more about the object: taste, texture, temperature, etc. The bite represents 20% of a dog’s senses. This means that if his teeth aren’t healthy he can’t bite it. 20% of his world is gone. That’s why the dog can’t understand what some objects really are. With Dentastix you can keep his teeth healthy and his world complete. RICTV Record: Swimmer One third of the human body is made of water. The rest is gold. Resistol 911: Armageddon Instant glue. Vapona insect spray: Sewing Machine If you hate mosquitoes. Bertrand: Ferreira Campaign from Nossa, Lisbon for Bertrand, the most historical and the oldest bookstore in Portugal. Bertrand organized two special actions dedicated to two authors: Jorge Luis Borges and Vergílio Ferreira. During these actions, there were great discounts on all the books of the writers, reading sessions and debates about them. Saatchi & Saatchi Romania: The Lovemarks Tattoo, Male Some of them just stick. Show us yours and we’ll show you ours. Tuesday, 15th of May, Calea Serban Voda 133, after 8pm. Boss Insecticide: Interogation, 2 Comfort Fabric Conditioner: Good Soak, Dark Meets Son Las Vegas Wedding Agency: Crossword Bright weddings at another address: las-vegas.kiev.ua Minas Gerais Government: Fire Animals can only scream. You can prevent. Clorox: Yellow Clorox for colors. Keep colors the way you remember them. Newsweek: Microscope Mercado Magazine: USA-China Flag The largest trade partner of the European Union is now another country. The world is a hard place to understand. KoSamon hair dryer: Boxing It blows really strong.

The First Smashing Conference Is Coming: A Community Event For Web Designers

Probably the most remarkable characteristic of our Web design community is that we care about our craft. We care about best practices, about our work, about learning, sharing and improving our skills. This very spirit is the driving force behind our daily work at Smashing Magazine, and this spirit is what has prompted us to organize the very first Smashing Conference: a friendly, valuable and inspiring community event that will help us all become better at what we do. Whether you are a designer, developer, content strategist or business owner, at the Smashing Conference you’ll explore insights hands on and gain practical tips and new perspectives on our craft. We are very happy to provide an opportunity for you to share and gain practical knowledge in an intimate, informal atmosphere — right in our beautiful home town of Freiburg, Germany, at the foot of the legendary Black Forest. The legendary Historical Merchants Hall, a late-Gothic building built between 1520 and 1530. Its façade is decorated with statues and the coat of arms of four Habsburg emperors. An exquisite location for the very first Smashing Conference. Image credit. When and Where? We’re delighted to invite you to come together for this inspiring, forward-thinking event on 17 to 19 September 2012. The conference will host a two-day single-track conference on September 17th and 18th, as well as four workshops on September 19th. By “we,” we mean Vitaly Friedman, editor-in-chief of Smashing Magazine, and Marc Thiele, who has been running community events such as beyond tellerrand for over 12 years. The aim of the event is to deliver the same high-quality content that we deliver on Smashing Magazine, in the familiar atmosphere that beyond tellerrand events are known for. This will be a high-caliber yet friendly event that brings great value to everyone involved, and we’d be honored if you took a part in it. The conference will take place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest. The main hall of the venue. 350 tickets are available in all for our two-day single-track event. Image credit Keeping the conference affordable for everyone is important to us. All tickets includes two full single-track conference days, on Monday and Tuesday. Please note that only 350 seats are available. We are pleased to announce that the first 70 early-bird tickets are on sale for a price of €249. The regular price after that is €349. And all prices include the German VAT of 19% and booking fees! Get your ticket now before it’s too late. We’d be honored to meet you in September! Speakers and Topics If you’ve been following Smashing Magazine for a while, then you won’t be surprised by the focus of the Smashing Conference. We’re aiming to cover a wide variety of Web design topics, such as visual design, front- and back-end development, UX design, mobile, responsive design, the business aspects of running a website, as well as the intricate details of the designer and developer’s workflows. We’re encouraging our dear speakers to share details on how they work, what tools they use, and what their design and coding process looks like. We’re aiming for valuable, practical and inspiring talks. We’ve handpicked all of the speakers to ensure the high quality of the event. So far, 10 out of 15 speakers are officially confirmed. Please note that the topics presented here are subject to change. More details on the conference, speakers, talks and workshops are available on the conference’s official website. Speakers Speaker Talk Details Aarron Walter The Real Me Aarron Walter is the lead user experience designer for MailChimp, where he socializes with primates and ponders ways to make interfaces more human. Aarron is the author of Designing for Emotion, the purple stripe in the rainbow of knowledge from A Book Apart. He lives with his wife and son in Athens, Georgia, and is a wannabe barista. He tweets about design under the moniker @aarron. Chris Heilmann To be announced Chris Heilmann has dedicated a lot of his time to making the Web better. Originally from a radio journalism background, he built his first website from scratch in around 1997, and he spent the following years working on a lot of large international websites, and a few years at Yahoo building products and training people; he is now at Mozilla. Chris has written and contributed to four books on Web development and has written many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more. Jeremy Keith The Spirit of the Web Jeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there. Jonathan Snook Your CSS Is a Mess Jonathan Snook writes about tips, tricks and bookmarks on his blog. He has also written for A List Apart, 24ways, and .net magazine, and he has coauthored two books, The Art and Science of CSS and Accelerated DOM Scripting. Most recently, Snook has written the eBook SMACSS, sharing his experience and best practices on CSS architecture. Snook also works on the design team at Shopify. Josh Brewer Responsive Is as Responsive Does Josh spends his time thinking about, designing and building things that live at the intersection of form, function and aesthetic. He is principal designer at Twitter and is the co-creator of 52 Weeks of UX, Ffffallback and Shares. He is also an advisor and mentor at The Designer Fund. Lea Verou To be announced Lea has a long-standing passion for open Web standards and has been often called a CSS guru. She loves researching new ways to take advantage of modern Web technologies, and she shares her findings on her blog. Lea also makes popular tools and libraries that help Web developers learn and use these standards. She speaks at a number of well-known international Web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures in the Web development course at the Athens University of Economics and Business. Paul Boag Better Websites, Happier Clients and Improved Job Satisfaction Paul Boag has been working on the Web since 1993. He is Web Strategist at Headscape Ltd, a Web design agency that he cofounded back in 2002. Paul also produces and hosts the longest-running and award-winning Web design podcast at boagworld. He is a regular speaker at conferences and author of Client-Centric Web Design. Rachel Andrew The Future of Content Management Rachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website. Stephen Hay To be announced Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. Aside from his client work, he can be found speaking at industry events about Web design-related topics such as CSS layout and responsive design workflow. Stephen is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences. He is also co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side. Stephen has written for publications including A List Apart and .net Magazine. He also coauthored the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack. Tim Ahrens Web Fonts Backstage and On Stage Tim Ahrens is a type designer based in Berlin, where he runs Just Another Foundry with Shoko Mugikura. As a former architect, he is interested in the interplay between technology and design. He develops design software such as the Font Remix Tools and Web applications such as the FontFonter. Since 2010, he has been working as a consultant for Typekit. Gallery of the speakers at the Smashing Conference. Workshops Trainer Workshop Details Aarron Walter Interface Design Bootcamp Whether you are designing a Web app or website, following best practices and standard design methodologies will help ensure that your interfaces are usable and engaging. In this workshop, we’ll explore the design process in detail, including user research, wireframing, prototyping and visual design. Through real-world examples, you’ll see how an idea can evolve into an interface. Andy Clarke Fashionably Flexible Responsive Web Design Responsive design has made designing flexible websites fashionable again, but there is more to being fashionably flexible than technology or using CSS3 media queries. So, this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the “content out,” instead of from the “canvas in.” He’ll demonstrate how to separate design from layout; and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (color, texture and typography) before reassembling it for a fluid continuum of devices, from phones to desktops and everything in between. Jonathan Snook SMACSS: Scalable and Modular Architecture for CSS The SMACSS workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It brings the eBook to life with practical examples and in-depth discussion. Gallery of the workshop experts at the Smashing Conference. Further Details About the Conference As we finalize some major details of organization, we are working hard on a plethora of small details to make the event as valuable and memorable as possible. Please expect more speakers to be confirmed soon and more topics to be announced. Also, we are looking for sponsors of the event, so if you are interested, please get in touch with us. More details on the location, hotels, speakers, talks, workshops and after party are presented on the official Smashing Conference website. One of the workshop rooms, with medieval decoration and statues of medieval knights. 30 seats are available for each workshop. Image credit. Facts In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business. Dates: 17 to 19 September 2012 (workshops on the 19th, and conference on the 17th and 18th). Venue for workshops and conference: “Zum Roten Bären”, Historical Merchants Hall, Freiburg. Early-bird price (only 70 tickets): €249 ($315) (including German VAT and fees). Regular price: €349 ($440) (including German VAT and fees). Each workshop costs €349 ($440) (including German VAT and fees). Twitter: @smashingconf Lanyrd: http://lanyrd.com/2012/smashingconf/ Facebook: http://www.facebook.com/smashingconf Website: http://www.smashingconf.com “Zum Roten Bären“, one of the locations for the conference’s workshops. Large view. We’re very excited about the Smashing Conference, and we’ll do our best to make it a valuable, memorable and useful event. We can’t wait to meet you, and please feel free to contact us if you have any questions about participation or sponsorship. © Vitaly Friedman for Smashing Magazine, 2012.

Building an Online Web Design Portfolio: Tools, Themes, and Templates

There many benefits to having an online web design portfolio, but there is something more than beneficial to displaying web design work online, in the arena in which it was intended; it just feels at home. Optimized and ready to show off its full potential. A high-quality portfolio can leverage the same interactive, responsive features that a well designed website uses, letting you show clients your strengths and capabilities. A successful online portfolio will use the same rich media functionality that a great website would, too — and with these hosting services, templates, and themes, you don’t have to be an experienced developer to do set yours up. These tools allow designers at all levels of expertise to create a sleek, functional online web design portfolio worthy of the work it displays, from low-maintenance to highly customizable. We’ll start off by taking a look at portfolio hosting services that allow for a wide range of customization. For those who use WordPress to host their portfolio or personal website, we’ve collected responsive and rich media capable themes and templates that are specially oriented toward portfolios. Portfolio Hosting Services Behance Behance is perhaps the best-known and highest-visibility portfolio hosting service on the Web. They emphasize the fact that the Behance network gets “fifteen times the traffic of all other leading portfolio websites combined” — a powerful asset for designers looking to gain more exposure and a wider audience. Behance offers fully customizable portfolios for creative professionals of various disciplines, and its graphics-heavy layouts and multimedia options are well suited for web designers. A free account offers unlimited images, video, text, and audio, and its social-media integration lets you share your work across multiple platforms. You can display work on your LinkedIn profile, promote it on Twitter and Facebook, or use Behance’s community tools to follow other users, and gain followers, too. You’ll find curated sites, collections, and galleries from big names to independent designers, as well as active job boards and groups. Behance aims to connect talented designers and professionals with each other and with career opportunities. Behance ProSite ProSite.com is Behance’s paid portfolio hosting service that features even more customization options, personal domain names, white-label branding (no Behance logos), and syncing with the Behance network. The service costs $11 per month and functions as a personal website for creative professionals; you can import your blog and develop your personal branding vision. Behance ProSite is accessible to designers with all levels of development experience: no programming knowledge is required to build a site, and you can choose from a large variety of layouts and templates. Viewbook Portfolio hosting service Viewbook is embracing the mobile revolution: it’s available on Web and mobile and offers iPad-app integration, so you can display your work on the go. The interface is clean and minimalist, though the portfolios feature plenty of customization options. Viewbook focuses heavily on social media: you can share and publish your work to Tumblr, Twitter, Facebook, and more with one click, or embed Viewbook albums in your personal website or Facebook timeline. Support is available for Adobe Lightroom, Google Analytics, and Wufoo forms for freelancers. Pricing is three-tiered, ranging from $4 per month for a basic gallery to $19 per month for a personal domain, unlimited websites, full customization, and Viewbook’s iPad app. Cargo Collective Cargo Collective is a web publishing platform with an emphasis on portfolio capabilities and support. The service offers public website hosting and “Personal Networks” for users, as well as a support and development forum. Some basic programming skills are needed to complete customization, though many templates are available as well. However, Cargo is best suited for those designers with more development experience. Cargo sites offer built-in video and audio players for externally hosted content, as well as cloud-based image hosting. An expansive directory lists experienced designers and developers to aid other users in customization. Like Behance, Cargo Collective is community-oriented. Wix Wix is a DIY website-building service that lets users create a custom site — with no knowledge of coding necessary. Based on a drag-and-drop format, Wix now offers rich media capabilities, with both Flash and HTML5 support. Hundreds of free templates are available, and the service is based on a freemium model: users create free accounts, and upgrades cost between $4 and $16 per month for features like custom domains and e-commerce designs. Fresh.li Fresh.li, like Wix, offers creative-professional portfolio services without requiring programming experience. They boast that users can create “a new website in five minutes,” using either a fresh.li subdomain or a personal URL. Free portfolios aren’t as extensively customizable as other options, and just six templates are available, but paid options allow for customization using HTML and CSS. Carbonmade Carbonmade, with its simple but sleek interface, is strictly a portfolio-hosting service: no networking or career services are included, though it’s a useful option for designers who might have less experience and are primarily looking for a place to display their work. Carbonmade portfolios are functional and relatively minimalist in design, though the site itself features whimsical graphics and illustrations. Free and paid options are available; the latter, at $12 per month, offers domain binding and technical support. Specialized Portfolio Hosting Services Certain portfolio-hosting services are geared toward particular categories of creative professionals, or toward goals like career building. The services below are for designers who are looking for specific capabilities from their online portfolios. The Creative Finder The Creative Finder is a division of DesignTAXI, a news site with a focus on web design. It offers portfolio hosting and integration with networking and career services, letting creative talent find employment opportunities and professional connections. Portfolios on The Creative Finder function essentially as galleries of a user’s work, allowing for professional contact, networking, private messaging, and linking to profiles on social-media platforms. Sortfolio Sortfolio is career-focused, as well. The service offers listings for designers rather than full portfolios. It offers the most functionality to designers who are already relatively established, but who want to expand their reach to big-name clients. Free listings are available, and $99 per month will get you large, interactive display ads and personal-branding options. Krop Krop is a tool for job-seeking web designers and creatives; it brings together job listings from recruiters and paid portfolio hosting, at $9.99 per month. Portfolios are fully customizable, and Krop’s back-end creative database lets recruiters target designers by specific capability, location, availability, and professional level. Subfolio Subfolio, a DIY portfolio tool, allows users to configure portfolios on their own servers. The service is best for designers with significant development skills: it’s a PHP5 file browser application that lets users manage settings, file types, themes, and more. Subfolio reads the files you place within a directory folder and then turns the content into a website, turning folders into sections and files into pages. It’s currently in private beta, though you can request an invitation here. Themes and Templates for WordPress Many web designers choose to host their personal websites and portfolios on WordPress. The platform’s open-source software and powerful CMS offer extensive customization options for users of all development skill levels. Many portfolio-specific themes and templates are available for WordPress, and, as with the hosting services detailed above, options are available for those looking for all degrees of customization. Below are a number of themes and templates that are particularly well suited to web designers. Responsive Themes Responsive themes allow portfolio content to be displayed correctly — and attractively — on multiple devices, screen sizes, and resolutions. Given the rapidly increasing importance of the mobile web, it’s crucial for web designers to optimize their portfolios and content for mobile devices if they want to reach a broader audience. Theme Trust ThemeTrust.com offers premium WordPress themes with responsive, minimalist interfaces, many of which are optimized for web-design portfolios. Some examples of portfolio themes (all ThemeTrust themes below cost are priced at $49): Infinity Infinity, a responsive portfolio theme, features a grid layout and infinite scrolling capabilities. The image-heavy interface allows designers to showcase their work front and center. Among its features are a built-in lightbox, social-media integration, and threaded comments. Solo Solo, a single-page portfolio theme, leverages jQuery effects within a minimalist layout. The theme features expanding project displays, automatic scrolling, and integration with Flickr and Twitter. Reveal Reveal offers an Ajax-powered portfolio with a responsive layout; the theme features animated jQuery drop-down menus, smooth portfolio filtering animations, and extensive customization options. The image-heavy, grid-system layout displays well on all devices. Hero Hero’s parallax home-page banner lets designers prominently feature their best work. The responsive theme includes templates for pagination and archive pages, making it easy to organize a larger body of work. ThemeForest ThemeForest.net offers themes and templates for designers with programming backgrounds: for WordPress, Joomla, HTML/HTML5, Magento, and more. Below are examples of responsive themes and templates which work particularly well for web-design portfolios. Tinfoil Tinfoil is a one-page portfolio template that includes jQuery tools and minified CSS and JavaScript. Beyond the portfolio itself, the template features a gallery, blog, contact form, and more. Parallax Parallax, an HTML portfolio template, offers (of course) a parallax slider, a skeleton grid system, and a three-layered background that creates the illusion of depth. The WordPress version focuses more on blog capabilities, though it also offers extensive customization options, with an intuitive interface. Milestones Milestones, a single-page template for either personal or commercial portfolios, is a colorful template with a host of features especially useful for web designers. It offers valid HTML5, a contact form, a jQuery slider for the portfolio itself, and various social-media integration options. Themify Themify.me provides WordPress themes that are extensively customizable — without requiring coding knowledge. Theme packages do include PSD files and Themify frameworks if you have programming experience and would like to further customize them. Folo For designers focusing primarily on networking, Folo is a useful theme: it allows designers to display their work samples and available services, and features the same customization options as other portfolio themes. Folo’s circular slider and twenty-one layout options — lists or grids — make it a flexible option for designers looking for business opportunities. Blogfolio Blogfolio’s interface combines a web-design portfolio with blog posts, turning your portfolio into an integrated personal website. The theme’s image-heavy layout features threaded comments, custom menus, feature boxes, and various grid or list options. Simfo Simfo, a responsive portfolio theme, offers full customization for designers with programming experience; it’s coded with HTML5 and CSS3. The theme offers a feature slider, a plugin-free lightbox gallery, and optional search options, RSS, and social-media icons. In the End Whether your development skills are as well honed as your design abilities or whether you’re looking for a simple, straightforward online portfolio, there is an array of choices available for hosting services, themes, and templates. The best part? Flexible customization options mean that you can change your portfolio as your skills, needs, and experience changes — all with the support of design communities and networks. What are some of your favorite web design portfolio options? (rb)

10 Myths That Scare SEOs But Shouldn't - Whiteboard Friday

Posted by randfish In this week's Whiteboard Friday, we'll be tackling some SEO myths that might scare you but shouldn't. From keyword density to reciprocal linking, lets set the record straight about some of the myths out there. After watching what are some myths that don't scare you and why? Enjoy your weekend! /**/ Video Transcription Howdy SEOmoz fans. Welcome to another edition of Whiteboard Friday. This week I want to address some of the myths that form in the SEO world that get people really scared and worried and asking questions in Q&A and on Twitter and on forums going, "Hey, wait a minute. I heard that this is a problem. Is this going to cause something bad with my site?" Let me put these to ease and try to explain each one. We've got ten. Let's get to them. Number one: I'm worried because I have too many links pointing to my site from one particular domain. Maybe it's a site-wide link. Maybe they just embedded you in their blogroll, and it's linking to you. This isn't a problem unless the links are coming from a highly manipulative source, in which case you'd hope they weren't linking to you anyway. But I wouldn't stress too much about it. I'll get to people pointing bad links to you in a second. If you have 80,000 links pointing to you from one particular site, don't stress. This isn't going to kill your SEO. It's not the end of the world. If there's a good, editorial, natural reason why those links should exist, it's probably going to help you. What it won't do is help you 79,000 times more than if you just had a few pages on there, but it will help. It's not a terrible thing. Don't panic. I would almost never worry about this unless the links are from particularly terrible, spammy pages, in which case you might sort of worry, right? People have been worried particularly with Google's Penguin update that, "Oh, the links that I have might be hurting me." Great. Okay. If you bought those links and you did it in a manipulative way, you acquired them somehow, fine. Contact those people. Please tell them to take those links down. If other people are just building spammy links to you, do not sweat it. Sweat earning great editorial links. Great editorial links, a fantastic site, great user experience, tremendously valuable content that people don't want to live without, and building a real brand on the Internet, those things will protect you far better from spammy links than trying to contact webmasters one by one and get them to take down your link profiles. There are cases where you might need to do this if you have done or someone else has done bad linking on your behalf in the past, but these are rare. They're few and far between. I'd worry much, much more about building up a great site. Number three: My keyword density is too high. I don't know where this concept came from. I know years ago people worried about keyword density as in the percentage of keywords on a particular page that are my target phrase that I'm trying to rank for. That's a good search engine signal, and I should try to make my keyword density 2.78%. No. A) You don't need to worry about that, and (B) you also don't need to worry about too high. There was then this myth that, oh wait, if my keyword is too high a percentage of the content on the page, maybe they won't use it for ranking, but they'll flag it for spam. Years ago Bing did say, "Yes, keyword density, we might look at that as a signal of how we do things." If you're writing content naturally and you've got a great user experience, and it just so happens that you have an e-commerce product page where the title is the name of the product and then the product description contains the title twice, and that's just how it goes and that's natural and it's in the headline, and it happens that, oh no, my keyword density here is 30% or 40% of the text on the page, don't panic. That's okay. That's a fine thing. As long as you're doing things naturally, you really never need to worry about keyword density. It's when you're doing manipulative kinds of things and building pages just to rank and stuffing them with keywords, then you might start to get into danger territory. But even then, keyword density is probably not the way to measure it. Measure it by looking at the page and being logical and saying, "Does this look like a great page for users?" If not, "Wait a minute. Is the word on here four times, and I only have ten other words? Oh no." Don't panic. Number four: Other sites are scraping your site or your blog - your RSS feed is the most common way - and then republishing it elsewhere. Not only should you not panic about this, but I might say you should be a little proud of this. This mean that great, the Internet has discovered you. They've decided your RSS feed is good, useful, and worth copying and reposting. If they're reposting other places, 99% of the time they're also linking back to anything that you link to, including your own site. So having your blog picked up and scraped is just fine. Some of these, yes, they're spammy, manipulative, and junky. Don't worry. Google's not going to hold that against you. It's not your fault. Every site on the Web has this. Literally SEOmoz, I think, is copied by 200 plus different aggregators who all republish our content, maybe more than that. Don't stress. Don't worry about it. What you can do, what you should do, is make sure that those links that you've got are absolute links, so that when they're copied and picked up, they point back to your site. That's a great way to go. But don't panic about this. A lot of these uses are also legitimate. Number five: What if Google sees my analytics because I'm using Google Analytics, and then they see that my engagement rates are low? I have a high bounce rate, low time on site. Are they going to punish me for low engagement and give me a penalty? No, they are not. Don't panic about this either. Number one, Google has promised that the Google Webspam Team and Search Quality Team do not get data directly from Google Analytics. In the aggregate, they might be using it to inform some things, but they are not looking at your site's analytics and saying, "Oh, let's punish that guy. Let's punish him for having low engagement, low time on site." They might see that people are bouncing off your page and back to the search results and being unhappy and those kinds of things. But if you're delivering a good user experience, if you're delivering a great answer to simple questions, your bounce rate is going to be high, and your engagement and time on site is going to be low because you've answered the user's query very quickly. Think of Q&A sites that are essentially answering dumb, simple questions like: What year Franklin Roosevelt was born? Oh, good, it was this year. Good, I'm out of here I'm done. You're gone. Don't worry about this low engagement, low usage. And don't worry about Google seeing into your analytics. They're not going to penalize you for it. Number six: If this link is reciprocal, meaning I link to this site and they link back to me, will I get penalized for it? Does it lose its value? Should I not link to the places that are linking to me? What if the New York Times links to me? I want to share that article with all my readers and say, "Oh, look, the New York Times covered me." But I don't want to make it a reciprocal link. Stop worrying. This is not a big concern. You don't need to worry about reciprocal links from this perspective. Years ago, there was this practice, and it still exists a little bit, where people would create pages and pages of links. They'd all point to their friends who they found on the Web. Their friends would all point back to them, and reciprocal links became a bad word because it was a spammy tactic that the engines had a pretty easy time identifying. But if you're just sharing the stuff that's sharing you, this is a fine thing to do. Don't panic. Don't worry that just because you're linking to something, the link back won't count. Number seven: I'm linking with non-ideal anchor text. Is this going to hurt me? I have this page and I want to point to it internally or externally with a link, and I wanted it to contain this anchor text, but it's not as user-friendly and I'm worried people won't click through on it, or it seems a little manipulative, or I just can't get my product team to buy into that. It's okay. Don't panic. Don't worry about that either. In fact, there's a lot of suspicion in the SEO space right now that Google is looking at exact match anchor text and saying, "This stuff is not natural. This isn't normal. Why are people linking like this?" If you have an opportunity where it fits well with user experience, fits well with the content, and the anchor text makes sense, great. Fantastic. Take that opportunity. Earn that link. But don't stress if many of your links are pointing with a brand. This is again part of that density myth, where people think, oh, wait a minute. If 100 links point to me but 50 of them don't have my anchor text, then I won't rank for that. This is not a problem. You're going to be just fine. Don't stress. Number eight: There are links in my footer. I have a footer on my website. I've got links in there. Are those going to negatively affect me? I've heard lots of bad things about footer links. Most of the time, this is not a problem. Again, it goes back to the same thing that we've been talking about throughout this Whiteboard Friday, which is if you're doing it for good user experience. If we take a look at one of my favorite footers, which is on Zappos.com. They have a great footer. It's long, it's lengthy. It almost feels too long, but it has fun stuff in there. It makes me like the company even more. It links to a lot of good things. Great, no problem. However, if you're stuffing tons and tons of links and you've got a footer that, oh here's an exact match anchor text; there's another exact match anchor text; there's another exact match anchor text; and I've got a big old list of them, and it goes all the way down my footer, you start to look like you're manipulating the search results. We've actually seen people who've pulled these or made their footers look more natural and more user- experience centered, the penalties will actually be lifted. So it looks like Google algorithmically penalizes people for tons of stuffing and bad keywords in the footer. But just because it's in the footer doesn't necessarily mean it's bad. Don't stress just because of this word footer and footer links. Number nine: Will URLs without keywords prevent me from ranking well? I don't know where this myth came from, but there's like this world of, "Oh, look, it's /123 or /?ide=7 instead of /keyword which I wanted to rank for." This is not a tremendous problem. Certainly if you can get to the point where your URLs are keyword friendly and they're static, that's good. That's best practices. You want to make it so that when someone reads your URLs offline or sees them in an email or a tweet, they go, "Oh, I bet I can guess at exactly what's on that page," and that's a wonderful thing. Yes, when people copy and paste those URLs, the keywords will be in there. That's nice. But this is not going to prevent you from ranking. You see tons of pages that rank very well that do this. I would not stress about this. I wouldn't necessarily jump through tons of hoops to have all your URLs rewritten. It can be a big engineering effort. Sometimes it pays off. When you're doing a site redesign anyway, go for it. But I wouldn't make that the centerpiece of your SEO campaign. Oftentimes, this is not going to move the needle as much as you think it will. Number ten, our last one: What about link bait? I'm worried about link bait and content marketing efforts and building this great content stuff, having a blog, having infographics, and having these cool videos, because they're not my product pages or sales pages. Won't Google eventually penalize for this because they don't want to see people just engaging in producing great content and earning links to their site? No. Google and Bing have both stated very specifically that they love this practice of content marketing, of doing great stuff on the Internet, even if it's only partially or semi-relevant to your particular niche or industry or customers. This is like saying, "Hey, I have a business that hosts a bunch of events. I have a business that donates to charity. I have a business that is one of the best employers in the state." It is interesting and does cool stuff outside of our pure product and sales process. That is a good thing. That is a great way to earn branding and awareness and attention. It's a great way to do well in social media and earn a following there. It's a great way to have content that's spread throughout the Web. It will help with SEO because of the rising tide phenomenon, which is essentially your site is this ship sailing on the ocean, and as the tide rises from all the links that are pointing into you, essentially your domain's link juice rises and authority rises, all the pages on there will perform slightly better. Google is not going to take away this power and essentially say, "Oh, you know what? We're only going to count links to the exact page and we're only going to count them exactly this. We don't want this concept of domain authority." They love the concept of domain authority because they love the world of brands and branding. I would not stress that your content marketing and link bait efforts are going to be penalized or devalued. In fact, I would continue to focus on them. And if you can find ways to make the audience overlap well with what the people are actually buying, that's even more fantastic. I hope you've enjoyed this Whiteboard Friday. I want you to de-stress, stop worrying about some of these myths that I know are popping up all over the place. Stop being scared of words like footer links and footers and URLs without keywords and keyword density. Just because these words are out there, just because they're causing problems for some people who are doing things in a spammy, manipulative way, doesn't mean every SEO needs to stress about them. All right, everyone, I hope you've enjoyed this Whiteboard Friday. We'll see you again next week. Take care. Video transcription by Speechpad.com Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

Windows 8 and HTML5: A story just unfolding

(Page 1 of 6)HTML has revolutionized the way we do just about everything. We buy plane tickets via Web pages rendered in HTML, we read the statuses posted by our friends and update our own status via HTML pages, and our applications exchange data using XML documents that are inspired by the example of HTML. Most of us even get our news and entertainment through the medium of the Web, where HTML has been king since the early days.There have been several attempts over the years to reinvent HTML, including the introduction of Curl . I was personally involved in helping the company behind Curl develop its first sample applications many years ago. It has found its niche, but fell short of replacing HTML as the default medium for the Web.There are, of course, the various add-ons such as Adobe Flash and Microsoft’s Silverlight, but none have come close to the success of the original Web delivery media. The original is what we call just plain HTML, though it is really HTML4—officially standardized in 1997.Conventional wisdom is that if you cannot make something better, then the best course is to improve on the original instead. That wisdom has led us slowly to the development of HTML5. I say slowly, because it has been taking shape for many years now and has caused a great bit of infighting and posturing by the various stakeholders. In fact, even as of this writing, it has still not been completed officially, yet it is solid enough that the major browser makers have been adopting the features to a great enough extent that HTML5 development is here and real. Many of the earliest adopters predicted, and in many cases hoped, that this new style of application would undermine Microsoft’s position in the Web development world. Now, as you will see, even Microsoft has a story for leveraging HTML5. You can decide if the way it has allowed for HTML5 on its systems makes those predictions true or not. The Web Hypertext Application Technology Working Group (WHATWG) is a group comprised of representatives from most of the various companies that offer browser software, including founding members from Apple, Mozilla and Opera Software. Because the W3C was not working on HTML5, but instead occupied itself with XHTML, this group took matters into its own hands by starting to work out the specification for the next version of HTML. In 2007, the W3C came around to the realization that HTML5 was the place to be and picked up the work started by WHATWG. The W3C has been adding its credibility to the effort since that time.But the process has been fraught with politics and competing agendas. Chris Wilson of Microsoft was invited to join WHATWG but refused, reportedly over patent policy issues. Many viewed the entire effort as an opportunity to dislodge Microsoft’s position (with ASP.NET) in the Web technology world, but the real goal, now at least, seems to be to make Web development easier for everyone. The politics endangered that, but the good news is that it seems to be coming together now, thanks in large part to some well thought-out guiding principles that have helped build consensus.Stephanie (Sullivan) Rewis of W3Conversions gave an “Intro to HTML5” presentation in which she outlined the philosophy for HTML5. I recommend it to anyone wanting to really develop expertise with the technology.According to Rewis, one of the guiding principles for HTML5 is that if any browser maker does not agree to support a feature, then the feature is dropped. I assume that only counts for what we would consider major browser vendors, but she did not elaborate. In either case, I believe that this is important to make sure that fragmenting the browsers does not occur, something that I, as a Web developer myself, am very grateful to see in place.She also explained that the process of figuring out what to change for HTML5 involved finding the common things that were being done with HTML4 and seek to make those easier and better. This is meant to clear the hacks out of the system and lend itself to higher productivity, since it minimizes the time that Web developers have to spend working around weaknesses in the old system.Finally, Rewis emphasized the introduction of error handling into HTML5 as a huge benefit. Error handling is of course the key to robust systems and by extension to developing quality systems.In May of this year, the HTML5 specification entered the Last Call phase, pointing to 2014 as the timeframe for final Recommendation for the standard. There is, though, no need to wait that long to make things happen by solving problems with HTML5.

Scaling Magento for the Global Market

A Webinar Presented by AOE Media and MagentoScaling Magento for the Global Market Find out how AOE media implemented an innovative scaling and caching infrastructure for one of the world’s highest traffic Magento Enterprise stores - Rovio. AOE media enabled Rovio to sell their tremendously popular Angry Birds merchandise on a global scale and handle millions of unique visitors per day. Learn the online secrets of one of the worlds most popular stores! Date/Time: Wednesday, May 30, 2012, 9:00 AM - 10:00 AM PDT

Rumor: Internet Explorer 10 Metro to Run Flash After All

Leaked screenshots show Microsoft may have changed its mind about the plugin-free web. The latest builds of Windows 8 show limited support for Flash even in the Metro version of Internet Explorer 10.

Coda 2: Reviewed

Well, it happened; Panic finally released the long-awaited version two of their popular code editor, Coda. But does it live up to the hype? Well, that depends on what type of coder you are. Read the full review after the jump! The Good It's Beautiful When Panic initially unveiled the tour video for their new editor, I was taken aback. The massive file icons only appeal to a very specific type of coder – and I'm not that person. I, as well as many others, found them to be considerably unattractive. Perhaps they'd be appealing, if you exclusively work on static designs, but as someone who stares at an image-less, black background for the better part of each day, these icons only take up space. Luckily, they can easily be reduced to simple text, at which point the editor becomes infinitely more attractive. The icons are a gimmick. Helpers Clearly, Coda is playing to its core audience: PHP developers. While you can certainly code in any language, PHP receives the bells and whistles. As a PHP developer myself, I won't deny that "WAT" is scattered throughout the language. Even after years and years, I still frequently refer to the PHP.net documentation to remember which order a function's parameters should be passed. Do I set the haystack as the first or second parameter, when using stristr? This is one area where Coda shines. It provides instant documentation in the sidebar as you type. What's unfortunate is that this feature is limited to, essentially, front-end developers: HTML, CSS, JavaScript, and PHP. Why? Nonetheless, it's a helpful resource, though I'll note that, despite the fact that Panic lists JavaScript as being supported, it only offers to link me to the book documentation. A bug perhaps? Clippings Coda's native clippings feature has received a substantial upgrade as well. Rather than the awkward floating bar from Coda 1, the new version rests as its own panel in the sidebar. Notable additions include multiple (tab separated) insertion points, and the ability to assign both tab triggers and keyboard shortcuts. Sites The standard "Sites" layout is back in Coda 2, which allows you to assign either local or remote directories to one click icons. No notes here; it's helpful, and the new ability to group sites into “lists” (or categories) is very much welcomed. Baked-In CSS Edit In Coda 1, the CSS editor was available via its own tab, or panel; however, with this new version, it's baked into the editor. For instance, as you type background, the option to use a GUI to create a gradient will be provided, though I must admit that setting values and percentages wasn’t overly intuitive. Note: did you notice in the image above that Coda only adds a single Webkit prefix? Yeah, we'll cover that shortly! :/ This same functionality is for other properties, such as box-shadow and padding. Honestly, these aren't features that I'd ever imagine using; they'd only slow me down. But still, for newcomers, I'm sure they'll prove to be helpul. Quick Open It's nothing new, but, if you need to quickly switch between files, you can press Control + Q, and type in the name of the file. It's not nearly as fast (or responsive) as Sublime Text's implementation, but will get the job done. Built-In Transmit The popular Transmit engine is essentially baked into the editor. This provides you with a full file browser for, not only your local files, but also through FTP, SFTP, WebDAV, and S3. This is a huge plus for some, though, for me, I don't remember the last time that I uploaded files to my server with (S)FTP. Still a nifty feature, though! Terminal Introduced in the first release of Coda, the Terminal panel is back. If you’re not the type of coder who has Terminal open at all times, accessible through a keyboard shortcut, then this will be a welcomed feature. The Bad Multiple Cursors Really? No multiple cursor support? Coda provides a "block edit" functionality, but it's confusing, and not nearly as intuitive as Sublime Text's implementation. In this editor's opinion, it was a massive mistake to not make multiple cursor support a top priority. I can't imagine using an editor that doesn't offer support. Odd CSS Support From a distance, Coda's CSS support appears to be fantastic. Auto-completion for the new CSS3 properties, a GUI for creating gradients and box-shadows, etc. What more could you want? Well, yes that would be true, if those implementations were flawless – but they're not. For example, remember the nifty documentation functionality that I noted above? It's very helpful…and limiting at the same type. You might be surprised to find that, if I type the official transform property, nothing shows up in the sidebar (there's also no auto-completion for the property). The documentation only registers if I specificially use -webkit-transform. Yep, the official version doesn't work – and neither does -moz-transform. Oh, and as for Opera and Microsoft prefixes (-o and -ms, respectively), you can forget about it. Zero auto-completion support. They might as well not even exist. Webkit Love Affair There's no denying that Coda's Webkit-based support is fantastic. It makes sense; the live preview uses the Webkit engine, so they need to ensure that the gradients (and other CSS3 properties) that the GUI produces will render correctly. But, particularly when considering the huge debates that have centered around CSS and Webkit in the last half year, Panic's decision to seemingly endorse Webkit-exclusive CSS3 properties is a terrible one. Why will it auto-complete -webkit-animation, but not any of the others (ms, o, moz)? Why does it render a Webkit gradient, but not for the other vendors? When questioned (on Twitter), Panic noted that it's incredibly simple to manually add the other prefixes. True; no one is denying that. But why should we have to? Do it for us. If convenience were the only downside, that would be one thing, but the problem is that their decision to only provide Webkit generation and auto-completion endorses the notion (especially for newcomers) that it's okay to tailor designs specifically for one engine. Note: a smattering of Mozilla prefixes are provided, but not nearly as many. I Wish… If, behind the scenes, Coda would maintain a list of every CSS3 property, along with its required prefixes, that would be huge. Don't make me memorize whether or not Microsoft now provides its own prefix for gradient support. Be a good role model, and do it for me. Sheesh, don't make me build a tool, like Prefixr, to get around this. Git Git integration in Coda 2 is certainly not a minus, but more of an "ehh." The previous version of Coda provided Subversion support (while the community moved to Git). So, sure, adding a UI for Git was a smart move. It very well might be helpful to those who aren't entirely comfortable in the Terminal, but, still, I wonder how many of these folks are truly using version control. Do they understand what a branch, stage, or commit is? My instinct is that, if you do, then you'll absolutely prefer to perform these sorts of commands in the Terminal – likely using your own custom aliases to speed things up. Nonetheless, it's a feature that might be helpful to some – just not me. Command Palette Considering the fact that Sublime Text 2, in barely a year, has become the golden editor amongst web developers, you would think that Coda might adopt some of the most touted features in that editor. Why isn't there a helpful command palette that allows me to specify which action to execute with text? I can't always remember the keyboard shortcut for creating a split; why can't I pull up the command palette, and type "split"? At this point, I consider a command palette to be essential in my workflow, yet Coda is missing one entirely. Installing Plugins We're still in the early days of Coda 2; as such, there currently aren't any plugins available on Panic's website. Hopefully, once some are available, there will be an easy, Package-Control-esque method for installing them. Please don't make me manually download and install these. In Sublime Text, if I want CoffeeScript syntax highlighting, I can literally have it in ten seconds. Will Coda provide this same convenience? My instincts point to "no.", which is not a good sign. The success of an editor has more to do with the community’s involvement than anything else. Vi-Mode Option Remember when I noted that Coda was made for a very specific type of coder? Yeah, well that type of coder likely doesn't use Vim (or Git-based deployment). For me, though, it's the difference between using Coda and not. I'm heavily dependent upon these keyboard commands, but Coda has left me in the dark. Why? Sublime Text offers Vi (Vintage) support; even Chocolat does. I'd imagine that, at some point in the near future, support will be provided through a plugin, but, nonetheless, when considering the resurgence of Vim in the last few years, shouldn’t support should be baked in? Only Four Color Schemes I grant you that this is petty, but why does Coda only provide four color schemes for the editor? Why not offer a dozen or so? We coders love our themes, but will now have to resort to scouring the web for custom skins. Or, when considering the fact that Solarized is one of the most popular, cross-editor themes on the web, why not provide that as a built-in choice? Chocolat does. Admittedly, things like this are small annoyances, but, still, they're just that… annoying. A Great Sidebar…But Clearly, Panic spent a great deal of time on the new sidebar functionality. With all of these helpful features, though, why I am limited to just one view at a time? Maybe I wanted a file browser on top, and the documentation viewer below? It would be far more convenient if I could stack these panels. Configurability Sublime Text is sometimes criticized because its configuration options page is essentially a JavaScript object. The irony is that I consider this to be one of its best features! I have control over everything! Need to change the tab-width, font-size, or a keyboard shortcut? Easy – it takes five seconds. What about on a per-file basis? That’s doable too. With Coda, though, I virtually have no clue how to configure it to my preferences – beyond the basic settings that are provided in the Preferences pane. Closing Thoughts The updates also aren’t indicative of today’s modern developer. As I proof this article, I realize that it has come across as somewhat critical. The truth is that Coda 2 is a solid editor. Sure, it has some bugs, but it was just released. Give the amazing Panic team time to listen to community input and release updates/patches. And, certainly, missing functionality can often be provided, via plugins. The truth is that I'm only capable of reviewing an editor based upon on my own needs. Personally, I'm most concerned with speed, convenience, and Vi support. Instead of Panic focusing on what will make me more efficient at my job, it sort of feels as if they’ve tacked on a lot of eye candy that doesn’t necessarily help me much. The updates also aren’t indicative of today’s modern developer. When considering Coda's stand-out features: File Icons - It’s a gimmick; do people really want massive file icons? FTP Integration - Helpful, but in a modern world, where we deploy websites and applications with Git (whether to Heroku or PHPFog), I'll very rarely make use of it. Built-in MySQL - Again, helpful, but you'll likely find yourself resorting to more powerful dedicated apps, such as Sequel Pro or Querious. It feels tacked on, for eye candy. Git Support - I'll stick with Terminal. You likely will too. (But hey, Coda has a built-in Terminal panel.) I wish that they had instead focused more on speed – not necessarily the speed of the editor, but the speed of my workflow. How can I accomplish my daily tasks more quickly? From this perspective, Coda 2 doesn’t provide anything new. While I've only had a day with Coda, I must admit that something feels a bit…off. It doesn't feel as intuitive as I would have expected from Panic. Frequently, I find myself confused over how to execute simple operations. "Oh, I have to double-click to open this file." There's also no denying that this is initially very confusing. So we have a sidebar of files, then another panel in the middle for files, and then, lastly, remote files. This is what I was greeted to after opening Coda for the first time. I've since learned that you have to get away from the notion that the traditional sidebar is specifically for displaying files. In the image above, it just happens to be set to the "Files" tab, which accounts for the doubled-files issue. Nonetheless, it took me a moment to come to grips with this. Will I Switch to Coda 2 There’s this part of me that wants to use Coda. It’s beautiful and feels modern. But, then again, the simple fact is that I’m far more efficient in Sublime Text 2. You might be wondering why I haven’t mentioned the new Air Preview feature. Well, I’d very much like to, but haven’t yet been able to get it to work. I’ll update this article once I do!

HTML for Icon Font Usage

Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best. You want the icon to enhance a word You want the icon to stand alone but still be functional or informational And our major goals here are: As good of semantics as we can get As little awkwardness for screen readers as possible This ground has been treaded before, but I think the following techniques are a small step forward. Enhancing a word Let's say we have a header like "Stats" and we want to set it apart from other headers on the page and emphasize it's meaning. Semantic ideal:

Stats

Result: So to get that icon in there (remember we're talking font icons here, we can't just pad the left and use a background) we'll need to insert some content. Using a pseudo element is tempting because 1) they aren't read by most screen readers 2) we don't need dedicated markup for the icon which is a semantic ideal. Unfortunately, VoiceOver on OS X does read the content of pseudo elements. (reference 1, reference 2) Well, perhaps "fortunately" as if I'm reading the spec correctly that's what it is supposed to do. Psuedo elements just aren't in the DOM and thus that probably makes it harder for third-party apps to do. The good news is that if we use a bit of markup, we can use aria-hidden attribute to prevent it from being spoken. One more dash of bad news, even with aria-hidden on the markup surrounding the icon, VoiceOver on OS X will announce "HTML Content" when in focus. #dammit. But alas! We can still win here. If we combine the markup technique and pseudo element technique, we can insert the icon with no VoiceOver weirdness. And as a double-win freebie, this combined technique is ideal for keeping our CSS lean and mean as it requires no class-name-bloat and works well with the next use case we need to cover. So the final markup for this becomes:

Stats

And the CSS is: [data-icon]:before { font-family: icons; /* BYO icon font, mapped smartly */ content: attr(data-icon); speak: none; /* Not to be trusted, but hey. */ } Holy cow that's easy eh? Notice we aren't using a specific class name for the icon (e.g. like .icon-stats or something), we're using a data-* attribute to hold exactly which character we want to insert. In our icon font, we map those special characters to the icon we want to use. I find this perfectly semantic and even future proof (you could always select uniquely down the line even if you change the character). But if you prefer class names, more power to you, that's fine and doesn't change this technique drastically. We'll cover mapping characters at the end. Stand-Alone Icons Say we have an icon that is a link or in some way functional, but it isn't accompanied by any text. For instance, a shopping cart icon that you can click to go to your shopping cart. Hopefully that functionality is obvious visually, with some kind of rollover state or general design obviousness. But that functionality also needs to be audibly obvious. Instead of crafting a totally new technique to deal with this (which I've dabbled with in the past) let's lean on what we've already started. A span that inserts the character with a pseudo element, and text that sits right next to it that we kick off the page visually. We need very little in additional CSS, just a little usability fix applied via class, and a toolbox class for hiding the text but leaving it accessible. .icon-alone { display: inline-block; /* Fix for clickability issue in WebKit */ } .screen-reader-text { /* Reusable, toolbox kind of class */ position: absolute; top: -9999px; left: -9999px; } Hey, it works View Demo In VoiceOver, anyway. Would be great to hear from people who use other screen readers how this holds up. Building / Mapping Your Icon Font One "issue" in the world of icon fonts right now is that the majority of them available come pre-mapped to letters. Used with improper markup, the letters become "content" and a part of the semantics of the document. Or worse, read outloud by screen readers. It almost never makes sense for an icon to be mapped to a letter. Instead, I recommend mapping icons to the closest unicode symbol you can find. For instance, mapping a heart icon to ❤ is a splendid idea. The meaning of symbols is rather relative anyway, so close counts and will be a semantic improvement immediately. Even better, I like the idea of mapping icons to the "Private Use Area" of Unicode. As I understand it, this is exactly why it exists, to use for your own special characters. Mapped this way, you're in no danger of the character being spoken by a screen reader. Unfortunately at the time of this writing icons mapped this way don't work in even the latest Safari, so it's not yet recommended. Pick out an icon font. Go to IcoMoon and load it up (or use their icon set) Choose the icons you want. Map them to the characters you want. If you don't care about Safari, PUA is best, otherwise pick a smart symbol. Download the fonts/demo. You can also use Pictos Server to do the icon-picking and mapping, but it only works with Pictos and doesn't help you with choose symbols (you could copy and paste from here). It is a very nice set though and hosts for you and makes it very easy to existing sets without manually swapping out font files. The Future In the future, hopefully we can rely on speak: none; working perfectly everywhere so we can go back to using pseudo elements and perfect semantics. Also, I'm sure eventually Safari will support PUA and we can map icons perfectly semantically as well. HTML for Icon Font Usage is a post from CSS-Tricks

Multilingual and multinational site annotations in Sitemaps

Webmaster level: All In December 2011 we announced annotations for sites that target users in many languages and, optionally, countries. These annotations define a cluster of equivalent pages that target users around the world, and were implemented using rel-alternate-hreflang link elements in the HTML of each page in the cluster. Based on webmaster feedback and other considerations, today we’re adding support for specifying the rel-alternate-hreflang annotations in Sitemaps. Using Sitemaps instead of HTML link elements offers many advantages including smaller page size and easier deployment for some websites. To see how this works, let's take a simple example: We wish to specify that for the URL http://www.example.com/en, targeting English language users, the equivalent URL targeting German language speakers http://www.example.com/de. Up till now, the only way to add such annotation is to use a link element, either as an HTTP header or as HTML elements on both URLs like this: As of today, you can alternately use the following equivalent markup in Sitemaps: http://www.example.com/en http://www.example.com/de Briefly, the new Sitemaps tags shown in bold function in the same way as the HTML link tags, with both using the same attributes. The full technical details of how the annotations are implemented in Sitemaps, including how to implement the xhtml namespace for the link tag, are in our new Help Center article. A more detailed example can be found in our new Help Center article, and if you need more help, please ask in our brand new internationalization help forum. Written by Pierre Far, Webmaster Trends Analyst

The need for a responsive image format

Christopher Schmitt calls for a responsive image format that's a storage locker and similar to the MP3 format and explains its benefits and the main issues in its way

Comics and UX, Part 2: Flow and Content

Comickers have long known the secrets of visual storytelling, and there is much we in UX can learn from them. Earlier this week I shared basic techniques comickers use to craft stories and lead their readers’ eyes. Today I will show you how to master flow and control the perceptions of your readers, how visual metaphor in UI can bridge language barriers, and why our definition of “content” needs revision. Note: In this article, I will use “reader” when referring to people who would read comics and/or visit web sites, and I will use “user” to refer only to people in the context of visiting web sites. We already covered grouping, proximity, pacing, and balance. Each of these is powerful enough on its own, but when combined masterfully, they allow you to control a reader’s perceptions. I’m going to show you how to weave these disparate pieces together to build a better experience for your users. Flow Taken together, all of the elements of cartooning create something called flow. A master of flow can make readers’ eyes dance across the page, even in unconventional directions. Left to their own devices, eyes want to travel in a downward slanting direction across pages. This is why ad magazines have “v” shaped layouts. This is really only good for scanning. Both web designers and comickers don’t want readers to scan, we want them to digest, to understand, to listen with their eyes. While there are very few rules in comics, one is that the Western reader’s eye always starts in the upper left side of the page. If there is no panel there, the eye moves downward and to the right in search of a place to start. Illustration for Of Github and Pull Requests. Using the above techniques, you can coerce the reader’s eye to take unconventional paths. Comicking techniques in action Now that you know the basics, let’s put these babies to use! We’re going to start by looking at some fairly high-level implementations where we can use visuals to replace words before moving on to show how proximity, temporal spacing, balance and flow can be used directly in a design. Internationalization An excerpt from an IKEA instruction manual. When you rely more on visuals than text, your work can be understood across language barriers. Art is a universal language, and that’s why we see it used so much in international publications or handbooks like IKEA’s above. There’s even a set of international road signs used by countries complying with the Vienna International Convention. This way, when you cross country borders in Europe you know that there’s a railroad crossing ahead or that you need to keep an eye out for pedestrians– even if you don’t speak the language. Sourced from the Merriam Webster Visual Dictionary (which is a really cool resource) You’ll notice that these images are starting to form their own language, a visual vocabulary. They’re becoming symbols, with each symbol embodying a single idea. This is how writing began in Egypt and China. Similarly, it’s how our interfaces evolve. Visual metaphor A comic panel becomes an image that suggests and action which can be further simplified into an icon. Would the letters t-r-a-s-h resonate as much as this simple image? Sometimes, a “simple image” describes a complex action. For instance, this icon can mean trash, remove, delete, discard. On a list of favorites, it can mean “unfavorite this and remove it from my sight” – a very complicated concept! But we can use visual shorthand to get it across intuitively. Real-world examples Shopping cart inventory screen from Fab.com. In this shopping cart inventory screenshot, we can see not one but two comic techniques at work: panelling and proximity. Notice how each item has its own box or panel separating it from the other. But also notice how the “your order” box is off on its own on the right, in the last section the user will look to when looking at a page in left-to-right eye movements. This makes sense since the designer wants users to first review their purchases then the information in the “your order” box before clicking “check out.” Imagine how much clunkier this would be if the “your order” box was on the left! Also notice the “x” buttons in each item’s box. Here we see proximity and visual metaphor at work. The “x” here simply implies “remove” without the need to explicitly state it. The proximity of these removal buttons to the items they remove also lets users know what will be removed. Dribbble.com’s home page features new submissions from users. Dribbble.com uses proximity, visual metaphor and panelling as well. The white box that encompasses each “shot” contains three to four icons that show how many views, comments, and favorites the image has and if the image has an attachment. Interestingly, the creator’s name doesn’t appear inside this panel. It appears underneath the panel, but users can infer ownership by proximity. What the name is closest to, it must be related to. Blue Cross Blue Shield’s home page exemplifies “flow.” Blue Cross Blue Shield does a great job with their entire home page. It starts with a sweeping establishing shot – lots of space gives the user a chance to pause and absorb the site. The caption pulls them in and the “Shop for Health Insurance” box calls them to action. Right below that, three evenly spaced panels set a stable rhythm for their content, stressing that each article is of equal importance. This page is a good example of flow, so good that I wanted to show you how easily its layout could be repurposed for a comic. Content vs. Copy Will Lieberson, editor at comic publisher Fawcett Publications, stopped by a barber shop late one night. While waiting for a shave, he noticed that a kid next to him reading one of his own comics! But then he realized that the boy was only reading the top panels of every page. When he tried to explain to the youth that you should read a comic’s page from top to bottom to get the whole story, the boy quipped, “I know, but this way is faster!” (citation: Steranko History of Comics, Vol 2, Page 15) Panel of Fangs of the Fiend found at Stupid Comics When your words and pictures are fighting each other for dominance – when you fill your page with information that doesn’t further the plot – readers start skimming, also known as scanning. People don’t read, they scan…right? Thanks in large part to Jacob Nielsen’s work, it’s a common heuristic that people don’t read pages, they scan them. This is, of course, a drastic oversimplification. We’ve trained readers to skim content by inundating them with terrible, fluffy, poorly prepared and badly placed content. It’s a natural reaction to bad storytelling to just skip to the good parts. Consider how our grandparents would pick and choose their reading materials. After carefully choosing their reading material, they sat down to digest their choices in full. They didn’t skim The Great Gatsby. They didn’t glance at the Wall Street Journal. They chose what they wanted to read, and they read it. Works were curated by slews of creators, editors, and reviewers to ensure that when audiences came, they were not disappointed. People would become outraged with creators and publishers over bad content! It’s not that people have no patience. It’s that the bulk of online content providers have repeatedly failed to provide things worth spending time on. Now users have knee-jerk reactions. As soon as they land on a page, they turn their shields on – deflecting the ads, the talking dogs, the long intros, the fluffy copy – and begin searching for the meat, the ker-pow. Users are like that little boy, reading the top panels of every page then moving on because life’s too short to slog through your crappy content. Content strategists and user experience designers have tried to address this observed “people don’t read, they scan!” problem in a myriad of ways by optimizing microcopy, keeping things above the fold, A/B testing calls to action, etc. But we need to remember to keep an eye on the whole experience. Comics would not be the cultural cornerstone they are today if comickers had started optimizing the first panel on every page! People don’t scan, they look People aren’t reading web pages from top to bottom, but they are looking at the page. Humans are visual animals first. Images are often the first thing we notice on a page while words add an extra layer of abstraction that your brain has to decode. I often hear presenters extolling the value of good content. But what they’re actually talking about is often just copy. Copy isn’t the only kind of content! Back in ye olden days of the World Wide Web, text was the path of least resistance and images were seen as non-semantic and often garish substitutions for meaningful copy. But we’re living in the future now. We have all kinds of accessibility options at our disposal, from WAI-ARIA to HTML5 video’s subtitles to our good old friend alt text. We’re better equipped than ever to plan, design, and measure the effectiveness of visual content. Content strategists and UX practitioners, I implore you to emulate the authors of the golden age of comics and lean on your graphics specialists. If you’re a one man UX army, remember to use Photoshop or a sketchpad from time to time, and try to stretch your visual communication skills with things like weekly challenges. Conclusion Many comickers evolve into storyboard artists and move on to work in cinema or animation. I evolved into a front end developer and UI designer. I still use my skills to communicate with words and pictures, just in a different medium. If you’re going to connect with your audience, you’ve got to learn the art of the flow, you’ve got to guide their eyes, and you can’t do that with mere words alone. Content strategists and copywriters often see the Internet as an endless document comprised of page after page of text and navigation. But I echo the words of Scott McCloud when I say: the Internet is an endless canvas. Resources and thanks You can get a better feel for graphic storytelling by reading comics like the fine ones below created by expert comickers: Andy Runton’s Owly Kyle Weem’s CSSquirrel Rembrand Le Compte’s Beardfluff Starline Hodge’s Candi Barry Deutsch&squo;s Hereville Brad Colbow’s The Brads Anything by Raina Telgemeier and of course, my own comics at RacheltheGreat.com Thanks to Kurt Busiek for helping me find the barbershop story and to Scott McCloud for putting us in touch. Check out these classic books by Scott McCloud: Understanding Comics: The Invisible Art Making Comics: Storytelling Secrets of Comics, Manga and Graphic Novels I love talking about sequential art and comics, so drop me a line! @CrowChick, Dribbble, My web ramblings blog.

The Power of Email Lists for Web Designers and How to Get One Started

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!Imagine if you had a sea of potential clients who were one click away from working with you. How would it impact your web design business? The secret is building email lists that you can turn to to build relationships and generate leads. There are many ways to grow and expand your freelance business and one of the most powerful is an email list. For little to no money, you can start a list, build your traffic, and gather more potential leads who will be pining to work with you. If you are really serious about jumpstarting your web design business, consider email marketing as one of the strategies that will help you get to the top. WHAT are email lists? An electronic mailing list allows online webmasters and marketers to send electronic posts, announcements and messages to a list of subscribers at one time. Mailing list software saves subscribers’ email addresses and publishes messages automatically as determined by the webmaster’s schedule. Twenty years ago, businesses had to stamp, address and physically send mailings to all of their customers. This not only cost money, but also required a lot of manpower. Fast forward to today and email marketing not only costs pennies to implement, but it is also the one trend that has stood the test of time. While SEO, social media and even PPC have gone through major transformations, email marketing remains one of the most effective strategies to gaining leads and building an online reputation. WHEN do I start an email list? Most designers think they need to wait until they have a blog or more of an online presence before starting an email list. But, this simply is not true. In fact, if you can manage to acquire some email addresses before you start your blog, you will have a number of readers ready to share. This will give you a head start along with instant traffic! WHY do I need an email list? Why would web designers need to build mailing lists? There are many reasons why, but we will cover the two most important here: 1. What happens to those potential leads/clients who visit your website but may not be ready to pull the trigger to contact you for services? The worst thing that can happen is they leave your website. A potential client may be more inclined to give an email address than commit to starting a design job. An email opt-in box will help you capture those leads and give you the ability to nurture them a little more to urge them to work with you. Your messages will be targeted towards giving helpful advice and also to remind them of your services. 2. Future Work – Potential clients may not need services the moment they subscribe to your list. But when they do, they will know where to come because they will remember who you are from your email messages. An email list allows designers to build relationships with subscribers and offer advice which makes potential leads to want to work with them. By building relationships you are creating a reputation for your business which leads to more customers and more revenue! Are you ready to start a list? First things first… You will need an autoresponder. An autoresponder is the software that sends your messages to your subscribers. Here are a few popular services: AWeber Mailchimp Constant Contact Get Response iContact Now that you are hopefully convinced about starting an email list, here are some first steps to get the ball rolling: Invite your current contacts – Chances are you already have a list of past clients and their email addresses. Do not automatically add these addresses to your email list. Politely send an email with a link to the page where they can subscribe. Tell them you are starting a newsletter and state the benefits they will receive. Subscribers – If you already have a blog, invite your current subscribers via a blog post to subscribe to your list. How to Get People to Subscribe To get people to opt in to your list, you must give them an incentive. Some marketers simply offer updates and this strategy does work for popular websites. But, if you really want to boost your email marketing campaign, I recommend you give away a free gift. Many marketers offer a free ebook, report, video or course. The gift can be anything as long as it offers value to the subscriber. Here are some best practices to remember: Make it Valuable! You can wrap a green rock in an emerald cover to make it look like a rare gem, but once people receive it, they will know it is a fake. Don’t view your freebie as simply something to give away to get more subscribers. If you do, that’s all it will be and though you will acquire a few subscribers, you will do nothing for your reputation and potentially harm it. Who? Your freebie must solve a need for your subscribers. The first step to knowing what to offer is KNOWING your audience. Who are your customers? What are their needs? What are their problems? As web designers, your audience is not other web designers—unless you are a web design instructor or teacher. Therefore, giving away a report on web design that includes complex programming and tutorials will not be successful. If your audience is composed of small business owners who run websites but need assistance with marketing, consider a report about optimizing websites for conversions, split testing, usability testing, or the latest internet trends. The trick to nailing your conversions is to become intimately acquainted with the people you service! Find out what their specific pain points are and you will find a stream of success. Make it substantial! This is not the time for a two-paragraph report on what Aunt Matilda said about web design. If you are giving away a free report, it should be at least eight pages in length and look professional. Use a company logo and professional graphics throughout. Edits are Crucial! Many of our readers hail from all over the world and we welcome a diverse group of people. Some, however, are not fluent in English, or they know English, but not well enough to write with perfect grammar. If you fall into these categories, I suggest you hire an English editor to proofread your report or ebook so it has maximum impact. Hubspot published this short newsletter to further discuss Top Incentives for Driving Email Subscribers. The Opt-in Box/ Sign Up form The Opt-in box is the site of the email address query where subscribers add their email addresses. The design and look of this box is very important and will influence conversions. Design The design of the subscription box should look like an extension of your website, but stand out from the page just enough to be noticed. Here are some important design elements to remember: 1. Attention-grabbing headline The headline must catch your web visitors’ eyes immediately. It should be in a different typeface than the rest of the copy and solve a problem for your visitors. After reading your headline, your web visitors should feel that you know their problems and your newsletter/mailings will help them. 2. Graphics The graphic is not necessary in all cases, but it is a good practice when you are giving away a report or ebook. The graphic should look like the 3D physical form of the item you are offering in return for a subscriber’s email address. 3. Benefits Mention a few benefits or even one so visitors will know what to expect. Inform them of what they will receive and why they will want it. If you are not offering a freebie, use the copy space to tell potential subscribers the benefits of joining your newsletter and what they can expect. Remember that an email address is someone’s private possession. You have to earn the right to receive it. 4. FREE IF you are offering a freebie, add the word “Free” to make a bigger impact. Also, don’t forget to tell your visitors to enter their email to receive free access to their gift. Tip: It’s a good practice to inform your subscribers that you will never share their email and you hate spam just as much as they do. 5. Call to Action Your call to action should be interesting and attention-grabbing. Consider text like “Get Instant Access” or “Sign Me Up”. Location The location of the subscription form will also influence your conversions. It is recommended to test the placement to determine the optimal position. Here are the most popular locations: Below Blog Post Notice how John Chow speaks DIRECTLY to the person by stating, “Did you enjoy this blog post?” This gets the reader’s attention more than a generic form. Blog Sidebar This is the most popular place to put an opt in because it is visible without being obtrusive to readers. About Page Don’t ignore the chance for conversions on your About page. As long as you are not overusing your opt-in box, the About page is a great place to capture email addresses. Pat Flynn of SmartPassiveIncome.com performed a test and saw a marked increase in subscriber opt-ins when he added a form to his About page. He explains his results here. Footer Many marketers use a footer opt-in as a secondary source. However, some web designers use the footer opt-in exclusively. You will need to test to see which scenario works best. It may be a good place to start. Pop Up Popups actually perform very well even though they can be annoying. My advice is to use them at your own risk. Some very prominent marketers swear by them and others stay far away. Dan Zarrella, social media scientist, has been using the popup for years now. It annoys me because every time I click on a new page it continues to disrupt my reading, but he offers incredible value with his information. If you want to try the popup, make sure to test different positions to see which location performs the best. The Messages The main goal of your email campaigns is to develop relationships, nurture leads and offer value WITHOUT selling repeatedly and spamming your subscribers’ inboxes. What should the email messages consist of? Here are some ideas: Recent blog posts Helpful industry tips Recent projects Links to helpful resources Company news Contests and promotions Special offers Incentivized surveys Personal stories (occasionally) When composing your messages, here are some important tips to keep in mind: Don’t send the same old content everyone reads. Even if it is similar, find a way to make it creative and interesting. Keep it short! Use bullets and one to two sentence paragraphs. Make your subscribers feel exclusive. Use their name, and address them directly as if you are talking only to them. Similar to how people feel when they pay thousands of dollars to be part of a club membership, your subscribers will feel special if you make an extra effort. Don’t know where to start? Curate! If you are not a writer and you do not have the budget to hire anyone, consider researching the web for the top information and send the links to your readers. Give people the option to unsubscribe. Don’t take unsubscribes personally. Sometimes I unsubscribe from a list simply because I am trying to streamline my emails. It happens to everyone. However, when you notice a bundle of them at one time or a continuous flow, it may be time to adjust your campaign. Be careful not to use words that trigger SPAM filters or your email will end up in your subscribers’ junk mail. Here is an extensive list of email SPAM trigger words. What NOT to do Worried about making mistakes? Hubspot published this free Ebook that addresses the top 12 mistakes made by email marketers. Dirty Dozen: Email Newsletter Mistakes Nearly Everyone Makes Are we done yet? We’ve just scratched the surface of the depth of email marketing. Here are some more fantastic resources to help you create highly effective, traffic-driving email marketing campaigns. Need some more ideas on how to grow your email list? Here are 25 more ways The Complete Guide to Email Marketing7 Steps to an Email Optin Page That WorksFree Guide: How to Optimize Email Marketing for ConversionsHow to Segment and Integrate Your Emails for Better ResultsThe CAN-SPAM Act – The Compliance Guide to Email Messaging Success Stories Here are three true life success stories of people just like you who grew their businesses by using email marketing: Bella Web Design Desiree Scales started Bella Web Design as a tool to make money while staying home to spend more time with her growing family. She touts her email list as the turning point in her business and the tool that helped her generate more leads and expand her horizons. She was also able to attract bigger clients which increased her revenue. QuickSprout Neil Patel started QuickSprout as a blog to teach others how to market online. He also started many software companies such as Crazy Egg and KISSmetrics. He is known as a mover and a shaker in the industry and his huge subscriber list is proof of his success. Smart Passive Income Pat Flynn started from nothing and has built his list to over 25,000 subscribers. With his blog he teaches people how to make a passive income online and he has built quite a reputation for himself in a short period of time. Let’s Get to It! So now that you have nothing holding you back from starting a list, let’s get going! Actually, I know how difficult it can be to focus and work on a new business building strategy. I am in the middle of creating my free download so I understand how hard it is to juggle more work into an already hectic schedule. But if we keep putting it off, we will never accomplish our goals. Let’s be accountable to each other and make starting an email list our goal for the rest of 2012! Who’s with me?

Scratching the Surface: A Showcase of Scratchboard Illustration

There are some illustrators who take their talents a little bit deeper, while still scratching the surface. Bad pun aside, scratchboard illustration is an amazing artform, one that we our turning our inspirational spotlight on for this new post. By scratching their works from these special surfaces, and at times combining them with paints or inks, these creative illustrators give life to some truly inspired pieces. Below is a collection that features just a few of these very talented artists working with this breathtaking, and time consuming artform. Scratching the Surface Mark Summers Mark Summers has a gallery that is full of so many sensational illustrations that it was hard to narrow it down for the post. His caricatures and illustrations are richly detailed and overflowing with creativity. Madhatter Lincoln Wagner Brahms Gilbert & Sullivan George Eliot Edgar Allen Poe James Joyce Heather Lara Heather Lara (also known as heatherzart on DA), has an overly impressive body of work which tends to focus on animal portraits. Her scratchboard illustrations, those with color and those without, highlight the delicate pieces that can be etched from the surfaces of these boards. Gotcha! by Heatherzart Love Me The Most by Heatherzart Izu 4 Billy Narmada 3 Pombe 1 Tiger 1 Cheetah Snuggle Unexpected Guest A Glimpse of the Past Eric Sabee Eric Sabee has a gallery of work that differs from some of the others on the list. Not only are they some of the more colorful scratchboard pieces showcased, the illustrative characters and imaginative fantasy works show another side of this inspiring technique at play. Great Omen Raven Dimension Diver Jimi Hendrix Black Watch Elite Sadranis Arbiter of Fate Cristina Penescu Cristina Penescu is another artist whose work focuses on animals, with an impressive collection of work in her portfolio. So many pieces that are not only finely crafted, but that also capture so much emotion. Brilliantly capturing the heart and beauty of nature and her subjects. Desperation Hunger Crisis Cautious Observation Bearly Interested Into the Light Hopeful Focused Within Reach Other Fine Works and Artists Scratchboard & Clayboard by Patrushka SCRATCHBOARD by Kevin Fleming Walden Scratchboard by Caitlyn Knepka Steeplechase Jump Jump by Tifani Carter Walls of Separation by Carl Licence SCRATCHBOARD by Kevin Fleming kitteh by ohin Tall Girl – Colored by shonechacko Walls of Separation 2 by Carl Licence scratchboard flamingo by rah-bop SCRATCHBOARD by Kevin Fleming Your Turn Now that we have wrapped up this end of the showcase, we want to hear from you. What were some of your favorite pieces or artists from this collection? Do you know of any other pieces or scratchboard illustrators that didn’t get a mention? Feel free to let us know in the comment section. (rb)

Beautiful & Free UI Icons (200 Items) – Freecns

Advertise here with BSAFreecns is a completely free set of slick UI icons that are a perfect fit for using in applications. There are 200 items in the set where the majority of them are action icons. They come in transparent PNG and sized 16*16px. Advertisements:Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.Professional XHTML Admin Template ($15 Discount With The Code: WRD.)SSLmatic – Cheap SSL Certificates (from $19.99/year)

How to Build and Operate a Content Marketing Machine

Posted by Toby MurdockThis post was originally in YouMoz, and was promoted to the main blog because it provides great value and interest to our community. The author's views are entirely his or her own and may not reflect the views of SEOmoz, Inc. Content Marketing is hot. White hot. SEO and digital marketing thought leaders are declaring that Content Marketing is the next big thing. Even Rand is touting its importance. The strategy of Content Marketing makes sense: instead of pushing messages about your product at prospects, pull prospects towards you by publishing content about your prospects’ interests. Search rank, traffic, leads and all sort of goodness flow from this approach. So the conversation is no longer about if or why an organization should practice Content Marketing. But the still unanswered question is “How?” How does a brand actually become a publisher, produce great content, and attract traffic and generate conversions? So if you’re wondering “How?”, fear not. This post will provide a guide on how to build and operate a Content Marketing Machine. But, to be clear, I’m not talking about dipping a toe in the water: doing some blog posts, busting out an infographic. I’m talking about a sustained effort to generate content excellence in your category. I’m talking about a machine that generates more traffic and leads at lower cost than all of your other channels combined. The Machine First, let’s take a look at the machine, all of its pistons, cogs, smokestacks and miscellaneous parts. This will give you an overview of what you’re building and what you’re going to operate: Now we’ll go over the machine, part by part. Goals & Plan What is the goal, the end output for your Content Marketing Machine? Content marketing is utilized for lots of objectives, including customer retention, upsell, support and brand awareness. But by far the major objective for most Content Marketers is Lead Generation / Customer Acquisition, which can take the form of adding an item to a shopping cart, filling out a lead-gen form, or signing up for a trial. Your plan then becomes to create a content-powered path that takes your prospect from where they are today to the end goal. This plan is best plotted on a matrix, called The Content Grid, where one axis lists your customer personas and the other axis lists your various stages in the buying cycle. We can do a close-up on this part of the machine here: Then for each cell in this grid, you have to ascertain what content can attract the persona to that stage and help move them on to the next stage. Specifically each cell should answer the following questions: What questions does the Persona want to answer at this stage in the process? What are the topics and categories that would provide this content and answer these questions? What are some sample headlines for content in each cell? What formats (blog posts, videos, eBooks, etc.) would this content be delivered through? Remember, at the top of your buying cycle, the prospect does not care at all about you and your brand. Your content here should be at some intersection between your prospect’s interests and the expertise within your organization. The content here at the top should never promote your own products and services. But as you move down the Content Grid and the prospect has indicated interest in your products and services, your content should provide more information about them. Team So you’ve got a plan. Now you have to figure out who is going to execute it. Begin by looking at your grid. Who can produce these pieces of content? Is it going to be internal contributors? External paid freelancers? Guest posters? Naturally this depends a good amount on your budget. But for most organizations it is a mix of internal and external contributors: you want to utilize your unique internal expertise, but you also use external talents to share the burden, particularly on rich media content like video and infographics. While there is a variance in the mix for the set of contributors, there is one consistent, crucial role: the Managing Editor. Many stakeholders will submit ideas and content into the Content Marketing Machine, will turn its Audience Development crank, and will pull leads and reports out of the Machine. But you need at least one person whose primary responsibility is to man the controls of the machine: to plan the editorial calendar, to supervise content production and distribution, to generate traffic and conversions, to monitor metrics and to be accountable for results. Without such a person, you aren’t operating a Machine, but rather a small appliance (perhaps a Content Marketing toaster). Ideally the Managing Editor should have content experience from a journalism, copy writing or PR background. But the Managing Editor should also know the web and the ways of search, social, analytics and link-building. Lastly the Managing Editor should be familiar with marketing and the end objectives of driving traffic and conversions. Ideas The Ideas section of the Content Marketing Machine is where marketers most often struggle. In the Content Marketing Institute’s 2012 Content Marketing Research Report, over half cited consistently outputting content as their greatest challenge, which a particular struggle over figuring out what to produce. To truly become a publisher requires consistently producing content 3, 4, 5 times a week. What in the world, marketers lament, am I going to write about every day? Remember: the bulk of the content that you are going to produce is about your customers’ interests, not about your products. Thus the best way to generate content ideas is to understand what your customers are interested in. There are two best practices for idea generation. First is online social listening. Dive into the categories you are covering on Twitter, Facebook, LinkedIn, etc. See what topics the communities are interested in. Q&A sites like Quora and Yahoo Answers can identify the specific questions your prospects want answered. The other best practice is to leverage the ears in your organization. Your colleagues in sales, services, support, etc. are talking with customers every day. Encourage them to listen for nuggets of customer concern and then submit those into the Content Marketing team. To give your colleagues incentive to participate, make sure that their submissions don’t end up in a black box. Instead, if you reject them, let them know. If you accept them and convert the idea into content, keep them informed of the content and how it performs. The best organizations at this even keep a leaderboard to showcase which employees are making the best contribution to the Content Marketing ideas effort. Production As you get your idea generation going, you’ll then need to operate the heart of the Content Marketing Machine, the content production. The centerpiece of production is an Editorial Calendar. The calendar should specify who is going to create what piece of content, when they will have it submitted, when you plan on publishing it, and to where you plan on publishing it (your site, YouTube, Slideshare, all of the above, etc.). The Editorial Calendar should look something like this: In your Editorial Calendar you should also note the Customer Persona and Buying Stage that the content is intended for. As you look over your Calendar, you should be able to visually see whether or not you producing the right content mix to cover the various cells in your Content Grid. Many organizations can get buried in the logistics of the Production stage. Many stakeholders can be involved, including: the idea generator, the content creator, graphic designers, the Managing Editor, the SEO expert, the social media team, Legal & PR (for approvals), etc. Often too much of the effort goes into coordinating these players instead of creating great content. If you’re in a moderately sized organization with decent complexity, make sure your map out the process involved to get content out the door. Who will submit the content? Who needs to approve it and at what stage of the process? Who is going to be posting messages to Twitter, Facebook and LinkedIn once the content has been published? Identify the required workflows and have a plan to manage them so that your efforts don’t get consumed by administrative tasks. Audience Development So you’re publishing content now! Your machine is up and running! Congratulations! However, creating the content is just half of your task. The other half needs to be around getting visitors to that content, which is the Audience Development component of the Content Marketing Machine. Audience Development breaks down into 4 major buckets: Influencers Search Paid Syndication Influencers. Influencers are the most important component of Audience Development. Begin by identifying the influencers in your space: the individuals and organizations in your topic that have lots of visitors to their sites, followers to their Twitter accounts, etc. In other words, these are the places on the web where the prospects who you want to read your content hang out. Your objective is to win links from these Influencers to your content. Get started by building relationships with these Influencers. Retweet their tweets. Comment on their blogs. Get into a dialog. Once you’ve gotten on the influencer’s radar, craft content with the end objective--the Influencer link--in mind. Ask yourself: What content would be of enough interest to this Influencer that they would want to share it with their audience? Or try to bring the Influencer into the process from the start: tell them that you are working on a piece of content and would appreciate their feedback or a quote.Search. Winning these Influencer links is the key to getting referral traffic to your content. It is also the biggest way that you can improve category two in Audience Development: search traffic. Win links from authoritative influencers, and the Search Engines will improve your rank, driving more traffic. Of course you need to be deliberate about this process: identify the search keywords that your personas will search for; target and optimize your content for keyword; and track how your content efforts, keyword by keyword, are effecting your search ranking.Paid. Despite all of the inbound, organic goodness that Content Marketing centers on, Paid traffic does have a place in the mix. Whether it is SEM, or Facebook ads, or sponsored Tweets, or paid Email newsletter distribution, using paid tactics to drive content part of Content Marketing Machine mechanism. What’s interesting to note, however, is how Content Marketers are using paid to drive traffic to their content pages (i.e. about the prospect’s interests) instead of their product pages (about the marketer’s products). The process of developing a relationship with a prospect built on informative content is so powerful that marketers are taking the more patient but more effective approach of buying traffic to their content.Syndication. Finally, the content you produce need not be limited to your own properties, whether your site, YouTube account, Slideshare account, etc. The most straightforward way to earn a link from a site where your prospects frequent is to give that site quality content. Syndicating your content earns at least one link to your site through your author bio, but also begins to develop a relationship between you and your prospects before they have ever visited your site. Particularly at the beginning, others sites have a lot more traffic than yours does, so syndicating content there is a great way to get your traffic off the ground. Measurement & Conversion OK, now the Machine is running full tilt! You have content being produced, and visitors coming for that content. As the Machine runs, you need to keep an eye on a set of gauges for each part of the machine so that you can learn how it’s running and continue to tune it and optimize performance. Ideas & Production. Keep an eye on the mix of content you are pushing out the door. Do you have the right distribution across the personas from your Content Grid? Are you hitting the relevant categories? Audience Development. What Influencers are sending you the most traffic? You should be sure to express your gratitude to these Influencers and link back to them. What types of content are succeeding in generating the most valuable links? You need to double down on that content. What keywords have high search volumes but fail to drive you much traffic? You need to improve your production of content around these keywords to improve your rank. Which paid channels are proving the most cost effective traffic?Traffic & Conversion. This is the major objective as it gets to our end goal of the conversion. All of your content needs to be assessed for how it is performing in bringing first time visitors to your site, bringing back returning visitors, and moving them down the buying cycle, particularly to the conversion event (e.g. form submission; add to cart; start a trial) that you are looking to track. Score all of your content on these objectives, and look for the trends: which authors are pulling in the most new visitors? which content types (e.g. blog post, eBook, video) are keeping each of my personas coming back? which categories of content are leading to the most conversion events. Every initial content strategy is a best guess. Only by operating your Machine and monitoring your metrics can you understand what’s working and what’s not working and improve your performance over time. Building Your Own Machine (versus Renting Someone Else’s) And indeed, you have to recognize that the results of Content Marketing accrue over time. Traditional marketing tactics, i.e. advertising, involve the Marketer renting the attention of someone else’s audience: the marketer pays the media to be able to put the marketer’s message in front of the media’s audience. Despite the problems of advertising, this renting has immediate effects, because the media already has an audience. Content Marketing takes longer, particularly because, when you start, you have no audience! But don’t be deterred! Just like the difference between buying and renting a house, with Content Marketing, you are building equity as your build your audience. Over time, your audience becomes an incredible asset: a perpetual source of leads / trials / new customers at extremely low cost relative to traditional marketing (i.e. advertising). There are now many brands who have successfully built and now operate such a Content Marketing Machine (here are 50 examples). This highest state of Content Marketing nirvana is for your Content Marketing Machine to become self-perpetuating. Typically the machine works with content as the input and audience / leads as the output. But once you’ve become such the authority on your topic, your output, the audience, will begin to supply the inputs, the content (see prior section on Syndication). SEOmoz has, very deservedly, reached this highest state of Content Marketing nirvana. I, in fact, am an audience member providing the inputs! I hope that these inputs, this content, have been helpful to you as you look to build and operate your own Content Marketing Machine. I’m eager to answer any questions. Please fire away in the comments! Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

8 Free Tools for Testing Website Speed

Advertise here with BSAWebsite speed is not something that should be taken lightly, especially since it has such a big impact on SEO. To help you out, today we gathered 8 free tools for testing your website speed. Some of the tools will generate suggestions to make things faster on your site, while others will give you detailed info about load speed and other things. So make sure to check out each of them. PageSpeed Insights PageSpeed Online analyzes the content of a web page, then generates suggestions to make that page faster. Load Impact Load test your website online, we offer load testing and reporting as an online service to e-commerce & B2B sites all over the world. Neustar Web Performance A quick and easy way to get performance data on any website without having to create a test script. WebPagetest Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. OctaGate SiteTimer pingdom Which Loads Faster Pages compete head-to-head in your browser to see who’s fastest! Show Slow Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed, WebPageTest and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance. We found our cover image at dribbble.com.

Radically Simplified WordPress

Had an interesting chat with Anil Dash today at the GigaOM/PaidContent conference in NYC, here are some tweets from the talk: https://twitter.com/iA/status/205332176475136000 Q&A: @photomatt on tools used by his employees. “We just use blogs for everything. P2 is like our internal @Twitter.” #pc2012 — Porter Anderson (@Porter_Anderson) May 23, 2012 If you’re curious about P2 check out p2theme.com where you can sign up pretty easily. Like Jay-Z obsessing over young rappers, @photomatt keeps an eye on every new content management system that comes out. #photo2012 — Ron Hogan (@RonHogan) May 23, 2012 I learned this from the Complex interview with Young Guru. (Which they present in slideshow format, for some reason.) A few very kind words from Jay Rosen: Takeaway 2 from #pC2012: Easily the most impressive–articulate, confident, calm, funny, locked-on–media executive on stage was @photomatt. — Jay Rosen(@jayrosen_nyu) May 23, 2012 And finally we talked about how WordPress is actually on its third or forth pivot, as in the most important contributor to growth of the platform changes over time, which turned into this article which has been making the rounds: New ‘radically simplified’ WordPress is on the way dlvr.it/1cGgSl — paidContent (@paidContent) May 23, 2012 WordPress was first for pure blogging, then became embraced as a CMS (though some people still deny this), is seeing growth and innovation in being used as an application platform (I think we’re about a third of the way through that), and just now starting to embrace social and mobile — the fourth phase of our evolution. As with each of our previous transitions there are large, established, and seemingly unshakable competitors entrenched in the same space. This is good because we can learn from those that came before, as we always have, and good competitors drive you to be better. As before, people will probably not notice what we’re doing at first, or deny it’s happening as folks who still say WordPress “isn’t a CMS.” Function reforms form, perpetually. As John Borthwick put beautifully today, “A tablet is an incredible device that you can put in front of babies or 95-year-olds and they know how to use it.” How we democratize publishing on that sort of platform will not and should not work like WordPress’ current dashboard does. It’s not a matter of a responsive stylesheet or incremental UX improvements, it’s re-imagining and radically simplifying what we currently do, thinking outside the box of wp-admin. There are hints of this already happening in our iPhone and Android apps, but even though I’m thinking about this all the time I don’t have all the answers yet — that’s what makes it fun. WordPress is going to turn nine years old this Sunday and I’m as excited to wake up in the morning and work on it as I was the day we started. I think when we turn 10 in 2013 the ways people experience and publish with WordPress will be shorter, simpler, faster.

Mozilla Aims to Build a Better Web With 'Webmakers' Project

The makers of Firefox what to help create a "web literate planet." Mozilla's new Webmaker initiative aims to help people learn how to hack on HTML, remix video and otherwise create things with the web.

Updated for 2012: The Beginner's Guide to SEO

Posted by Ashley Tate SEO strategies have gone through incredible amounts of evolution over the last year. From algorithm updates like Penguin and Panda to new search engine restrictions on overoptimization and spammy links, optimization methods for getting the best rankings in search engines all across the web have advanced. The recent power of social sharing has had a huge effect on search, and search engine company recommendations to get the best rankings in their search engines have changed as crawl tactics are getting smarter. SEOs of all levels have had to re-learn strategies and best practices to make sure their website’s SEO is set up for winning results. Does the mountain of seemingly endless updates feel overwhelming yet? Have no fear, fellow Mozzers, because Roger and the SEOmoz crew have been hard at work creating a guide to serve as your one-stop-shop for the most current SEO trends. We’re proud to announce the release of our shiny new Beginner's Guide to SEO! Our legendary first version of the Beginner’s Guide to SEO was read over 1 million times, but like all vintage models, it was in need of a makeover. The updated Beginner’s Guide to SEO is designed to describe all areas of SEO in regards to the advances in search over the last two years - from keyword discovery, to making a site search engine friendly, to link building, to marketing the unique value of your site’s offerings. We’ve highlighted new limitations and contributing factors to last year’s evolution of search along with our own suggestions to optimize your website for search success. The newly updated Beginner’s Guide to SEO is bursting with new changes, but here are the top ten additions to keep an eye out for: 1. What is Search Engine Optimization? What is SEO? Where does it come from? Why is it important? These questions might sound all too familiar, but over the last year the answers have evolved. SEO is no long just about “engines,” but is focused on making your website better for people. This guide takes a more human-focused approach to deducing the wonderful world of SEO to help both humans and bots live in harmony. (Intro Chapter) 2. Why Should I SEO? Ever wonder if you should take a swing at SEO? We’ve laid a solid foundation for the “why SEO is for everyone” argument to give you an in-depth view of how strong SEO is crucial to the success of every website. Take a look to see if it’s right for you (hint: the answer is yes!). (Intro Chapter) 3. Can I Do SEO for Myself? Home-grown SEO is a trend that is catching on, but there’s a lot to learn to make sure your site’s SEO is up to par. Whether you’re considered using a consultant, firm, or learning SEO on your own, this new section is a must-read. We’ve highlighted a variety of important factors to consider before taking on the task of becoming your site’s very own SEO guru. (Intro Chapter) 4. Building for Users, Not Search Engines This awesome new section highlights three ways people look for information through search queries fitting into the categories of Do, Know, and Go. What are users looking for? Does your site have what it takes to be a true competitor? It all starts with a user typing words into a small box. Start propelling your success by giving this chapter a once - or twice, or ten times, no judgement - over! (Chapter 2) 5. The Power of Social Sharing The years of 2011 and 2012 have seen a massive surge in social sharing and its effects on search. Google has begun to incorporate a huge number of social signals into its search results, and similar algorithm changes show no signs of slowing across all search engines. It’s more important than ever before to optimize your content for social sharing success, and this section explains how to boost your rankings though your social networks. (Chapter 7) 6. Link Building Strategies The first and most challenging step in any successful link building campaign is to create goals and strategies, but with so many options, where should you start? We’ve put together a list of five link building strategies that can help increase search traffic, boost your rankings, encourage frequent search engine crawling, and increase referring link traffic to your site. That sweet link juice tastes so good! (Chapter 7) 7. Search Engine Tools SEOs tend to use a lot of tools. A LOT of tools. What could be worse than using tools that are outdated? We’ve created a master list of the most current search engine tools in Google Webmaster, Bing Webmaster, and SEOmoz Open Site Explorer that will help you to identify errors, read stats, identify powerful links, pull metrics, and maximize your mind-boggling SEO powers to their full potential. (Chapter 8) 8. New Strategies for Using Data After Tracking Search Queries Now that you’re using updated search engine tools, you’ll need to update your data tracking strategies to match. Chapter eight will navigate you through a series of helpful tips and tricks for making the most of your new and improved data. Analytics lovers unite! (Chapter 8) 9. Myths and Misconceptions About Search Engines Like our friends Jamie Hyneman and Adam Savage, the SEOmoz team loves to disprove myths and misconceptions about the wonderful world of search engines. Because search has gone through such an evolution over the last year, many myths about search have undergone substantial changes as well. From meta tags and keyword stuffing to paid search and search engine spam, we’ve dedicated an entire chapter of this guide to explaining the real stories behind the myths to help SEOs understand what’s required to perform effectively. (Chapter 9) 10. Suggestions On What to Do After Tracking Your Search Queries They say that if you can measure it, you can improve it, and we couldn’t agree more. Chapter 10 is packed full of new recommendations on metrics to track, analytics software to implement, metrics provided by search engines to use, and tips to applying the data you track towards real life solutions. Make the most out of your hard-earned data by reading this section. These are tips you can’t afford to miss! (Chapter 10) No matter your level of SEO wizardry, we encourage you to check out the updated guide for brand new strategies that will help drive your optimization to the next level. Leave your comments below and share the love with your friends, family, colleagues, and robot buddies! Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

CSS4 media queries to tackle touch

Shift to input concepts rather than explicit lists will benefit developers

3 Key Software Principles You Must Understand

If you’re in software development, new techniques, languages and concepts pop up all of the time. We all feel those nagging doubts every now and then: “can I keep up with the changes and stay competitive?” Take a moment, and sum a line from my favourite movie, Casablanca: “The fundamental things apply, as time goes by.” What’s true for love, is true for code. What’s true for love, is true for code. The fundamental things will always apply. If you have an understanding of the underlying ideas of software development, you will quickly adjust to new techniques. In this tutorial, we will discuss three basic principles and mix them with many more. They provide a powerful way of managing the complexity of software. I’ll share some of my personal opinions and thoughts, which, hopefully, will prove useful when it comes to applying them to code and real-world projects. Principle – Don’t Repeat Yourself A basic strategy for reducing complexity to managable units is to divide a system into pieces. This principle is so important to understand, that I won’t write it twice! It’s commonly referred to by the acronym, DRY, and came up in the book The Pragmatic Programmer, by Andy Hunt and Dave Thomas, but the concept, itself, has been known for a long time. It refers to the smallest parts of your software. When you are building a large software project, you will usually be overwhelmed by the overall complexity. Humans are not good at managing complexity; they’re good at finding creative solutions for problems of a specific scope. A basic strategy for reducing complexity to managable units is to divide a system into parts that are more handy. At first, you may want to divide your system into components, where each component represents its own subsystem that contains everything needed to accomplish a specific functionality. For example, if you’re building a content management system, the part that is responsible for user management will be a component. This component can be divided into further subcomponents, like role management, and it may communicate with other components, such as the security component. As you divide systems into components, and, further, components into subcomponents, you will arrive at a level, where the complexity is reduced to a single responsibility. These responsibilities can be implemented in a class (we assume that we’re building an object-oriented application). Classes contain methods and properties. Methods implement algorithms. Algorithms and – depending on how obsessive we want to get – subparts of algorithms are calculating or containing the smallest pieces that build your business logic. The DRY principle states that these small pieces of knowledge may only occur exactly once in your entire system. They must have a single representation within it. Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. Note the difference between the piece of knowledge, and its representation. If we’re implementing the database connection in our CMS, we will have a code snippet that will initalize the database driver, pass the credentials, and save a reference to the connection in a variable. The code snippet is part of the knowledge, it’s about how something is achieved. The variable with the reference to the connection is the representation of that knowledge – and this can be used by other parties. If the database credentials change, we will have to change the snippet – not its representation. In a perfect application, every small piece of business logic encapsulates its knowledge in a representation, namely a variable or a class property. This variable itself is encapsulated in a class that can be described as a representation of a responsibility. The class is encapsulated in a component that can be described as a representation of functionality. This can be proceeded until we reach the top level of our software project – that is, a stack of representations with increasing complexity. This way of looking at the complexity of software is called modular architecture, and DRY is an important part of it. Software architecture is about managing complexity. Achieving DRYness DRY is a philosophy that packages logic into representations. There are many ways of achieving DRYness. Hunt and Thomas suggested (among other things) code generators and data transforming. But, essentially, DRY is a philosophy that packages logic into representations. As every part of your application can be seen as representation, every part exposes specific fragments of your underlying logic: The user management exposes access to registered users of the CMS, the user class represents a single user and exposes his properties (like the username). It retrieves the properties, via the representation of the database. DRY and modular architecture require good planning. To achieve a representational hierachy from bottom-up, divide your application in a hierarchy of logically separated smaller parts and let them communicate with each other. If you have to manage larger projects, organizing them into components and using DRY within the components is a good idea. Try to apply the following rules: Make a visual hierarchy of your software application and map the main components to it. Complex projects may require a dedicated map for each component. If you’re arriving at a level of connected responsibilities, you may want to switch to UML diagrams (or similar). Before writing a chunk of code, name its hierarchy in your software project. Define what it’s representing, and be sure you know its role in the surrounding component. Define what the representation should expose to other parties (like functions to execute SQL in a database driver) and what it should hide (like the database credentials). Ensure that representations do not rely on representations of another complexity level (like a component that relies on a class in another component). The database driver is a simplified example, as there are many more layers involved in the real world (such as a specific database abstraction layer), and there is much more you can do to encapsulate logic – especially diving into design patterns. But even if you’ve just started with coding, there’s one thing to keep in mind: When you find yourself writing code that is similiar or equal to something you’ve written before, take a moment to think about what you’re doing and don’t repeat yourself. In the real world, applications that are a 100% DRY are hard, if not impossible, to achieve. However, applications that are unDRY to an unacceptable degree – and therefore hard to maintain – are quite common. Hence, it’s not surprising to learn that more than 50% of all software projects fail – if you’re taking a look at the code. Many people tend to think that bad code is produced by bad coders. In my experience, this is very much an exception. More often than not, bad code is produced by bad account managers and an overall misconfiguration of process management in companies. Bad code is rarely produced by bad coders. An Example DRYness is achieved by good planning. As an example, say you’re hired as a technical consultant by a company that has problems with code quality and maintenance. You review the source and you see hacks and code duplication – the code is not DRY. This is a symptom of bad code quality, it’s not the reason. If you take a look at the version control system – aka the history of the code – chances are that you may find hacks that were introduced at times near deadlines and milestones. Take the time to review what changes are made, and you will likely be confronted with a change in requirements. As noted above, DRYness is achieved by good planning. Forced changes on a tough deadline are forcing developers to implement dirty solutions. Once the code is compromised, the principle of DRY is likely to be sacrificed completely upon further changes. There’s a reason why the most successful corporations in the IT business were founded by people with very good technical understanding – or even coders themself: Bill Gates, Mark Zuckerberg, Steve Wozniak, Steve Jobs, Larry Page, Sergey Brin and Larry Ellison know (or knew) what efforts are needed to implement something. Contrary, many companies tend to lay the requirements for engineering into the hands of account managers, and the conceptual part in the hands of business consultants…people who have never implemented anything. Hence, many technical concepts work only in Powerpoint, Photoshop, and on 27″ widescreen displays. This may have been a successful approach in the days of, more or less, static websites, but it’s not nowadays – with interactive applications on multiple devices. Because coders are the last in the line, they are the ones who have to apply quick fixes on errors in the concept. If this is accompanied by an account manager, who can’t stand up to a client that likes to make last-minute changes, plans are thrown in the garbage, and something quick and dirty is implemented. The code becomes unDRY. This example is a bit extreme (nevertheless, I have witnessed such scenarios), but it demonstrates that DRY is a theoretical concept, which is challenged by various parties in the real world. If you’re working in a company that forces you to work in this manner, you might suggest some changes to the process (like introducing technical expertise at an earlier stage of technical projects). If you have a hands-off approach, keep reading! The You ain’t gonna need it principle will come to the rescue. Principle – Keep it Simple Stupid The simplest explanation tends to be the right one. In the late 19th century, physicists struggled to explain how gravity, magnetism and optics are interacting when it comes to large distances – like the distances in our solar system. Hence, a medium named aether was postulated. It was said, that light is traveling through this medium, and that it’s responsible for effects that couldn’t be explained otherwise. Through the years, the theory was expanded with assumptions that adjusted the aether postulate to the results of experiments. Some assumptions were arbitrary, some introduced other problems, and the whole theory was quite complex. An employee of the swiss patent office, Albert Einstein, suggested to get rid of the whole aether theory when he introduced a simple, yet revolutionary idea: All the oddness in calculating with large distances would fade away if we’d accept that time is not a constant; it’s relative. This incredibly of out-of-the-box thinking to come to the simplest explanation with the fewest assumptions to select between competing scenarios is referred to as Ockhams’s Razor. There are similar concepts in many areas. In software development (and others), we refer to it as KISS. There are many variants for this acronym, but they all mean that you should strive for the simplest way of doing something. Substantial progress in the history of mankind was achieved by lateral thinkers. HTTP The Hypertext Transfer Protocol is widely considered to be a perfect example for a simple solution: designed to transfer hypertext based documents, it is the backbone of highly interactive and desktop-esque applications nowadays. Maybe we have to find solutions for limitations in the protocol, and maybe we have to replace it someday. However, status quo is: based on a few request methods (like GET and POST), status codes and plain text arguments, HTTP has proved to be flexible and robust. That’s why HTTP has been repeatedly pushed to the limits by web developers – and is still standing. We take this approach for granted, but the history of software development and standardization is full of overly complex and half-baked solutions. There’s even a dedicated made-up word for it: bloatware. Software like this is also described to be DOD, dead on arrival. I have a theory that is very similar to my theory of unDRY code, when it comes to bloatware … However, the success of the internet can be described as a success of simple, yet efficent solutions. So what’s required to come to the simplest solution possible? It all comes down to maintainability and comprehensibility in software development. Hence, KISS kicks in during the phase of requirements engineering. When you think about how to transform a client’s requirements to implementable components, try to identify the following parts: Functionality that has an inappropriate ratio between benefit and efforts. Functionality that is highly dependent on other functionality. Functionality that is likely to grow in complexity. There are many people involved in the conceptual process, who do not have the technical expertise to make a reliable cost-benefit analysis I was once working on a project, where the client wanted to import Excel spreadsheets into his crew management software. This was a clear match. Excel is a proprietary software with a complex document format. The format is complex, because it’s feature-rich: You can add graphs and other things to it – features that were not needed by the client. He was simply interested in the numbers. Thus, implementing the Excel import would require the implementation of a lot of unnecessary functionality. On top of that, there are multiple versions of Excel versions, and Microsoft fires off another release each year. This would have been hard to maintain, and it comes with additional costs in the future. We ended up implementing a comma-separated-value import. This was done with a few lines of code. The overhead of the data was really small (compare an Excel sheet to it’s CSV equivalent) and the solution was maintainable and future-proofed. Excel was ready to export CSV anyway (as well as other programs that the client might want to use in the future). Since the solution was low-priced as well, it was a good application of the KISS principle. To sum up: try to think out-of-the box if a task looks complicated to you. If someone is explaining to you his requirements, and you’re thinking that it’ll be tough and complex to implement, you’re right under almost any circumstances. While some things are just that – hard to implement – overcomplicated solutions are quite usual. This is the case because there are many people involved in the conceptual process, who do not have the technical expertise to make a reliable cost-benefit analysis. Hence, they don’t see the problem. Double-check the requirements whether they are really stripped down to the essence that the client needs. Take the time to discuss critical points and explain why other solutions might be more suitable. You “Ain’t Gonna Need It Coding is about building things. When Google+ launched, Mark Zuckerberg – founder of Facebook – was one of the first who created an account in the social network that was aiming to take his own down. He added just one line to the About me section: »I’m building things.«. I honestly think that this is a brilliant sentence, because it describes the pure essence of coding in a few simple words. Why did you decide to become a coder? Enthusiasm for technical solutions? The beauty of efficiency? Whatever your answer is, it may not be »building the 1.000.001th corporate website with standard functionality«. However, most of us are making money that way. No matter where you are working, you’ll likely be confronted with boring and repetitive tasks every now and then. 80% of the time spent on a software project is invested in 20% of the functionality. The You ain’t gonna need it principle (YAGNI) deals with these tasks. It basically translates to: If it’s not in the concept, it’s not in the code. For example, it’s a common practice to abstract the database access in a layer that handles the differences between various drivers, like MySQL, PostgreSQL and Oracle. If you’re working on a corporate website that is hosted on a LAMP stack, on a shared host, how likely is it that they will change the database? Remember that the concept was written with budget in mind. If there’s no budget for database abstraction, there’s no database abstraction. If the unlikely event of a database change does occur, it’s a natural thing to charge for the change request. You may have noticed the difference between You ain’t gonna need it and DRY-driven modular architectures: The latter is reducing complexity by dividing a project into manageable components, while the former is reducing complexity by reducing the number of components. YAGNI is similar to the KISS principle, as it strives for a simple solution. However, KISS strives for a simple solution by trying to implement something as easily as possible; YAGNI strives for simplicity by not implementing it at all! Theodore Sturgeon, an American sci-fi author, stated the law: »ninety percent of everything is crap«. This is a very radical approach, and not overly helpful in real-world projects. But keep in mind that “crap” can be very time consuming. A good rule of thumb is: roughly 80% of the time spent on a software project is invested in 20% of the functionality. Think about your own projects! Everytime I do, I am surprised by the accuracy of the 80:20 rule. 80% of the time spend on a software project is invested in 20% of the functionality. If you’re in a company that is notorious for tight deadlines and imprecise concepts, this is a powerful strategy. You won’t be rewarded for implementing a database abstraction layer. Chances are that your boss does not know what a database abstraction layer even is. While this concept may sound simple, it can be hard to differ the necessary from the unnecessary parts. For example, if you’re comfortable with a library or a framework that uses database abstraction, you won’t save much time in dumping it. The key concept is another way of looking at software: we’re trained to write future-proof and maintainable software. This means that we are trained to think ahead. What changes may occur in the future? This is critical for bigger projects, but overhead for smaller ones. Don’t think into the future! If a small corporate website does fundamental changes, they may have to start from scratch. This is not a significant problem compared to the overall budget. Planning a Project When you’re preparing your to-do list for a project, consider the following thoughts: Achieve lower complexity by reducing the level of abstraction. Separate functionality from features. Assume moderate non-functional requirements. Identify time consuming tasks and get rid of them. Let’s go a little bit into detail! I already provided an example for the first item in the list: don’t wrap a database driver around a database abstraction layer. Be suspicious of everything that adds complexity to your software stack. Notice that abstraction is often provided by third party libraries. For example – depending on your programming language -, a persistence layer, like Hibernate (Java), Doctrine (PHP) or Active Record (Ruby) comes with database abstraction and object-relational mapping. Each library adds complexity. It has to be maintained. Updates, patches and security fixes have to be applied. We implement features everyday, because we anticipate them to be useful. Hence, we think ahead and implement too much. For example, many clients want to have a mobile website. Mobile is a term of wide comprehension; it’s not a design decision. It’s a use case! People who are using a mobile website are, well, mobile. That means they may want to access other information or functionality than a user who visits the site laid back at his desktop. Think of a cinema site: Users on the bus will likely want to access the starting time of upcoming movies, not the 50 MB trailer. Bad concepts can often be identified by the lack of non-functional requirements. With an appropriate budget, you would perform a dedicated analysis of the requirements for mobile. Without this analysis, you will simply provide the same information as is on the desktop site. This will be just fine for many circumstances! Because mobile browsers are very clever in adjusting desktop sites to their display, a radical YAGNI approach might be to not write a mobile site at all! Non-functional requirements do not describe behaviour of a software, they describe additional properties that can be used to judge the quality of software. Since describing software quality presumes knowledge about software, bad concepts can often be identified by the lack of non-functional requirements. Maintainability, level of documentation, and ease of integration are examples for non-functional requirements. Non-functional requirements should be measurable. Hence, »The page should load fast.« is too inconcrete, »The page should load in two seconds max during an average performance test.« is very concrete and measurable. If you want to apply the YAGNI principle, assume moderate non-functional requirements if they are not mentioned in the concept (or if they are mentioned, but inconcrete). If you are writing the non-functional requirements yourself, be realistic: A small corporation with 20-50 page visits a day does not require three days of performance tweaking – as the page should load fast enough because the server is not busy. If the corporation can increase the number of daily visits, a better server or hosting package shouldn’t be too expensive. Last, but not least, remember the 80:20 rule-of-thumb! Last, but not least, remember the 80:20 rule-of-thumb! We have to identify the time consuming parts. If a part is absolutly necessary, you have to implement it. The question should be: how will you implement it? Does it have to be the latest framework with a small community? Do you need to switch to the just-released version of a library if the documentation is not up to date? Should you use the new CMS, when not all extensions are available? How much research will be necessary to do so? »That’s the way we have always done it.« is not an exciting approach, but it’ll get the job done without surprises. It’s important to understand that all of this does not mean that you can start writing dirty code with hacks along the way! You’re writing a lightweight application, not a messy one! However, You ain’t gonna need it is a practical approach. If it would cause many lines of code to reduce a few lines of code duplicates, I personally think that you may relate efforts to budget and some unDRYness is ok. It’s a small application. Hence, the added maintenance complexity is acceptable. We’re in the real-world. Let’s come back to the inital thought: we like building things. When Beethoven wrote the Diabelli Variations, it was contract work. I don’t think he made compromises on budget. He ran the extra mile, because he did not want to write average music; he wanted to write a perfect composition. I’m certainly not implying that we’re all geniuses, and that our brilliance should shine through every line of code, but I like to think of software architecture as compositions. I’m a passionate developer, because I want to build perfect compositions, and I want to be proud of the things I’m building. If you want to be an experienced and business-proofed developer, you have to master the You ain’t gonna need it principle. If you want to keep your passion, you have to fight against it every now and then. Summary Software principles are a way of looking at software. To me, a good principle should be based on a simple concept, but it should evolve to a complex construct of ideas when confronted with other techniques and philosophies. What are your favourite software principles?

Why Your Online Checkout System Hurts Your Sales

Graham Cooke is the CEO of QuBit, a technology company specializing in advanced website data collection, analysis, and optimization products. He was previously a senior product manager at Google. Follow him @thegrahamcooke. The checkout is, arguably, the most important part of any retail experience, online or offline. You can do what you like to get customers through the door and you can merchandise and market at them to your heart’s content, but if your checkout doesn’t let them pay for their goods or services, all of your effort is wasted. This is why it’s surprising that so little has changed in the world of checkouts since retailing began. In fact, the main development in recent history has been the dehumanization of the process. Fixed prices, tills, electronic point of sale (EPOS), and now the online checkout have all been about removing human interaction from the process, thus saving costs. That approach is fine in a brick-and-mortar setting where, by and large, people who fill their cart with items tend to go on and purchase them. However, online 60% to 70% of people abandon their carts before completing a transaction. Something is clearly very wrong. Here’s what it is and how to fix it. The Problem With Checkouts If we can agree that something is wrong with the online checkout model, what specifically is happening that’s causing these problems? Here are the three main issues. Checkout Process: People abandon a shopping cart because of functional issues with the site. Problems with payment methods, issues with localization, and complex registration processes can all make a shopper switch off instantly. In fact, a Forrester Research study found that 23% of users will exit a checkout if they’re forced to register. It’s a simple thing, but it drives people away. Operational Issues: There are a range of issues that are not directly caused by checkout functionality, but which still cause people to abandon their purchases. A major offender here is shipping costs, which cause up to 74% of cart abandonment, according to Toluna. Sites that don’t clearly state shipping costs when a shopper chooses a product run the risk of losing a sale when the full price of their purchase becomes apparent at the checkout stage. Site-Wide Issues: Some of the issues that cause checkout abandonment don’t stem from the checkout itself, but from broader problems with the site. A major culprit here is site speed. Research by Akamai showed that for 46% of people, a quick checkout was the most influential factor in deciding whether a shopper would visit the site again. How to Solve the Checkout Problem There are at least five things that online retailers can do to reduce abandonment and directly increase their sales. Details: Eighty percent of top retailers have now ‘quarantined’ their checkouts by moving shoppers away from the main retail functionality of the site in order to reduce distractions. Similarly, 40% have introduced the ability to save card details for future transactions. Together these two features can create a small but significant improvement in checkout conversions. On the payment side, the introduction of PayPal payments can increase conversions by as much as 14% and the use of mobile phones to facilitate simple payments also promises to drive down abandonment rates. Simplify: At the moment, the average online checkout is a 5 to 6 step process involving multiple data entry and decision points. This should be simplified for visitors. Amazon’s One-Click setup is the best example of a simplified checkout process, and is one that any retailer would do well to observe. Centralize: The online retail market is crying out for a centralized system where users can use a single login to enter all the relevant details to check out. While something like PayPal removes some of the stages around payment information, such a centralized system could also take into account things like shipping preferences. Collaborate: One of the key issues in checkouts at the moment is that every site’s checkout is, in some way, different. Collaboration and sharing of best practices between retailers could result in a much more unified checkout experience for consumers and stronger revenue streams for companies. Integrate: Any effective set of checkout or payment processes should be the same across all company platforms. By presenting shoppers with a single payment and checkout solution for all of their retail needs you’re once again reducing complexity and increasing the potential for conversion. Image courtesy of iStockphoto, joingate More About: contributor, features, mobile payments, online payment

I'm Feeling Moogy: Google Taps Native Web Audio for Awesome Moog Tribute

Google's birthday tribute to electronic music pioneer Robert Moog isn't just a cool looking doodle, its also a fully functional Moog synthesizer.

UI Design for Blogs and Online Magazines

Advertise here with BSADesigning a website user interface can be a struggle match. If you’re building a small portfolio or simple blog layout there isn’t as much to worry about. However an entire magazine requires featured stories and sidebar widgets and author profiles. There is a lot to consider! In this article I want to go over some examples of brilliant UI design focused around online magazines. I want to discuss some current trends in the field of web design. Also how you can capitalize on these ideas and build your own stunning web magazine layouts. Big Things Gain Attention This rule seems predominantly true for many of the popular magazine layouts. Bigger text, headline titles, links, vectors, and images will all attract more users onto your page. It makes visitors more willing to click on headlines and scroll through the text. When your paragraphs are big enough to read at a good distance away from the monitor, then scrolling through and reading some text doesn’t feel strenuous. Your readers are more like to scan articles – but this is the case regardless of text sizes. We can use Lifehacker as a simple example. The most recent publication has a large featured image taking up most of the top screen. As you scroll down you can find other recent posts with much smaller thumbnails. Yet each image is still large enough that you can determine what the content is about. This is the perfect tool for reeling in new unsuspecting visitors. I’m also a fan of their fixed sidebar design. I setup a similar theme on Design Tickle and have seen fantastic results. People are more inclined to interact with the sidebar region if it’s always readily available. But notice the content on Lifehacker is actually longer than the page, so they use a jQuery script generating a custom scrollbar. Offer Related User Content Magazines tend to bring up the idea of articles and written content. This stems from the lack of any alternative media in print work. For decades all magazines have been limited to printing articles and editorials – but the Internet has changed that. You can now find online magazines with a lot more functionality. This can include photo galleries or hosted web videos. Plus you’ll see a lot of big names offering users to register an account and write their own blog entries. A great example can be found on the gaming magazine 1UP. I really like how they use an Ajax-powered tab interface switching between the different feeds. 1UP has reviews and breaking news written by the full editorial staff. But offering any user to sign up and report with their own blog posts is truly a brilliant strategy. You can build more content with writers you don’t have to pay and even help them market the ideas. Simplicity at its Finest I can understand the argument for beefing up your layout full of extra widgets and gadgets. You can list the most recent comments, take polls from your visitors, gather newsletter signups, and so much more. But consider how confusing this may appear to your readers. The Alpha Geek is a fantastic example of simplicity applied to the web. Their layout still includes some great featured images, and each story box also has information about comments and the publication date. The small icons in the top right corner delineate the post category, and you can browse through archives by clicking the link. Developing a Footer This piece of the web interface design isn’t always a required asset. Some magazines really do better with a small footer citing company information and copyrights. But if you like the big oversized effects then why not build out your footer too? Tech Cocktail uses 6 different category feeds in the footer section. The site pulls out the 4 most recent posts from each category and lists them one after the other. Some visitors may feel overwhelmed, but I enjoy the flexibility and insinuation of freedom. Such a footer widget will create more inbound links to your site and you never know who will be interested in Android or Apple news. Your footer could also contain links of a different sort. Maybe you can pull the most commented stories in the past month, or even the most recent comments. Having a bit of legal and company information is always handy. Visitors like to get in touch and share their opinions. But this may not be the predominant focus in your footer area as it feels too professional and can sometimes appear off-putting. Brazen Branding The most successful online magazines are the ones who can brand themselves properly. You want visitors to land on your page and remember something rational. Maybe the site name, the domain, the logo, favicon, just something! This keeps visitors interested and even googling your website to check it out again. I’m sure most of us are familiar with Wired Magazine. Their branding has been similar for years and readers instantly recognize the logo and top navigation interface. The site has reviews, blogs, videos, and tons of other great online media. Consider branding as the first most important step, and you can easily branch out into the layout design from this starting point. Showcase Gallery Along with the suggested interface techniques I also want to offer a brilliant design gallery. This includes a collection of web magazine layouts both new and old. You can learn a lot by studying some popular names and how they design their webzines. .Net Magazine WorldNetDaily Hongkiat VentureBeat The Inside Source Glamour Paris The Boston Globe TechCrunch Melbourne Geek GamerZines Onextra Pixel Problogger Escapist Magazine