Categories
News

Review: the mobile web is Smashing!

Since the dawn of the mobile web, the design and development landscape has changed drastically. Today, no one working in the field can argue with the lasting impact that this market will have on the future of the industry. This is an interesting shift to have watched develop, and many of us are eager to see where it is going.

The Mobile Book, brand new from the Smashing Magazine team, looks at the growing and expansive mobile market from every possible angle.

With so many leading experts and innovative thinkers coming together to work on this fourth printed tome, The Mobile Book is a timely addition to the global discussion on designing for a mobile web.

While it would be foolish of me to presume that having finished the book, I am ready to conquer the mobile market, that is almost how I feel having poured through the pages of this engaging book.

From the very first section in which Peter-Paul Koch dissects the global device market to help paint a clear picture of what is happening with mobile and what we are faced with as designers and developers when we enter into this arena, to Josh Clark’s final section which takes us deeper in to the specifics of designing for touch, this book is something of a gem.

The Mobile Book kicks off with an intriguing and complete look at how the battle for control over the consumer mindshare between device vendors, carriers, and browser vendors has shaped the oft fragmented mess that developers have been dealing with for years now. This is more than just a breakdown of the market, it is a very telling and informative introduction to the world of mobile.

Further sections dive into the specifics of working in the mobile design and development field, and really do help to arm and prepare you for these professional exploits. However, I felt the section on the possible roads this will take us down could have just as easily been omitted and included in the supplemental ebook additions, The Mobile Book may have been all the better for it.

One area where The Mobile Book does not falter, is in its well thought out approach to informing the reader not only about how the market works, but how you can effectively work within the market.

The world is still very much divided on mobile devices and the market is regionally divided. The Mobile Book does a great job of not only addressing this disparity, but preparing those who wish to take it on with the tools they need to succeed in the market. Loaded with tips and techniques, parts II and III of the book are akin to a mobile web workers’ bible, and should be required reading of anyone who works in the field.

So much practical and applicable information is provided that beginners and seasoned pros alike will benefit from the pages of the book and the magic they hold. For example, there is one bit of advice that really landed with me, and will do the same with anyone who sees the sheer volume of mobile devices as a roadblock to solid development for the small freelancers and developers out there: identifying the building of a mobile device lab as one of the biggest challenges facing mobile developers today, the simple words of wisdom provided help to make the market more accessible for those whose reach it may have otherwise exceeded. It is things like this, which make the book more than a resource, but a bit of a treasure.

The Content Choreography segment of Trent Walton’s section of the book also stood out as important and noteworthy as he moves from an in-depth examination of the various means for building flexible layouts, to pointing out important content considerations with regards to stacking. Considerations, unfortunately, that many in the field ignore.

Brad Frost’s follow-up on the numerous ways to organize your adjusting layout, superbly compliments and expands the discussion in a very strategic manner. Wrapping with a look at conditional loading that should be a must read for any content strategy minded members of the community. These sections do a great job both passively and actively addressing the amount of thought and priority that should be going into the content you are seeking to ‘re-distribute’ as it’s presented on varying devices.

That is one of the many highlights of The Mobile Book, no matter what area of the design and development field you call home and where you focus your expertise, this new book from Smashing has something for you. Be it front-end or back-end, layout or function, UX or content delivery, the book has information that will have you ready to step up to the plate in this evolving landscape.

With over 300 pages of useful, topical content (not to mention the colorful and stylish section break illustrations the Smashing Books are known for having), this new foray into the world of mobile design scores on nearly every front! In the closing section of the book, Dennis Kardys fabulously prepares us for tackling the future of mobile from a UX perspective, by asking us to abandon all of our ‘inherited’ understanding of the field. A powerful notion, indeed, and one that will serve us well as we move forward.

As Josh Clark’s closing section reminds us, touch has changed everything, and as the evolution continues we have to keep thinking of new and innovative ways to incorporate and grow this powerful UX element that has carved a whole new approach to web interaction. In this one final segment, Josh manages to bring everything full circle back to this one developmental break-through, reminding us, as Stephanie Rieger did early on, that it is that kind of innovation, the unexpected ones we never see coming, that can alter the entire game.

The Mobile Book serves as a complete guide to all things mobile, but also as a testament to the adaptability and power of this developing market and those who work to shape and make it what it is today. The wave of our connected futures.

Have you read Smashing magazine’s latest book? How did you find it? Let us know in the comments.

Categories
News

85+ new WordPress themes to inspire you

Thumb

Whether you’re a WordPress theme creator or just a consumer, it’s important to stay abreast of what’s going on in the wild world of WP theme development.

One of the best ways to do just that is to follow trends in new theme designs from some of the leading theme designers out there. Checking out both free and premium themes is invaluable. If you follow both long enough, you may start to notice that features that were once only available in premium themes start showing up in free themes after a few months.

Here, I’ve collected more than 85 awesome new themes, from some of the web’s leading theme designers. There are plenty of free themes, and premium themes that start at just $5.

Free Themes

Free themes are often as powerful as their premium counterparts. The main difference you’ll likely find is the level of support: free themes often have little to no support, while premium ones usually do. But, if you’re comfortable diving into code yourself or doing your own troubleshooting, you may find free themes that fit the bill nicely for your projects.

Photo Theme

Photo Theme is a simple responsive theme with a theme options panel that’s compatible with WP 3.4 and higher.

Keiran

