Design, Develop, and Grow
You don’t need anyone to tell you that web development is a crowded industry. This is especially true when you’re forced to go head-to-head with cheap overseas labor and other online entrepreneurs. However, there are still plenty of jobs for you – you just can’t afford to mess up the interview process. In fact, you need to ace it. [Read more…]
What’s in your toolbox? Come on, don’t be shy. Every developer keeps a list of tools handy, and the contents of every developer’s toolbox are different. Sure, there are some standards: Notepad++, Browser Stack, Bootstrap—but not all digital toolboxes are created equal. It doesn’t matter what field you work in; specific jobs require specific tools. Some devs work exclusively on desktop projects, some of them focus on developing custom mobile apps, and others might be working on something more experimental, but they all need a good assortment of programs, apps, shortcuts, and interfaces to get the job done.
So, what’s in your toolbox? If your answer doesn’t include at least one of these nine items, you may be falling behind in the times. That’s because we’ve compiled a list of this year’s best tools for web developers, mobile developers, and designers of all kinds. Take a look, you might just find something you can’t live without. [Read more…]
You spend a lot of time designing a website to attract users and convert them into customers. However, what many entrepreneurs don’t realize is that it’s just as important to choose a good web host as it is to choose a good Web designer.
Often, new site owners go with the cheapest and easiest Web-hosting option, thinking that the host doesn’t matter as people can access the site. But a bad Web host can do as much damage to your business as bad content can, so it’s important to monitor your site’s performance to identify hosting issues before they do permanent harm. That means being alert to the following signs
that it’s time to make a change. [Read more…]
Design doesn’t just happen in software, editors, or the browser—it often starts offline with the simplest of tools: pen and paper. With that in mind, let’s do a round up of helpful analog tools that can aid you in the process of brainstorming, doodling, sketching, wireframing, or prototyping by hand.
The BASICS Notebook keeps you both productive and creative so you can stay on top of your project timelines and do the ideation in one place. It has different page layouts like calendars and checklists plus blank sheets & erasable whiteboard pages right in the palm of your hand. It also has practical features like a back pocket for loose leaves and just enough of a gap so you can tuck in your pen at the top.
UX Kits Website Deck gives a tactile approach to website mapping & information architecture. Each card in the “deck” represent different types of content or interface patterns you can lay out and rearrange as you plan the the site or app structure. Numbered from 1-53, they’re also portable & reusable.
Whitelines produces pads & books that, as the name suggests, sport white lines on their sheets. One of its products, Whitelines Link, has marked corners which helps its companion app digitally capture your ideas.
The Psychology of Colour Pencil Set consists of 12 colored pencils, each labeled with a word conveyed by its corresponding color. The set also includes a booklet that expounds on those concepts.
Dotgrid features different incarnations of notepads and papers with dotted grids on their sheets. Special editions like a birch wood cover and a tribute to Steve Jobs are available.
The Magnetic Blackboard Wallpaper lets you draw and stick stuff at the same time without the bulk of an actual board or the need to paint your walls. It’s available in three sizes: 63.5 x 265 cm, 127 x 265 cm, and 127 x 100 cm (width by roll length).
UI Stencils lets you sketch out different user interface elements on paper quickly with the help of different stainless steel and plastic stencils. They also have pixel rules & pads of browsers and mobile devices.
BreakThroughColour Cards + Cubes lets you explore or even play with a wide array of colors through dozens of colored cards and cubes. It special numbering system and and codes on the flip-side of the cards reveal how their vary on hue, saturation, and value.
These days, before people click on your site they will probably see it through a link shared on your social network of choice, such as Facebook, Twitter, Google+, and so on. Usually these sites are smart enough to extract descriptive information about your page and display that so followers already get a good idea of what they’d be clicking on, but wouldn’t it be great if you could optimize that information to ensure you get more engagement?
With a bit of HTML knowledge (and perhaps some programming knowledge, depending on what website templates you’re using), you can make more sites more “sociable” by adding these tags to the <head> portion of your site. Text in {CURLY BRACES} are placeholders for the values you need to insert.
<meta property="og:url" content="{URL}">
Use this to show the canonical url of your page, free from various query variables or tokens. If you use a CMS like WordPress, this can be automatically generated for posts and pages through a function like the_permalink()
<meta property="og:title" content="{TITLE}">
Use this to show the title of your page. By default sites like Facebook usually get the text from the <title> tag, displayed on the browser title bar or tab name, but that usually contains extra stuff like the site description. With a custom OG tag you can opt to modify that to your liking.
<meta property="og:type" content="{TYPE}">
Use this to indicate the type of content your link is all about. Of course all links are websites, but they can also be more specific things like articles, products, books, movies, restaurants, and more.
<meta property="og:type" content="{IMAGE}">
A lot of times the images that displays with your link can encourage or prevent people from clicking, so make sure that you define this. There are optimal sizes for what Facebook, Twitter, and Google+ recommend, so be sure to check their individual documentation on that.
<meta property="og:type" content="{DESCRIPTION}">
Similar to title and image, you’ll want to optimize the description of your webpage since there is only so much text social networking sites can include in their link previews.
When you’ve plugged in the above tags, you’ve pretty much guaranteed Facebook and Google+ to display your website links the way you customized it. However, Twitter has a couple more tags you might want to integrate, including twitter:site, where you can plug in the Twitter handle of your website, and twitter:creator, a different person or organization that is behind the website.
Twitter also has content types called Cards, which lets you specify the most appropriate layout for a link preview—whether it’s a summary card, a summary card with a large image, an app card, or a player card. Each card type emphasizes different data, so choose wisely or switch things up as you see fit.
Finally, it’s always the best practice to test things before rolling them out. Check out the links below for more detailed documentation and tips for sharing content on each social network:
