Ace Your Interview

 Ace Your Interview

This article is part of the "Ace Your Interview" series - where we share tips and tricks you can use offline and online to snag that dream job. Click here to see more articles in the same series
I have always been against the principle of helping people to prepare for an interview. All the interview tips are great to help them prepare for joining the workforce but in the process, their unique personalities (and habits) lay buried under the cover stories about commitment, passion and skillsets. It’s all so scripted.


This is probably the reason why one-hour interviews fail to unearth the real person within; and only after the employee has joined your company that you realize they have lied in their resume; they are just all talk, no walk; they cannot work under minimal supervision or with any other team members; or they have the tendency to make the company adapt to their likes and preferences (true story).
Recommended Reading: Weird Questions Asked During A Job Interview
The Existing Problem
When advice-mongering sites give candidates sample answers to give, and the candidates take those sample answers to their interviews, everyone becomes the same faceless drone. That’s when recruiters may have to resort to unorthodox interview methods to separate the sheep from those who know what they are doing.
And let’s face it, half an hour is real easy to fake through, and does little to nothing to help you decide. Plus, most resumes are spell-checked (any interview guide will suggest doing that) and hyped up, so if you base you base the recruitment on just their CV, the candidate in real-life may come up short of your expectations.
Hiring talent
Unless you are searching for someone who will only be doing one thing over and over again, chances are you need them to be great problem-solvers. But don’t just ask them how they would solve a problem, introduce these problems into the interview (not during the probation period, or after they are confirmed).
If you want your employees to have certain ‘talent’ criteria, there should be an effort to make them display their talent in the interview room itself. Heineken did exactly this to sort through candidates for their internship program. It’s a classic case of "don’t tell me, show me" and it’s just brilliant.
But the best video to really illustrate this is the test scene in Men In Black. I know it’s just a movie but the principle’s the same. Put them in an uncomfortable position (see: make things ridiculously uncomfortable) and see how they react.
Put Ants In Their Pants
Textbook methods are only going to get you average, mediocre candidates to join your company. Short of putting ants in their pants, there are a lot of things you can do to spruce up the atmosphere in the interview room, for instance:
Asking off-track questions
Simple questions like "How did you get here this morning? Was the traffic bad?" can ease them into putting their guard down, and revealing more about their true self.
Plus, you get an inside look into their lifestyle: does he take public transport, does he live far from here, does he drive, does he still live with his mother, and if he has an opinion on how to solve problems, or if he is the wait-and-see kind.
Distract them
Put up special items in the room, items that are designed to distract. One of the things that will work pretty well is a mirror, or a reflective surface. You’d be surprised at how many candidates think looking good during the interview trumps paying attention to the questions.
The best place for it, right above your head, behind you. Even when they steal peeks, you’d notice.
Test Their Drive
Some jobs require you to be non-tolerant of certain situations. A chef should be picky about the quality of his raw materials, a restaurant manager about cleanliness, or a sales rep about sale quotas. Apply this to the interview process, and you can give an editor an IQ test that is riddled with mistakes, a biodata form in Comic Sans to a designer to fill in, or put a hideous vase near the corner of the interview room when interviewing an interior designer.
When their natural instincts get the best of them and they voice out about these ‘atrocities’, you know you got the right person for the job.
Catch Them Off Guard
Rather than resort to oddball questions, there are many other ways to catch a candidate off guard and see how well they approach problems. For instance:
in your expected salary section in the company form, put only 3 boxes and see the answers that candidates give
turn up late for the interview and say, "Oh, you’re early" and watch how they tackle with the situation
bring in the resume for another (non-existing) candidate, explain the mistake and watch how the candidate try to sell him/herself and trump the ‘other’ candidate.
Conclusion
Sometimes, though, it boils down to how you click with the candidate. You might even consider trying to simulate an actual working environment or to explain how things are going to work if the candidate gets the job. Understanding where candidates are coming from — after peeling all the surface layers — may help find you a candidate that will be a great addition to your company.
Recruiting is a costly endeavor but it is not worth getting a bad apple to join in the growing orchard. Rather than choosing to extend the lengths of probation periods, you can always just throw them into the heat of the battle and see how they escape the zone or better yet, win the battle.
What interview methods have you tried out which helped you catch a great addition to your company?
Related posts:
How to Secure the Right Interview Candidate for the Job
Weird Questions Asked During A Job Interview
First Job Interview: 10 Things You Should Know
Interview Tips: 5 Things Recruiters Think You Should Know
   









Read More »


jQuery How-to: Creating and Inserting New Elements (Part 1)


jQuery is one of the most popular JavaScript library on the planet, which offers a lot capabilities. Using jQuery, we can easily manipulate – replace, insert, remove – elements within an HTML document and even create animation.
In this post, we are going to take a look at how to create or insert new elements within DOM with the jQuery Append method.
Recommended Reading: JQuery: Creating And Inserting New Element – Part II
Insert New Element
Appending is a method of creating and inserting new element within a specified element, it technically inserts the new element right before the closing tag of that specified element – thus becoming its child element.
Before we proceed, we will first show you how to do it purely with JavaScript, so you can see how much simpler jQuery can make the method.
In JavaScript, before we are able to add an element to the document, we need to define (create) the element. We can use .createElement() function to create a new element. In the following example, we create a new <div> element and store it in a variable named div.
 var div = document.createElement('div');
By the time we define a new element with this function, it only creates the element, but it doesn’t insert the new element to the document. We need to call one function, that is .appendChild() to insert that element. In the following example, we will insert this new <div>, simply, in the body document.
 var div = document.createElement('div'); document.body.appendChild(div);
If we inspect the document in Developer Tool, you should see that our div element has been inserted there, before the body closing tag.
Now, let’s see how we do the same thing with jQuery. jQuery makes manipulating document elements simpler. jQuery provides a function called .append().
In the following example, we append a <div> to body document.
 $('body').append('<div>');
Like what we have demonstrated with JavaScript, the code line above returns the same result. It creates a new element and inserts it before the body closing tag. But we did it in fewer lines of code.
A note to remember, JavaScript does not save or alter document physically. Thus, when we view the actual document source, the elements that are generated by JavaScript will not be found.
Insert New Element with Text
Let’s go a bit further with this method. This time, we will insert a new element with text inside it. Like before, we will see how to do it purely with JavaScript.
To do so, we need to define the new element and the text. Since we will add text, we can create a paragraph element in this example.
 var p = document.createElement('p'); // create new paragraph element
Next, we need to define the text. The text in JavaScript is created using .createTextNode() function. In this example, we store the text value in a variable named txt.
 var p = document.createElement('p'), txt = document.createTextNode('This is the text in new element.');
At this point, we have two variables, which store the new element and the text respectively. However, they are still separated and can stand alone. To insert the text to the new element we have created, we can run the same .appendChild() function, like so.
 p.appendChild(txt);
Then again, we run .appendChild() to insert the element to the body document.
 document.body.appendChild(p);
If we see it in the browser or through the Developer Tool, we get:
In jQuery, the process is simplified. Instead of separately defining two variables for the text and the new element, we can write them together with .append() function, like so.
 $('body').append('<p>This is the text in new element.<p>');
The above code essentially does the same thing, it will insert the the text with <p> element to the body (before the body closing tag).
Final Thought
You can see that using jQuery with .append() function, we are able to dynamically add new elements in a slimmer way than using pure JavaScript. But of course, there are times when using the JavaScript is better than loading jQuery Library – which is why we will also show you how to do it.
This article is only the beginning. In the next part, we will see how to insert element in more advanced way. So, stay tuned!
If you have some questions upon our discussion in this post, feel free to add it in the comment box below.
Related posts:
Creating a Volume Controller with jQuery UI Slider
Web Design: Drag and Drop with jQuery UI Sortable
Sticky Position (Bar) with CSS or jQuery
How to: Customizing and Theming jQuery UI Datepicker
   









Read More »


Scripted: Node.js Powered Code Editor by VMWare


Scripted is a lightweight and nimble general purpose code editor that aims to make a developer’s life easier. The editor has been implemented in pure JavaScript, CSS and HTML. VMWare’s focus has been to provide a better, more organized and easily manageable coding experience when using JavaScript.
The editor itself is based in the browser. It will run locally on your machine (with a Node.js instance performing editor operations). As a result, it becomes mandatory that you have the latest version of Node.js installed on your device in order to run Scripted.
Recommended Reading: Top 10 Free Source Code Editors – Reviewed
Scripted’s Major Features
Can’t wait to see what Scripted has to offer? Well, here is a list of offerings:
Extremely fast and light-weight.
Comes with syntax highlighting (for HTML, CSS and JavaScript).
Errors and warnings for basic cases such as module resolutions.
Content assist (again, for HTML, CSS and JavaScript).
Smart hovers (hover over a JS identifier and see the inferred type signature).
Smart navigation (Press 8 over an identifier, and you will be navigated to its declaration).
Properly integrated JSbeautify.
Apart from the main editor, you can also open a second editor in the side panel.
Key bindings can invoke external commands.
There are a lot more features but you’d probably have more fun finding them out on your own.
Reasons Behind Scripted
So, why on earth did VMWare bother creating this editor in the first place? VMWare cites a couple of reasons. According to them, many users prefer lightweight code editors over full-fledged Integrated Development Environments (IDEs). IDEs come with their own added level of awesomeness, in the form of content assist and error indication, which many lightweight editors fail to match up with.
So what is a developer to do? Opt for the lightweight alternative and compromise on features, or go for the feature-rich alternative, and compromise on speed instead? Neither! Create a new lightweight editor, rich in a decent number of features!
Furthermore, in simple terms, cloud-based solutions that run entirely in the browser itself are the way to go, and Scripted doesn’t lag behind on this front either. And the fact that it relies on your own system means that you do not even need a working Internet connection all the time.
Under The Hood
According to VMWare, the editor technology comes from Eclipse Orion. I personally feel that this is a smart pick for an editor. Orion provides a wonderful coding experience, and VMWare couldn’t possibly have done better with any other editor.
Beyond that, as mentioned above, the server level things are dealt with by Node.js.
Links:
Scripted on Github
Scripted Wiki
Conclusion
So, where does Scripted go from here? VMWare is working on a plugin system as well as better integration with Google Chrome Dev Tools. Furthermore, there are plans for adding enhanced functionality to the side panel, among other things.
What do you think of this new code editor from the stable of VMWare? Will you be giving it a shot? Feel free to share your thoughts with us in the comments below!
Related posts:
Brackets: Free Open Source Code Editor Built with HTML/CSS
How to Display/Update “Facebook Likes” Using Node.js
Beginner’s Guide to Node.js (Server-side JavaScript)
Useful Code Comparing Tools for Web Developers
   









Read More »


Photographers: Top 10 Sites to Showcase Your Work


If you are a photographer, creating a portfolio is certainly one of the most important things you need to do. There are a number of benefits that a portfolio can bring you: it helps you showcase your work online, pulls in new clients and builds a strong and wide online exposure for your work.
The sad thing is that, not all photographers possess technical skills for building a portfolio. Some may feel a little intimidated due to lack of coding skills and the others may think that building a portfolio needs a lot of time as to them, it’s an intricate process to go through.
The good news is that there are a number of platforms for you to build an online portfolio for your work without wasting your precious time and with no coding skills required.
Here is a list of the top 10 portfolio-building websites for photography lovers, in random order.
Recommended Reading: 10 Free Online Tools To Create Professional Resumes
1. Photoshelter
Photoshelter is one of the most popular platforms for building photography websites and online portfolios. The site allows you to control the layouts, fonts and images of your portfolio with ease and mobility.
The bottom line is that it doesn’t require any coding. Photoshelter doesn’t only provide you with tools to showcase your work; it also attracts buyers to purchase your photos. Its integration with social media sites and SEO turns your photo business strong and solid.
2. Orosso
Orosso is a portfolio building tool that allows its members to build professional and smart portfolios and maintain them easily. It doesn’t take much time to build a photography portfolio website. With Orosso, the process turns out easier and simplistic. In a matter of minutes you can have your portfolio created in a flash and highly customizable towards your looks and requirement.
Artists, designers and architects may consider Orosso as a viable option to create portfolios for a strong online presence. You can try it for 14 days and decide whether it’s worth a pay or not.
3. Foliolink
Foliolink is an online portfolio-building tool specifically for photographers and artists who want to build professional portfolios and sell their work online effortlessly. It doesn’t require any knowledge of HTML or CSS coding to get the portfolio created.
Foliolink features iPad and iPhone shadow sites, customization and e-commerce tools, and Search Engine Optimization for your online portfolio. You can create a free 7-days account before deciding what plan suits you best.
4. Zenfolio
Zenfolio is an online tool that helps you make amazing online portfolios fast and painlessly. Whether you are photographer looking for building a stunning portfolio or a photographer serious about selling your work online, Zenfolio is the right choice for you.
The user-friendly ecommerce interface, point-and-click interface and easy customizers are the features that can make you complete your photography website in a flash. The subscription fee starts at $30 per year. However, they provide a free premium account for trial (there is nothing to lose).
5. FolioHD
FolioHD is a self-hosted portfolio platform for photographers, artists, architects, models and designers. They offer essential features to build a website in a simple way and according to the plan you register for. In folioHD there are 3 plans: basic, power and pro. The basic only supports up to 36 uploads of media files, but the plan is free.
On the other hand, the power and pro plans provide more exciting features such as, Google Analytics, privacy options and the Fotomoto access. The power and pro plans only differ in the amount of uploads, which is 1000 and 2000, respectively.
6. Folio Websites
Folio Websites is a portfolio building website for creating mobile and professional photography websites. What makes Folio Websites stand out from the overcrowded marketplace, is their clean, simple and clutter-free design.
They work on WordPress, which is highly customizable, offers SEO benefits for better search ranking and mobile compatibility. You can register a premium account starting at $14.60 per month.
7. 1X
1X is more of a social network and online community for photographers than a portfolio building tool. However, photographers can use this platform to get strong exposure with thousands of users in this community.
The interesting thing about 1X is that, not every photo you upload is going to be published. Every photo you submit is selected for publication by a curator. 1X has a forum community where professional designers discuss the projects they are working on and give suggestions for a better craft. You can give it a go for free.
8. 500px
500px is a personalized portfolio building tool and market platform for photographers to sell their work. This platform helps photographers to create online portfolios easily.
In 500px, you maintain and control your site whenever you need and without having to touch any code. They provide their members with great features, such as, advanced tracking system of visitors, unlimited photos upload, custom domain name and a photo store that allows selling of photos online.
9. SmugMug
SmugMug is a platform for digital photo sharing where photographers can expose the masterpiece of their work to a community of thousands of members. SmugMug provides the users with beautiful and elegant themes to build professional portfolios that spark interests.
The portfolio building interface is simple to work on, with easy customizers to select photos, fonts, colors and themes. For wider exposure, share your work on Facebook, Twitter and other social media networks.
10. Pixpa
Pixpa is a portfolio building site that allows photographers to create amazing and elegant portfolios to show off their works. It provides you with hundreds of pre-designed templates to choose and you can select the one that best fits your needs in just a single click. Customizable fonts, backgrounds, colors, menus are among a plethora of features to build your site with ease.
If you are craving for your own domain name to build a strong online presence, Pixpa also supports that. In Pixpa you can also sell your photos online using an e-commerce integrated platform called Fotomoto. Give it a try for 15 days (no credit card required).
Related posts:
20+ Cheatsheets & Infographics For Photographers
Wedding Photography: 20 Top Photographers & Their Masterpieces
Resurrect Your Deceased Designs And Make Them Work For You
Freelancers: How to Work Better with Your Clients
   