Keiran is a light-on-dark theme from pixxels.at. It includes a configurable header image, customizable colors, shortcodes for various features, and more.

Montezuma

Montezuma is a flexible theme with 10 responsive, five flexible, and five static layouts. It also includes a virtual file system that lets you edit or create new page templates from the admin area, without FTP.

Pytheas

Pytheas is a minimal theme that can be used as-is or as a starter theme. It includes a customizable background, header, and menus.

OnePager

OnePager is a single-page responsive portfolio theme with an easy to use option page and integrated image slider.

Leatherly

Leatherly is a responsive theme from ColorLabs & Company with a leather notepad look, perfect for a one-page site.

Clean Response

Clean Response is a responsive, multi-purpose theme with two homepage options (one for business and one a regular blog theme).

Luca’s Theme

Luca’s Theme is a responsive theme for WordPress and BuddyPress with a built-in custom post type Nivo Slider and custom homepage template.

Discussion

Discussion is a two-column blog theme that looks like a notice board with push pins and paper. There are both free and paid pro versions.

elegantWhite

elegantWhite is a modern theme with an easily customizable header, theme options, and a responsive design that’s cross-browser compatible.

Swatch

Swatch is a free responsive theme from WooThemes that includes a features slider, custom homepage layout, and more.

Photo

Photo is a responsive gallery theme that’s great for web designers, photographers, artists, and more.

Tetris

Tetris is a Tumblog style theme with a masonry-style homepage and archive pages, with post formats for gallery, audio, video, link, and image posts, in addition to a standard post format.

Thoughts

Thoughts is a responsive theme created specifically for writers, with no widgeetized areas and no sidebar or footer. It includes support for standard, gallery, image, video, quote, audio, and link posts.

Solio

Solio is a single-page theme with simple theme settings, a filterable gallery, lightbox viewer, and more.

Best Theme

Best Theme is a responsive theme built on valid HTML5 and CSS3, with thorough documentation.

StarMag

StarMag is a fully customizable theme that’s banner-ready (125×125 pixel ads) and has a fixed width design. There are free and premium versions available.

The Night Watch

The Night Watch is a single column theme that’s perfect for personal blogs. The trial edition is free, but the premium edition includes additional features and access to the support forum.

Publish

Publish is a minimalist theme that supports custom backgrounds, nav menus, and various post formats, among other features. It’s best for single-author blogs, but works for multi-author blogs, too.

Suits

Suits is a business theme with an easy-to-use admin options, a responsive design, support for Google Maps Shortcode, custom sidebars, and a dynamic content loader, among other features. The premium version allows you to remove the footer links.

GirlsBook

GirlsBook is a fashion-styled theme built on the SMT Framework. It’s shortcode-ready, slider-ready, and includes a social share bar.

Celebrity

Celebrity is a simple, grungy theme with an easy-to-use admin options panel and two columns.

Iridium

Iridium is designed to be used as a landing page for mobile apps, and includes a custom menu, featured theumbnails, custom header, and more.

June

June is a photo gallery theme that’s perfect for photographers, particularly wedding photographers.

Kansas

Kansas is a minimalist 2-column theme with a subtle and elegant design, ideal for personal blogs or journals.

Halifax

Halifax is a responsive theme with a masonry layout on the homepage.

Gordon

Gordon is a lightweight, minimal tumblog theme that uses the Font Awesome icon font.

Financio

Financio is a business theme with custom menus, custom widgets, a featured thumbnail, and more. Customize the slider and homepage intro text from the theme options panel.

Delphi

Delphi is a blog style theme with a featured post slider and homepage intro section, with various configurable settings.

Infoist

Infoist is a simple blog theme with muted colors and nice typography, placing the emphasis squarely on the content.

Clean and Sober

Clean and Sober is a minimalist theme with no graphics, post excerpts displayed on index pages beneath the post title, author bios on posts and pages, and a single customizable menu.

Magnifique

Magnifique is a responsive theme built on Zurb’s Foundation framework, with unlimited color schemes and easy-to-configure theme settings.

Gadgetry

Gadgetry has a clean and modern style that’s perfect for blogs or small business sites.

Visual

Visual is a minimalist grid theme that’s perfect for artists, illustrators, graphic designers, and photographers.

Fruitiness

Fruitiness is a responsive theme that’s particularly well-suited for a music blog. It includes a Google Maps shortcode, custom sidebars, and more.

Gommero

Gommero is a simple, elegant theme suitable for business or personal sites, with a complete theme options panel for customizing the theme.

Runo Lite

Runo Lite is a lightweight, simple theme that was designed specifically for poets and writers.

iRibbon

iRibbon is a mobile-ready responsive theme that includes a feature slider and callout section, and comes with a drag and drop page options panel.

BlackBird

BlackBird is a professional responsive theme with many customization options, including logos and feature texts.

Path

Path was specifically designed for multiauthor blogs and magazine style sites, with support for plugins like Gravity Forms, Co-Authors Plus, Social Path, and more.

Snapshot

Snapshot is a portfolio theme perfect for showing off your photography, and includes a full width slider and gallery grid.

Surface

Surface is a clean theme with a custom background, drop-down menu, header logo, theme options, post excerpts, and more.

Theron Lite

Theron Lite includes three font options, a slider, background image, and theme options panel. It also has multiple page layout options and a contact page template that doesn’t require any setup.

Rundown

Rundown is a responsive blog theme that includes post formats support, a single widget area, custom header image and background, and more.

