Forrst: A Community for Designers and Developers Alike!

Nick
2
14th February

Forrst logo

Forrst is a community for developers and designers exclusively. In fact, the team at Forrst are adamant on only including passionate designers and developers, which may or may not give you a tough time finding an invitation if you’re interested in joining. This is what makes Forrst such a great community to be part of however. It’s a place for sharing work and inspiration, getting valuable and constructive feedback, and ultimately improving your skills among people with the same enthusiasm as yourself.

Sharing on Forrst is done through user posting, which may take the form of questions, code, snaps (images), or links. You can share pretty much anything you find interesting to other developers and designers, including work in progress that you need feedback on. You may also follow other members to keep updated with your favourite contributors via your homepage news feed or you find specific topics by searching posts by category or other criteria, such as most popular. Want to share your posts with friends that don’t have a Forrst account? No problem. Just blog, tweet, HackerNews, or share the short URL for any public posts you own and you’re done.

More recently, Forrst announced that it’s going to release a “pro account” offering some great benefits to users wanting to take their membership to the next level. Some of these features may include: a monthly allotment of acorns, access to a pro members only discussion room, a stats dashboard, custom domain support for Forrst.me, a pro profile badge and early access to new stuff.

All in all, this is a great community to be part of if you take your design and development seriously. It’s an incredible way to keep yourself up-to-date, learn, teach and see what other people are working on. Head on over to Forrst to learn more and apply for a membership. Also, follow @forrst or @forrstpodcast on Twitter!

Tags: , , ,
2 Comments
Categories: Code, Design, Social Media

The Real Cost of Offering Cheap Web Design Pricing!

Nick
0
19th December

Web Design Comic

Web Design Pricing – Where do I Start?

Unfortunately, pricing your services is not something that comes easily to most web designers, developers and studios. It’s not something that can be taught but rather acquired over time and through experience. At the end of the day, we are all in the business of earning a living for ourselves. The tricky part for every designer, developer and studio is creating a pricing model that is competitive enough to meet your clients budget but also ensures you get well paid for your expertise, hard work and quality designs and code. Even when you think you have the perfect formula, because each project is different you will no doubt have to modify your approach. The purpose of this article is to highlight some of the problems that sometimes exist with lowering your costs to meet clients expectations.

How can web design pricing affect my business?

We’ve all been tempted at some point to cut our prices, to win a job or perhaps attract more clients, but what are the real costs of offering cheap web design and development services. Here’s 3 things to keep in mind:

You may inadvertently try to make up for lost money on the project by either sacrificing quality or reducing the time you spend. This may lead you to produce and inferior product or service for your client, which can deliver undesirable results in itself. The obvious ones being not meeting your clients expectations, not having a worthy project to add to your portfolio, damaging your brand and spending time on project revisions.

If you do cheap work you attract cheap clients! As clients refer your services onto others they usually disclose a ball park or even exact breakdown of your costs. The low cost solution you offer to one client can sometimes be expected by others and will definitely be expected from your repeat clients.

In the same sense that you may attract cheap clients, you may also deter potential clients with larger budgets. These clients understand what’s involved with designing and developing a website and are willing to pay good money for a quality product or service. In some cases it comes down to perception. Although some will always be looking for rock bottom prices, other potential clients will measure you by what you charge, whether they realise it or not. They perceive a low-priced web designer as having low-skills and offering low-quality too. We all do it when buying consumer products or reciting the phrase “you get what you pay for!” to a friend, web design is no different to some. By pricing your services lower you may convince potential clients that you’re not worth more.

Of course, lowering the price of your services is not always a bad idea, it is a fundamental practice to staying competitive in many cases. The above reasons to not lower your prices are merely to keep in mind. The overall point I’m trying to convey is the importance of firmly positioning your brand into where you believe you are on the web design and development pricing spectrum. Someone once put it nicely to me as, “if you’re fast, why drive in the slow lane?”

Tags: , , ,
0 Comments
Categories: Business, Design, Marketing

Browser Testing made Simple with Adobe BrowserLab!

Nick
0
28th November

Browser Lab IconAs designers and developers, we all know the headaches that can be associated with achieving cross browser compatibility with our online projects. Well Adobe BrowserLab, as part of Adobes CS Live Services, has just made this task much easier and faster. No doubt you already have some methods and tools up your sleeve that work for you, but I think you will be pleasantly surprised with Adobe BrowserLab.

This great tool allows you to preview full-view screenshots of your work with multiple view options and customizable test settings. It brings some useful features like the onion skin view, which helps you spot discrepancies at a glance by overlaying two screenshots on top of each other with variable opacity. It supports all major browser vendors and versions and lets you create and configure up to ten browser sets to customize tests to your individual project needs. On top of this it includes some really handy diagnostics tools like zoom, rulers and screenshot delay, which help you refine your testing to get everything looking the way you want.

The thing that really sold me on this new tool though is its beautiful integration with Firefox using its Firebug add-on. This means incorporating all browser testing processes into the one simple and time-saving work-flow. You can test your pages with BrowserLab as it appears on the web or from a local source copy of the file. Debug and test all together!

All-in-all, this is a great addition to Adobe’s product line and definitely worth a look at. Oh yeah and I forgot to mention that it’s in a user preview stage and free to use for 12 months. If you sign up before April 30, 2011 you will also get one year’s worth of complimentary access to all of Adobe’s other CS Live Services too, so jump on board and try it out! Having had a look around, there seems to be no solid promises of how much Adobe may want to charge for this in the future, if at all. However, there have been rumors that it could go for a monthly subscription of $10 -- $20.

Tags: , , ,
0 Comments
Categories: Design, Technology, User Interface

Melbourne Design Awards

Nick
0
22nd November

Melbourne Design Awards
The inaugural Melbourne Design Awards are bringing together 15 education organisations, 6 industry groups and 55 categories. All focused on celebrating design, from the people who create the works to the people who sponsor the projects.

The awards also offer an opportunity for students to enter and have their work compete alongside industry professionals.

The Awards showcase leading design projects in a selection of handpicked design-orientated cities through a broad range of categories covering Object, Product Design both consumer and business; Space, Architectural and Interior Design projects; Fashion, Accessories, Mens and Womenswear; Experience, Events to Radio; Visual, Graphic Design, Illustration, Print, Photography; and of course our favorite Digital Design!

Entries close on the 28th November 2010!

For more information and details on how to enter, visit the official website at  www.melbournedesignawards.com.au

Tags: , ,
0 Comments
Categories: Creativity, Design

Cross Browser CSS3 Using CSS3 PIE!

Nick
0
26th September

CSS3 Pie LogoThose of us already dabbling in CSS3 and HTML5 are enjoying the benefits that these technologies bring to modern design. Unfortunately, for many this has come at the cost of countless ‘hair pulling’ hours spent hunched over our workstations attempting to achieve some cross browser stability in our designs, namely Internet Explorer.

That’s right; every designer’s favourite browser is serving up some serious CSS3 headaches for all of its current versions. There is light at the end of tunnel however. When it is fully released at some point this year, Internet Explorer 9 will support most of the latest CSS3 behaviours and decorations. Bu until then, we’re still stuck with doing our best for IE users.

CSS3 PIE comes to the rescue!

CSS3 Pie allows your CSS3 properties such as border-radius, box-shadow, border-image and so on to display correctly in Internet Explorer web browsers, versions 6-8. It is a relatively new library developed by Jason Johnston that cleverly creates DHTML behaviors that IE can understand, and then it controls how they’re presented. Best if all, it’s Open Source!

The PIE stands for Progressive Internet Explorer. I’ve had the opportunity to implement this tool into some of my current work and couldn’t believe the great results. It’s not perfect, however, PIE currently has full or partial support for the following CSS3 features only, with other features under active development:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

How to use it

Download PIE and upload the file named PIE.htc to your directory. Now, every instance that you use a CSS3 element, simply place behavior: url(path/to/PIE.htc); in your CSS file along with the other CSS3 browser prefixes for that element. That’s it, a piece of pie right! Your CSS3 element should now beautifully render across all versions of Internet Explorer. As an example, this should look something like this.

#CSS3Element {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

There are a couple of ways to integrate CSS3 PIE into a WordPress theme. If you have access to the root folder then simply place the PIE.htc ( and PIE.php if required) at this level instead of within your theme directory. If you don’t have access to the root then Gordan Brander has a great tutorial using another method for WordPress integration.

All in all, this is great solution.It’s by no means perfect and, in fact, taking this type of approach to utilise CSS3 is controversial among some designers and developers. It’s definately worth while reading the known issues with using PIE as you will no doubt encounter one or more of these. I suppose this tool sits alongside similar ones you might have heard of or be using, such as Modernizr and html5shiv. I encourage you to try it for yourself and come to your own conclusion. Please feel free to let me know how you go!

On a sidenote, if you do find this tool helpful please consider a donation for Jason too. You can also keep up-to-date by following CSS3 PIE on Twitter.

Tags: , , ,
0 Comments
Categories: Code, Design, User Interface

Free Tools for Optimising, Validating and Checking CSS!

Nick
0
25th August

G Clamp

A Quick Guide…

We all know how important is for websites to load as quickly as possible, just ask your users. By taking steps to reduce your CSS files, you’re ensuring faster loading times, increased usability, higher user satisfaction and better overall website performance. This is not an article on the importance of validating and optimising your CSS files however, this is assumed knowledge. Instead, this is a quick reference to some of the best free, web-based CSS optimizers/compressors, code formatters, and validation services out there. Check them out and pick the ones that work best for you.

Validation and Checking

