Our Category: Tips

6 Tips to Stay Focused on Project Deadlines

By Christian Vasile On Mar 24, 2012 business | client | company | deadlines | focus | Freelance | Inspiration | Tips | Web Design 0 No Comments

Staying focused on your goals may be difficult at times as a freelancer. Not having a nine-to-five job, selecting your own clients, setting your own rates and deadlines and also doing PR work for yourself is quite different than being a full-time employee in a web design agency, where many of the things above are done by different individuals or departments. One of the most difficult things I encountered when I started as a freelancer was staying focused on the deadlines. And not only keeping my focus, but also meeting the deadline and delivering the project on time – at the end of the day, this is one of the most important things alongside the quality of your work.

 

You can do this by following some of these techniques. It is not physics, chemistry or math. They’re all easy to follow, therefore I think you should give them a try if you struggle with keeping yourself on schedule. As this has something to do with personal and time management, and not with the field we work in, it suits both designers and developers.

1. Be a perfectionist

Designers and developers usually need to hold perfectionism at bay, as we are creative individuals. All artists in the world have a tendency to try reaching for perfectionism. You need to know when your piece of work still needs more polishing, or when it is done. Wasting time with improving something that can’t be improved will not make help you manage your time.

Read More

A 5-Step Checklist for Mobile Website Design

By Stephanie On Aug 27, 2011 mobile web | Tips | tools | Web Design 0 No Comments

As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.

 

Choose the Right Markup

In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it’s important to choose one markup language and stick to it. Explore your customer’s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.

WML Read More

Do You Have What It Takes To Be A Web Designer?

By Salman Saeed On Aug 20, 2011 design project | design skills | Tips | Web Design 0 No Comments

Being a web designer, whether it’s freelancing or working in house, is a difficult job. There are a lot more skills needed than just knowing how to code a web site. If you’ve ever considered becoming a web designer, continue reading to see some of the skills needed to compete in the job and freelance web design market. Some of the skills might surprise you.

 

Writing Skills

web designer skills

image credit Read More

Web Development Tools, Elements and Techniques

By Ruben D'Oliveira On Aug 11, 2011 app | extensions | Tips | tools | Web Design | web development 0 No Comments

When I was starting out as a web developer, I had to face some struggles when finding solutions to some of my problems. I had to learn and try new things but there weren’t as many tutorials as there are today. The best alternative was to learn and study from the work of others, analyzing their process and work methods.

These days, it seems like a new tutorial appears every minute, but personally I believe that looking at actual implemented solutions is still a powerful way to learn, and you also have many tools and methods at your disposal which can help you see and figure out how your favourite websites were built. Everything you need to know and learn is right in front of you and at your disposal.

Web Development Tools and Extensions

The traditional view source code option was not enough for a good code inspection. It became very important for a web developer to have a toolbox that could provide him with a set of possibilities specifically made for code analysis and inspection within a web browser. Those tools are called Developer Tools and are usually installed by default or as an extension/plugin, working directly from the browser itself. With the developer tools you can see all the source code of a webpage as you did before with the traditional View Source Code option, but with way more options and functionality than before. You can inspect, edit, watch live results and much more.

Google Chrome (Developer Tools) / Safari (Developer Tools)

Google Chrome Developer Tools

You may be wondering why am I including Chrome Developer Tools and Safari Developer Tools together, well that’s because they belong together. The Developer Tools is part of the Webkit open source project which means Safari and Google Chrome share the same code base, they even share the same layout.

So let’s start with Chrome, my new favourite. Google Chrome’s Developer Tools  is very recent compared with others like Firebug (Firefox), but it’s growing fast and getting better and better with each new version.

The same obviously applies to Safari.

“The Google Chrome Developer Tools provide an integrated environment for debugging, optimizing, and understanding a web application, or website, running in Google Chrome. The developer tools are developed partly through the WebKit open source project, where the tools are called Web Inspector.”

“All of Safari’s powerful developer tools are easily accessible from the Develop menu. The Develop menu contains a wealth of tools that you can use for web page manipulation and debugging.”

For a better understanding, you can check the links below.

Google Chrome Developer Tools

Safari Developer Tools

Firefox (Firebug)

Firebug

With Firefox the smart solution for a web developer is definitely Firebug, one of the most popular Firefox extensions out there. Although the Webkit Developer Tools is growing at a really fast pace, Firebug is probably the most complete and mature tool you can have for web development and code analysis.

“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug‘s interface and work process is extremely similar to Chrome’s Developer Tools (or vice-versa).