RetroPress

RetroPress is a stylish retro theme with ribbon visual elements. It’s shortcodes ready, has a dynamic content loader, and custom sidebars.

Premium Themes

Premium themes often have much larger featuresets than free themes, as well as better support. And they sometimes include design options that make it possible to create virtually any kind of site.

Glisseo ($45)

Glisseo is a responsive theme suitable for business, personal, or portfolio sites, with various page templates, post types, and unique features.

Apparition ($79.95)

Apparition is a striking theme with circular images and responsive features. It includes a custom background, custom menus, featured images, and more.

Horizon ($69)

Horizon is a modern responsive theme with eight built-in color styles, that’s particularly suited to sports, automotive, technology, and video game sites.

Pressco ($49)

Pressco is a minimalist, responsive portfolio theme for businesses or freelancers.

Elesoft ($49)

Elesoft is a colorful, bold business theme that includes a full-width slider, as well as background images on single posts.

StereoSquared ($39 membership)

StereoSquared is a responsive theme specifically tailored to bands, DJs, singers, and other music-related sites. It includes a tour schedule feature and SoundCloud integration.

IndiGamer ($39 membership)

IndiGamer is a game review theme that includes 3 alternate homapage layouts and 4 listing page layouts, as well as a built-in review system.

Pinfinity ($39 membership)

Pinfinity is a Pinterest-like tumblog theme that lets your users mark their favorites and includes multiple post formats.

Mustache ($39 membership)

Mustache is a flexible, responsive, single-page business portfolio theme that’s easy to set up and includes custom icons.

Glare ($39 membership)

Glare is a responsive portfolio theme aimed specifically at photographers and models, as well as other creatives. The two homepage options include either a photo slider or a full screen background video.

Hartee ($39 membership)

Hartee is a responsive theme built on the Skeleton framework with five unique color schemes and two different layouts to choose from.

Just Married ($49)

Just Married is a stunning wedding theme that includes an RSVP module and one-click auto install.

Newssetter ($59)

Newssetter is a news style responsive theme well-suited for technology review and article sites.

Education Academy ($65)

Education Academy is a portfolio theme well-suited for education sites, with multiple post types and endless skin variations.

Nightlife ($89)

Nightlife is a modern events directory theme that lets you charge users for submitting content, among other specialized features.

Catalog ($65)

Catalog is a clean and modern responsive ecommerce theme that works with WooCommerce and Jigoshop.

Nimble ($39 membership)

Nimble is a bold and beautiful responsive theme from Elegant Themes, with layouts catered for everything from large cinema displays to mobile devices.

Lucid ($39 membership)

Lucid is a modern magazine theme that displays tons of content without feeling cluttered that adapts to mobile phones and tablets.

Flexible ($39 membership)

Flexible is a sleek and minimal portfolio theme with a filterable, ajax-powered multi-media gallery.

Venturos ($49)

Venturos is a business portfolio theme that showcases your flagship projects and portfolio collections right on your homepage.

Letters ($59)

Letters is a slick business theme that’s also suitable for an ecommerce site or portfolio. It’s edgy enough to get visitors’ attention without being overdone.

Burogu ($49)

Burogu is a tumblog theme that utilizes the versatile post-format feature, with flexible post layouts.

Yumblog ($39 membership)

Yumblog is a food blogger theme with support for recipe posts that includes three seasonal color schemes and integrates with the Recipe Schema plugin.

Photolia ($39 membership)

Photolia is a minimal photoblog theme with a responsive design and customizable background. It includes retina image support.

Picks ($60)

Picks is a photography theme with a flexible home page controlled with a simple drag and drop widget system, as well as integration with Instagram.

Kiosk ($60)

Kiosk is an ecommerce store theme that’s perfect for stores with just 1 to 10 products.

Delayed (€39)

Delayed is a minimal responsive blog theme that puts the focus on the content, based on the FrameShift framework.

Hero ($49)

Hero is a minimalist responsive portfolio theme that includes a parallax homepage banner and a paginated portfolio template.

Scrollider ($70)

Scrollider is a business/portfolio/blogging theme with a featured slideshow and modules for portfolio, testimonials, and features, from WooThemes.

Mystile ($70)

Mystile is a lightweight WooCommerce theme that can be used as-is or as a starter theme.

Launch ($5)

Launch is a coming soon page template from Press75 that includes an about panel and a profiles panel.

Hoon ($75)

Hoon is a responsive HTML5 theme with a custom audio player that works on all devices. It includes customizable theme options, featured content options, and social media integration, among other features.

Droplets ($5)

Droplets is a simple theme that features perfect typography against a full-screen background image.

ecoChic ($25)

ecoChic includes dynamic tiles to show off posts from the category of your choice, a built in slideshow manager, and is built with HTML5 and CSS3.

Dorothy ($79)

Dorothy is inspired by Scandinavian home design and includes a unique half-width slider for featuring home page content.

Chamomile ($79)

Chamomile is a sophisticated and charming business theme that’s perfect for paper stationery, wedding, and event planning sites.

Photostore ($79)

Photostore is an elegant portfolio theme that’s perfect for photographers and other creatives, and includes a full-width slider, social media links, and more.

Intro ($79)

Intro is a portfolio theme with a class home page layout and customizes pages. It’s great for displaying text, images, or video.

Adorable ($40)

Adorable is a one page responsive slider theme that’s good for a variety of business and personal sites and has simple theme options settings and pre-designed templates.