Read More »


Freelancers: Learning When To Say No To Clients


This article is part of our "Guide to Freelancing series" - consisting of guides and tips to help you becoming a better self-employed. Click here to read more from this series.
We’ve all heard it before. The inevitable request from a client to revise a design to make it more… something. The client isn’t sure what, exactly, but they know that whatever they’re looking at on the screen isn’t quite "there" yet. Sometimes they’ll even utterly confuse you with a vague or nonsensical request, like "make the black blacker," or "it’s just not poppy enough."


These types of inane directives have become so legendary in freelancing culture that, whenever they get mentioned out of context, any freelancer listening won’t be able to help giving a sympathetic eye roll or shake of the head. There are even whole blogs and other creative efforts centered around the weird things our clients sometimes ask of us; I’m sure you’ve heard of at least one.
Recommended Reading: 5 Ways To Tame Difficult And Problematic Clients
Had Enough?
As freelancers, we all want to go above and beyond to please our clients and ensure that we maintain a good relationship with them. We want to remain in good standing to get referrals and repeat business and bolster our reputations. But sometimes, some clients really can try the patience of even the most saintly of designers.
Read Also: 11 Signs Of Problematic Clients You’ll Meet In Freelancing
Fortunately, there’s a simple solution that many designers often overlook that can alleviate or even completely remove these little professional hurdles. It’s called saying no.
We’re going to go over some of the different situations in which a designer can use this powerful tool in a respectful and courteous way, while still being firm about holding onto their sanity.
The Wonders Of No
It’s really quite remarkable, the power of this "no" word. I think every designer should add it to their vocabulary if it’s not already there. Practice simply saying no to requests you find strange, incomprehensible, or just plain silly, and see what happens. You can try it out first on a client who you know has a ‘thick skin’.
Later, you can move on to establishing what you will and won’t tolerate from the very first meeting with any new client. In my experience, a lot of clients are actually just trying to get a feel for your communication style when they make an offhand, impossible request. They may be testing you to see how much you’ll let them get away with.
Don’t Let Your Guard Down
It sounds horrible, but the harsh truth is that many people will be as naughty as you let them be. They will take the opportunity to con you or treat you badly, to justify underpaying you or even not paying you at all, if they believe they can.
Not everyone is like this, of course, but you can usually tell pretty quickly whether someone is looking to scam you out of valuable services. Putting your foot down by saying no to the first signs of disrespectfulness or lunacy will set a precedent for the entire length of your interaction with your client. Initial impressions are hard to change, so it’s important to make them count.
Don’t Just Blurt It Out
First things first: when I say that designers need to start saying no, I don’t literally mean that you should respond to your clients’ requests with a blunt negative. Saying no to a paying client requires a bit of finesse to keep the working relationship in a healthy place. I recommend writing out a few responses that you can use as reference in a future situation.
Something like "I’m sorry, but I’m going to need a more specific answer before I can give you what you want" usually works well, and you don’t actually have to blurt out "noooo!" like a two-year-old, (or Darth Vader). Rehearsing a reasoned, courteous response to an insane request helps you keep your cool, and it also keeps you on track to achieving your main goal, which is solving your client’s problem.
Not A Therapist
Clients can be a kooky bunch – no doubt about it – but it’s not really your job to tend to them like a personal therapist. You can go ahead and let them be as crazy as they want to be, as long as they’re clear with you about what they need and how you can provide it to them. And as long as they pay you in a reasonable amount of time, of course.
How Much Rope Should You Give?
It’s up to you to decide how far to go with accommodating your client regardless of whatever unclear request he or she will think up. Sometimes it makes more sense to simply refuse to go any further on the project until you receive a request you can work with, since you’d only be guessing at what the client wants anyway.
Also, because there’s been such a lack of clarity, they may become even more upset if you do not deliver what they want, whatever that is. Not only will you have wasted your time, but, depending on your prior negotiation, you might even have a contract breach on your hands.
Strive To Communicate
Alternatively, you could take more of an "onion peeling" approach, testing and rephrasing different questions until you and the client both arrive at a communication pattern that gets each of you the information you require to move forward.
This method is certainly more time-consuming, and it’s not unheard of for designers to add an additional amount to their revision fee (interrogation tax?) if it starts to take too long to achieve clarity.
It’s Not Always the Client’s Fault
That’s right, I said it. Sometimes a client gives you a vague answer… because you asked them a vague question. It really helps to learn the proper ways to phrase a question so that you get the answer you’re looking for. Specifically, the thing I’ve found most helpful in achieving clarity is asking the client to give me a clear example of what they need.
Confined Selections
This can take a few tries, for example, if a client wants a "prettier" typeface for their website, but can’t exactly articulate what they mean by "pretty," you can ask them to browse a selection of fonts until they find something that is "pretty" enough for their taste.
Read Also: Quick Guide To Typography: Learn And Be Inspired
This is an example of what I call controlling fluctuations. I don’t know about you, but I like to have as few surprises or brick walls (as possible) when dealing with clients. Learning how to ask the right questions is crucial to getting through those unnecessary barriers so you can deal with the important stuff.
In Conclusion
Designers speak a cryptic language all their own, and sometimes it can be difficult to bridge the gap between what you mean to say to a client and how the client will interpret it. As the professional providing the creative service, it’s your job to make sure there is clarity all around. Your client is paying you to solve their problem, and you can’t do that unless you first establish exactly what the problem is.
Related posts:
Freelancers: 5 Ways To Lose Your Clients
Freelancers: How to Work Better with Your Clients
Freelancers: 10 Things Clients Don’t Like Hearing
10 Things Freelancers Don’t Like Hearing From Clients
   









Read More »


UI Design: Applying CSS Based on Screen Orientation


This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.
With the introduction of CSS3 Media Queries, we are able to shift and apply CSS between different viewport or device screen sizes.
We can detect the viewport width threshold, which we want the style rules to be applied to, with the min-width or max-width declaration within the Media Queries, as we have shown in our Responsive Design Series.
View Demo
Device Orientation
Mobile devices can be operated with two orientations, Portrait and Landscape. In particular cases, we might also need to apply these styles based on the devices orientation apart from the device viewport width. To serve different stylesheets based upon screen and orientation declaration in the stylesheet link:
 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
This will apply the styles for iPad, iPhone, Android, Safari, and Firefox. Alternatively, we can also add the orientation declaration within the Media Queries, like so.
 @media all and (orientation:portrait) { /* Styles for Portrait screen */ } @media all and (orientation:landscape) { /* Styles for Landscape screen */ }
As W3C described, regardless of the device type (mobile or desktop), when the viewport height is larger than the width, the orientation is described as portrait. Conversely, it is described as landscape when the width viewport size is larger than the height.
Preview
Below are some of the test preview in iPhone, iPad and Desktop with Landscape and Protrait orientation.
iPhone (Portrait)
iPhone (Landscape)
iPad (Portrait)
iPad (Landscape)
Desktop (Portrait)
Desktop (Landscape)
You can see for yourselves the demo in action and download the source from the following links. Resize the browser window or turn your device screen to see different results as shown in the screenshots above.
View Demo
Download Source
Further Resource
iPad Orientation CSS — Cloud Four
CSS3 Media Queries — W3C
Related posts:
Blue Screen of Death Wallpapers for April Fool’s Day
Record Screen Activities On iOS Devices With Reflector
How to Create An Ajax-Based HTML5/CSS3 Contact Form
UI Design: Glossy Buttons with CSS3 Gradient
   









Read More »


7 Tips & Tricks to Creating a Gorgeous Restaurant Website


In order to create a proper website for people, you should start think in the same way they do. When it comes to designing a gorgeous restaurant website, what should you put your mind to? Well, why do people like going to restaurants? For the food, the ambience, to relax and have a good time with friends. Keeping that mind, restaurant websites can be real useful to the dining business.
Guests can have an opportunity to be acquainted with your menu, style, interior and services. Moreover, an online website also means that you can receive orders online as well as reservations for those interested to check out your restaurant. The website is a necessary attribute of any modern business.
So today I’d like to talk about creation of a proper restaurant website design. It seems easy on the surface, but still there are a few tips you totally should follow in order to create a gorgeous restaurant website that you can be proud of.
Recommended Reading: 9 Ideas for Building Great Websites With Less
1. Target Audience
From the very beginning you have to find out your target audience. If there is a university near your cafe, students will probably be your frequent visitors. If there is a business center not far from your restaurant then expect business-executive types to lunch at your place. Check your surroundings for the type of target audience, their age group and ultimately their preferences.
After the target audience is defined, you can begin website creation. If it is a students’ cafe, a clean and bright design will be the perfect choice. But if you are trying to engage the more serious managers and office workers, go for an elegant or professional style.
CAU Restaurant
Also, you can arrange “happy hours” or some other discounts to attract more customers. Don’t forget to create an extra website page, slider image or pop-up window for a brief description about it. Here you can see an offer in a slider at the website header. The visitors of this website are well-informed, because the offer is on the main page.
Giraffe
2. Keep It Simple
Every good restaurant website should include important and required pages, such as a home page or main page, the menu, the ‘About us’ page, and a Contact form. It’s critically important to create all these pages, because without any of them the website will never be complete. You can also add a review page in order to show your visitors what people say about your restaurant.
Cantilever
Also, try your best to keep it as simple as possible. There is a design principle noted by the U.S. Navy that is called KISS. It means “Keep it simple, stupid”. By this principle, simplicity and a user-friendly design is your main goal. If a user doesn’t find what he or she is looking for in three clicks,it’s byebye for good.
3. Color Sheme
Have you noticed that the color palette of most restaurant sites consists of four main colors: brown, white, red and black. Of course, these days you can see a full spectrum of colors on restaurant websites, but these main four colors were selected for a reason.
Brown color symbolizes reliability, stability, and adherence to tradition.
FIG
White gives a feeling of freshness, purity, and freedom.
Solegiallo
Black is associated with mystery and power of creation. Moreover, food photography looks great on a black background.
Daimu
The color red is most often used by fast food restaurants as it is the symbol of passion and secret desires. Always try to take into consideration the fact that colors influence a user’s behaviour. Use this knowledge to your benefit.
Backyard Burgers
4. Easy-to-use Contact Form
Your restaurant website should have an easy-to-use contact or feedback form. It’s not enough just to leave an email address or a phone number on the contact page. A contact form lets you add fields which can help narrow down what the person is trying to contact you for.
Also, don’t forget to attach a map to the form in order to show the location of your restaurant, that will remove questions about the location of your restaurant.
Cannolificio Mongibello
5. Stay Sociable
There are lots of social websites you can use to share information and find potential customers. Let your visitors follow your news, updates, and even staff via social networks. Stay open to communication, be friendly with your customers, be kind and they will act in the same way.
The Noodle Box
“Word of mouth” is a quite strong motivator. You can turn it to your advantage. Just share information that is really useful and interesting to your target audience, for example, the rules of proper nutrition with the corresponding dishes from your menu.
6. High-Quality Images
On the Web we are constantly fighting for attention and the website is usually on the front-end trying to get people to click in and find out more. Hence, it needs to be attractive first of all. Large background photos are an amazing choice for restaurant website design.
Also, you can add some high-quality images to the menu page in order to demonstrate how your dishes look like. Make the images “delicious”, they are supposed to arouse an appetite. Food photography should awaken a desire to try them out, because when they do, people can’t wait to step into your restaurant and get a bite.
Easy Bistro
Moreover, you can add some interior photos to your site to convey the cozy atmosphere that prevails in your restaurant.
7. Killing “About Us” Page
Your website is an instrument to win over the crowd and to top your competitors. The “About us” page should be unique and make you stand out from the crowd. Try to find your personality layer and add it there. Show your potential customers how friendly and professional your team is.
Square
People read the web information differently from the way they read books and magazines. They read fluently, selecting the key points for themselves. Keep this fact in mind and highlight the main moment with bold font. It will help not just to perceive the information better, but also to index it for search engines, such as Google.
Bonus Tip: Logo Placement
I’d like to share one more small tip with you. Almost all websites try to place the logo on the top left corner of the page. But why?
Napoli Centrale
According to the scientific research, when a person opens a website, his or her view runs from left to right. People are used to reading in a such way. So, the best place on the page to put a logo is the top left corner.
Conclusion
These tips are designed for beginners, but I hope that the pros appreciate them as well. Define your goals and try to achieve them with the help of your website. Remember that perfection is a journey, not a destination.
If you have more tips to share, let us know.
Related posts:
Practical Approach To Choosing Website Color Scheme
[Freebie] “BiZ” Business Website PSD Templates
5 Tips To Creating A More Usable E-Commerce Site
10 Tips & Tricks To Setup And Customize Microsoft Surface RT
   









Read More »


30 Must-Try Apps For Rooted Android Phones