Firebug

Opera (Opera DragonFly)

Opera Dragonfly

This is Opera’s gem for code analysis and inspection. It’s surprisingly powerful and personally I would put it in third place right behind Google Chrome’s Developer Tools. The downside is definitely the aesthetics but its features and cross-device compatibility places Dragonfly among the best.

“A full suite of tools are ready at your disposal. Debug JavaScript, view the DOM, monitor network traffic, preview resources, edit colors and a whole lot more. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered.”

For more information, check the link below.

Opera Dragonly

Internet Explorer (Developer Tools)

Internet Explorer Developer Toolbar

Yes, Internet Explorer has one too. Although the interface looks a bit old and not as good as other solutions since it lacks some functionality, it can be almost as good as the competition.

“The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.”

You can learn more about it at the link below.

Internet Explorer Developer Toolbar

How To

Check a website font

Check another's website font

With real text (not an image of text), the first and easiest way is by using Developer Tools / Firebug, so if you have it just select the text, inspect element and you should immediately see on the right side the font or font-family property which tells you the font that’s being used. Another way to do it is by using an extension/plugin for this purpose. There are probably similar plugins for other browsers like Chrome, but if you’re using Firefox, you have a great add-on called Context Font. With Context Font all you need to do is select the text (again, needs to be real text and not an image), right-click on it and you will immediately get the font and size used.

If the font you’re looking for is being used as an image, you have only one way to do it. One of the many places you can do this is myfonts.com. Upload your font and follow the steps.

Good luck!

Check the box model of an element

Check the box model

The box model represents the visual structure of the elements of a webpage using the corresponding properties like width, height, margin, padding and border, according to the visual formatting model. It’s possible to check the box model of any page and element using Developer Tools or Firebug. In order to do that, you just need to inspect the desired element and select Metrics on the right side of the Developer Tools panel. With Firebug, you need to select Layout (not Metrics).

Copy all text content of an element with Developer Tools

Copy all text content of an element

This one is a popular trick which is achieved by using the Developer Tools console. So let’s say you would like to copy this article’s text without the need of having to select all the content with your cursor (particularly useful on very long pages with too much text). To do that, inspect any element on this article page and look for the text container’s name from which you would like to copy the text (which in this case is called articlesContainer), now go to the console option and write the following command: copy ( articlesContainer.innerText ). Now paste the text anywhere you want and you are done! You’ve just copied the text inside our articlesContainer which corresponds to our main article text.

Bookmarklets

Min

Min

MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Website

Design

Design's Spry Media

Design is a suite of web-design and development assistive tools which can be utilized on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.

Website

Favelet Suite

Favelet Suite

When invoked, a div element will appear in the top left corner of your browser window with a list of all the favelets included. Simply click the link you want to invoke the favelet. An “info” icon is available to take you to the favelets information page on slayeroffice. Included in the suite: Color List, Document Tree Chart*, HTML Attribute Viewer, HTTP Header Viewer, Hidden Field, Modifier, JavaScript Object Tree*, MODIv2, Mouseover DOM, Inspector, Object Dimensions, Page Info, Remove Children, Resize Fonts, Ruler**, Show Source, Style Sheet Tweak*, Style Sheet Viewer*.

Website

W3C Markup Validators

W3C Markup Validators

Quick markup validations of any web document.

Website

Things Web Designers Do That People Love

By Rean John Uehara On Aug 10, 2011 accessibility | Tips | usability | Web Design 0 No Comments

Web designers and web developers often wonder what kind of things they should do so that their audience will love them. Today we will talk about those little things that create a big impact on people throughout the internet.

As an avid internet user myself, I usually remember a website (even if it has a very difficult domain name) that gave an impact to me. Like the way how every elements are laid out in harmony, the simplicity or complexity (in a good way), and many more.

What are we waiting for? I’ll start with a few things and I hope you’ll add more in the comments!

Good Navigation

A good web designer understands that visiting a new website may be confusing at first, because it’s a new layout and the new visitor will not automatically know where to find things. The same is true when you visit a new friend’s home, you don’t know initially where the john is or where to sit and relax.

A good web designer is a good host to his guests, that’s why they will need to guide the visitors’ eyes like they are giving a tutorial on how to use the website, only it is actually without telling them. It’s the mark of a good web designer to place elements where the visitors will expect them to be, or create an attention getter. For example, the Login and Register links are usually at the top right corner of the website, below it is the search function. An example of a good attention getter are Call-to-action buttons which tells the visitor/audience what the button is about.

I’ve recently discussed the difference between using a horizontal and vertical navigation for websites. That applies here, obviously, because there will be people who would prefer to have all navigation at the top, laid horizontally.

Nettuts

One particular website that I love is Net Tuts+. The color scheme is simple, there’s a lot of space to breathe and navigation is simple –  all of the important things you need to use to navigate the site are at the top.

Familiar Setting

While it is perfectly normal to experiment and show the world your creation, it is not really a good thing especially if you are aiming for mainstream. Take for example websites with vertical navigation. There hare websites that hit the correct spot, but such a design is not really accepted widely.

A good web designer knows when to provide their audience new things, such as art-directed designs for blog posts. They also understand that, while unique is good, it will be bad to deviate too much from the accepted standards.

Key elements such as the navigation should be placed where the visitor will expect it to be.

Flexible Design

This might be the hardest and most stressful part of designing, making sure that your design is not messed up on different browsers and machines. One problem about new designers is that they tend to not take notice of the fonts they use, if the other users have it or not, or if it runs on a Mac and others.

Since we all have our preference with internet browsers, it is the duty of web designers to make sure that their design appear correct on my Chrome, on your Firefox, and on old Nan’s IE6.

We need to address this question here: is it a requirement that websites should look the same for every browser?

Useful article for CSS/HTML effects for people worrying about cross-browser compatibility. And yes, you’ll see good ol’ IE.

Redesign for Comfort

A good web designer does not redesign a website to give its users great discomfort, they redesign a website to make it easier to use, even for new comers. This is where some big websites failed in the past, websites like Digg and the Gawker network suffered major losses in their users because of their redesign. Whether it’s because of the redesign not being good or the hive mind at work, it’s still a great stab on them.

I’m proud to include 1stwebdesigner here. I’m pretty sure that 99% of our loyal readers and frequent visitors liked the redesign. I was actually ecstatic to see this website change from the dark blue background and small thumbnails, and a little compact front page, to what you see now.

1wd

I think you all will agree that 1stwebdesigner today is much cleaner than before. I can’t tell if it’s a good thing for certain, but the removal of tabs just after the post made the front page easier to look at.

Going back, if there’s an oath that web designers should take when redesigning a website, it should mention that they need to make things comfortable for the users, not complex.

Any of you redesigned your website? Now is the perfect time to boast your redesign by posting image links on the comments, before and after. You can take a “before” snapshot using the Internet Archive.

Listens to Feedback

Feedbackreply

Once a website goes live what owners usually do is ask people what they think about the design and functionality. You can easily spot a great web designer and web developer when they actually listen to the people and apply necessary changes when the argument is valid. People love talking to web designers and developers especially when they get the feeling of “being on the same plane,” when they respond to the people. Again, 1stwebdesigner did this when the announcement (see page 1 of comments) was made about the new design. People came flocking in and gave Dainis their suggestions. One was the size (570px by 300px) of thumbnails for the Further Readings, now changed to 150×150.

Small Things

In my previous article (Ancient Web Design Practices that Beginners Should Avoid) I mentioned that the worst thing a designer could do is to not learn new things and just settle for what they already know. That they need to follow suit as technology advances for the comfort of their users.

Things like learning CSS and jQuery can mean a lot to the users, especially when it’s functionality and usability we’re talking about. Take for example major commenting systems. Three years ago you will need to refresh the webpage to see if a new comment has been posted, now you don’t have to. The same goes for Twitter and Facebook, the ease of access is there, it’s a little thing that all of us love.

Another important factor to consider on your designs is negative space, often called white space. It is often overlooked because of the thought that every nook and cranny of the website should be filled with something. Wrong. The effective use of negative space gives a sense of relaxation to the visitors, erasing the feeling of being packed in a tight space. Negative space communicate

What else?

I’m pretty sure there’s still a lot of things out there that can make visitors/audience/users fall in love with your design, so why not share them here if you know one? I’m certain that other web designers and developers will find your tips useful!

4 Money Saving Tips That You Should Follow

By Rochester Oliveira On Aug 1, 2011 finance | Freelance | freelancers | Money | saving | Tips | Web Design 0 No Comments

I know that you are really good in your field. Design, development or anything you do, I know that it is good, and you’re always trying to get better and earn a higher paycheck.

Well, you know, you don’t have to be a finance expert, but money management is really important since if you don’t do it, it doesn’t matter how much you make, you’ll never have enough for tomorrow.

