Archive for February, 2012

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples

Thursday, February 23rd, 2012

It is estimated that within two years mobile internet users will overtake the desktop internet users. The rapid advancement of mobile internet has enabled more and more people to use their mobile device as a primary web browsing tool. What does it mean for web development? Well, the usual development for just a couple of screen resolutions is already dying out.

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors.

Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Tools

1. Less Framework 4

Less-framework-responsive-web-design-showcase

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless-responsive-web-design-showcase

Gridless is an optionated HTML 5 and CSS 3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile-boilerplate-responsive-web-design-showcase

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton

Skeleton-responsive-web-design-showcase

5. 320 and up

320-up-responsive-web-design-showcase

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

Fittext-responsive-web-design-showcase

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

Media-query-responsive-web-design-showcase

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

Testing-responsive-web-design-showcase

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

Media-queries-responsive-web-design-showcase

A collection of inspirational websites using media queries and responsive web design.

10. inuit.css

Inuit-responsive-web-design-showcase

Inuit.css is a CSS framework built to work on small screens. Inuit.css has a custom grid system builder for creating fixed or fluid grid system igloos.

11. PhotoSwipe

Photoswipe-responsive-web-design-showcase

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

12. Adapt.js

Adapt-responsive-web-design-showcase

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

13. Adaptive Images

Adaptive-images-responsive-web-design-showcase

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

Tutorials

We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

2. Fluid Images via Unstoppable Robot Ninja

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Awesome Tutorials To Master Responsive Web Design via Cats Who Code

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor

Publications

Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

1. Responsive Web Design By Ethan Marcotte

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin

 

If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies

Inspiration

1. Briangardner

Briangardner-responsive-web-design-showcase

Briangardner-2-responsive-web-design-showcase

2. Notloremipsum

Notloremipsum-responsive-web-design-showcase

Notloremipsum-2-responsive-web-design-showcase

3. Fortysevenmedia

Fortysevenmedia-responsive-web-design-showcase

Fortysevenmedia-2-responsive-web-design-showcase

4. Brace Yourself

Brace-yourself-responsive-web-design-showcase

Brace-yourself-2-responsive-web-design-showcase

5. Osvaldas

Osvaldas-responsive-web-design-showcase

Osvaldas-2-responsive-web-design-showcase

6. Thegregthompson

Thegregthompson-responsive-web-design-showcase

Thegregthompson-2-responsive-web-design-showcase

7. Studiopress

Studiopress-responsive-web-design-showcase

Studiopress-2-responsive-web-design-showcase

8. Food Sense

Food-sense-responsive-web-design-showcase

Food-sense-2-responsive-web-design-showcase

9. 255creative

255creative-responsive-web-design-showcase

255creative-2-responsive-web-design-showcase

10. Paperstreetinteractive

Paperstreetinteractive-responsive-web-design-showcase

Paperstreetinteractive-2-responsive-web-design-showcase

11. Raewynbrandon

Raewynbrandon-responsive-web-design-showcase

Raewynbrandon-2-responsive-web-design-showcase

12. Gonzoblog

Gonzoblog-responsive-web-design-showcase

Gonzoblog-2-responsive-web-design-showcase

13. Zync

Zync-responsive-web-design-showcase

Zync-2-responsive-web-design-showcase

14. Techdept

Techdept-responsive-web-design-showcase

Techdept-2-responsive-web-design-showcase

15. Pelicanfly

Pelicanfly-responsive-web-design-showcase

Pelicanfly-2-responsive-web-design-showcase

16. Marijazaric

Marijazaric-responsive-web-design-showcase

Marijazaric-2-responsive-web-design-showcase

17. Raymacari

Raymacari-responsive-web-design-showcase

Raymacari-2-responsive-web-design-showcase

18. Handsomecopy

Handsomecopy-responsive-web-design-showcase

Handsomecopy-2-responsive-web-design-showcase

19. Jaypegams

Jaypegams-responsive-web-design-showcase

Jaypegams-2-responsive-web-design-showcase

20. Joshuasortino

Joshuasortino-responsive-web-design-showcase

Joshuasortino-2-responsive-web-design-showcase

21. 36creative

36creative-responsive-web-design-showcase

36creative-2-responsive-web-design-showcase

22. Whitelotusaromatics

Whitelotusaromatics-responsive-web-design-showcase

Whitelotusaromatics-2-responsive-web-design-showcase

23. Forefathersgroup

Forefathersgroup-responsive-web-design-showcase

Forefathersgroup-2-responsive-web-design-showcase

24. Dentsunetwork

Dentsunetwork-responsive-web-design-showcase

Dentsunetwork-2-responsive-web-design-showcase

25. Upperdog

Upperdog-responsive-web-design-showcase

Upperdog-2-responsive-web-design-showcase

26. Teehanlax

Teehanlax-responsive-web-design-showcase

Teehanlax-2-responsive-web-design-showcase

27. Weareduo

Weareduo-responsive-web-design-showcase

Weareduo-2-responsive-web-design-showcase

28. Unfold

Unfold-responsive-web-design-showcase

Unfold-2-responsive-web-design-showcase

29. Builtwithmomentum

Builtwithmomentum-responsive-web-design-showcase

Builtwithmomentum-2-responsive-web-design-showcase

30. Glorm

Glorm-responsive-web-design-showcase

Glorm-2-responsive-web-design-showcase

31. Quazarwebdesign

Quazar-responsive-web-design-showcase

Quazar-2-responsive-web-design-showcase

32. Agenciart

Agenciart-responsive-web-design-showcase

Agenciart-2-responsive-web-design-showcase

33. Apgdesign

Apgdesign-responsive-web-design-showcase

Apgdesign-2-responsive-web-design-showcase

34. Createdm

Createdm-responsive-web-design-showcase

Createdm-2-responsive-web-design-showcase

Gathered and Arranged by: Jamal and Daniels

Common mobile web design mistakes

Thursday, February 23rd, 2012

Mobile Internet usage is on the rise, and the world of Web design continues to evolve—so designers must learn to accomodate mobile devices. Thinking “Oh, my users won’t visit my website on a mobile device” is the worst mistake of all.

No one can stop mobile usage from increasing, and the odds are that every website will receive visitors on mobile devices. So, the best strategy is to be as prepared as possible.

Just thinking about mobile users isn’t enough to address the situation. Many mistakes are still committed during the process, and knowing what they are is the first step in effectively avoiding them in future projects.

The following are the most common mistakes on mobile websites.

Not accounting for device width

This might sound obvious, but an awful lot of websites look like this on a mobile device (in this case, the iPhone):

You should understand the maximum width that elements on a page ought to have, as well as be able to format an entire HTML document to account for various screen sizes.

In the screenshot above on the left, the website is formatted for variable device widths, but its elements are not. The website on the right is not formatted for variable device widths, so its elements appear far too small. Even if the body element was set to a narrower width (320 pixels, for example), it would just get pushed to the far left of the screen and still be small and unreadable.

This can be fixed with a simple HTML line in the <head> of each document:

<meta id="meta" name="viewport"
content="width=device-width; initial-scale=1.0" />

This small detail, along with formatted elements, will make for a good mobile experience.


Making users fill out long forms

Filling out forms is annoying even on desktop computers, and it’s even more tedious on a mobile screen. Designing a web form for mobile devices is a complex task; focus on building simple forms that don’t ask much from users.

Set the type of input being requested from the user, so that the keyboard has the elements that the user needs when they focus on the field. For example, setting a field’s input type as number will set the keyboard to display numbers by default, instead of letters.


Not reconsidering content

Transferring content from big-screen web environments has come to involve its own strategy, like when content had to be transferred from print to web. Space and focus constraints on mobile devices are far more significant than those on computers.

Luke Wroblewski’s “design for mobile first” methodology defines a strong approach we can take. It discourages us from generating one set of content for the desktop web and another set for the mobile web. A mobile design team should consider whether content that will not appear in the mobile version is even necessary? Perhaps it doesn’t even need to appear in the desktop version.

Using content for decorative purposes or just to fill space almost guarantees that it will be removed later, so why not consider just essential content from the beginning?

Going through this process can uncover other common mistakes and problems.


Eliminating content and functionality for no reason

Revising content can be tricky, and tight schedules can force it to happen faster than it should. This often results in removing content and functionality erroneously—in fact, almost at random.

The process involves in-depth analysis before the editing and curating begin. Existing content needs to be reviewed in order to separate content that adds value and meets users’ expectations from content that just distracts or fills up space.

To better understand the strategy of generating and editing content, check out the book Content Strategy for the Web by Kristina Halvorson. It covers every detail, from basic content strategy to auditing and editing substantial material.


Forgetting the size and limitations of a finger

When using a computer, we use precise mouse clicks for every task. We’re able to easily click on a 16 × 16 icon; the process involves no hardships.

A mobile user, on the other hand, has the precision of a finger—a finger that’s almost never thin.

Apple has decided on 44 pixels as the minimum acceptable size for mobile controls (44 × 30, to be precise) and has implemented this standard across its products.

In addition to the size of elements, the space between those elements is often ignored. Think of a list of options, each accompanied by a radio button, with a line height of 0 between them. Users are bound to make mistakes, even if they take their time. Why would we complicate things in this way?

Luke Wroblewski has perhaps gone further than anyone in identifying standard sizes for mobile design, by compiling recommendations from several platforms. According to the Windows Phone UI and Interaction Guide, the standard size between elements should be 8 pixels, minimum.


Long page-load times: Heavy image files

Heavy image files have been a problem from the beginning in web design. And the mobile web presents even greater challenges, because loading times tend to increase when you combine the limited capabilities of some devices with variable data-transfer signals (which depend on the type of Internet connection).

Image optimization also continues to be an important consideration in mobile design.


Long page-load times: Too many images

Many small images pose the same handicap as a single heavyweight image.

This is especially a problem when designers try to emulate the look of native smartphone applications, including the gradients and rounded corners of iOS headers and buttons.

That leads to yet another common mistake…


Not taking advantage of CSS3 and HTML5 capabilities

Many kinds of images can be avoided altogether now that HTML5 and CSS3 are around. Plus, mobile browsers give us a lot more freedom than desktop browsers because almost all of them were built on the Webkit engine, which supports both HTML5 and CSS3.

Why not take advantage of this? The <canvas> element in HTML5 can reduce the need for images, as can the new CSS3 properties that provide basic styles like gradients and rounded corners. It’s a major way to save on page-loading times.

Enough with the graphics now. Using too many images isn’t the only way to damage a mobile design, and images aren’t the only things that slow it down, either.


Long page-load times: Too many imports

We see this mainly with frameworks (and plug-ins for those frameworks). Let’s face it: it happens a lot now, and it has been happening since the arrival of the oh-so-necessary-and-helpful AJAX frameworks such as jQuery and MooTools. jQuery developers even went so far as to create a mobile enhancement called jQuery Mobile.

These make the job so much simpler that many designers don’t worry about the consequences of depending heavily on them. You’ve probably seen something like this in a <head> tag:

And let’s not forget the jQuery Mobile imports:

Every single import in this header is a callback to the server, and it slows down the page just as a loading image would.

There are ways around this issue. You could synthesize the imports. Why import multiple small scripts if you can call one big one? You could also evaluate whether you need a framework at all. Is one really worth it? Could you get the job done yourself with less complexity?.


Long page load times: Not communicating actions clearly

Let’s say that certain actions on your mobile website take longer to load than others. That’s fine; it’s not something to go crazy over if you’ve made a real effort to speed things up. The important thing to consider now is how to make the wait more bearable for the user?

The solution is to make the design as transparent as possible. What’s happening? The user should be able to answer this question at all times. For every loading action in the design, there should be a clear statement telling the user about it.

Never underestimate the power of the simple “Loading…” string.


Not setting a home screen icon

No one wants the shortcut to their mobile web application to look like any of the ones on the left above. The deviantART icon on the right is a lot more attractive and more likely to get clicked on.

The thing about users is that they tend not to read. And a home screen full of shortcuts with no distinctive icons makes users 100% dependent on the titles. (And even then, long titles are compressed and filled in with ellipses, as seen above, making them even less identifiable).

Setting a home screen icon isn’t difficult at all. After creating the icon as a PNG file (which should be 158 × 158 pixels), add the following line of code to the <head> of your HTML document:

<link rel="apple-touch-icon" href="images/icon.png"/>

Simple and helpful. This line of code works on Android phones, too. You don’t even need to add the gloss or rounded corners; the iPhone adds that automatically.


Not being responsive

Responsive web design is one answer to all of these issues. It’s tricky to implement, but effective when done well. Ethan Marcotte recently wrote a whole book on the subject. I highly recommend it if you want to get into this in a lot more detail.

Responsive design is about creating a design that adjusts nicely, regardless of the size of the container. It involves considerations such as fluid grids (where elements reorganize as the browser changes in size) and images that adapt as the page expands and contracts.

Marcotte also wrote a detailed introduction to responsive design, which might help you better understand the subject.


Written exclusively for Webdesigner Depot by Pamela Rodríguez, a mobile interface designer and front-end developer at Naranya AppHouse. She maintains a personal blog on desktop and mobile design and development topics.

Do you have personal experience with mobile design challenges? What problems have you encountered? As a mobile user, have you encountered difficulties other than the ones mentioned here?



HotGloo Professional Web Based Wireframing – 60% Off!


Source

What is the Trend for Web Design in 2012?

Wednesday, February 22nd, 2012

Just a month and a half has passed in 2012 and there are some patterns which are quite easy to notice in how people design. Sure, most of them are similar to the ones of 2011 – it seems 2011 and 2012 will not be too different, however there might be some small changes which I will talk about soon. There is no doubt that screen size is not an issue anymore and designing for all sizes is crucial – this is the stand point of web design trends in 2012.

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of mediaqueri.es.

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

designinfluences.com/fluid960gs/

cssgrid.net/

960.gs/

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

englishworkshop.eu/

kantt.dk/

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

wearepropeople.com/

freshness.hu/

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

PageLime: A CMS Specifically Made for Web Designers

Friday, February 17th, 2012

Picture this: you are building a website and wish to steer clear of the complexity of present day Content Management Systems (due to lack of time and/or other factors). Or, in other words, your website is a rather small entity (that perhaps does not require the collaborative abilities of Wikipedia or the social networking databases of Facebook). In simplest terms, you’re looking for an easy to use and nimble CMS that, though performs all the functions that you want it to, does not talk the geeky lingo.

Alternatively, picture this (comparatively better) scenario: you are a web designer (if you are reading this blog, chances are that you indeed are a web designer). You need a hosted, no-frills solution that lets you create websites for your clients (who may or may not be tech savvy), and resell them.