Rooting your Android phone is the first path towards customizing your phone for optimum use. Once you have your device rooted, you will not only be able to use certain apps, you can also remove bloatware, boost battery life, make your Android work snappier and faster plus further customize the internal systems for better performance you won’t be able to get from a non-rooted phone.
While you may enjoy exploring your Android device, rooted, please remember to always have a backup of your Android device before you begin any attempts to install these 30 must-try apps for rooted Android phones in this list.
Recommended Reading: 20 Essentials App For Your Android Phone
Orange Backup
A full Android backup that allows your phone to revert to its most recent stable state is known as NAndroid backup. With Orange backup, you will be able to create a full Android backup right from within the app itself and even upload backups to the Cloud.
It also supports scheduled backups and popular Android recovery like ClockWorkMod and TWRP.
Greenify
Overtime your Android will be filled with apps that consume a lot of your battery life, or worse make your device slow down. Greenify will help to identify and hibernate your battery-sucking apps when you are not using them.
This is different from freezing the app (which renders the program useless), a method other similar root apps use. Greenify merely puts those apps to sleep while not disabling their function entirely.
Screen Standby
The frequent display timeout that is causing your device to lose connection when the screen is off can be rather annoying. To retain that connection whenver your screen is turned off you can use Screen Standby for that.
It will also prevent your device from overheating especially if you are connecting it via MHL/HDMI for a long gaming or movie streaming session.
Chainfire 3D
Stil stuck with Froyo or Gingerbread, unable to run a high-end game? Chainfire 3D serves as the ‘middle man’ between your apps and graphic driver, allowing users to disable or enable graphics to run newer games, even on older devices.
DataSync
This awesomely crafted app works perfectly especially for users with more than one Android device. Sync your data between multiple devices with 3 quick options: over Wi-Fi, Dropbox or FTP.
Titanium Backup
Here is another popular backup app. With this app you can set a schedule backup so that you will always will have that important data saved in your phone. You can easily transfer the backups to your desktop via a USB cable and restore it at anytime with Titanium Backup.
BusyBox Installer
BusyBox is an app that combines many common UNIX utilities into a single, small executable. Android is based on Linux which is also capable of running complex UNIX commands. BusyBox simplifies this type of process.
Many rooted apps and custom roms depend on BusyBox to run their script and make them work, hence some custom roms would have this automatically installed.
Samba FileSharing For Android
Samba FileSharing enables you to project your SD Card storage in your Android and broadcast it all over your network for you to access its files. The settings are similar to what you setup on your desktop and you can even access the shared folder through another Android device too.
Pimp My Rom (Alpha)
Here’s a one-in-all tweaking app. There are just so many features and tweaks that you can enable and patch to improve your Android experience.
It also includes init.d scripts that are full of tweaks and a simplified version of buildprop to make it easier time to decide on the perfect settings for your device.
OTA RootKeeper
A very straightforward app where you can keep your ‘Root’ access by saving it as a backup. Once you have the backup, flash over your Android device OTA updates and restore your root permission through this app. Simple!
Trickster MOD Kernel Settings
A tweaking tool for your Android device that supports many kernels. One of the fewer apps that allows you to overclock your GPU while having the combined functionality of many other apps in one convenient application.
CatLog
A logcat app where you can find details on what is going on in your Android device. While scanning your logs, Catlog make it easier for you to do stacktraces to debug your apps. A neat tool for developers or testers.
LBE Privacy Guard
Akin to an interactive desktop firewall, this will scan and list all the permissions required by every app you install. Through this list you will be able to customize your own permission settings to decide what kind of data the app can take from you.
Don’t worry about losing your settings, because this very thoughtful app will remember them.
Root Uninstaller
Not happy with the bloatware your Android phone takes with it? Freeze, uninstall or hide any unsightly or useless app with Root Uninstaller and free up some space for apps that matter.
Warning: Removing system app carelessly might lead to a system crash. Know wha you are doing before you do it.
GMD GestureControl Lite
Want to breeze through your phone with gestures? Here’s an app that can help you setup multi-touch gestures to run special action commands for your phone or tablet.
Market Helper
Certain apps are optimized only for phone, or only for tablet. Market Helper helps you to transform your phone or tablet into the (popular) Android device of your choice, allowing you to download that device-specific app you want from the Play Store.
DiskDigger
If you ever lost a photo before, DiskDigger is a nifty little app that allows you to dig back all your deleted photos easily. This free app include an experimental feature where you can retrieve even your deleted videos too. Visit this link for the instruction on how to use it.
TopNTP
The objective of this app is to force your GPS to lock onto your location as fast as possible. It includes many different customized gps.conf file for you to test, to get the best possible results. You can use your own custom config and apply it via this app too.
AFWall+ (Android Firewall)
AFWall+ helps you restrict access to the data networks (2G, 3G or Wi-Fi) to cater to the needs of your apps. This can help you save battery juice and data usage while roaming.
full!screen
Wish you can hide the navigation bar at the bottom of your device to have a real full view of your application? This app lets you hide the entire system bar in fullscreen mode while still keeping two configurable softbuttons which can be changed in position, size, color and transparency (or completely disabled).
Font Installer
This app comes with hundreds of custom fonts ready for you to install. Use any custom fonts just by saving it into your device and install it from your device storage.
Link2Sd
A useful app for users who are dealing with limited storage on their device. This app will help you to move your installed app to the SD card on your device so you can free up more space in your phone memory.
Battery Calibration
Android batteries after long usage may need to recalibrate due to an effect called SOC mismatch. There are many battery calibration apps but this one has a simple UI and a notification that tells you when you have hit a full charge.
To start using it, tap on the ‘Battery Calibration’ button when your battery hits 100%.
StickMount
Through the use of OTG cable and by using this app you will be able to automatically mount and dismount USB device that is plugged into your Android.
Rescan Media ROOT
For users you keep a lot of songs in their Android, media scanning is going to take a while to complete. Rescan Media allows you to skip a media scan upon booting and will only run if you started any media app on your device.
Wireless Tether for Root Users
Tethering is a feature that allows you to turn your smartphone into a mobile hotspot. This app will allow the phone to connect using their respective data network and setup a WiFi hotspot while distributing bandwidth to connected clients.
Wifi Protector
Use Wifi Protector to protect your device from outside attack, especially on public wifi. This app will protect and inform you if there is any live attack on your device including options to enable vibrations or ringtone so you could react to it immediately.
Push Notifications Fixer
Do you have delayed push notifications on your Android device? Get this app which fixes the infamous late notifications from apps like Facebook, Gmail, Twitter and others. You can even set the heartbeat interval to 1 minute to make sure you never late in getting notifications.
Root Browser Lite
Root Browser Lite will provide you with all the necessary features on top of root access permission that you need to make changes in your system files. You can view and edit any file or even search for files and folders all within this app easily. For a Lite version this app is pretty thorough.
DriveDroid
Its ideal to have a rescue system without having to burn your Linux into a DVD or USB pendrives. Host your Linux operating system on your Android and connect it to your PC to have it booted to Linux whenever you need it.
DriveDroid also includes some downloadable Linux images in the app for your convenience.
Related posts:
20 Essential Apps For Your Android Phone
10+ Apps To Track Lost / Stolen Android Devices
A look Into: Android Rooting
Customize Ringtones on Android Phones with Ringtone Maker
   









Read More »


Convert Your Google Drive Files with DriveConverter


With cloud storage, we rarely need to bring or store our files in a thumbdrive or in our devices anymore. Sometimes, however, you need to convert some of the files, but as they are in the Cloud, converting them means needing to download the file into the computer before using a desktop conversion software on it.
Wouldn’t it be easier if there’s a way to convert your files straight from your cloud storage and automatically save it in your storage after conversion? If you are a user of Google Drive, you might want to check out DriveConverter.
DriveConverter is a web app which allows you to convert files that you save in Google Drive. The type of files it can convert are documents, images and audio.
Recommended Reading: Convert Video And Music Online Free With All2Convert
Convert Google Drive Files
To start, go to DriveConverter and click on "Convert Files Now" button. It will connect to your Google Drive account and request permission to access your Google Drive  account.
After that, you may select and convert Google Drive files right on DriveConverter webpage.
You can also browse to your Google Drive account and select a file that you wish to convert. Right click on the file then click Open With > DriveConverter.
It will ask you for permission to access your Google Drive.
After granting permission it will redirect you to the converting page. You will then be asked to choose what format you want to convert the document into. Let’s choose PDF.
You can automatically save the converted word document into your Google Drive by ticking "Save to drive when finished?".
Click on Convert and it will start to convert your file. When the converting is done, it will show Save Complete which means you can find your file in your Google Drive. You can also choose to download it into your computer via the Download button.
Convert Newly Uploaded Files
Click on "Convert New Files" and on the left sidebar, click on "Upload". Then, click on Choose files to upload and a directory will open up. Look for your file. Alternatively you can drag and drop the file you want to convert into the space.
After selecting the file, it will bring you to the converting page. Do ensure you tick on "Save to drive when finished?" if you want to save the converted file straight into your Google Drive. Then, click on Convert. That’s it!
Supported File Types
DriveConverter is compatible with documents, audio files and images. For documents, it can convert:
From DOCX, DOC, RTF, TXT
To PDF, XML, RTF, HTML, DOC, DOCX, TXT
For spreadsheets, it can convert:
From XLX, XLSX
To XLSX, CSV, PDF, TXT, HTML
For images, DriveConverter can convert:
From PNG, JPG, GIF, BMP, TIFF
To PNG, JPG, BMP, GIF, TIFF
And as for audio files it can be convert:
From MP3, MP4, M4A, FLAC, WAV, OGG
To MP3, M4A, MP4, WAV, FLAC, OGG
Note that you can only convert one file at a time as there is no option for batch converting just yet.
Related posts:
Attach Cloud Files Into Gmail (On The Fly) With Cloudy
How to Manage Files Across Different Cloud Storage [Android]
Automate Your Dropbox Files With Actions
How to Get The Most Out of Google Drive
   









Read More »


40 Breathtaking Examples of Springtime Photography


Spring is an amazing season. It brings nature back to life. The best thing to shoot within springtime is the wide range of beautiful flowers that appear. Spring paints nature in bright vivid colors of pink, green, blue, yellow, purple, and all the combinations you would not even dare to imagine. There is just so much beauty to capture.
Today we’d like to embrace spring and let it embrace you. We have collected 40 breathtaking examples of springtime photography showing the wonders of this season. Photographers captured flowers, landscapes and breath-taking flora in order to show off the true beauty of spring. You may be inspired to take a few spring shots yourself.
When you do, try to imagine how they could better represent the atmosphere of spring, by experimenting with light, colors and angles, like how it is done here.
Recommended Reading: Winter Photography: A White Escape
1. Red desire (Image credit: Barbara Florczyk)
2. Spring (Image credit: Zeljko Kujundzic)
3. Spring Time (Image credit: KittyNN)
4. Spring Celebration (Image credit: Florent Courty)
5. Tulips (Image credit: Caroline)
6. Spring (Image credit: Dimitar Dachev)
7. Kaczence (Image credit: Barbara Florczyk)
8. Green (Image credit: Barbara Florczyk)
9. Lilac (Image credit: Caroline)
10. Pink spring (Image credit: Barbara Florczyk)
11. Sundown (Image credit: Barbara Florczyk)
12. Spring Hearts (Image credit: April Bright)
13. Wild Flowers (Image credit: Barbara Florczyk)
14. Loneliness (Image credit: Barbara Florczyk)
15. Kolysanie (Image credit: Barbara Florczyk
)
16. Color Splash (Image credit: Lipstickmisfit)
17. 10000 views (Image credit: Suzana)
18. Early Spring (Image credit: Maayke Klaver)
19. Spring (Image credit: Sora Belle)
20. Spring (Image credit: Minko2312)
21. Spring (Image credit: George Kirk)
22. March Magnolia (Image credit: George Kirk)
23. This is spring (Image credit: Maria Amme)
24. Spring (Image credit: Courtney Brooke)
25. Spring is in the air (Image credit: Amanda Michael)
26. Spring Spirit (Image credit: Tabuteaud Sébastien)
27. Spring Awakening (Image credit: Eva)
28. Spring in Moscow (Image credit: Roman Sayko)
29. Spring (Image credit: Abby Martell)
30. Spring Blossom View (Image credit: Shizuko Miyake)
31. A touch of Spring (Image credit: Adrian Sandor)
32. Sea of Spring (Image credit: Olivia Bell)
33. Spring (Image credit: Dainius)
34. Mystic Spring (Image credit: Tayfun Eker)
35. I turn to you (Image credit: Suna Gokturk)
36. Cromatique (Image credit: Diana Grigore)
37. Spring in the Air (Image credit: Ildiko Neer)
38. Welcome Spring (Image credit: Ildiko Neer)
39. Spring (Image credit: Agnieszka)
40. Spring (Image credit: Kira Winters)
More:
Here are more photography related articles we’ve previously published:
Rainy day photography
Water photography in B&W
Nature photography
Road and path photography
Related posts:
40 (More) Breathtaking Cloud Photography
Rainy Day Photography: 35 Dazzling Examples
Beautiful Shots of X-Ray Photography
Showcase of Road and Path Photography: 50 Exquisite Shots
   






Read More »
A Look Into: Google Web Font Effects


Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when we need more styles for more stunning fonts, but it would very complicated to create by ourselves. Replacing it with images is still not that good an option.
Recommended Reading: Free Web Font Services – Compared
View Demo
Adding Stunning Effect with Google Webfont
Here’s some good news. Google Webfont has introduced a feature, which allows us to apply decorative font styles – without the hassle. There are currently over 25 font effects we can apply.
To add the effect, we insert effect= parameter followed by the font effect API name in the Google Web Font stylesheet. In the following example, we added ‘Multiple Shadow’ font effect, which is specified with shadow-multiple (API name).
 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text/css'>
Then, we simply add the class name to apply the effect to the font. The class name is specified with font-effect-* followed by the API name. Given the above example, the class name for Multiple Shadow effect would be font-effect-shadow-multiple.
 <p class="font-effect-shadow-multiple">This is Awesome!</p>
This is how the Multiple Shadow font effect looks.
In case you are wondering how this effect is achieved, you can inspect the stylesheet, which will show you the following style rule.
 .font-effect-shadow-multiple { text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa; -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa; }
The multiple shadow effect is achieved with CSS3 text-shadow property, so the effect will only be displayed in Chrome, Firefox, Opera and Safari. Internet Explorer 9 (and earlier versions) does not support text-shadow property, but it has its own rule to define shadows with Shadow Filter.
Adding Multiple Font Effect
We are allowed to add multiple effects to the stylesheet. In this example, we added three font effects at once: Multiple Shadow, Emboss, 3D. Each effect is separated with the pipeline sign |, as follows.
 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text/css'>
Here is how the Emboss font effect look.
And below is the 3D effect that we’ve just added.
It is worth noting that we cannot add multiple effects into a single element, as the effect style rules will overwrite one another. Furthermore, you can head over to the demo page to see these effects in action.
View Demo
Download Source
Further Resource
In Google Webfont documentation you will see the other font effects you can apply, such as Fire, Fire Animation, Neon and many others.
Google Font API Documentation – Google Webfont
Related posts:
Optimizing Google Web Font
Free Web Font Services – Compared
CSS3 Tutorial: Create A Sleek On/Off Button
Paragraph Dropcap with CSS’s :first-line and :first-letter Elements
   