This is why we will be talking about money management. We’ll see 4 important tips and some concepts that will help you in your life about things that are even against common sense (like “Profit is not that important”).

So, let’s rock!

Prevent bankruptcy, always keep track of your cash flow (and forget about profit)

Let’s start with 2 basic definitions:

  • Cash flow – all money movement that happens, be it income or expense. So, every time the amount you have in your bank account changes it is cash flow happening.
  • Profit - sales less expenses. When you close sales you have profit, and when you order things you have financial loss (just loss, from now on).

You may be asking yourself now, why is this so important? This is because you must pay attention to your cash flow all the time, but you don’t have to make a profit all the time. I mean, if you always care about positive cash flow and cash flow management you’ll prevent bankruptcy and maybe you’ll never have loss, but if you just look at your profit you have a much higher risk of losing out on seeing the big picture and going broke.

Let’s say you close a deal for $10,000 to be paid 50% in advance and 50% upon completion. Your production costs are $7,000 but you have to pay it in advance. In this case you’ll have a negative cash flow of $2,000 at the beginning of the project ($7,000 paid but only $5,000 received) and your positive cash flow will occur when you receive the last $5,000 – by this time you’ll have both cash flow and profit of $3,000 (total of $10,000 – $7,000).

Hot money – Sounds good but tastes bad

Can you see how dangerous this scenario is? When you have negative cash flow you have to get what we call “hot money”. This kind of money is very expensive, so we pay high interest rates to get it for a few days only (credit cards, for example). And this money is used to fix the mess caused by negative cash flow (like paying suppliers). So in this example you’ll have to get $2,000 from nowhere and pay for it. You have profit but negative cash flow (in beginning).

Also you can experience deals with welcher clients. This is why it’s so important to collect a deposit for design work. This is especially dangerous for freelancers, because you usually have a low amount of profit from each sale, so you’ll have to work much more in order to compensate non-paid debts or high interest rates to be paid.

Try to look at your cash flow on a daily basis, and make your projections realistic with some days of payment delay and not 100% of projects that is almost-closed closing.

Don’t get in trouble in shortages, reduce your fixed costs

We have several ways to understand costs. A really useful one is to separate them into fixed costs and variable costs.

  • Variable Costs - are directly proportional to your production activity. So, the more you produce, the bigger will be your total variable costs. Examples: raw material, electric power (since you need to power up your PC to work), coffee (since you need it to keep you awake :D ).
  • Fixed Costs – aren’t clearly related to your production activity. So whether you have zero or one million projects they will still be the same (this is enough for now, but there is more thing to know about it). Examples: Employees payment, Rent, Child Support (heh), recently bought PC installment, software subscription


This difference between fixed and variable is important to manage your costs. Especially for freelancers and small companies, because fixed costs can kill you in shortages.

If you look at cost structure of small companies and freelancers you’ll notice that their biggest expenses are fixed. Employees, servers, advertising. So when your sales go down, you stop your production and your variable costs can be dramatically reduced. But your fixed costs will remain the same. Then what would you do? You’ll have to start cutting costs, but maybe it’s too late.

What should you do then? Well, I recommend you cut fixed costs to a low-level, where even your worst sales prediction could pay them (read more about it below), and turn every cost that you can into a variable cost. Pick up pay-as-you-go plans, put variable items in yours employees payment (like production bonuses, sales commission
). You could also make easier to cut a fixed cost, like reduced compulsory threshold contracts.

Feeling like the money ends before the month? You need to know your break even point

Ok, now you know about fixed and variable costs. Another nice topic related to it is your break even point. This point is where your sales are exactly the same as your expenses, so you have zero profit, but also zero loss. Wikipedia defines it as:

“[...]the point where the total revenue is just sufficient to cover the total cost.”

Maybe its graphical representation explains better the concept

So, as you can see in this case we break even when we sell 7 items, or $1,250.

Thus, when you look at your break even point you know what you have to sell in $$ or quantity in order to not have a loss. You can get this point with an easy formula:

B.E. = Fixed costs / (Price – Variable Costs)

Let’s say your fixed costs are:

  • Software subscription – $900 / year
  • Rent – $1,000 / month
  • Server – $50 / month

And your variable costs is:

  • Service costs – 30%
  • Taxes – 20% (Brazil)
  • Savings – 10% (read more below :D )

So you know that you have $1,125 in total of fixed costs per month. If you charge U$75/hr you have to sell at least 37.5 hours just to pay all your bills (U$1,125 of positive cash flow to cover the upcoming negative cash flow). You should look at it now as a goal, so you’ll to do anything to achieve it.