What is PageLime


If either of the above mentioned cases hold true, allow me to introduce you to PageLime, a web-based Content Management System.

PageLime

PageLime

PageLime is a hosted CMS service that lets you quickly set up and publish websites. Depending on the plan you opt for, you can add features to your site such as custom domain mapping, unlimited users/administrators, etc. You can also use it to re-brand the websites that you create and resell them to your clients. Sound good so far? Let’s dive in to check out its features!

Plans, Pricing, and Features


PageLime currently offers four plans, namely:

  • Free: As the name suggests, this plan is free to use. You can create up to three websites and have an unlimited number of users (but only one of them can have administrative privileges). However, you cannot map your own domain or use the websites for reselling. Plus, you will have to tolerate the PageLime logo on your site.
  • Professional: This plan lets you create 50 websites and have unlimited users (again, just one administrator). Additionally, you can use your own logo and colors, as well as map your own domain. And just in case you need it, reseller tools are also allowed in this plan. The Professional plan costs $19 per month.
  • Business: The Business plan gives you everything under the Professional Plan, with the added bonus of unlimited websites (and unlimited administrators). It costs $69 per month.
  • Enterprise: This plan targets large enterprises and service providers. The USP of the Enterprise Plan is that you can host it on your own server.

Also, you can try the Professional and Business plans free for 14 days before making up your mind.

Modus Operandi


We shall now take a look at the manner in which we can perform basic tasks in PageLime, and how it fares as compared to traditional CMSs. Please note that here, ‘traditional CMSs’ refers to what we’ve been using, such as WordPress, Drupal and Joomla!

Since we are evaluating PageLime as a potential alternative for traditional CMSs, for the sake of simplicity, each category of operation will be looked at individually.

Running Multiple Websites

As mentioned above, PageLime lets you create multiple websites (ranging from 3 to infinite, depending on your plan). Each website has its own admin panel, domain/sub-domain, and user accounts. You can login to your master account, and then select the website that you wish to modify/manage.

Running Multiple Websites

Running Multiple Websites

Speaking of traditional CMSs, support for multiple websites within the same installation, though possible, is cumbersome to say the least. Movable Type lets you create user blogs and websites within one installation, and so does LifeType. WordPress, on the other hand, tries to make the task comparatively easier, but it too caters to “a large network of blogs“. All in all, PageLime comes with excellent support for multiple websites.

Editing the Website(s)

PageLime offers an easy interface for editing websites – pretty much on par with other CMSs – bit more ‘beautiful’, but nothing out of the ordinary. Once you add the Pagelime editable CSS class to the code, you can edit pages, links and other components of your website. However, since PageLime caters more to websites, rather than blogs/journals, it offers features such as Live Preview that lets you view the changes that you make to your website on the fly. Furthermore, another unique feature includes Content Versioning – your previous drafts are saved, and if you ever mess anything up, simply head to Restore!

Editing Your Websites in PageLime

Editing Your Websites in PageLime

Among traditional CMSs, many offer the Versioning and Restore feature, and Concrete5 has been supporting Live Preview for quite some time.

Data/Media Management

PageLime comes with a built-in Image Editor (no, do not expect Photoshop). You can zoom, crop, sharpen and resize images. Beyond that, you can modify colors or use some predefined effects. All in all, you can happily upload images and modify or tweak them for the web within the CMS.

Managing Images

Managing Images

Hardly any other traditional CMSs offer this feature – though some offer file management options, but image editing is something you’re expected to do BEFORE uploading. CMSs especially built for image galleries, such as Piwigo, however, do provide you with such editing abilities.

‘Smart’ CMS

You can save pages as templates in PageLime for future editing, and it also comes packed with a Code Editor. Further more, it offers several pre-defined ‘templates’ that make your task easier.

Saving Pages as Templates

Saving Pages as Templates

This is perhaps an area where traditional CMSs do a better job, with no strings attached. While PageLime delivers what one would expect of it – you will definitely miss the freedom of WP Themes and Drupal Modules.

SEO, White Labels and Other Goodies

PageLime offers SEO options out of the box – you can edit metadata and other related info easily. Plus, the Business and Professional plans offer detailed statistics for each website that you create.

Detailed Stats

Detailed Stats

On the other hand, many CMSs such as Joomla and even Concrete5 offer sitemaps and SEO natively. At the most basic level, WordPress does the same by the use of plugins.

Reseller Tools

Quite unarguably, PageLime’s USP lies in its Reseller Tools. While the Free plan isn’t much, all other plans come with awesome reseller abilities. Apart from hosting multiple websites (each with its own admin panel and domain), you are provided with the option to re-brand and resell the websites (instead of PageLime’s, it shows your logo in the admin panel). Further more, your Reseller Panel shows you client payments, subscriptions and other sale-purchase transactions. And if that isn’t good enough, PageLime can automate recurring payments and invoices to make your life easier.

Reseller Tools

Reseller Tools