Read More »


Falling Stars & Meteors Wallpapers [Wallpaper Wednesday]


If you are an avid stargazer, you probably own your own telescope or will  actually venture to strategic spots around the world to catch a glimpse of the meteor showers that grace the skies in certain months of the year. If however, you are stuck in larger cities and a decent falling star display is a very rare treat, make do with these wallpapers of falling stars and meteors.
This week’s Wallpaper Wednesday is dedicated to these beautiful sights for the night skies. Brace yourselves. 12 spectacular falling star and meteor wallpapers are coming up.
Read Also: Sci-Fi Wallpapers
Meteor. Available in 2560×1440.
Fire Rains In The Red Desert. Available in 2480×1748.
Falling Meteor. Available in 1536×1024.
Meteors Blue Planet. Available in 1920×1200.
Meteor Shower HD. Available in 1440×900.
Raining Meteors. Available in 2560×1600.
Falling Stars. Available in 1600×1200.
Meteors Shower. Available in 1440×900.
Fall From The Stars. Available in 1366×768.
Fall. Available in 1200×676.
Beautiful Meteor. Available in 2560×1600.
Manipulation Sky. Available in 2000×1250.
Related posts:
Dual Screen Wallpapers [Wallpaper Wednesday]
Space and Galaxy Wallpapers [Wallpaper Wednesday]
Nature Wallpapers [Wallpaper Wednesday]
Apple Art Wallpapers [Wallpaper Wednesday]
   









Read More »


Confessions Of A Web Editor – An Inside Look


I’ve had many people ask me what I do for a living, and it’s quite difficult to explain. You see, I work from the ‘comforts of home’ and deal more with words and emails over the Web rather than face-to-face (with people). From an outsider’s point of view, that sounds like a sweet deal. You don’t have to face clients, your boss, your managers or your recruits (sounds like freelancing, doesn’t it?).


(Image Source: lnfectedxangelic)
Everyone asks me if I know of more jobs like this. In my head, I’d say, "No, thank goodness there isn’t any." Before you click away, trust me when I say this is not your typical tips to work from home type of write-up. In fact, it’s more of a horror story, less goth, more blood. When you have been in my position long enough (which in fact isn’t very long by Web standards), you realize the weirder sides of things from working online as a web editor – things like:
Recommended Reading: Useful Tips And Guidelines To Freelance Writing
Time flies
You know how it is when parents get together and say, "oh how time flies", your kids are now in college and retirement is the next stage in life? This is different. On the Internet, time moves a lot quicker. Unlike the regular 9-to-5, unless you set your own routine, you blink once it’s Wednesday, blink twice and it’s Sunday. Ironically, the opposite is the same, spend a year on the Web and it feels like it’s been four.


(Image Source: janussyndicate)
Information covered two days ago is considered ‘old’, and there is a perpetual need to always be on top of a new trend, news story or product release. In the same period it takes for you to mail a letter by post, you’d probably have gone through 6 different revolutions, uprising or scandals online. The Internet runs on a different time scale and whenever you get off the Web and check the calendar, sometimes you get a shock of how far into the year you’ve been.
What to Expect/Do
Have a routine. Always run reality checks by leaving the house, going for a run, catching up with friends or reading the newspaper (the kind that doesn’t update itself, and you can lend to someone else without fearing they’d run off with it).
Everyone hates you
This is true. If you’ve been on the Web long enough, you’d notice that hatred is the most widespread emotion you will come across. Apparently for most keyboard warriors, there are plenty of things to hate, an artist who turns up late for a concert, open letters that usually fight for a cause, even small erors (see that?) on blogposts get strongly worded emails.


(Image Source: BenHeine)
There isn’t really a reason behind it, some people just like to hate. It’s a perversion of the quote by Oscar Wilde,
"Man is least himself when he talks in his own person. Give him a mask, and he will tell you the truth."
Today’s man (and woman) is also full of unbridled hatred and a passion to be in someone’s face, virtually. Everyone has an opinion they would ‘virtually die for’, and there’s nothing you can do to change their opinion, even if they want to change yours.
What to Expect/Do
Be prepared to take criticism even when you are not asking for any. If you cannot take criticism from people on the Internet, then you are better off working outside of it. Honestly, it’s not worth it. You can’t be angry all the time.
You Are Your Own Manager
If freedom is the reason you want to work from home, then the first few months will be very rough for you. There is no such thing as freedom – what there is, is self-control, discipline and a lot of sacrifices.
You will notice a need for all this when you hear yourself give your reasons (or excuses) to clients or your boss when things are not getting done: I was distracted; The deadline is still a week off, I didn’t know the client wanted an early draft; I have to help with my daughter’s recital costume etc.
If you hated your strict supervisor in your last job, well you are going to miss the rigid atmosphere that he or she set up to allow you to work and achieve your goals. That kind of setting was optimized so you can focus on the task at hand.
Recommended Reading: 10 Tips To Make ‘Working From Home’ Work For You
No distractions, no calls from home, no interruptions inside that 9-to-5 zone. Your hands are tied but you get work done. And at the end of the day that is what clients and bosses look for: accomplishments.
What to Expect/Do
Be disciplined, deliver the goods, or go back the environment that allows you to do both. When will you know? When nothing gets done.
Scammers are everywhere
When receiving guest contributions (a lot of you are amazing writers by the way), I’ve come across a relatively small group of people who would do anything and everything to get a post on the site, anything except give good, original content.
Make A Stand
As an editor, it is very important to appreciate the effort your writers put into their writing. It is also equally important to demand it. Having worked with so many talented, hardworking people, I have little to no respect for writers who copy content from one site and try to pass it off as their own on another site.
As writers, we should show professional courtesy to a fellow member of the same trade, e.g. credit the person who came up with the original idea, give them a backlink to the site, mention them by name sometimes. Creativity is rare enough as it is, let’s try to not kill it off before we all stop writing altogether.
But perhaps they have their reason to resort to these actions: maybe they cannot come up with original content, maybe they think that rewording is acceptable (to them) or maybe they are literally practicing the "imitation is the best form of flattery’ bit.
Go With Your Gut
Regardless of the reason, the bad thing about this is they will go with it until you catch them in the act. Sometimes you do, sometimes you don’t. But the repercussions exist – and they hurt your reputation and your brand more than it does themselves.
Working from behind a computer screen, it’s hard to look for clues. In real life, you can study body languages, notice the pitches, stammers, and a-second-too-long replies, but not when all you have is text. So what is there for an editor to do? Roll with the punches and pray that that gut instinct of yours kicks in when it needs to.
What to Expect/Do
Be very careful(?). (I have no idea actually. I usually wait for my guts and/or short fuse to tell me what to do. Maybe you have a better idea).
It’s the People
For what it’s worth, working on the Web is really fun. You get to meet and communicate with a lot of enthusiastic people who are doing great things with their lives. No where else can you find an environment where there are so many young and old self-starters who would not let age, language or educational background limit them.
It’s an environment where only the strong and the persistent will survive, where prejudice and discrimination take a backseat to ‘making things happen’. If you have a dream you want made come true, and you are working on the Web, you’re in the right place.
Related posts:
10 Tips To Make ‘Working From Home’ Work For You
Create “About Me” Sidebar Widget With Post Editor [WordPress tutorial]
Brackets: Free Open Source Code Editor Built with HTML/CSS
Freelancers: 5 Ways To Lose Your Clients
   









Read More »


Free PDF Apps For Smartphone & Tablets – Best Of


Many people use PDF files on a daily basis. Office workers use it as a digital manual or to fill forms; tutors and students use it to easily distribute reference materials or ebooks. In an effort to reduce the use of paper, PDF documents became the ultimate lightweight alternative that lets you go green with every paper you do not print.
In this article, we’ll show you the best free apps for your smartphones or tablets to make the use of PDF a breeze.
Free apps has its limits, but more often than not, we need more than one app to get the job done. Having a few different apps allows you to tap into the many different strengths provided by each of the apps. So, we’ve gone and done the dirty job for you and collected here are the best free apps to you could find on the Web to let you manage, split, merge, and create PDF files right on your iOS or Android devices.
Recommended Reading: 20 Free Tools To Annotate PDF Documents
PDF Splicer Free
This is an app to easily split, merge, duplicate, delete and create PDF files/pages on your iOS device. Access a PDF file from storage app like Dropbox or from Mail and open it with this app. The file will be stored on the main page of the app.
You can select pages from a PDF and tap the Copy button then the Insert button to create a new PDF or merge an existing, separate PDF. The insert button also works when you Copy images on your iDevice’s photo gallery. To open your newly merged PDF, tap on All then the Export button. You can also attach it to an email.
However, there’s a slight drawback to this app. Because it’s free, it will insert an advert on the first page when you export the PDF file. If the advert does not bother you, it’s not a big deal as it does not remove or restrict the amount of pages.
Platform: iOS
Foxit Mobile PDF Reader
Foxit Mobile PDF reader is a free app that can manage, encrypt, decrypt and open PDF files with passwords. The PDF file you’ve opened from your Mail or Dropbox app will be instantly saved on the app. On the reader, you can annotate a document with lines, shapes, highlights, underlining, or draw on the document. There is also the option to add signatures or add text.
The PDF files can be managed in folders or turned favorites for faster access. When you’re on a desktop web browser, you can also upload files  to the app through its Wi-Fi file transfer by just typing in the given IP address.
The key feature in this app (only found on iOS at the time of this writing) is the ability to enable and disable passwords on a PDF file. You can enable or disable file encryption when opening, printing or copying a document. A pretty handy tool for managing sensitive documents.
Platform: iOS | Android | Windows | Symbian
PDF Utility – Lite
This Free PDF tool found only on Android has a bunch of functions found in the two previously mentioned apps. The Lite version of PDF Utility allows you to split, merge, duplicate, delete and create PDF files/pages with password protection.
However, this app does not have the functionality of a reader, like annotation or searching through text. Still, its tools are very useful for someone who needs to work with multiple PDF files.
Platform: Android
SignEasy
If you use PDF that require your important signature on multiple documents everyday, then SignEasy is an awesome-looking, free app that you should use. Registering for a free account would give you more functionality, such as adding checkboxes and images to the documents.
The app lets you save your signature so that you can just ‘paste’ it in future PDF documents. Other features include adding text, date and initials.
Platform: iOS | Android | BlackBerry
Alternatives
If you only want an easy way to manage and read PDF documents on your smartphone and can do away with extra features to create, annotate or merge documents, here are some cloud storage apps you should try.
Read Also: Cloud Storage Face-Off: Dropbox Vs Google Drive Vs SkyDrive
Dropbox
We love Dropbox. You can do a lot of things with it, including managing your PDF files. With the Dropbox app you can read PDF files with extra features like table of contents for easy navigation, as well as text search within the document. You can also mark documents as favorite to download and read PDF documents offline.
Platform: iOS | Android | BlackBerry
Google Drive
You can also use Google Drive to make documents available offline with easier sharing options within the app itself. It has simple functions to view PDF files although you don’t get the table of contents like you do in Dropbox.
Platform: iOS | Android
Evernote
Besides being a great productivity tool, the Evernote app is also a good app to open PDF files on the desktop application. Its features are similar to Dropbox, you can navigate your pages through table of contents or searching for text within the document.
It also has a powerful search feature to look for a term over multiple documents. Lastly, you can create a note and attach the PDF to it.
Platform: iOS | Android
Related posts:
Top 10 Free Note-Taking Apps For Smartphones
7 Apps To Create Cinemagraphs On Your Smartphone
20 Free Tools to Annotate PDF Documents
Organize Installed Programs On Windows 8 Modern UI Apps Menu Search
   









Read More »


How To Add Shortcuts To ‘My Computer’ On Windows 7 & 8 [Quicktip]


The ‘My Computer’ icon gives us easy access to our hard drives (or SSD), removable flash drives and other network-related locations. But if you’re one who enjoys a clutter-free desktop, then maybe you can use this tweak to remove the many program and folder shortcuts on your desktop.
Here’s a way to get more usefulness out of ”My Computer” by adding the shortcuts that you need to it. This also gives you quick access to the program or folder and works very well with Windows Explorer tabs tweak like Clover. Here’s how you can add shortcuts to your ”My Computer” in a few easy clicks.
Recommended Reading: Organize Installed Programs On Windows 8 Modern UI
Adding Program Shortcuts To ‘My Computer’
First you’ll have to navigate to a special folder. Shortcuts placed in this folder will be displayed on ‘My Computer’.
Hit Windows Key + R and type in %appdata% into the box and click on OK.
Then navigate to Microsoft > Windows > Network Shortcuts. Program shortcuts that you place here will be shown on ‘My Computer’, it’s that simple.
Once you have placed program shortcuts into that folder, you’ll be able to see the shortcut icons on ‘My Computer’.
Adding Folder Shortcuts To ‘My Computer’
Because you can add any shortcut, you can also add folder shortcuts. To easily do that, just right click on your frequently used folder and click on Create Shortcut.
Now all you have to do is cut (Ctrl + X) the created shortcut and paste (Ctrl + V) into the Network Shortcuts folder, like how we transferred the program shortcuts earlier.
Adding Control Panel Shortcuts
You can also have quick access to frequently used Control Panel shortcuts on your ‘My Computer’. All you have to do is simply click and drag something from the Control Panel to the Network Shortcuts folder.
Here’s the final result of adding all these shortcuts.
Now your ‘My Computer’ will be well equiped with all your frequently used shortcuts and quick access links.
Related posts:
How To Assign Shortcuts to Any Program in Windows [Quicktip]
How To Create Custom Keyboard Shortcuts For Office 2013 [Quicktip]
How to Unlock GodMode in Windows 8 [Quicktip]
50 Windows 8 Keyboard Shortcuts You Should Know
   









Read More »


Securely Transfer & Share Large Files With BitTorrent Sync


Ever wanted to quickly share a large file (or several files) with a friend yet the size limit on emails and the hassle behind file-sharing services make you want to give up? Many cloud storage services make you jump through hoops just to get measly upload or download speeds. But we’ve found a gem of a solution.
If you’re thinking of a bullet-fast way to share files without requiring any registration, then you can try out BitTorrent Sync.
Bittorrent Sync is a very lightweight program that allows you to create a secure shared-folder to upload and download files with seemingly no size limit. It basically synchronizes your files using a peer-to-peer (P2P) protocol.
We’ll show you how simple it is to setup and use and all the other things you can do with BitTorrent Sync.
Download & Install BitTorrent Sync
Normally we would begin by directing you to a website to register for a service. This isn’t the case for BitTorrent Sync as you just have to download the small software and install it on your computer. No registration required.
It has support for Windows XP SP3 or newer, Mac 10.6 or newer, Linux and even NAS (Network Attached Storage) devices.
During installation, you should tick ‘Add an exception for BitTorrent Sync in Windows Firewall’ in order for the program to be able to transfer files through your network.
After installing, a setup window will appear and you’ll be asked if you want to go with the Standard Setop or if you have a ‘secret’.
A secret, here, is a long piece of code consisting 32 alphanumerical characters. You use a secret like a password to acquire access from or give permission to a friend who is sharing a folder with you via Bittorrent  Sync.
Go with ‘Standard Setup’ for the meantime.
How To Begin Sharing Files And Folders
Unless you have a specific folder you want to share with someone, you should start by creating a new folder on your hard drive. Chuck all that you want to share inside this folder.
Then go to the Shared Folders tab (second from the left) on BitTorrent Sync and click on Add.
Click on Generate to get a unique ‘secret’ code and click on the three dots to browse for that folder you just created, or any specific folder you want to share.
Don’t worry about keeping this ‘secret’ code somewhere safe, you can view it again by right clicking on the path, and selecting Copy secret.
On the receiving end, they can go to Shared Folders, and click on Add.
In the ‘Shared secret’ field, they can paste the secret code given to them and create or select a folder they want the contents to be synced to. If they choose a folder with files in it, contents between their folder and the newly synced folder will be merged.
Advanced Options
To see more advanced options, you can also right click and select Show folder preferences.
The Read only secret option ensures that the person using this code cannot add or delete files in the folder. They also cannot generate a secret to further share the folder with someone else.
Another option is the One-time secret option, which allows for the secret to last only 24 hours, for a single use.
Under these advanced options, you can also generate a new secret on an existing folder by clicking on New. You can use this when a folder is accidentally shared to a person who is not an intended receiver. Generate a new secret for that affected folder and give it to the people you want to give the folder access to.
Testing Transfer Speeds
Apart from the easy setup and requiring no registration, the transfer speed is something to shout about. We must start by saying that transfer speeds will vary depending on your internet connection.
That aside, in a simple test, we were able to get 200kbps upload and download speeds, simultaneously, and while not on the fastest Internet service out there. As a comparison, the same file could be uploaded to Dropbox, at almost 300 Kbps, but the catch is, we have to wait for Dropbox to finish uploading before the download link can be shared to another person.
Anonymity Ensured
BitTorrent Sync is (technically) transferring files over the Internet without a middleman, so it doesn’t have a problem handling large files, which is great news for those of you who want to share raw clips or large image files.
Plus, the ‘secret’ code that is generated is alphanumeric and long enough to deter any attempts to crack it. But that didn’t stop the site from further encrypting the file transfer. Lastly, your information is not stored anywhere apart from the devices that are doing the uploading and downloading of the files.
Limitations
We’ve sung the praises and now let’s get down to the limitations.
There is no real ‘manager’ or ‘owner’ of the shared folder. For example, if you share a folder with your friend, that person can easily share it with anyone else without your permission.
Once the folder is shared, you are able to see it under the Devices tab but are not able to do anything about it like ‘kicking’ the person out from the share list. Basically, you cannot manage permissions beyond the first share.
Since there’s no middleman, there’s no way to access your files through a website compared to other cloud services. If you’re using another computer, you’ll have to download and install the program just to access your files.
Your main computer where BitTorrent Sync is installed also acts as a server, so it has to be turned on for you to be able to access and sync your files.
Related posts:
How To Share Dropbox Files On Your Facebook Group
How To Transfer And Sync Your iPhone Contacts With Android
How to Split Large XML Files for WordPress [Quicktip]
How to Sync Any Folders Outside /Dropbox [Quicktip]
   









Read More »


Web Design: Getting Started With Chrome Developer Tools


Google Chrome is a (relatively) new kid on the block who quickly gain good market share in the browser niche, and it’s is equipped with a Handy Tool for Developers.
In this post, we are going to explore it and utilize some of its features that might help you during the web development process.
To get to the Chrome Developers Tool, go to Tools > Developers Tool.
Alternatively, you can also right-click on the web page and choose Inspect Element and If you are using Google Chrome in Windows, you can also hit the F12 key.
Recommended Reading: 40 Useful Google Chrome Extensions For Web Designers
Using Elements Tab
We will start off with the Elements tab. In this tab we can view the webpage markup as well as the styles that affect the page, which can be used to inspect what went wrong in HTML and’ CSS.
Editing Document Structure
If we right-click on one of the elements, we will find a few handy options to Add and Edit the Attribute, Copy and Edit the HTML markup and even view the element state to see what will happen when it is in :hover, :focus and :active.
This feature is very useful in cases like when we need to make a change but somehow do not have direct access to the source file, for instance in my case, I use this when asked by a friend to help debug their webpage.
Another little trick we can use is to also drag and drop the elements. Hold your click to one element and move it up and down, then you can see the impact instantly.
In this example, we slightly swap the Facebook header structure and see what happens.
Editing the CSS
When you have selected an element, you will see the styles that affect that element on the right. We can see what are the styles that are applied, we can also add or remove the styles.
Furthermore, the Chrome Developer Tool is also equipped with a color-picker to adjust the element colors seamlessly; just click on the color box and you will see it popping up, like so.
In terms of color format, the browser will typically show the Hex format. Now, in case you need the RGB or HSL format we can also do the change this way: Click on the Setting icon at the right under the Styles tab.
As you can see, we have the color format options there, you can now change it the way you need.
Adding CSS
As I have mentioned, we can add styles and here is how to do it. First, select the HTML element that we want to add the styles to, then in the Styles tab, find the plus (+) sign, click on it and it will generate the proper selector automatically.
Now, you can add the styles upon this selector right from the browser.
Viewing the Console
In the Console tab, we can see log events for Errors and Warnings. This notification below from the Console shows that one of our files cannot be loaded and this is the place where you might need to check where your website went wrong.
If we are working with jQuery, we can also send the log of our script event to the console using console.log. This example shows how we grab the value of an input element and send the result to the Console just to ensure the data is correct.
HTML
 <input type="text" value="Hi There!">
jQuery
 var val = $('input').val(); console.log(val)
When we reload the page, here is what we get in the Console.
Changing User Agent
Assuming that you are developing a website you probably want to see how it may turn out in particular devices. In that case, we can change the User Agent.
Here is how to do it in Chrome. In Developer Tools, you will find a Setting type of icon at the bottom right. Click on it, and an overlay option will pop up, like so.
Next, go to the Overrides tab. In this tab, we will find User Agent options and by default Google Chrome has provided a few user agents ready, such as for iPhone, Android, Blackberry, and etc.
Just in case, you can’t find your required environment here, you can go to User Agent String to pick-up the one you need.
On the option list, select Other and put the User Agent that has you just been copied in the input field next to it.
Recommended Reading: Web Developer Resources: A Mega-Compilation
Conclusion
There are a lot more functionality in the Chrome Developer Tool, but it would take a really long post to document it all.
Ultimately, I hope this post can benefit you and improve your productivity in web development and if you have anything to add something that we may have missed here, feel free to share it in the comment box below.
Related posts:
Spice Up Your Google Search Background [On Chrome]
Turn Your Favourite Website Into 3D Maze With Google Chrome Maze
A Look Into: Essential Firefox Tools For Web Developers
How To Transfer iOS Safari Bookmarks To Google Chrome
   









Read More »


5 Common Types of Bosses (And How to Deal With Them)


My years of experience working for a financial company have led me to face many types of bosses. Some were very hard to deal with, but I was fortunate that I had mostly good ones to look after me. As I moved into sales and marketing, I noticed that bosses were particularly more inclined to build a good rapport with the sales guys.


It may be because they thought that sales teams were the crux of a firm, and therefore, bosses made sure that the sales team members were well looked after. That doesn’t mean that the sales department had it all hunky-dory; it’s also the sales team members who had to bear the brunt of a boss’s wrath. When things don’t go their way, that’s where you come across the real side of the boss.
Recommended Reading: 8 (Legit) Ways To Impress Your Boss
Managing Your Boss
Bosses (not leaders – there is a difference) are humans too and they have their preferences and dislikes and if you play your cards well, you will be able to work not only for them, but also with them. There have been employees I knew personally, who never performed that well, but still they manage to keep their jobs because they knew how to be in the boss’s good books.
Learning how to deal or manage your boss is a significant and transferable skill, and will indefinitely decide how far you progress. While I wouldn’t go so far as to say that all bosses in the world fall only into these 5 categories, but if yours does, I have suggestions on how you can stay in the organization.
1. The boss With the Superiority Complex
He loves screaming and he looks for opportunities to shout at others. A high-pitched boss has a superiority complex, and believes that others are wrong. A very edgy character by nature, he doesn’t like to dwell on a reason behind a problem, but instead takes solace from the fact that he has scolded someone, and hence, he has prevented the mistake from re-occurring. Many of you may have certainly come across such bosses.


You will notice that they are also edgy in their appearance, not just by the way they talk, but also by the way they sit. Peep inside his office chamber, and you will find that he is always shifting in his seat. Even before he has said a word, he has already made you edgy and worried about what he is going to say next.
How to Deal with It:
Dealing with such bosses is easy only if you are prepared to take verbal blows from him. A high-pitched boss gets satisfaction from watching his subordinates take his nonsense. And if you can do exactly that, then you have dealt with him.
Never give an impression that you are fed up with taking his nonsense, the more you accept his verbal blows, the more he believes he is right.
By doing so, you will stay on his good side. But if you try to show that you are smarter than him by opposing him or getting into an argument with him, you perhaps risk your growth in the company and will probably do better with another type of boss.
2. The Boss who Brandishes his Power
He takes great pride in waving his power and authority around, not just in office but sometimes also at home. A power-brandishing boss loves wearing the mask of a boss, and believes that bosses are the highest-regarded professionals in the world.
He is overtly possessive of his post and always wants to give an impression that he is completely in control of the situation, even when in reality he is not.
He is insecure, and too preoccupied with trying to always have things under his control. At times, the employees may have committed mistakes, yet he pretends to have not seen them and says little of their mistakes.
How to Deal with It:
This type of boss gives significance to discipline, rather than performance, and is of the opinion that employees should be self-disciplined. His motto is that with discipline, employees will eventually perform.
Even if you find such bosses to be lenient, you should not break the rules too often; and even if you do so, make sure that you don’t bring it to his notice. Show him respect him, and make him feel that he is the big boss and you will be able to go about your duties undisturbed.
Read Also: 5 Characteristics “The Employee Of The Century” Has
3. The Boss Who Doesn’t Belong
This boss gives you an impression that he has been thrown into a post that he is not fit for. This boss is possibly an employee in the company who had been promoted to be a ‘boss’ without the relevant qualities. He is someone management had to fall back on because there are no other options.
You will notice that half of his motivational speeches in office meetings will contain a list of his past achievements, and the rest is utter claptrap. He stresses a lot on performance, but lacks the management skills to get them. Employees may make fun of him behind is back even though in truth he is hardworking.
He tries to learn, and also makes amends if he has committed mistakes. Nonetheless, he lacks confidence and doesn’t stick to a plan especially when things do not work as planned.
How to Deal with It:
This type of boss will welcome advice that will help him get his bearings, and if you can offer him substantial help, you can easily befriend him. Just don’t expect him to be lenient in the office, he has a reputation to build and maintain and he can’t make any false moves, or tolerate mistakes by his team members.
Give it enough time and you find that he will eventually be a good boss as he is eager to learn and will collect the tricks of the trade with time.
4. The boss who Intimidates
An intimidating boss is a no-nonsense boss, aggressive by nature, and tries to get things done by issuing commands. He has an ego, and keeps it with him while he is in the office. Sometimes you will feel that he is trying to run the show as if he is running a criminal gang.


On the one hand, he threatens his employees, but on the other hand, he doesn’t go overboard because he is insecure, and doesn’t wish to lose his effect on the employees.
He believes that too much of intimidation will lessen his grip on his employees, and that’s the reason he sometimes overlooks mistakes by his employees.He keeps to his own space, and is reserved by nature.
How to Deal with It:
The best way for employees to handle this boss would be to respect his privacy, and don’t interact with him unnecessarily. If you are smart enough, and know how to break his defences, you can even befriend him, and will be able to take some liberties in the office.
However, don’t go overboard otherwise, he’d also be the one who throws you out of the office.
5. The boss Who Excels and Influences
Ideally, he is the best boss to have running a company as he handles both the management and his employees efficiently. The company prefers such bosses because they have positive vibes about themselves, and make  the company believe that they can produce results even in the midst of a crisis.
They are not particularly harsh on employees, but they mean business. Not all influential bosses are inspiring, but they have the guile to make others perform to their limits. An influential boss is highly professional, and expects employees to behave similarly.
How to Deal with It:
Dealing with him is never a problem if you perform your duties well enough. However, beware of such bosses, as they are highly determined to rise in the hierarchy. If he feels that you are a threat to his goals, he will have you removed from the company.
An influential boss also forms his own core group, even within the same organization, who may inform him of what happens in the office while he  is away. Therefore, be careful and mind your own business, and you will always stay in his good books.
Read Also: Survive Office: 10 Tips For Moving Up Corporate Ladder
Conclusion
We may not have the luck of working with good leaders but we indefinitely have to work with a boss, the head of an organization or the manager of a group of workers. They get groups of people to do things that contribute to the company objectives and at the end of the day, employees don’t leave jobs or organizations, they leave their bosses.
So what is your boss like, and how do you deal with your boss?
Related posts:
8 (Legit) Ways to Impress Your Boss
10 Common Types of Facebook Updates
How to Deal with Criticism in The Freelancing World
5 Characteristics of A Positive Work Environment
   









Read More »


How to Style Google Maps