To make easier, let’s break up your goal into 4 working weeks in a month. Now you have $282/week to sell.

If by the end of week one you get just $200 that means next week has to be good and you’ll have to get at least $364. And, if by the end of the month you still have this debt to cover, then maybe it’s time to make special prices or work more hours so you don’t have a negative cash flow.

Start your savings account NOW


Well, we all know that it is important to have a savings account, but who actually has one?

This is important, for example to save you when you have negative cash flow or when you see a good investment opportunity.

Study shows that 60% of small business owners fear not having enough money to retire. Don’t know about you, but I really don’t want to work from my bed when I’m 70 :)

So be it $10, $100, $1,000, it doesn’t matter the figure itself, what matters is the mindset to do this on a monthly basis for a long time. There is not much to say about it, but one thing that really works for me is see it as an expense. I keep it on the same level as my rent or my lunch, I have to pay it, or I’ll get in trouble.

It’s like Itau’s ad says “You or your money will have to work to the rest of your life”. Which one will you choose?

What do you think about it?

All this tips are pretty easy to implement. And these concepts are really useful in a wide range of situations. So, did you know about these things before reading?

I want to hear from you now, do you find it useful? Want to hear more about finance (for freelancers and small entrepreneurs, of course)?

Next Page »
EnglishŰ§Ù„ŰčŰ±ŰšÙŠŰ©äž­æ–‡(çź€äœ“)DanskDeutschItalianoæ—„æœŹèȘžEspañolTĂŒrkçe
 Edit Translation

0s Analist Apple Bulut BiliƟim business Business Analyst Coding collaboration Crescent Design Excel features Freebies Freelance Genel Inspiration iPhone JQUERY Kalite KĂŒltĂŒrĂŒ Lists Microsoft SQL Server msclient mshaberler mskilavuz mskobi msserver News online PowerPivot Proje KĂŒltĂŒrĂŒ Raporlama Hizmetleri Report Builder SharePoint Social Media SQL Server Tips tools Web Design workflow ÖrgĂŒt KĂŒltĂŒrĂŒ Ä°novasyon İƟ Analisti İƟletme Yönetimi İƟ Raporlaması İƟ Zekası

SAS Business Analytics Series 2012

21 Mart 2012 tarihinde Swissotel The Bosphorus’da, SAS Business Analytics Series 2012 gerçekleƟti. Geçen sene --[Devam]

ERP ile AƟkınız Bitti mi?

ERP Projelerine baƟlanırken bĂŒyĂŒk umutlar vardır. Artık her bilgi tek bir yerde olacak, tĂŒm --[Devam]

BA as Creative Leader: What’s All the Fuss About?

Leadership is like genius, it is one of those concepts that is recognizable when you --[Devam]

A’dan Z’ye İnfografik Nasıl Hazırlanır? [Dosya]

GĂŒnde kaç tane infografik ile karĆŸÄ±laƟtığınızı hiç dĂŒĆŸĂŒndĂŒnĂŒz mĂŒ?Yeni fenomen Pinterest baƟta olmak ĂŒzere sosyal --[Devam]

6 Tips to Stay Focused on Project Deadlines

Staying focused on your goals may be difficult at times as a freelancer. Not having --[Devam]

Ä°yi bir sistem analistinde olmaması gereken 10 iƟaret

  ABD’deki iƟ bulma kurumunun öngörĂŒsĂŒne göre 2014 yılına kadar sistem analistlerine olan iƟgĂŒcĂŒ ihtiyacı, ortalama --[Devam]

Should designers do personal projects?

As creatives, most times we feel like we can do it all, or we are --[Devam]

DĂŒz DĂŒnyada Rekabet - Ä°nceleme

"DĂŒz DĂŒnyada Rekabet" yeni tĂŒr bir örgĂŒtsel mimariye olağanĂŒstĂŒ bir bakÄ±ĆŸ sunuyor.Bu, kendi kontrolĂŒmĂŒz altında --[Devam]

N-Dimensional Thinking: How To Get More Out Of Your Daily To-Dos

Is it possible to tackle your to-do list in 3-D? We explain how to expand --[Devam]

30+ Most Useful Web Development Frameworks

Web development framework is especially created to help you boost the performance and efficiency of --[Devam]

••••••••••

Son Yazılar

  • No Tweets Available
Aturhanweb - Find me on Bloggers.com