Obviously, such re-branding and reseller tools are not offered in any traditional CMS natively. WordPress and, to some extent, Drupal have plugins/extensions that can help you take care of the same, but the CMSs in particular do not come with reseller features.

The Verdict


So, the bottom line. Who should use PageLime?

Well, if you are a designer or a developer, you should consider using it for the ease of use and the reseller tools that let you offer it to your clients.

Also, if you do not possess the geeky expertise of web administration, Pagelime might just fit the bill for you. However, in this case, you should also bear in mind that in order to get the most out of it in terms of customization, you’ll probably need a rudimentary knowledge of HTML/CSS.

On the downside, the product seems a bit over priced if you do not wish to resell and make money using it. If, for instance, all you need is a simple no-frills website and are considering PageLime in order to avoid the other complex CMSs, even the cheapest plan will cost you $19 monthly (we are not considering the Free option as it does not have custom domain mapping, and a yourname.pagelime.com sub-domain is not something you might want for a website).

At the end of the day, PageLime is described as a “simple CMS for your clients”. In other words, it is full aware of the fact that its forte lies in the Reseller Tools.

Thus, PageLime should be in your arsenal if you are managing multiple websites or need an easy to use solution for your clients’ needs. For all other reasons, you’ll be better off using tradition Content Management Softwares.

If you have used or are using PageLime, feel free to share your views in the comments!

Why Did You Become a Web Designer?

Saturday, February 11th, 2012

You are probably one of those who chose web design because you are passionate about it; or not. You may have chosen it because your father owned a design company and he wanted to integrate you into it. Or because you started off as a content writer and after writing on design topics for two years you decided to give it a try. Regardless of where you come from, pretty much all of us head the same way: either work for a company or freelance – there is not that much else out there.

However, there are endless possibilities for us in the web design world – it is quite easy to grow both in skills and personal experience. Each one of us has a life planned and a path he wants to follow, even if there are many overwhelming challenges to get through.

But sometimes you just have to ask yourself, what is it you want to achieve during your career?

Image by DoBeRaGi.

Answering this question is not easy to do and to get the best answer you need to look back at how you started. What feelings did your first job give you? Did you become a designer by accident, or was it something you always planned? Do you want to work as a designer for your whole life, or is it just something you want to use to get a bigger role in the future? It is important to answer these questions because each aspect brings about different outcomes. Some future outcomes bring much more than the others and if you always wanted to become a web designer, then it is highly likely you will always be happy with your career choice. Designing only for the money might not make you so proud of yourself – Steve jobs once declared he would rather go to bed every night knowing he did something great the previous day than being the richest person in the cemetery.

There are lots of reasons why an individual wants to be a designer. You might be a creative person, like the fact that you have the opportunity to work freelance, enjoy mixing both left and right brain work by coding and designing at the same time or enjoy working in a sector that is growing. Of course there are many other reasons, but these seem to be the most popular.

If you still need to plan your career path, then there are two things you should do. First, make a list of things that make you get up all excited in the morning when you go to work. Then, make a list of things you think should be improved. Afterwards, make a short narrative about how your career has been to this point. Clarify your roles and what you like and don’t like about your career. Lots of new job descriptions are written every year, so you might as well be the creator of your new job if you feel like it, but you first need to know where you want to head to in order to reach that point.

Image by Mr. T in DC.

If you are in the field because you are a creative individual, then design is definitely for you. You can be the creative director of a company because creative people tend to do really well when being in charge of a focused area of work. They might not be the best managers or business people, but they are definitely great at managing teams in their field.

If your main skill is flexibility, you are most likely what every company owner looks for. You can be everything, from outsourcing partner to company partner. You probably have the highest chance of living the dream and creating your own business. You probably like managing people, being in charge and taking care of every small detail – then this is for you. You can step by step decrease the number of hours worked for others and increase the hours spent on building your own company. In a few years this company might bring you money without you having to lift a finger.

If coding and designing are what you’re in for, you are great for working in a company or even freelance. You can develop interfaces, applications and even advise people in regards to what might be best for them when they decide to create a website. If you want to aim as high as possible, right now that would probably be Apple. I doubt there is better design out there, both for their web identity and for their products. I am sure there is a reason behind many Product and Industrial Design programs using Apple’s products as case studies.

If you’re in it for the money, you can pretty much accomplish this everywhere. However, I advise you that being in something for the money only brings short term enjoyment and you might have to change careers several times throughout your working life. In the design field you would be suitable for an executive staff job more than a regular day to day coding job. You can also start your own business and if you are flexible and good enough, this will make good money for you.

Image by Doug88888.

What you want to achieve depends also on what you want to focus on. Do you want to provide for your family and make sure they have everything they need? Do you want to offer services for the small companies who need start-up help? Do you want to provide services for specific communities only? I have a friend who owns a company that focuses on churches. They only design for churches and they have quite the portfolio. It is totally up to you what you focus on, but remember every decision you make will reflect upon you later in your career.