Google Maps is one of the best services you can get from Google. It’s a free tool that allows you to easily embed interactive and information-rich maps on your website. However, one disadvantage that comes from using free services is that eventually they all look the same.
The good news is Google launched the API that controls the map styles. So, in this post, we will see how to use the API, and make your map be more distinctive.
View Demo
Google Maps Library
The first thing that we need to do is to include the Google Maps JavaScript library inside the document’s <head> tag, so that we can use the API.
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
Google Maps Components
There are three components to style the Google Maps: the feautureTypes, the elementTypes, and the Sytlers.
featureTypes is used to select the geographical objects on the map, such as the road, the water, and the parks, so it basically works like the CSS selectors. For your convenience, we have listed a few featureTypes that we can use to control the map.
FeatureTypes
Description
water
Select all the water objects on the map including the sea, the lake and the river.
road
Select all the roads on the map.
landscape
Select the landscapes on the map.
poi
Select the point of interests, areas like schools, business districts, and parks.
transit
Select all the public transit like bus stations, the train stations and the airports.
administrative
Select the administrative areas.
For more, you can head over to the following API reference: Google Maps feature type specification.
elementTypes is used to target the element that is part of the geographical objects, such as the object shape, the fill, the stroke, and the object labels.
stylers is an array of properties to adjust the object colors and its visibility. Google Maps accepts HSL (Hue, Saturation, Lightness) and Hexadecimal for the color format.
Basic Usage
First of all, we need to add a <div> element that is assigned with an id to contain the map.
 <div id="surabaya"></div>