Hoarder ($50)

Hoarder is a grid-based, layout-shuffling responsive theme that supports a variety of content.

KnowHow ($45)

KnowHow is a responsive, specialized knowledge base and wiki theme that’s easy to manage and includes live search, a FAQ page, and customizable color scheme.

Conclusion

Whether you design your own themes from scratch, use out-of-the-box solutions, or go for something somewhere in between, it’s vital that you stay up to date on what’s available in the world of WordPress themes. It’s a fast-evolving and constantly-changing area, and one that many designers are finding to be quite lucrative.

Which themes above are your favorites? Did we miss a great theme you think should have been featured? Let us know in the comments.



Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original post by Cameron and software by Elliott Back

Categories
News

How to create a simple CSS3 tooltip

Thumb

Tooltips are a great way to show your user more information by simply hovering over an image or text.  They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.

Today I’m going to show you how to create a simple tooltip using HTML and CSS to display the title tag of your hyperlinks.

Let’s start off by creating some simple markup for the link. We need to give it a title which will be the tooltip content, and assign it a class:

<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>

The next step is to create some rudimentary styling for our tooltip class:

.tooltip{    display: inline;    position: relative;}

We are now displaying our tooltip inline with our link using relative positioning. Next we want to create the a rounded box to form the body of the tooltip, and position it so that it floats above the link:

.tooltip:hover:after{    background: #333;    background: rgba(0,0,0,.8);    border-radius: 5px;    bottom: 26px;    color: #fff;    content: attr(title);    left: 20%;    padding: 5px 15px;    position: absolute;    z-index: 98;    width: 220px;}

We are using the :hover selector which selects an element, in this case our link, on mouseover and the :after selector, which inserts content after the selected element. We have specified a black background with 80% opacity, and for browsers that do not support RGBA colors we have provided a dark grey background.

Slightly rounded corners are created by using the border-radius attribute and we have set the text color to white. Lastly, we have positioned the tooltip box from the left of the link and added a little padding.

As well as the styling and positioning, we have set the content property:

content: attr(title);

This property allows us to insert the content we want which can be a string, a media file or an attribute of the element. In this case we are using the title attribute of the link. 

Now when you hover over your link a tooltip should be appear above it with the text you set as your link title. We have one problem though, the title information is being shown twice: once in the tooltip and once by the browser. To fix this we need to make a slight change to our HTML:

<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</span></a>

What we’ve done here is is wrap the link text in a span tag with its own title attribute. Now the browser will display the title set in the span tag when the link is hovered over.

To finish we will add an arrow to the bottom of the tooltip, to give it that little extra touch of style. We do this by using the :before selector and some border styles:

.tooltip:hover:before{    border: solid;    border-color: #333 transparent;    border-width: 6px 6px 0 6px;    bottom: 20px;    content: "";    left: 50%;    position: absolute;    z-index: 99;}

We are using a few border hacks here to create the effect of an arrow: setting the border colors on the left and right to transparent and controlling the border widths. We’ve also positioned the arrow so it sits on the bottom of the tooltip box.

And there you have it, a simple tooltip with the title tag of the element hovered over. You could also use this for image alt tags, or even just put your own text into the CSS to pop up where you want.

How do you build tooltips? Have you used this technique on a site? Let us know in the comments.

Featured image/thumbnail, hint image via Shutterstock.

Categories
News

Design Is Not What You Think It Is

Growing up I had many hobbies that I was passionate about. From computer to cars, fine arts to film, I always thirsted for information and relished learning more. This of course was before the internet had gained popularity leaving me fewer options to find the knowledge I hunted. Having to “hunt” for knowledge feels like a bad dream in todays river of publications and publishers. There isn’t a day that goes by with out articles about design being published. In all honestly I do love this free flow of content that the internet mediates so well, but nothing is with out its trade offs.

It is easy to be excited and passionate by design. Our culture is motivated and stimulated by our senses and predominately our visual sense. Everyone in the world has preferences, tastes and passions when it comes to things that they see. Even the most curmudgeon of people would be delighted to see a sunset over the mountains or a natural waterfall.

Design, especially on the web often taps into this visual pleasure part of our brain. It is the pleasure that we get out of seeing something that fits our tastes that makes it easy to scan through design galleries daily, read the next article about typography and spend hours looking through color pallets for that right combination (not that I do any of those… really I don’t…) By and large this should be recognized and embraced. After all when designing a website you should strive to get that reaction by those that are looking at your work.

This is of course tricky because design is subjective. But I would stress that it is more than just being “subjective,” rather different for every group and every person living. Further the “visual excitement” one gets from looking at the design is only a fraction of what is really important. How the site functions and achieves goals and objectives is much more important than how it looks. While I won’t be so crass to say that the visuals are not a factor or that they are inconsequential, they are a piece of a much bigger puzzle.

A site that has a look and feel that resonates with target users will perform better in most cases. Additionally users perceive a good-looking site to be easier to use even if this is not the case. Aesthetics can build engagement, increase retention and encourage use… but I often ask “Do we put too much emphasis on them?”

I have long thought about this and I am fully aware I too can have clouded judgement based on my own personal preferences. It wasn’t until I came across the rash of “Best of Design 2010” style articles earlier this year that I really become frustrated with the “fast food” style design articles that have become so popular. Reviewing the sites and designs that these posts showcased I fully agree they are beautiful, from a web designers artistic perspective. But what qualifies them as the “Best Design of 2010″ from a “performs the function and achieves the goals they were designed for” perspective? How do we know the target audience loved the visuals instead of just web designers as a group?

This illustrates a perpetual miscommunication about what “good design” really is. Our community rewards, showcases and promotes work based on our groups visual preferences and tastes. While not all designers fall prey to peer pressure and attempt to design for the styles that are showcased a lot of them do under the assumption that it constitutes as good design. In reality it would only constitute as good aesthetic design if you were designing for other web designers and even then one would be failing to consider the more important issue of  ”Is it going to achieve the goals you have set?”

Rather than treating our work like art we should instead look to the advertising industry, who have a much greater sense of results and success as a measure of great campaigns. Ad agencies expect that they will be critiqued on results in addition to the craftsmanship of their work, why should we be any different?

I encourage you to reevaluate how you look at design and how you are influenced by it. If you are someone who does design on any level you are going to be effected by what you see and is around you. If your mindset is that of thinking about solutions to specific situations and problems rather than what creates a pleasurable reaction when you personally see it you are going to be much closer to producing design that does create results. Maybe you won’t get the fan fare that designing for the CSS Galleries would, but since when are they your clientele anyways?

Original post by Ross Johnson and software by Elliott Back

Categories
News

23 Great Web Design Books for Under $5

If you’re anything like me you probably have six books you are reading at any one time. My thirst for knowledge is unrelenting… and I bet your’s is too. While there are few investments more worthwhile than your own wisdom the constant purchasing of books can put a hurting on your wallet. In my case, I often find I have spent hundreds of dollars on books throughout the course of a year. Recently, completely by accident, I found a potential solution to this ongoing book addiction. While browsing through some design books on Amazon.com I came across more than a dozen great e-books available for less than $5. Take a look, I bet you will be surprised what you can get for the price of a cup of coffee.

1. What is HTML5 – FREE!

2. Best of Smashing Magazine – $1.99

3. Web Design Basics, Color Choices – $0.99

4. SEO Web Design and Search Engine Concepts – $0.99

5. Web 2.0 Heros – $1.08

6. The Little Black Book of Design – $1.99 / Free for Prime

7. Fire the Web Committee – $2.51

8. HTML 5 Quick Notes – $2.99

9. Smashing Magazine’s Professional Workflow for Designers – $4.99

10. Smashing Magazine’s Professional Web Design Vol 1 – $4.99

11. Smashing Magazine’s Professional Web Design Vol 2  – $4.99

12. Smashing Magazine’s Mastering Photoshop for Web Design – $4.99

13. Smashing Magazine’s Master Photoshop for Web Design Volume 2 – $4.99

14. Mobile Design for iPod & iPad – $4.99

15. Getting the Hang of Web Typography – $4.99

16. Successful Freelancing for Web Designers – $4.99

17. How to Create Selling E-Commerce Websites – $4.99

18. WordPress Tutorials – $4.99

19. WordPress Essentials – $4.99

20. Mastering WordPress – $4.99

21. SEO Made Simple – $4.95

22. Web Designers Idea Book – Free for Prime Subscribers

23. 21 Sure Fire Ways to Market Web Design Services

21 Surefire Ways to Market Web Design

Conclusion

If you didn’t find what you were looking for here try searching through the Kindle section of Amazon and sort by lowest price. There were plenty of great looking books I didn’t include in this list. It will be worthwhile to check back throughout the year as well. I predict the affordable e-book trend will continue to grow as the publishing playing field is leveled and authors can make decent returns despite lower prices.

Original post by Ross Johnson and software by Elliott Back

Categories
News

Lessons Learned Running a Small Business in 2011

Small Business Working

As 2012 begins, I want to look back over the past year to see what can be learnt from it. Learning from your mistakes is less glamorous than a list of grand New Year’s Resolutions (Though I do like those too), but often more effective at ensuring the next year is even better than the last.

With that in mind, what follows are some of the lessons I have picked out from my own 2011. I would love to hear if these resonate with you.

When looking back at your own year, I’d encourage you not to look for when things went “wrong” as such, but simply to think of how things may have gone differently. That’s what I’ve done. If I were to go back, I may well do some of these things the same, but considering the alternatives is a great way to learn.

Plan For the Follow-Through

When working on a large project, launch day is the natural target. All of your work is dedicated to releasing the product.

That is obviously crucial, but equally important is planning in advance to build on the momentum from your big release. That could mean anything from analyzing its success, planning the next release, or simply capitalizing on the good PR.

I learned this lesson from the relaunch of this site in May. We had been working on it on and off for almost a year, so it had been a huge project, but in the push to launch, we built up a backlog of other work.

I worked on this and wrote a number of articles following the launch, but not enough. The backlog took priority because as far as schedules were concerned, the relaunch project was complete. The follow-through should have been a clearly defined of the project.

Short-Term is More Tempting than Long-Term

How many times have you heard a freelancer say they can’t find the time to work on their site or a personal project? Even though they really enjoy it?

All freelancers hit this issue, and I was no different. I think the reason for this is extremely simple; short term benefits have a clearer and more obvious benefit than long term ones. In my case, PliablePress has been hurt by this. Improving the framework brings me incremental benefits over time, but taking on a large client project pays off right away.

The trick here I believe is a balancing act. If you spend all of your time on short-term goals, you’ll never get past where you are right now. But similarly, if you only work on long-term plans, you may not survive that long. Don’t let one overcrowd the other.

Focus Beats Multitasking

This is a common enough productivity tip that you have likely heard before. Only work on one thing at a time. It makes sense, and it will come as no surprise to you that closing down Twitter and Skype etc. will help you work better.

The bigger lesson is to organize yourself each day so you know which projects you will be working on. You don’t need a step-by-step breakdown of the tasks (Though some people swear by that), a simple list of the top x projects that need your attention today will do.

This is something I see in my work again and again. The days in which I have a clear list of projects to work on, and I tackle them one by one, are my most productive days. Sometimes you can even spend a whole day on just one project, which is fantastic. Focus only on the next task, not all of the tasks.

Sidenote – When making your list, try to avoid adding any murky tasks that don’t have clear completion objectives, e.g. research can go on indefinitely so before you start, make sure you’re aware of how you will know when you’re done.

New Does Not Necessarily Equal Worthwhile

In the tech world, we all love the speed at which things change. The impulse is to try as many new products and services as we can, because who knows what the next game changer will be?

And therein lies the problem. It could be anything, and there are new things coming at you every day. You can’t try them all, and the attempt is a waste of your time. I think a better approach is to let the community try them out for you, and join in when a winner seems to be emerging.

Quora is a great Q&A style site.

A good example of this is social networks. There are a million different variations out there and new ones all the time. Most won’t catch on, and the time put into them is lost to you. I joined Quora after consistently reading good responses on it for months, but I’m not on Pinterest, Path or any of the other current “hot” networks yet. I’ll check back again in a few months.

The exception is tools that really add value to your business (Webapps you use, development software etc.). Again, I wouldn’t try every single one as it comes out, but every few months, take a look around. It’s fun too, playing with new toys is hard to count as work!

Join The Communities You Value

The web is full of little communities, and you could take part in them from morning to night. On a productivity note, you might try to cut down on this when you have deadlines to meet.

It’s possible to go too far with this though. Once you’ve read a lot on a particular site, and especially after you’ve started enjoying the comment discussions, you can get a lot more out of taking part as well.

Hacker News & Stack Overflow

I used to post thousands of comments in forums when I was younger, and then again on blogs as I started Pro Blog Design. That’s been somewhat lessened in 2011, so I’m looking forward to starting again. In particular, I’ve massively enjoyed reading Hacker News and Stack Overflow, so it’s about time I joined up.

Planning is Both Impossible and Essential

A slight paradox, but it’s true. It’s impossible to plan for everything that may happen, even over just a short period of time. But with no plan, things inevitably fall into chaos.

I like to think I’m quite organized, and I always have a good idea of how the next 3-4 weeks will flow. I don’t think any of my “ideas” have ever gone 100% to plan though.

Things change. Something will crash, a client will take longer with their feedback, an awesome new project will come up etc.

You need to plan enough to help things run smoothly, but be flexible enough to cope with the inevitable curve balls that come at you. I’m still not sure of the exact formula for this, but it seems that the more experience you have of it, the better your plans and estimates become.

Fight to Work On What You Love

When you run a small business, you’re responsible for everything. I have the pleasure of working with a number of other people throughout the year here, but no matter what, the final responsibility is still mine.

In practice, what this means is that the tasks you can’t easily find someone else to take care of, you do yourself.

That’s fine in the short term, and often even beneficial (Knowing you have to submit your accounts yourself keeps your finances very organized throughout the year!), but it isn’t a long term solution.

You didn’t start a business to work on things you don’t enjoy. There will always be some jobs you just have to do, but when the ones you don’t enjoy are the majority, you need to fix it.

I’m quite happy with where I am in regards to this now; the trick for me was angling towards certain types of projects. Great clients with interesting projects means that more or less everything is fun!

The Truest Test of a Business is When You Leave It

Not that I didn't still enjoy the break!

Again, this is something you’ve likely read before, and it’s spot on. In September, I was away for around 3 weeks, and it likely affected every part of the business.

I planned in advance as much as I could, but every change has a knock-on effect. By prioritizing the projects that could most likely be finished before I left, I was leaving others to be done largely after I returned. I was also lining up new projects to be worked on while I was away, but I was still needed at various points to give my thoughts.

In other words, the month before and the month after the trip were crazy. There is no easy fix to this, but removing the dependency on you is definitely a big area to work on if you want your business to grow.

Conclusion

Those were the biggest new “lessons” I would take from my 2011. I’ve deliberately chosen from when things could have gone better, not from when they went great. I’d be happy to share those as well if you like, but learning from mistakes is often the more revealing analysis so they weren’t included here.

In return, I’d love to hear about your year. What have you learnt from it and what will you do differently this year?

Before I finish, I want to apologize for how quiet the past months have been. They’ve been some of the busiest months I’ve ever had, but I’ve missed blogging greatly. January will be a quiet month as well, sorry, but after the 29th, I will be back with a vengeance. I’ve learnt a lot, so there’s a lot I want to share!

If you reached this far in the post, thank you for still being a reader after all this time.

Happy New Year everyone!

Original post by Michael Martin and software by Elliott Back

Categories
News

Vendor prefixes and web standards

When I started with the web development I was somewhat obsessed with web standards. The idea of having one set of rules or recommendations on how to develop a web page seemed like the only way to go in my professional life. The one thing that really annoyed me back then (besides various IE fixes and hacks) was browser inconsistent JavaScript support. I was in a place where I had to tweak and adjust every script I made and test it over and over again. Then this great thing came along so I am not worried about that anymore. The inconsistencies are still there, I just have a marvelous piece of code that does the worrying for me.

Most of the CSS properties however were cross browser supported all along. Sure, there are some misinterpretations and missing support for pseudo element here and there (especially with old mastodons browsers) but the situations wasn’t nearly as complicated as with JavaScript.

Then the web began to change. New technologies were introduced, new buzzes… Browser developers started to experiment in supporting cool CSS properties that not only could change the appearance of an element, they could also control the behavior.
As a web developer I couldn’t be more excited about these new properties. If nothing, it brought us choices. We don’t have to use them, but if we want to, we can.

Vendor prefixes

But there is one thing that is far from ideal…
In it’s original idea, standards should be a unique set of rules and coding recommendations applicable to all platforms, devices, browsers… Vendor prefixes couldn’t be further away from that. Applying a vendor prefix you target specific browser, so if you want to target another one, you either can’t or have to use another line of code with another “vendor prefixed” CSS property.

Take a look at this example

.box{
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	box-shadow: 10px 10px 5px #880008;
}

We all talk about IE hacks, how we hate it, how these are not complying to web standards, how they’re not valid… I am asking you, how is the example above different from these hacks?

I am aware that prefixes were used by browsers to try on new experimental properties. I salute that, without these great efforts we wouldn’t have progress. But do we have to keep the vendor prefixes for CSS properties that are not so experimental any more? Why don’t we have support for non prefixed properties now that some of the things are out of the experimental phase and more or less accepted?

Why are developers forced to write multiple lines of CSS for the same thing and when will it all be standardized?

In my opinion, vendor prefixes are unnecessary. If browsers want’s to experiment with new properties, what keeps them from doing so and use the “regular” naming conventions? It could even speed up the process of cross-browsers acceptance.

Let us know what do you think, I would really like to hear more thoughts on this one.

Original post by cssglobe and software by Elliott Back

Categories
News

jQuery plugin Easy Notification

There are cases and scenarios when you want to deliver a message to your website users and make sure that they will read it or at least notice it. This jQuery plugin will make that task easy for you. In my efforts to code plugins that are easy to use I created a plugin for various notifications. I named it easyNotification as it will soon become part of my Easy front-end framework.

Download this plugin for FREE

How does it work

This plugin will create and insert a simple piece of HTML code that contains a message you want to send to your visitors. Visitors have an option of closing notification once they read it. You can control the content and appearance of the notification by adjusting plugin options and CSS.

This is the HTML code that the plugin renders:

<div id="easyNotification">
	Notification!
	<span class="close">Close</span>
</div>

Features

  • Insert the notification anywhere in the DOM
  • Show notification on event (click, page load) or programatically by simply calling it from your script
  • Cookie based notifications enable you to show the message to your visitors once so you don’t annoy them with repeating messages
  • Extremely simple markup makes it very customizable

Options

Plugin comes with the default options, here is a list with explanation and a default values:

OptionDefault ValueDescription
id‘easyNotification’ID assinged to a newly created element.
text‘Notification’Text or HTML code you want to display in your notification.
parent‘body’Used to control the placement of the notification in the DOM. This selector defines parent element of the newly created notification element.
prependtrueTrue or false, this option controls whether the newly created notification element will be prepended or appended to parent element.
siblingTo provide even more control over the placement of the notification element, this option defines a sibling. By default this option is blank. If defined the parent option will be ignored.
beforetrueTrue or false, this option controls whether the newly created notification element will be placed before or after the sibling element.
closeClassName‘close’Value of a class attribute assigned to closing span element.
closeText‘Close’Inner text of the closing span element.
cookieEnablefalseTrue or false, this option controls if the cookie based notification will be enabled.
cookieName‘notification’Name of the cookie created when the notification appears for the first time. Using different cookie names for different notifications enable multiple cookie based notifications.
cookieValue’12345′Options used if you want to set any specific value to the cookie, although script only checks if the cookies exists.
cookieDays30Cookie duration in days.
delay0Delay in milliseconds before notification is showed. By default is set to 0 which means the notification will show immediately.
autoClosefalseTrue or false, this option enables self closing notifications.
duration5000Duration of notification element (if autoClose option is enabled) in milliseconds before it closes automatically.
callbackfunction(){}Callback function option when notification is closed.

Option syntax is standard when it comes to jQuery plugins:

$.easyNotification({
	text: 'Your custom text',
	parent: '#someElement'
});

but this plugin enables the simplest possible usage if you want to use default values and only insert your own text:

$.easyNotification('Your custom text here');

Demos

There are 3 demos available:

Original post by cssglobe and software by Elliott Back

Categories
News

How to make design decisions

Thumbnail

This post examines an important part of the design process that, for some reason or other, is often omitted from community conversations. Its aim is to get the design community talking about the ‘whys’ — including why they are important.

One advantage the design industry has going for it is its helpful, giving community, and that community’s desire to learn and grow. Just look around at the conversations had at conferences and online. Experiences are shared, techniques are passed along, and so many helpful hints and tidbits are blogged. But one element seems absent.

For all the conversations we are having, we don’t discuss why we make the decisions we make in our projects. It’s our choices that provide insights and opportunities. We should talk about them.

Why ask ‘why’?

Perhaps we don’t realize that the rationale behind our decisions can be valuable to others in the community. Perhaps we don’t think deeply about our decision-making processes because so many decisions are made in the early stages of our projects. We often skip ahead in our retellings; we focus on technique when we share, rather than overall experience, and we show off the techniques that tied the end-solution all together without any explanation about how we got there.

This not only sells our process short, it sells the industry short as a whole.

Help the community learn

Revealing our decision-making processes and discussing why we chose to use various techniques can be useful when teaching others. Our choices offer insight into the problems we run into and the solutions we come up with. If we want to teach others to walk in our shoes, this is vital information. The choices we once made were opportunities for us to learn, and they could become opportunities for others to learn. Why do we give strict instructions for getting from point A to point B instead of just handing over the road map?

Help clients understand

The more we talk about why we made the decisions we made while working on a project, and the better we get at expressing them, the more we’ll be able to help our clients understand why they should side with us when there are clashes between visions. Numerous stories populate the blogosphere that highlight how often this type of situation arises. Clients push for things to be included in projects that could potentially compromise the design’s effectiveness, and we push back.

The better we are at making the case for our design decisions, and the more forethought and research we have put into them, the more credence our claims have. We may even be able to show that our decisions were made in a more thorough manner than those we are arguing against. Our processes are deliberate, and it’s because of the decisions that drive them. Demonstrating this to our clients could be the extra push they need to give us clearance to follow through on our ideas.

Track the creative process

How this profession is perceived is one problem that has been discussed on the web by the community. Web design is often discounted as a whole because some think our work is virtually effortless. People think all we need to do is press a magic button and, suddenly, fully functional, tested and tried products instantly appear online. That is not how it works. Perhaps this stems from the fact that non-creative people do not understand the creative process?

Discuss your creative process. Give your clients a revealing look behind the curtain so they get a sense of the amount of time and thought that goes into our products before we even begin to render anything. Keeping a lid on our own tendencies to gloss over these vital steps could be the beginning of breaking through that mindset.

Add depth of understanding to projects

The kind of conversation I’m advocating gives insight into the full meanings of our designs, straight from those who created them. While there can be an interpretive element to design, recall that specific end goals were set for each project, and shedding light on the way those goals were reached can negate the need for interpretation.

Furthermore, if, from the outset, we expected we’d be having these conversations (if we knew we’d have to provide said road map), then we might consider each of our choices more carefully, and thus strengthen our own grasp of a given project.

This can also benefit the design in other ways — with regard to appreciation, for example. We know that design should not overshadow the brand or service it promotes, but it doesn’t hurt to build functional designs that users can appreciate. The more people understand a design and the decisions that shaped it, the more likely it is that they’ll connect with the design. Connection leads to appreciation, which is intimately connected with success.

Highlight professional expertise

I’ve glossed over this in other sections, but it deserves an explicit mention. A good designer can bring together complementary elements to create an effective design, but a great one can tell you exactly why each of those elements was chosen and just what makes them work effectively with one another. The more we talk with our clients about the why behind the how, the more we highlight our professional skills and know-how. Take the opportunity to demonstrate the expertise that will make you that much more desirable in the job market and give your clients confidence in your skills. These discussions can open doors for us that might have otherwise remained closed.

Success in this business is not so much about price points as it is about clarity of vision. Let current and prospective clients know that we have the talent to back up our asking prices and that the works in our galleries are more than just happy accidents.

Stop holding back

When you start to examine the numerous benefits of sharing your decision-making processes, you might start to wonder what is holding you back. Why haven’t you been having these conversations?

What if we are holding back because we don’t know why we made the decisions we made? Have we become so overworked that we just aren’t doing the research we should be doing in order make the most informed decisions we can make? Maybe too many of us are bluffing our way through the decision-making process.

Even if none of that is true, we have to consider what impression we are giving our clients. Maybe we just don’t have time to spare for more meetings, but it might not be coming across that way. As a community, we should make the time to make these conversations happen.

Do you discuss your design decisions with colleagues? What about clients? What has been the reaction? Let us know in the comments.

Categories
News

Amazing free bundle from ByPeople.com

Most web pros can’t make it through a week without falling back on some else’s work: you may be a great programmer, but can you illustrate? You may be a great icon designer, but do you understand type?

We don’t all have a studio of colleagues to pass work off to. Some of us have no choice but to take the bull by the horns.

When you’re desperately in need of an asset that you don’t have the time or experience to produce, icon sets, banners, badges and all manner of graphic assets can be a life saver.

The big problem with freebies though, is that you spend almost as long sifting through the dross to find some hidden gems, as you would getting your head down and drawing everything from scratch.

But today we have some great news, ByPeople has put together one of the biggest bundles of free files that we’ve ever seen.

See some of the previews here:

Once you’ve downloaded the lot you’ll find you have 1000s of great items including:

  • 100 menus
  • 100 seamless patterns
  • 100 search boxes
  • 20 résumé templates
  • 100 character illustrations
  • 100 pixel perfect icons
  • 80 Credit card icons
  • 2 original fonts
  • 100 shadows
  • 100 user icons
  • 202 logo templates
  • 20 banner templates
  • 20 PSD themes
  • 40 stationery templates
  • 40 toolbars
  • 50 business card templates
  • 50 dividers
  • 50 shines
  • 50 social media icons
  • 60 badges
  • 70 buttons
  • 750 applications icons
  • 80 boxes
  • 80 sliders
  • 90 ribbons
  • Dozens of pixel patterns
  • 100 backgrounds

Go to see it and download it all!