To give you a more specific answer, Mark Zuckerberg makes donations. Google’s co-founders have become philanthropists. Adriana Huffington wrote about how to maintain your health if you live and work in a fast-paced digital environment. Every one of those is a legacy they left behind. What is it you want to leave behind?

Some other questions you might ask yourself are: do you want to design for you or for others? Do you want to take direct responsibility for your actions? What kinds of websites do you like to design? Are you more excited about coding or actually building interfaces? Do you want to write about design or actually do it – or both?

Image by espy786.

Working as a web designer is hard work, and many times you will have to spend more than 60 hours per week forcing ideas out. Challenges are out there at every step and it is purely impossible not to run into  them now and then. If you know what you want from life and mostly from your web design career, and you are ready to work hard for it, it is difficult not to enjoy great times. Before making a decision, think about what you want to achieve – then work for it, and sooner than you think you will find yourself on the right path.

Until next time, let’s hear your opinions on this topic. Do you think you made the right choice? Is there something you would like to change in your approach?

Best practices for creating government websites

Friday, February 10th, 2012

Best practices for creating Government websitesFor America, creating a government website from the states, all the way down to the federal government can be an interesting but controversial task.  It’s important to follow a user-centered design process and make it easy for citizens to find the information they’re looking for.

Any confusion in the way the site is setup, its search functions or even the appearance can create large amounts of controversy between citizens and governments; as history has shown.

With that said, we’re going to look at the best practices for creating government websites by comparing local with federal, the usability of these sites and their designs.

Note: To eliminate the chance of political debates in the comments, any reference to government hierarchy will be according to the US Constitution instead of their socially accepted hierarchies.

Transparency

Let’s start by taking a look at two .gov websites, the White House and the Santa Monica City Council.

White House

White House (top) and Santa Monica City Council (bottom) websites

Santa Monica City Council

When considering the issue of transparency, which is priority #1 for most citizens when looking at a government website, the White House fails miserably.  Important information is extremely hard to find and may require hours of research to get a clear understanding of what’s going on inside the White House due to its lack of organization.

On the other hand, the Santa Monica City Council does a decent job of providing transparency.  When you first arrive to the site, it’s easy to find the last meeting that was held, all of the issues that were discussed, and any resolutions that occurred.  Minutes are accounted for, and it’s even easy to find out when the next meeting will be held so that you can watch it online.

It’s also important to provide an easily accessible and user-friendly search.  This is an area where the White House website performs well.  The search box is easy to find and the results are well organized, allowing the user to put them in chronological order.

The Santa Monica City Council also has an easy to find search box, but when the results are directed to Google it completely breaks the consistency of the website.  Results are difficult to sort through and the information isn’t always relevant to your search.

So when looking at these two government websites, we can learn the proper way and the wrong way to provide transparency.  By focusing on transparency on the homepage, the Santa Monica City Council website can be perceived as caring about its citizens as its primary concern. Adversely, citizens may get frustrated with the White House because their website makes it increasingly difficult to find important information.

In conclusion, while it’s important to maintain an aesthetic appeal, it’s even more important to make transparency easily accessible.  I see no reason why both can’t be done, with the aesthetic appeal of the White House website, and transparency put on the homepage like the Santa Monica City Council website.


Issues

This is a dramatically important piece of any government website.  Let’s start by taking a look at one that has done this well.

Sen. Rand Paul

Sen. Rand Paul website

The website of Sen. Rand Paul lays out the issues in a very cohesive manner.  By simply hovering over a menu item that clearly states “issues” you get a nice drop-down menu with all of the issues laid out for you.  This is a very simple, straightforward approach to delivering the information citizens need.  Not only that, but when you choose one of the issues, the information is laid out thoroughly and in a user-friendly way.  It’s a very good example of what you should do when creating a government website.

Now let’s take a look at a government website that hasn’t done this so well.

Gov. Rick Perry

Gov. Rick Perry website

Now even though the website of Gov. Rick Perry has a nice feature slider, digging deeper it’s actually pretty unorganized.  Finding the issues where the governor stands can be a fairly daunting task.  The website is more centered around mainstream news rather than focusing on information that’s important to citizens, such as the issues.

To summarize, when you are creating a government website, you never want to make the issues hard-to-find.  Make sure these are easily accessible to help citizens make informed decisions.


Mainstream Design

It’s extremely important that government websites have a professional and polished look.  In order for a government website to be taken seriously, as statistics have shown, it needs to look and feel mainstream.  With that said, let’s take a look at a government website that has plenty of mainstream appeal.

Congressman Ron Paul

Congressman Ron Paul website

A website such as Congressman Ron Paul’s has this mainstream look and feel, so therefore it can be taken seriously.  When a government official comes to you asking to create a website for them, it’s important that you understand what the mainstream looks and feels like.  Blue and red are common colors that government websites like to use, especially when they are federal.  A large header with the representative’s photo, their name, and what position they hold is a very common practice as well.  Study what mainstream government websites look and feel like, and you’re almost guaranteed to get repeat customers.