A CSS validator will basically check your CSS to make sure it complies with the CSS standards set by the W3 Consortium by pointing out errors, warnings and other issues. The most common web-based validation service for CSS is, in fact, the W3C’s own CSS Validation Service but there are several others. Here are the best, in my opinion.

Compression and Optimisation

Once you have completed checking the validity of your CSS and cleaned up any unnecessary code, it’s good practice to optimise and compress your CSS to help achieve the smallest possible file size. Although you probably strive to achieve well optimised code ’straight off the bat’ you’ll most likely won’t reach perfection first time around. These great tools will help you eliminate any bloat from your files without any tedious manual work.

Tags: , ,
0 Comments
Categories: Code, Design, Technology

The mobile web made easier with the viewport meta tag!

Nick
0
8th August

In a nutshell

Paste the following meta tag into your header and marvel at the wonders of this simple piece of code.

Smartphones

What is the viewport meta tag?

It’s no secret that the days of the mobile web are well and truley upon us. Only accessing the Internet via your desktop or laptop is a thing of the past. According to the Australian Interactive Media Industry Association, the use of mobile phone services has continued to grow in the past year as more Australians buy internet-enabled smartphones and other mobile devices like the Apple iPad. On a larger scale, it’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide, by far outweighing the number of desktop and laptop users accessing the Internet.

With those kinds of numbers in mind, understanding optimal development and design practices for mobile devices has now become a staple for people designing and developing for the web. There are many ways to tackle the challenges of designing for mobiles but this is just one simple step you can implement to ensure some cross platform and browser stability in your designs.

Most mobile platforms assume different browser settings if none are specified, which can lower the quality and user experience of your designs on these platforms. Placing the viewport meta tag in the head section of your pages can override these default values and ensure your users receive a consistent and optimised experience instead of arbitrary results. The viewport meta tag is fast becoming popular for cross-device compatibility and we recommend exploring its possibilities. It is supported on many smartphones and tablets, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile. Mobile Safari first introduced the “viewport meta tag” to let web developers control the viewport’s size and scale and now many other mobile browsers support this tag, and although it is not part of any web standard it continues to grow.

So how’s it work?

The first piece of this code, content=”width=device-width, controls the size of the viewport. What we’re doing here is setting the viewport width equal to the actual width of the device so that we deliver a width in CSS pixels at a scale of 100%, instead of the default 980px. A majority of new smartphones will have a width of 320px but this can change depending on the device. The viewport width can be set to a specific number of pixels like width=400px but in most cases it’s better to use width=device-width to deliver more consistent results that are device independent.

The initial-scale property controls the zoom level when the page initially loads. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. Setting an initial or maximum scale means the width property actually translates into a minimum viewport width.

But wait, there’s more!

The viewport tag has more options to play with other than the width, so get experimenting:

PropertyDescription
widthWidth of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
heightHeight of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property.
initial-scale(0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
minimum-scale(0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari.
maximum-scale(0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari.
user-scalable(yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari.

Tags: , ,
0 Comments
Categories: Code, Design, Mobiles, User Interface

Does your website need a coat of paint?

Nick
0
12th April

Paint BucketOk so you or your business already has a website you say. You realised the enormous advantages the Internet offers long ago and have dedicated time, money and effort into having a website. The big question is though, is your website up to date? The Internet is an extremely fast moving environment with trends, technologies, capabilities, standards and user expectations continuously changing. Without ongoing management it doesn’t take very long and a website can fall out of date. In fact, some designers say that a website design has a shelf-life of no more than 24 months before elements can become outdated and this can actually be significantly shorter. An out of date website can do more harm than good. Potential customers and business partners can have a frustrating, poor or disappointing experience using an out of date website which can leave a negative perception of your overall business. Website redesign is an important aspect of website maintenance and is imperative to keeping your website up to date and maximising its performance.

At the end of the day, I believe that we can all agree that a website’s content is king. Having said that however, a websites design makes up many fundamental aspects, all of which boil down to user experience and it can therefore not be ignored. Some issues to consider when asking yourself if your website is up to date may include:

  • How does it compare to your competitors online efforts
  • Is your website compatible across all browsers and platforms, this includes mobile devices
  • Does your website utilise current social media, analytics and online marketing practices
  • Is your design aesthetically appealing, with a “fresh look” that meets current trends
  • Does your website meet current web standards and accessibility standards
  • Does your site use the latest web technologies
  • Can your site be easily self managed
  • Is your site designed to achieve maximum search engine optimisation (SEO)
  • Lastly, is your user-interface functional, easy to use and deliver a great user experience

Of course not every website and web application is the same and many factors, such as your business goals, play a part in how you manage your online efforts. In general however, if you found yourself unsure about one or more of the above issues then maybe a redesign is something you should consider for your website.

Tags: , , ,
0 Comments
Categories: Business, Design, User Interface
Page 2 of 212