The styles in Google Maps are declared with JavaScript objects. So, all the styles are nested under the <script> tag – this is the JavaScript 101. Additionally, you can place the scripts before the body close tag, or at the head tag with the window.onload function, like so.
 window.onload = function () { // add the scripts here }
Create a variable to contain the map style rules. In this case, I would like to name it as styles.
 window.onload = function () { var styles = [ // we will add the style rules here. ]; };
Then, display the map to the <div> container with the following functions.
 window.onload = function () { var styles = [ // we will add the style rules here. ]; var options = { mapTypeControlOptions: { mapTypeIds: ['Styled'] }, center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509), zoom: 16, disableDefaultUI: true, mapTypeId: 'Styled' }; var div = document.getElementById('surabaya'); var map = new google.maps.Map(div, options); var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); map.mapTypes.set('Styled', styledMapType); };
At this point, the map should have appeared on your page, as follows.
Check out: Getting Started with Google Maps JavaScript API
In this example, I would like to change the color of the water. To do so, we can write the style rules in this way, within the styles variable.
 var styles = [ { featureType: 'water', elementType: 'geometry.fill', stylers: [ { color: '#adc9b8' } ] } ];
The code above changes the fill color of the water element on the map to color #adc9b8, and here how it turns out.
Next, let’s change the landscape’s color, and this time we will use the HSL color format so that we can adjust the color lightness, like so.
 var styles = [ { featureType: 'water', elementType: 'geometry.fill', stylers: [ { color: '#adc9b8' } ] },{ featureType: 'landscape.natural', elementType: 'all', stylers: [ { hue: '#809f80' }, { lightness: -35 } ] } ];
This code addition gives us the following result.
Furthermore, these are the style rules for several other objects on the map.
 { featureType: 'poi', elementType: 'geometry', stylers: [ { hue: '#f9e0b7' }, { lightness: 30 } ] },{ featureType: 'road', elementType: 'geometry', stylers: [ { hue: '#d5c18c' }, { lightness: 14 } ] },{ featureType: 'road.local', elementType: 'all', stylers: [ { hue: '#ffd7a6' }, { saturation: 100 }, { lightness: -12 } ] }
Here is how the final look of the map.
You can head over to the demo page to see the final result in detail.
View Demo
Download Source
Google Maps Styling Tools
In addition, if you prefer working GUI rather than manually writing the script, here are the tools for you to try out.
Google Styled Map Wizard
Google Maps Colorizr
Further Resources
Further on implementing Google Maps API for map styling, you can head over to the following references.
Getting Started with Google Maps API — Google Developers
Google Maps Stylers Specification — Google Developers
Google Maps Feature Types specification — Google Developers
Related posts:
Google Maps For iOS 6: What’s New and What’s Hot
Bringing Back Google Maps on iOS 6
How to Rename Google Maps Bookmarks on iOS & Android
Reviewing CSS Style Priority Level
   









Read More »


Why Freelancers Are Saving The Internet


The freelancer is the job archetype for the new millenium. Much like artists were to the Renaissance and engineers to the mechanical revolution, the tech (and more recently, the mobile) revolution rely on freelancers of various skills to propel itself forward. Apple and Microsoft have full time employees like engineers, marketeers and other skillful people in different fields, but when we are talking about the Internet and tech industry on the whole, most of its innovation, content and coding is done by passionate freelancers.


We’re seeing the same thing with mobile. Most app companies are started by entrepreneurs who worked as freelancers to get their start. In fact, freelancing jobs could be called “personal incubators” for young entrepreneurs, who are lacking in minimal capital to start a small business. And when those businesses are finally financed, they look towards outsourcing as much as possible in order to skip on health care obligations, benefits and office space.
Recommended Reading: 40 People Who Changed the Internet
Backbone of the Internet
So make no mistake, small and medium-sized business are the ones creating the majority of… well, everything on the Internet. Basically, freelancing is the backbone of those businesses. Elance’s CEO, Fabio Rosati , said they’ve surpassed 1 million job listings in 2012, from 650,000 in 2011.


The most sought after jobs are technical, coding, creative, writing and design jobs. He said mobile app development jobs are also on the rise.
Now, let me ask you this: What if all the freelancers stopped working?
When Freelancers Stop Working
Let’s assume for a moment every single freelancer out there would seek secure, stable jobs, leaving behind the freelancing work they do online. What’s the worse that could happen?
The Huffington Post would almost die
… and so will Business Insider, NYTimes.com, Mashable and every other major blog, online magazine or publication on the Internet. That’s because their content output is so huge, interesting and diverse thanks to experts in all sorts of field who are basically writing for them freelance. They are what the Harvard Business Review calls Supertemps – experts pursuing project-based careers.
Only a fraction of all the news you see on the Internet are written by full-time employees of that particular publication. Almost no blog has the power to hire full-time writers for its entire content.
Design: We’d be back in ‘95
Design agencies have loads of talented people working in them, and will probably never die (unlike many advertising agencies). Nope. They’ll endure, thanks to branching out, offering development services and the corporate need to pay more for something, just to justify spending your entire quarterly budget and get a bonus.
But the fact is the majority of designers nowadays are freelancers. And they offer the same services or often times better, at a fraction of the cost. 99Designs boasts 200,00 designers in its ranks; Crowdspring is at almost 150,000. If you have an old school design studio, you’re probably mad as hell. "99designs is something akin to a Walmart," said Dan Ibarra in a Forbes article, industry veteran and co-founder of Aesthetic Apparatus, a Minneapolis design studio. Sure it is.
But the fact remains, small to medium sized business are now empowered to look like Top 500 Giants! And the Internet is not comprised of only Coca-Cola’s site (which frankly could use a contest on 99Designs) or Apple’s “simple, clean, smooth” online presence you’ll hear so many people trying to emulate.
It’s the small guy with a local e-store who “owns” the Internet. He is the future. It’s he who relies on freelancers to get his site looking like it’s 2013, and not ’95. And it’s the foreign freelancer who is making it all possible.
Google Play and the App Store?
Most of the apps in both giant marketplaces are coming from freelancers or small businesses who rely on freelancers for outsourcing. Yes, there are some bad apps because of this. Yes, I also hate the use of too many ads and ad networks.


But the truth is, it’s from this chaotic breeding ground that you get the beautiful diversity of the virtual app world, in all its 257 chromatic variants.
I like that. And so do you. You wouldn’t want just a few giant apps, no diversity and a massive monopolized.
The Planet would be in danger
Yes it would. There’s this small thing called Globalization. It’s the reason some national economies are now dying. Only those fast enough the adapt to globalization and outsourcing stand a chance to thrive. That’s neither a good or a bad thing, it’s just a shift. Part of the planet’s total GWP (Gross World Product) of around $70 trillion dollars is made up of goods and currency which move through or thanks to outsourced jobs.
In October 2012 for example, according to the Bureau of Labor Statistics, 14.9 million U.S. workers were self-employed. Freelancers, outsourced jobs and globalization go hand in hand.
A scenario in which freelancers would all seek secure jobs would start a financial crisis like no other. That’s just all sorts of bad.
And consider this:
A bad Internet Hurts The Planet
A poorly designed interface for the Internet with few giant apps on the apps market and almost no alternative media, blogs and content from Supertemps would probably hinder connectivity to the point where people wouldn’t want to get online. That means less knowledge for the masses, less unique, distinct thought processes and less communication. We’d go back in time.
Back to ’95 again. And I don’t want that. I love my Samsung S4.
So if you’re a freelancer, be proud about your contribution. You are next to some great people.
You are the revolution.
Related posts:
Freelancers: How to Deal With Insecurities
Freelancers: Juggling Deadlines and Priorities 101
10 Job Roles Freelancers Take Up (And How To Manage Them)
Freelancers: 3 Ways to Motivate Yourself When You’re Running Low
   









Read More »


Optimizing Google Web Font


Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the library. In spite of being served from fast Google servers, there are still a few areas that need improvement.
So, let’s see what we can do to improve Google Webfont’s performance.
Recommended Reading: A Look Into: Better Typography For Modern Websites
Delivering Certain Font Styles
Fonts in Google Webfont provide font styles like bold, italic, light. Adding all these font styles to the specification will increase the font size and also affect the page load performance.
As we can see below, by deselecting some of the styles, the page load will turn much faster.
Google makes it easy for us to include only the styles that we need. In the following example, we select only the light and normal version of Roboto Condensed font family.
 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
We can see from the screenshot below that the bold style is not rendered properly without specifying in the Google Webfont stylesheet.
However, it gives us better load time as the browsers load fewer font files.
You can see the demo below.
View Demo
Font Sub-setting
Several fonts in Google Webfont also provide multiple sets of character to support several languages. For example, the Roboto Condensed font family provides the character set for Cyrillic, Greek and Vietnamese characters. Google provides the option for easily selecting which character set we want to include.
By including these character sets, it will increase the font size and hurt the page load performance. So, leave what is not necessary unchecked.
In this example, we added the latin, greek, and cyrillic characters. But, we only include the latin and greek set in the Google Webfont stylesheet, as follows.
 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,greek' rel='stylesheet' type='text/css'>
Hence, the cyrillic characters are not rendered with Roboto Condensed font family from Goole Webfont.
See the the live demo to see the font in action.
View Demo
Serving Certain Letters
There are times when we know the certain letters we are going to embed on the website. Thus, providing the entire font letters of the font  family would become useless. Google Webfont provides the option for which to include only the characters that are necessary.
We can include specific letters by adding the following &text={letters} next to the font family name. In the following example, we set the l, o, and g characters in the Google Webfont stylesheet, as follows.
 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&text=log' rel='stylesheet' type='text/css'>
That way, we can only use the letter l, o, and g from this font family, Roboto Condensed. The word logo, probably, is the perfect example, in our case; it renders all the letters included in our Google Webfont specification.
By including only the necessary letters, it can significantly decrease the font size. It is worth noting, though, the letters we included are all the small letters. The capital letters of these letters, l, o, and g will not be served as well as all other excluded letters.
View Demo
Download Source
Related posts:
Free Web Font Services – Compared
Paragraph Dropcap with CSS’s :first-line and :first-letter Elements
Turn Your Handwriting Into A Font With MyScriptFont
A Guide to: Better and Sharper UI Icons with Web Fonts
   









Read More »


Freelancers: Should You Abandon Low-Paying Clients / Jobs?


This article is part of our "Guide to Freelancing series" - consisting of guides and tips to help you becoming a better self-employed. Click here to read more from this series.
At the outset of my freelancing career, I would always fall into a dilemma while quoting my price for freelancing jobs. It was difficult for me, because on the one hand, I didn’t want to lose out on jobs by quoting too high a price; on the other hand, I would also prefer not to be underpaid. That’s the story many freelancers face during their freelancing career.


Every freelancer at some point (but more often at the initial stages) of their career had to be content with low pay. It’s rare to find anyone who starts off a freelancing career with high paying jobs. That would come much later on after they have already proven their credentials, credibility and their worth.
Read Also: Why Don’t People Want To Pay For Good Design?
Stepping Stones
It is important that freelancers learn to give due significance to low-paying jobs. Such jobs have its own place in the professional ladder of success. These low pay jobs act as a platform for achieving greater success.
More importantly, it prepares you to get hold of better jobs. It also teaches you the intricacies of the freelancing trade.


Whether you are a designer or a writer, or any other kind of freelancer, low pay jobs allow you to be more relaxed, and work with greater freedom. The fact is, a certain degree of freedom helps in building your expertise.
Remember, low-paying clients are more tolerant, allowing you to learn while you work. High-paying clients are not so forgiving, because you are expected to deliver high-quality results for the price they are paying you.
The Perks of Lower Expectations
I vividly remember when I started out in my freelancing career. I faced difficulties in landing regular jobs, except for one client who would give me regular jobs. I may or may not receive jobs from other clients, but I will always have my hands full with jobs from this client. She had plenty, and she paid me low sums, but she kept me occupied, and more importantly, she pointed out my mistakes to me.
You may be interested in: How to Deal with Criticism in the Freelancing World.
I was given to opportunity to rectify them and perfect my craft. And the results were clear. I improved and better offers came pouring in. And that’s when I realized that my low-paying client had been teaching me the intricacies of the trade, even without me asking for it.
Abandoning clients?
High-paying jobs are usually reserved for experts, those who have proven their skills, and have learnt their trade. Those who are now ready to unleash their skills and expertise in highly professional (and sometimes cut-throat) environments.
Evidently, it is never easy to get high paying jobs regularly, unless you have been around for a number of years and have established your freelancing reputation and career.
However, once they got a couple of high-paying clients, many freelancers  (whom I know personally) start taking things easy. They abandon their old low-paying clients, as they think that they now have the experience and credentials for better clients.


The results became distinct with time. As these freelancers bask in their newfound glory, they will complete their assignments only from high-paying clients then sit idling for long periods of time, waiting for their next high paying project to drop onto their lap.
Losing their Touch
Since they begin working less, and waiting more, they now have fewer opportunities to practice their skills. Some lose their edge and winning traits, and worst of all, the lack of jobs has made them lazy. That is something freelancers should be wary of.
Freelancing is not just about getting projects and earning money, but also about understanding the beauty of freelancing and the discipline you need to have to be in the business. It is also a profession which is networked and based on mutual respect.
Read also: 9 Things You Should Know About Freelancing Full-Time.
Why stick to low-Paying clients?
If the question here is "should freelancers completely get rid of low-paying clients, after they get high paying clients" then the answer is definitely no. The fact that not all freelancers are able to get highly paid jobs regularly, is enough reason for them to stick to low-paying clients as well.
Also, the fact remains that there is always a dearth of high-paying jobs. These jobs quickly fall on someone else’s lap as soon as it arrives. Therefore, to strike out low-paying clients from your contact list is an act that is not recommended.


Even if you have started getting high paying clients, keep working for at least a few low-paying clients. You never know when you could hit a dry spell. Freelancing insecurities may catch up on you and they are very real sources of worry.
Strike a balance
Nonetheless, there is a need for you to strike a balance when selecting which project to take up and which to reject. There is a thin line that separates highly successful freelancers from mediocre ones.
The highly successful ones strategize their career and always make full use of their precious time and every opportunity. They understand that opportunities might dry up soon, and therefore, they build a database of clients and work to satisfy all of them. They know how to deal with crunch times, and almost always have their hands full.


Freelancers who have attained average success, may fall into the trap of being overconfident. True, they will look to seize high-paying opportunities, but when they get one, they actually believe more of these opportunities are around every other corner, ready to come knocking on the door.
Even if they don’t believe it, they act like it when they start neglecting their previous low-paying clients. These freelancers face may face acute shortage of work and will probably learn the hard way that it takes time and effort to build a good clientele.
Improving your standings
The success formulas change very fast in a freelancing world. For those who have just entered the practice, and only have one or two high paying clients, they should also keep good number of low-paying clients, so that they don’t fall short on work.
In the meantime, they should keep improving their reputation and keep working to get more high paying clients, which is never easy even for well-established veterans. If you are a very skilful freelancer, with time you will be able to get better clients.
By the way, never ever spoil your relationship with any of your clients – you never know, when times can change, and you might again have to start reaching out to your old clients.
Read Also: 5 Ways You are Losing Your Clients.
Wrap Up
The story may differ from one freelancer to the next, but for me, low-paying clients were responsible for my progress. And I still feel grateful to them. Once you have established yourself in the trade, it may not be possible to work for any or all of them, for the long term, but it is important for you to acknowledge their contribution nonetheless.
Related posts:
Freelancers: How to Deal With Insecurities
Freelancers: 5 Ways To Lose Your Clients
10 Things Freelancers Don’t Like Hearing From Clients
Freelancers: How to Work Better with Your Clients
   









Read More »


Ultimate Resources For Mobile Web Application Design


The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire webapps using only HTML5 and CSS3. Coupled with many JavaScript libraries the possibilities for mobile development are endless.
In this post, I have put together just over 70 resources for developing mobile websites and web applications. This collection is more focused on HTML5 / CSS3 / JS webapps as opposed to frameworks or native applications. The purpose is to give your mobile webapp a similar look & feel commonplace with native interfaces.
Recommended Reading: A look into: Designing for Mobile Devices
PSDs & UI Graphics
Free PSDs are generally the most helpful assets to web developers. If you are not savvy in Photoshop then it can be stressful attempting to design a beautiful interface. Likewise this set of graphics will include plenty of buttons, forms, textures, toolbars, and other helpful GUI kits.
iOS 6 GUI PSD
The mobile GUI kit by Teehan+Lax is an infamous resource for all mobile developers. Even native iOS programmers genuinely enjoy this mobile kit for the precision of each element. All of the buttons, gradients,  dropdowns and menus look exactly as they would on a native iPhone 5.
Android Interface GUI
Similar to the first GUI kit we can also find mobile elements related to Android-based native applications. Depending on how you want to style your mobile webapp these two graphics packs may provide everything you will need. Sticking with basic styles will make your designs appear more blended into the device.
Passbook iOS6 App UI PSD
As for more advanced UI kits we have this awesome iPhone app design PSD. This is for a mobile app Passbook which includes a series of screenshots from different pages. The whole design is layered and free to download.
Tooltip iOS App UI
Menu tooltips are not as common but this doesn’t mean they serve no purpose in an HTML5 webapp. The icons and button styles may be repeated either through images or CSS3 codes. This will give you a leg-up on the competition with a rich interface style.
Fresh iPhone UI Kit
The designers over at MediaLoot publish both free and premium content. However a lot of their free content is still of exceptional quality. This UI kit is labeled Fresh iPhone and displays a helpful iOS app design. You can work with the PSD graphics to duplicate similar title bars and gradients/textures in your own webapp.
@2x Navbar
Another fairly obscure element is the tabbbar found on many iOS applications. Mobile websites do not often have a means of using this properly since the switching between pages would require some JavaScript. But if you are going this route you will be providing a more native feel to the application. And using this free PSD, it’ll be much easier to customize the gradient and icons.
Leather iOS Menubar PSD
The top toolbar design is also a prominent area of screen real estate. Especially for mobile applications where you do not often have room for a big flashy header. Check out this free PSD which offers a leather textured iOS-style top menu bar. It has easy customization for different color schemes and provides a much cleaner UI for developers.
Free iPhone UITabBar PSD
This particular iPhone UI PSD kit released by Virgil Pana is an exciting look into designing native iOS interfaces. The PSD graphic includes a top title menu bar along with a footer tabbar. Plus the center tab icon is actually inflated to be larger than the rest, a common design style among iOS app developers.
Raindrop iOS Toggle
Toggle switches are actually native to iOS devices but not found anywhere in HTML5/CSS3. Using this PSD graphic you may attempt to build a similarly styled toggle switch with a more pleasing color scheme. The backgrounds are much deeper than the normal interface elements plus the text is also larger and easier to read.
Cloudy UI Kit
365psd is an amazing website which is still publishing new freebies continually every day. Going back in time a bit I want to reference the Cloudy UI Kit which is full of amazing graphical elements. We can find buttons, search bars, sliders, on/off switches, dropdown menus, and tons of other cool stuff.
Map Pointers
So many native Android and iOS applications will focus on geolocation. HTML5 web applications have also been created around APIs such as Google Maps. And these mini map pin icons are the perfect companion for any style of mobile webapp.
Mobile and Web UI Kit PSD
The “Mobile and Web” UI kit is fantastic when putting together your average run-of-the-mill interface. These are not common styles but they provide developers with an excellent starting point. The PSD is completely free to download and includes plenty of elements to choose from.
Mobile iOS App Navigation
Some mobile designers will use a fixed top navigation bar as opposed to mirroring the iOS tabbar effect. This free PSD graphic is built around the very idea of mixing the tab buttons into a fixed toolbar. You can update the gradients and icons to blend nicely into any theme.
Mobile Downloads UI Freebie
DeviantArt is a great community full of very talented artists. This particular freebie download includes a mobile app screen featuring loader bars. When making an advanced webapp you may need to handle avatar uploads or similar content posted by users. This window UI should provide an excellent starting point.
iPhone Wood UI
The wood texture is another great feature we will find all around the Web. Both full-screen websites and mobile apps have been pushing out more interest towards detailed textures. This PSD freebie has some tabbar icons and a top toolbar which is worth checking out.
iPhone App UI Freebie
We saw a similar mobile iPhone UI PSD earlier in the list and I want to mention this kit as a companion. The features here are dialed down to appear more commonplace. The gradients and buttons are very simple and will match almost any design type.
Twitter iOS App Icon
The iOS app icon style is brilliant and reflects the current advancing era of technology. I feel this PSD freebie is a good piece of design inspiration for young app developers. It is very simple to apply meta tags into your HTML5 webapp for styling a custom iOS icon graphic onto your user’s homescreen.
Flat GUI Elements
The flat metro-style web elements are growing in popularity. Mobile webapps can benefit the most since they are working with very small screens. However some designers would rather not go this route and feel the more detailed graphics will catch the eye. It is worth a peek to see if these elements could work well in your own layouts.
Mobile Quick Menu PSD
This freebie PSD offers a mini vertical quick menu with icon links for navigation. Theoretically the user may tap on the nav header which will animate to display more links. This is one amazing freebie and it is worth keeping in your mind for use on any future projects.
UI + UX Mobile Fold
Recently we published an article explaining how to build a sliding mobile nav just like this PSD. By using a bit of jQuery the process is very simple and does not require a lot of development knowledge to implement. Check out the freebie and see if you think this would be worth investigating.
Mobile Templates
The process of sketching out your mobile webapp can be difficult. It is often more tempting to jump right into coding and detail the layout afterwards. But taking the time out for planning your results can be a huge help. This small collection of mobile stencils and wireframes should help you out with this task. I have included wireframing templates for both Android and iOS devices.
iPhone 5 Homescreen Template
Would you want to check out how your app icon will look like on the homescreen of an iPhone? This free PSD template is the perfect solution. Attach your app icon into the PSD and scale it down to overlap the blueprint icon. You can get a sneak preview and this provides a nice graphic to be published somewhere on your website.
iOS App Icon Template
Almost every iOS designer/developer must know about Michael Flarup’s iOS Icon template over at Pixel Resort. Recently he purchased a top-level domain for AppIconTemplate.com where you can download this free PSD. I must 100% recommend grabbing this freebie if you plan to support your mobile webapp to be saved onto the iPhone homescreen.
Google Play/Android App Icon Template
And in a similar vein we also have a beautiful Android app icon template for designers. This is also a free download and the PSD is set up much in the same way as above. However the standard icon sizes are much different compared to iOS. And if you are developing for both platforms you will want to check them out anyhow!
AppView iPhone UI Theme
I like to think of the AppView theme as more of a template for minimalist designers. This PSD set will include all of the typical interface elements you expect to find in iOS applications. It makes the perfect starting ground for adding your own content and setting up basic page templates for your webapp.
Android UI Template for Fireworks
Developers who are going after the Android graphics style will want to look into this UI kit for Adobe Fireworks. It is a free download and provides an excellent source of common screens for your mobile webapp.
Lookamore
The Lookamore Android UI Kit is absolutely stunning when it comes to basic templates. You will definitely want to check out the entire freebie which is full of PNG icons and other mobile elements. The resource includes HDPI resolutions which are even better on hi-res screens.
iPhone 5 Grid
When constructing your basic webpage template, this grid PSD may be of some use. The iPhone 5 is everywhere and lots of Apple enthusiasts have already picked up the new technology. The horizontal grids should fit similar into iPhone 4 and 4S devices, so it makes for a revolutionary template.
Illustrator Template for iPhone
For users of Adobe Illustrator this iPhone template design will be a much smoother transition. The UI kit is more of a wireframing template for mobile webapps. You can choose from a dozen various screens and manipulate the elements to fit perfectly with your own layout.
Android Sketch Stencil
These Android stencils are another tool for building your core wireframe. Keep in mind that your mobile webapp does not need to mimic either of the mobile operating systems. But it does help using the default elements as a starting point for your projects.
iPhone Sketch Elements AI
Similarly you can find Adobe Illustrator elements and stencils used for iPhone app interfaces. These AI kits will include vector sketches which may be resized and scaled down without any quality loss.
Wire Devices Freebie
The wireframe devices are a nice tool when originally building templates for various smartphones and tablets. I do not think this is a freebie which will help everybody. But it is worth looking into the details if you plan on launching a multitude of mobile webapps.
Interface Sketch
I just recently found this Tumblr page which is full of helpful freebies. These templates are actually loaded into Google Drive and they are all free to use. Another example of something which may not help everybody, but these interfaces will be useful to a specific sect of designers.
iPhone App PSD Template
This freebie iPhone app PSD template is courtesy of PixelsDaily. Their library includes many helpful mobile graphics but this particular iPhone interface offers a tabbar and icon sets. Plus a homescreen and content page design for your own customizations.
Icon Sets
What mobile webapp would be complete without a series of related interface icons? Think about all the places you will find these glyphs and symbols. The top navigation toolbar and bottom tab bar areas will frequently use icons to represent button actions. Plus you may embed icon sets into your page content for a more visual approach on mobile screens. Most of these collections will include a retina version along with the standard icon sizes.
30 Free Vector Icons
To start off the icon sets I found this beautiful collection of vector icons from Dezinerfolio. Since the icons are vector-based they may be easily resized and positioned for retina devices.
Free iPhone Toolbar Icons
PixelPress Icons are actually marketed as iPhone app toolbar icons. The glyphs are styled as white-to-grey and should be used on a darker background. Also the icons are totally free for personal and commercial use.
Gemicon
The Gemicon set has to be included within this series of resources. Their pack offers over 600 icons which are beautifully crafted and will fit into any layout with ease.
Free iOS Tabbar Icons
Another series of perfect iPhone toolbar app icons. When redesigning your ideas for an iPhone UITabBar in HTML5/CSS3 it may require a lot of extra time squashing bugs and UI fixes in different browsers. But with such powerful interface features it will be worth the effort.
100 Retina Glyph Icons
Just recently Speckyboy published a collection of free retina glyph icons for mobile designers. These icons may be used anywhere in your layout and can also be placed @2x for high DPI screens.
MFG Labs Icon Set
MFGLabs has a good track record of releasing freebies into the design community. The landing page really stands out as you can see how these icons may be placed into a typical layout style. Grab a free download of the pack and toy around in your own time.
Web0.2ama
These well-designed icons are also useful in typical mobile content areas. Not all mobile webapps will need loads of icons aside from interface features. But the collections are all free of use and free to download.
Android Developer Common Icon Set
Most of the collections we have seen pertain towards Apple-inspired iOS icons. However the Android GUI pack also have a lot of native icons you can find. And this freebie set is perfect for mobile developers who are looking to mimic the Android interface feeling.
Clean Icons
Clean Icons from IconDeposit are a bit too small for use in tabbar elements. But they are just the right size and shape for interface features and toolbar buttons. The graphics are colored white to gray but you can update the colors & effects in Photoshop.
350 Freebie Glyphs
The brankic icon set includes over 350 glyphs for use anywhere in your mobile webapp. These were originally designed as iPhone tabbar icons but they are perfect for any interface. Check out their gallery and you may be surprised at the many variations.
IconBeast Freebie Pack
The IconBeast freebie pack is also full of beautiful glyphs for iPhone tabbars. The grey-colored pack includes over 300 icons which are sized out for retina devices.
Device Storage Icons
This mini device storage pack really stuck out to me and I wanted to include the set here in our mobile resources. These are monocolored icons which fit nicer into your content, in paragraphs, or in menu buttons.
Rectangle Icons
The rectangle icons are another solution for bare content aesthetics. These can easily be updated in size and color, plus they will fit nicely into any mobile layout.
Shades of White
The Shades of White are strangely built for a more deeply colored background. This BG may be your iOS-style title bar. But it could also include a content widget or webapp footer area.
Icns Free PSD
As opposed to the other icon sets, this pack is built into a free PSD as opposed to vectors or PNGs. This means you have the ability to move the icons and update their sizes, colors, and textures right inside Adobe Photoshop!
Native Android Icons
Finally we have some more native Android-based mobile UI icons. This freebie is an excellent addition to the set which is mostly controlled by iOS styles.
Online Tools
Admittedly there are not as many online tools and webapps used for building mobile sites. However the tools which are online can provide lots of help in expediting the development process. Web tools can make your job easier by providing HTML5/CSS3 code templates, icon generators, smartphone demos, and lots of other goodies too.
MakeAppIcon
MakeAppIcon is possibly the greatest tool online for mobile developers. If you do not have the time for resizing and creating the different icons, this webapp will handle the job for you. It is completely free to use and will work with all the common icon formats.
Icons DB
If the icon sets listed above are not enough you can always check out the Icons DB. Their database is packed with new open source GPL icons for use in your own applications. Just do a search on the website or click any of the related tags in the sidebar.
Mobile HTML5
Mobile HTML5 isn’t as much of a webapp as an online resource. Their page is coded with a graph displaying all the differences in rendering mobile HTML in browsers. This takes into account many of the different iOS apps, along with Android-based web browsers.
HTML5 Mobile Webapp Videos
Treehouse is a new online learning library which helps developers to pick up new skills. Their video library includes CSS3, HTML5, jQuery, and even Objective-C programming. This page in particular handles HTML5 development for mobile web applications. Check out some of the features to see if you would be interested in studying any of the topics at hand.
Mobjectify
Mobjectify is a mobile wireframing toolkit which works directly in-browser. Just navigate onto the homepage and you will be setup with your own workspace. It is a fun tool even if you are not familiar with the wireframing process.
Mockup Designer
Mockup Designer is a tool hosted at Github which is free for everybody. They provide very basic interface elements for structuring your own layout. Extremely helpful if you are just getting started building layouts for mobile webapps.
Manymo
Manymo is an online tool for emulating mobile browsers. You can double check if your webapps are behaving properly without even owning the original devices. The basic services are free to use and generally provide excellent results.
Initializr
If you do not have a bare-bones HTML5 template then I recommend checking out Initializr. It is a free web tool which will bundle and package HTML5/CSS3 codes as a template for your projects. This will save you time during development and dramatically cuts down your coding requirements.
Open Source Code
The final piece to building a mobile webapp is the code. All frontend developers have at least heard about responsive web design. I want to point out this is not always the way to go when building mobile webapps. However many of these plugins and code frameworks allow for mobile responsive web design, which is great when supporting desktop browsers too. You will also find code snippets which mirror the native effects of Android and iOS smartphones.
Jo Mobile Framework
The open source Jo framework provides an easy solution to HTML5 mobile webapps. Not all developers will feel comfortable using a framework. But it is a solution if you are interested in testing other 3rd party templates.
iOS.js
iOS.js is a powerful JavaScript library which updates the look and feel of your webpage. It will force certain features to behave as if they are rendered natively on an iPhone. There is very little support for non-JavaScript users but it’s a nice library worth some attention.
jQuery NiceScroll
jQuery Nicescroll is a really cool plugin for mobile web developers. This will add native scrolling bars onto any elements you choose. These are much better than the Mobile Safari toolbars which extend up into the browser header.
iTabbar
Remember all those tabbar icons and glyphs we provided earlier? They can be used in conjunction with this free script iTabBar. This will provide a basic HTML5/CSS3/JS framework used in creating mobile webapps with the need for tabbed navigation.
Lungo
Lungo is an HTML5 cross-device framework for building native mobile webapps. It is supported by Android, iOS, BlackBerry, and Palm OS. The codes are fairly easy to implement and definitely worth checking out when you have the time.
iOS ScrollPane
You know how you can flick left/right on the iPhone home screen to switch between icons? This exact effect has been duplicated for the web as a jQuery plugin. iOS ScrollPane is a free resource for your webapp to duplicate the same home screen effect.
PhotoSwipe
When comparing mobile responsive slideshow plugins I will have to recommend PhotoSwipe. Their documentation is very simple and the support is phenomenal. Both smartphones and tablet PCs will benefit from this jQuery plugin.
iOS-Style jQuery Mobile Theme
Another awesome package on Github is this iOS-style jQuery Mobile theme. Most frontend web developers know about jQuery Mobile which offers a dynamic HTML5/CSS3 mobile interface. If you enjoy their library then you’ll definitely want to try out this theme which replicates iOS native applications.
jQuery slideToucher
slideToucher is a jQuery plugin for adding swipe-to-slide panels into your mobile app. These will not work the same in your desktop browser with the mouse navigation. So although this plugin can be great for mobile users, it is not ideal for responsive websites.
Sencha Slide Navigation
Sencha Touch is an exciting mobile HTML5 framework used for building in-browser webapps. This code will help you implement a sliding navigation feature into any Sencha mobile app.
LimeJS
Along with the typical mobile web applications there are lots of designers who are interested in HTML5 mobile games. This open source Lime.js library is an HTML5 framework for in-browser games. It supplies native touch gestures and it also supports powerful extensions through JavaScript codes.
Custom Content Scroller
Out of all the jQuery plugins here I think the Custom Content Scroller is my favorite. This will mimic the iOS style of sliding content which may be applied onto any div or section on the page. You can swipe to scroll or click & drag on the semi-transparent OSX-style toolbar.
Junior Framework
Junior is a much more polished and refined HTML5 framework for building mobile webapps. Their website has a lot of demos and the documentation is very easy to read. It may require a bit of initial upfront work to nail down the basics, but it is a step forward in supporting mobile HTML5 webapps.
iOS-Style Checkboxes
We all know about the native ON/OFF switches found within iOS. This jQuery plugin will allow you to style any input form checkbox element to behave like a slider. The codes are free to download and very easy to get going on any website.
Luckyshot HTML5 iOS Template
The Luckyshot template is a free open source HTML5/CSS3 project for building layouts similar to iPhone and iPad applications. The whole framework is built without any JavaScript and it is fully responsive to fit naturally into all monitors and mobile screens. Anybody looking for an HTML5 solution to natural iOS webapps should definitely check out the Luckyshot framework.
Final Thoughts
This exhaustive collection of mobile codes and GUI kits should provide a library for new developers. As trends advance we will likely see a whole new onslaught of tools and resources being published online. I am hoping this guide will offer a bold starting point to getting your webapp idea launched on the right foot. But if you have any questions or additional resources we may have missed, feel free to share your thoughts in the post discussion area.
Related posts:
Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile
Mobile App Design/Dev: Custom Themes with jQuery Mobile
Mobile App Design/Dev: Building Navigation with jQuery
A look into: Designing for Mobile Devices
   






Read More »
International Marketing: Why Cultural Awareness Is Important


Cultural awareness among international traders, is not as new as marketing pundits believe it to be. When the East India Company came and began spice trade in India in the 17th century A.D., they gave special  significance to Indian cultural values to get into the thick of things. But competition, perhaps, was not particularly stiff at that point of time, although early traders are aware of the potential it has in their trading strategy.


Nowadays, companies that are going global with their products have to contend with local companies who are armed with vast knowledge on how the locals react to a certain cultural pulse.
They had also established their presence much earlier – they were there first. Thus, the newcomers must make sure that their products and promotional techniques are sensitive to cultural values of the people to leave a good impression of their branding.
Recommended Reading: How To Design Websites That Communicate Across Cultures
Crossing the barriers
Cultural awareness should be applied in every aspect of marketing: in selling, label-printing, advertising and promotion of products. It covers language, the lifestyle and the behavioural patterns of the people in the country of interest. Of course the company should print in the local language, but that’s not where the language barrier ends.
Companies have to be aware of what their brand names will do to their company image on foreign shores. As an example, Koreans pronounce Hyundai as "hi-yun-day" but when it comes to producing marketing advertisements in the US, it is pronounced "Hun-day" (sounds like Sunday).
The change makes it easier for people in the US to pronounce the brand which is an important step to popularizing the car brand. At other times, the brand name means something else in the country for instance, the name for the baby food maker ‘Gerber’ is French for vomiting! Most of the time, the brand is rebranded under a different name to avoid embarassment.
For more info on different name variations in different countries including Unilever’s signature move with its Heartbrand ice cream brand (here’s a list in Wikipedia, translated) check out the answers in this forum.
It’s in the details
It’s not just the language used in the labeling or a TV commercial made to promote your company products, how the ad is created can make a lot of difference.
For instance, a car manufacturer should ensure that its ads take note of the position of the driver’s seat. An ad showing a left-handed drive vehicle would not work in a country where the driver sits on the right-hand side. The commercials should also be sensitive while using dialogues and slogans in its content.
Speaking of slogans, there are a lot of instances when translations became a source of embarassment for a company brand. An infamous (yet unconfirmed) example is at hand: ‘Come Alive with the Pepsi Generation‘ was translated to ‘Pepsi will bring your ancestors back from the dead’ in Chinese.


With all the possibilities of mistakes that could happen, why bother translating to the local language at all? Apparently, more than 70% of consumers are more likely to buy a product that is sold in their local language; the percentage is 10% higher when it comes to buying goods online. It is essential for companies to adapt to local preferences if they want their product lines to succeed.
The Bane of Current Issues
There are also certain current issues that may force a company or organization to take a step back and re-evaluate their marketing slogans. For instance, in 2003, Hong Kong’s Tourism Board released their slogan, "Hong Kong will take your breath away" to help promote tourism via billboards and magazine ads.


This unfortunately occurred right before the SARS (severe acute respiratory syndrome) outbreak. The worst thing about the whole situation was that shortness of breath is one of the major symptoms of SARS. The tourism board quickly made the change to a new yet less-than-original "There is no place like Hong Kong", but by then some of the magazines were already making their rounds in the UK.
Product specifications
Understanding customer preferences is a tricky issue, even when it comes to the serving size of your product. This issue is dependent on local cultures and also the consumption level of consumers of the region. For example, cereal isn’t a preferred choice for breakfast in Asian countries, so there isn’t much motivation to produce it in large servings (or boxes).
It is also not a smart move to push products against the local culture, but if you are confident in your product, it is all right to be adventurous (and experiment with various serving sizes). When testing new markets with new products, there will always be the risk of suffering losses so one should always do their homework when it comes to culture-influenced preferences.
Getting the brand out there
Customers are reluctant to buy without first hearing or knowing about a new brand. When mobile phones entered India in the late 90’s, people were not willing to make outright purchases. The rich did but mostly out of curiosity that were induced by promotional adverts and the hype generated by company branding exercises. As soon as call rates subsided, a big market was created and people thronged everywhere to buy one.
It’s hard to convince one to buy, or even try a product that came out of nowhere. Customers would make the shift from hearing and knowing about a product, then recognizing the brand that produces it before trying out the product.
Read Also: 5 Tips To Better Brand Names
Helping customers make this connection with their brand and products is essential and that’s where cultural awareness comes into play. If entrepreneurs use and implement their knowledge, it would immensely help in developing a successful international marketing strategy.
Related posts:
Internet Marketing Avenues for Web-based Company
A Brief Guide to Pinterest Marketing
Email Marketing: Tips to Do it Well
5 Mail & Parcel Forwarding Services For International Shoppers
   









Read More »


How To Create Custom Keyboard Shortcuts For Office 2013 [Quicktip]


Everyone knows that common keyboard shortcuts not only improves your productivity but also increases your overall typing speed. However, not all actions on Office 2013 have default keyboard shortcuts, some of these common actions include, changing font color or size and strikethrough text.
It would be fun to have shortcuts for these actions though especially when you have to do them over and over and over again.
In this post, we’ll show you how to assign shortcuts to these actions. This trick we are showing you works for almost all commands you can find on Office 2013, namely Word, PowerPoint and Excel, the more common Office products.
Recommended Reading: 50 Windows 8 Keyboard Shortcuts You Should Know
Custom Keyboard Shortcuts For Word 2013
Out of the 3 Office products we’ll be featuring here, only Word has the option to use custom keyboard combinations to trigger an action. Keys that we suggest to use would be a combination of Ctrl, Shift and Alt followed by a letter.
Here are some examples:
Start Word 2013 and navigate to the Options section by clicking on File > Options.
Then navigate to Customize Ribbon and you’ll find ‘Keyboard shortcuts’; click on the Customize button next to it.
Let’s first explain the things you see on this new window that pops up.
Commands are the actions you normally do on Word, for example Bold and Italics. These commands are in Categories based on the tabs in Word, e.g. the ‘Home’ tab or ‘Page Layout tab.
This arrangement means you’ll easily find the command you want to customize as a keyboard shortcut.
We’ll now demonstrate how to add a keyboard shortcut to the Strikethrough command on Word. You’ll notice there is no shortcut key for Strikethrough — the ‘Current keys’ box is empty.
Click on the ‘Press new shortcut key‘ box and personalize a keyboard combination shortcut. In this case, we used Alt + S.
You can see that the combination Alt + S is not taken because it’s unassigned. This is important as you do not want to double assign a combination. After that click on Assign.
You can see all the assigned shortcuts you have for each command in the ‘Current keys’ box. If it is empty that means you have yet to assign a shortcut to the command. Click Close when you’re done.
Now whenever you highlight text with your mouse, you can press Alt + S to Strikethrough it. Again, this is not just limited to Strikethrough but any command you set with a keyboard shortcut combination.
Custom Keyboard Shortcuts For PowerPoint & Excel 2013
There are some limitations creating shortcuts on PowerPoint and Excel as you don’t get as much flexibility compared to Word. However, adding keyboard shortcuts is simpler for both PowerPoint and Excel.
Let’s use the example of the AutoSum button. When you need the values of certain fields added up together, you use the AutoSum function. It’s handy to have a keyboard shortcut assigned to that if you are doing your bookkeeping, for instance.
To add a keyboard shortcut to AutoSum, right-click on it and select ‘Add to Quick Access Toolba’r.
It’ll be added to the top left corner of Excel, in the same row as the ‘Save’ and ‘Undo’ icons.
To activate this shortcut, all you have to do is hit the Alt key on your keyboard. You’ll see a number corresponding to the shortcut, in this case it’s the number 4 that activates the AutoSum command.
You can do the same thing to any other command or action you need to use on both PowerPoint and Excel (this also works for Word). Just right click on the button and Add it to Quick Access Toolbar.
Related posts:
How to Set Keyboard Shortcuts for ‘Play Action’ in Photoshop
How To Integrate Dropbox & Google Drive Into Office 2013
How To Assign Shortcuts to Any Program in Windows [Quicktip]
Working With Windows + MS Office on iPad [Quicktip]