Now when looking at a government website that isn’t so mainstream, we go back to the Santa Monica City Council.

Santa Monica City Council

Santa Monica city Council website

This is a good example of where the notion “content is king” holds true as the websites bounce rate hovers around 58% in the past month, which isn’t terrible.  It’s hard to look past the fact that this website looks like it was created in 1995, however, you’ll see that there is plenty of important information and it’s easily accessible at that.  Putting the content aside though, it’s not a website many people will stay on for the design alone.

So how important is design in a government website?  Well, with the bounce rate at 58% and the average user staying on the site for 2 min., the Santa Monica City Council website shows that the importance of the design is moderate.  However, it is noticeably important when you compare their website with Congressman Ron Paul’s website, which has a bounce rate of around 52% and an average time on site of around 3 min., whose design follows more along the mainstream guidelines.  Those numbers may not seem like a very big difference, but if you know anything about usability testing then you know they are significant.

So in closing, the importance of a government website design is the reason why it is number three on the priority list.  However, if you want to have repeat customers and referrals, you may want to consider understanding what government mainstream websites look and feel like.  Officials want to be taken seriously through their websites design just like anyone else, so you should provide that for them.


Conclusion

Spend some time going through various government websites and ask yourself the following questions.

  • What do they look like?
  • What is the feel that they are trying to generate?
  • What do people complain about on the forums or do they have one?
  • What do they have in common?
  • What don’t they have in common?
  • Whose user data looks better and why?

These are just a few questions that you could ask yourself when studying government websites and how to create them.  However, if you can nail down these three core features that I have outlined for you; transparency, issues and mainstream design, you’ll be well on your way to a career in creating awesome government websites.


Justin Hubbard has been helping businesses since 2007 by creating timeless, memorable logos as part of a branding package and modern, user-friendly websites.

What other practices do you think are important when creating government websites?  Let us know in the comments!



10 InkThemes Premium WP Themes for Less Than the Price of One!


Source


Eenox: Design HTML5 Websites for Desktop and Mobile without Coding

Tuesday, February 7th, 2012

The death of Adobe Flash for mobile was not shocking news for the majority of its proponents, we all saw it coming. With that, HTML5 will definitely gain control of both mobile and desktop websites in a few years. Right now there are a lot of HTML5 template generators, making it easy for designers and developers to create an HTML5 website.

A French startup, Eenox, has developed a platform to help create dynamic HTML5 websites without writing a single line of code. If you are familiar with Wix, a Flash website builder with drag-and-drop features, it basically works the same.

Eenox is an application that you can use right in your browser. Designing an application/website is easy. It is literally a drag-and-drop, draw and place, kind of application.

Among the many features it has, one thing that took me by surprise is how easy it is to use even for a non-technical person. The interface is like storytelling, directing its users what to click, what it’s for, and how to properly do it. You rarely see something like this from applications, but games do it all the time.

Below I masterfully tested the application, adding an image and sample text, and a Twitter stream. I have set the resolution for tablet.

Every web page created automatically generates a QR code for them. And unlike testing the website to see if it works, which usually entails setting up your localhost (if you work on your local machine), every element is as you see it. No more setting up, just drag, drop and add your content.

Several months ago, the talk was about creating a responsive website which can automatically adjust itself based on the screen of the user. Eenox has successfully employed this with every website or application that is made using their platform. Here’s proof of that. Try resizing your browser, and you will see the image and text adapt to your browser’s size.

Changing the background color, or the color of any element for that matter, only requires moving some slides through a gradient.  You can even download the website you made, and then host it on your web server.

There is a free version that you can use to test the application. A paid version starts at $99 for every 2 months up to $280/mo.

Features of Free Version

  • Maximum of 3 web pages to download
  • Maximum of 3 images per page
  • Limited to 1 web page
  • Hosting

The free version is pretty limited, hopefully someday the features for the free version will increase. Truthfully, I haven’t had enough of a chance to test it because of the limitations, but I can say that I like how easy it is to use.

Benefits of using the paid version:

  • Unlimited downloads
  • 25 to 120 web pages
  • Unlimited image number per page
  • Hosting
  • Other Advanced Features
  • Statistics
  • SEO
  • Can publish app on the App Store or Android Market

See image below for the full pricing details:

Image was shamelessly taken from their website.

First Steps in Creating a Web Design Business

Thursday, February 2nd, 2012

You don’t like working for others and wish others worked for you? Are you also attracted to the idea of working with lots of people and multiple personalities? Then going for your own design company is something you might want to look into.

Starting a web design business might seem something anybody can do, but is definitely a difficult task. Note that this discussion is purely theoretical, if you wish to read a real opinion, then find someone who owns such a company and ask him how it was in the beginning.

The difficult part about starting your own company is that you need to be patient – the good stuff comes to those who wait. It is a long-term commitment and results might not come right away. Actually, it might be a bumpy ride up until the results come; or worse, they might not come at all and you will fail miserably.

Image by kristja.

In the beginning it sounds nice. You are your own boss, make lots of money and do pretty much nothing besides sign papers. This might be the life of huge company owners (although I would like the right to disagree), but it will not be yours. You might have to work even more than your own employees, you will not really make that much money and yes, you will be your own boss, but the clients you work with will still decide whether or not to hire you – they have the money, right?

Statistics say 80% of new businesses disappear within their first year. It takes a lot of determination and it is not the path to take for people without drive and stamina. If you’re still reading and think you have a fairly good chance of being one of the 20%, then continue reading, this is for you.

Owning a company


Great, are you ready to embark on this journey? Then you need to know things will change for you. Your career will not be a 9-5 job and won’t even be similar to the bits of freelancing you experienced before. Expect to get a feeling of accomplishment when things happen as you wish them to – expect to put your head down and be disappointed when things don’t turn out the way you want. Now you are on the other side of a business. You control what is happening and you give jobs, order people around and decide on wages. Landing a big project will mean much more for you now than if you were working in an agency, where you just get assignments and, when you deliver them, you get new ones. Your life has changed!

Now you can also employ people and let them do your work, while you spend time with your family or doing whatever else you wish to. However, most designers or developers who start their own businesses have no, or a limited, amount of money in the beginning and choose to do some of the work themselves, to save up until they have a bigger budget. You will most definitely have to do this in the beginning, unless you find a partner who is willing to contribute to the finances.

Advantages of owning your business are many. You are able to schedule your own time and have more freedom to experiment; even more freedom to hang out with your friends. You get total control, price up jobs as you think and have a different feeling knowing this time everything you do is for your own purpose. You are in charge of everything. But challenges arise at any minute too…

Get ready for problems


The first part of the article was about the nice stuff. Now it comes the ugly. Just because you are a great web designer doesn’t mean you are a great entrepreneur. There is a whole new path for you to learn and there is not much free time for you after you throw yourself out there. As in freelancing, you need to be able to motivate yourself and the ones you work with and be the boss, not just a friend or co-worker.

Unlike in a company, there is no one who takes care of other things for you. Unless you hire people for it, you will need to do the bookkeeping, taxes, client meetings, project presentations, project management and so on. This doesn’t allow too much time for hanging out with your friends.

Image by iprole.

Working on your time and whenever you want is an advantage – like in freelancing. But in both careers you need to be able to motivate yourself and start working right away instead of doing laundry or walking your dog. Also, you need to be good at following a schedule. If you slack off a day, the second day you will find yourself in a lot of trouble. Distractions are also something difficult to deal with, from social media to e-mails and, if you work from home, to kids and family members.

Maybe the most time-consuming task is email. This time you need to create them yourself; from scratch! There are no short answers to your project manager anymore. Now you are also in charge of communicating with the client and there is a reason why every company hires specialized people to do this – because it requires special skills. Now go and ask yourself, will you spend the necessary time to learn them or will you hire someone to handle the external communication? If you prefer to do it alone, get ready for some difficult challenges. Not every client is a joy to work with and you need to learn how to get the best out of them. Your job will be even more stressful if most of the clients are difficult to work with – and you probably already know most of them are difficult to work with.

Some good tips I can give you for when you decide to start your own design company is getting an accountant and focus on smaller tasks. Having an expert to keep control of all the stuff you have no idea about will pay off because it will allow you more time for the things you know how to do. It is not really possible to keep track of everything and doing both administrative and technical tasks will only give you sleepless nights.

If you are out there always looking for clients and you do it well, keep doing it and hire somebody at the office to actually turn the ideas into projects. Chasing clients and doing the work is quite impossible to do at the same time. It is possible for freelancers, as they have more free time than you do, but don’t forget – there is no real free time for you in the following months or even years. On the other hand, if you’re really good at completing the design briefs, then do that and hire someone else on commission to land projects. All big companies have several departments for a reason: keep sales, finance, design and technology apart from each other.

What’s in for you later?


Now we talk about the future. What are your opportunities in the future? Well, there are actually only two: success and failure, but we all know failure is never an option. Forcing yourself to be successful is the only way to actually reach your goals. If in the beginning you only run a business, in the future you have the opportunity to own it and hire people to run it – this is the dream, I would say. It is as far as it will go for you.

Image by cobrasoft.

You will pick up business skills along the road that might help you get back in with another agency. If at some point in time you wish to start working again, nobody will reject you – with the experience of leading a small project to running a company everybody will be delighted to have you around.

If you fail, however, the only thing you can do is go back to an agency or freelance. You can still have the company on your CV, but is it really worth? How likely are you to get a job if you state your small business failed? If you disagree with this, you are more than welcome to share your opinion with us; I would love to hear them.

Bottom line


Well, now you’ve heard it all. You know what is good about owning your own business and you know what challenges to expect. I would be glad to hear that some of you still want to pursue your dream or maybe start or continue on this path. I can’t wait to hear about your results.

Until next time, let’s hear your opinions on the topic…