This Week’s in Web Development (Week #7)
With our current project load it is insanely hard to keep up with the Simplified Source Blog. As of right now I will be trying to post either resources/code snippets that are helpful or a weekly summary of articles and resources in regards to Web Development and Design. I hope that these articles are helpful. Each week I can say that I have a different interest than the week before. Therefor this article takes a turn each week from SEO to Wordpress to CodeIgniter to Social Marketing to Android and so on. Enjoy.
Google Releases “Dartium” Browser for Developers
Google is trying to get developers interested in Dart with a technology preview of the Dart VM in Chromium, better known as Dartium. The plan is ultimately to include the Dart VM in Chrome itself, but no timeline has been given yet for that.
Google has been pushing pretty hard to move Dart forward. The company released a Rosetta Stone for JavaScript programmers called Dart Synonym at the beginning of February. However, developers have had to compile Dartium from source or find unofficial builds to test the code.
Now it’s much easier to get ahold of a browser with the Dart VM. If you’re using Linux or Mac OS X, you can download Dartium today. Windows builds are not available yet, but should be available “soon.” [Continued]
(Author: Joe Brockmeier)
21 Examples of Excellent Navigation Menus in Web Design
Navigation is certainly a very important element in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. I believe we know that it’s extremely important that users understand navigation options to better explore a website and that is why today we are showcasing examples of navigation menus, to show how websites are presenting menus to their users. From the traditional header menu to side bar menus, footer menus and much more, you will see that there are a variety of ways to present your navigation options. So check it out and let us know which one you like most. [Continued]
(Author: Gisele Muller)
The Impending CSS Vendor Prefix Catastrophe
Developers have a love-hate relationship with CSS vendor prefixes. They allow us to use bleeding-edge technologies at the expense of long-winded declarations:
background-image: -webkit-linear-gradient(#fff, #000); background-image: -moz-linear-gradient(#fff, #000); background-image: -ms-linear-gradient(#fff, #000); background-image: -o-linear-gradient(#fff, #000); background-image: linear-gradient(#fff, #000);
It works well in theory but consider what happens in the wild:
- Experimental properties are often implemented in the webkit engine first and there’s no guarantee they’ll be replicated in other browsers.
- It’s often difficult to determine whether a vendor-prefixed property is part of the CSS specification. Some vendors don’t submit properties for standardization.
- Even if the standard property changes, the incorrect vendor-prefixed version continues to be supported. Your old code still works; you won’t revisit it to correct the implementation.
You’ll often find sites using the -webkit prefixes alone — even if other browsers support the property or it has widespread availability without a prefix (such as border-radius). Chrome and Safari therefore look better than competing browsers — and the other vendors aren’t happy. [Continued]
(Author: Craig Buckler)
Flexible Notifications With jQuery – noty
noty is a jQuery plugin for creating user-friendly, “JavaScript-alert alternative”notifications very easily It has built-in support for alert, success, error and confirmation messages and they can either be displayed as HTML elements that fade in/out or as modal boxes. [Continued]
(Author: WebResourcesDepot)
12 Things I Have Learned After 7 Years of Freelancing
At the age of 15 I started with this web design stuff. Here I am, almost 7 years later and I wish I knew a lot more about this field rather than learning just by my own mistakes. But you don’t have to pass through all of this, dear Padawan.
There are a few particularities in our field that unless you have a geek dad you would never think about… So if you are aware about what you need to do you can have a much simpler, more productive, and happier freelance life.
The crazy thing is that success is not (just) about coding skills alone. You have to build a whole environment to compensate the instability that you probably won’t face in a regular job.
Finally, here we’ll see a few tips for novice and experienced freelancers, ranging from controlling your finances to networking. And I really want to hear your advice and tips after reading this, because we always have something to share, right? So, let’s rock! [Continued]
(Author: Rochester Oliveira)
18 Android Apps for Designers & Web Developers
Although Apple devices have been getting a lot of attention there is plenty of great stuff to focus on with Google’s Android project. Their open source mobile operating system features a similar app store where developers can publish their ideas quickly and effortlessly. There are sincerely dozens upon dozens of fantastic apps to guide web developers & designers in completing project work.
This small gallery below contains 18 such examples of my favorite apps. Android users will love to try these out and see what kind of functionality can benefit designers, developers, and freelancers of all types. If you have similar apps of your own be sure to let us know in the post comments area. [Continued]
(Author: Jake Rocheleau)
Showcase of Annual Report Design
Annual reports are important for presenting information to a company’s investors, so having an annual report that looks professional and presents a good image can certainly help the cause. The design of the report is, of course, secondary to the content, but still important.
In this post we’ll showcase some examples of annual report design for your own inspiration. These samples come from the Behance Network, and in most cases you can see more images from each annual report by clicking on the image and following the link to Behance. [Continued]
(Author: Vandelay Design)
Seo Tools And Why They Play A Big Part In The Seo Industry
It’s no secret that there are thousands of tools available for search engine optimisation beginners and experts alike. They were all built with two things in mind; Making life easier and automation. Without them the work of an SEO would be slow and incomplete. It’s too easy to miss out steps in a procedure that has been put together, but tools that have been built to this prevent that happening.
Some tools are very simple and serve only a single purpose, such as extracting meta tags, checking for H1 and H2 tags or simply checking the page for its analytics code. But imagine extracting all of this information manually. The time it would take for each site is significantly longer than just entering a URL into a box and hitting go. However there are some tools which have been built to provide a multitude of information in one shot. These are the real time savers.
One good public example of this is the David Naylor Playground. This is a JavaScript pop-out which works with any website. It provides a range of information from hosting location to the number of links and keywords on the page. Another great site is Open Site Explorerprovided by SEOmoz. This tool provides you lots of off-page information that you can use as part of your off-page campaign, from links on the page to links pointed at the domain. Some information requires a subscription but the free version still provides plenty of useful data. [Continued]
(Author: Andrew via SEO Consult)
Musings on Preprocessing
I’ve been using SASS for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. [Continued]
(Author: Chris Coyier)
Quick Tip: The Power of Google Analytics Custom Variables
A good Web Development Team understands the effectiveness of tracking their clients websites and web applications. There are multiple reasons that the usage of tools like Google Analytics and Clicky will be effective in how you do business with your client. Understanding every single possible aspect of the web project that you just handcrafted and created is an amazing advantage not only as a developer but as a team member who is involved in the continued SEO and Social Marketing pursuit of that specific project. I learned a little while back that using some jQuery in each site and tracking certain clicks and events showed to be beneficial for myself when it came time to do a re-design or even just a small modification of the website or web application. Great quick article courtesy of NetTuts.
Familiarity with your users and their needs is the most important aspect of any successful site or web campaign. Google Analytics is the perfect tool to gather this sort of information. But there’s much more you can find out about your users when you begin using custom variables to make better decisions.
What are Custom Variables?
Using custom variables carries huge potential, as it allows you to acquire information about the behavior of your visitors.
You can treat custom variables as your own extension of metrics and dimensions. These provide you with the ability to gather non-standard and detailed data, which are not available via the Google Analytics panel.
Using custom variables carries huge potential, as it allows you to acquire information about the behavior of your visitors, which, in total, can significantly contribute to an increase of the ROI (return on investment) of the website or e-shop.
For example, using custom variables makes it possible to differentiate the activities of the logged in users versus those who never signed in. This provides an opportunity to observe the behavior of the website designed for a particular target group. For instance, we can learn which page of our website is the one that males – aged between 20 and 30 – visit most frequently. And this is just a tiny piece of the information that can be stored with the help of custom variables.
So How do Custom Variables Work?
The functionality of custom variables is wonderful in its simplicity. In fact, it’s based on the simple fact that, while performing a pre-defined activity, the user is labeled and the information about this label is subsequently stored in a cookie. Then, on the basis of this particular label, we can create a new section in the statistics of the Google Analytics panel.
Custom variables can be used in one of three ways:
- page-level – this is the lowest level used to monitor particular ways in which the visitor interacts with the web page (e.g. AJAX, watching a video etc.)
- session-level – a label attached to this level is added to the actions of the visitor throughout the session, and is deleted when the session cookie expires.
- visitor-level – this is the highest level; the label is permanent and remains detached during subsequent visits until the visitor deletes the cookie or overwrites the value.
How Do I Configure Custom Variables?
Custom variables are quite easy to configure; you only need to add one line of code before the
view plaincopy to clipboardprint?_trackPageviewcall.
- _gaq.push([‘._setCustomVar,INDEX, NAME, VALUE, OPT_SCOPE’]);
view plaincopy to clipboardprint?
- INDEX (required) – determines a slot for a custom variable in Google Analytics. There are 5 slots available, numbered 1 to 5. You should remember that, if the variables are to function correctly, a single variable must be placed in a single slot.
- NAME (required) – is the name of the variable that is going to appear in the report of the Google Analytics panel – Custom Variables
- VALUE (optional) – is the actual value of the variable which is paired with
NAME. Any number of such value pairs is possible, for instance ifNAME=country,VALUEcan, one by one, equal the values of US, GB, PL etc.- OPT_SCOPE (optional) – is a level within which a custom variable functions. As I described above, there are three levels: 1 (visitor-level), 2 (session-level), 3 (page-level). When this parameter is not provided, it is replaced with the default page-level.
- var _gaq = _gaq || [];
- _gaq.push([’_setAccount’,‘UA-xxxxxxxx-x’]);
- _gaq.push([‘._setCustomVar,INDEX, NAME, VALUE, OPT_SCOPE’]);
- gaq.push([’_trackPageview’]);
Some Practice
Now, let’s review how custom variables function in practice. Let’s suppose that we want to keep track of the visitors of our website’s – distinguishing between those who did and did not log in. In order to do so, before the
view plaincopy to clipboardprint?_trackPageviewcall, we insert code describing the user.
- _gaq.push([‘._setCustomVar,
- 1, // first slot
- ’user-type’, // custom variable name
- ’visitor’, // custom variable value
- 2 // custom variable scope - session-level
- ]);
Once the visitor logs into your website, we change this code, accordingly:
view plaincopy to clipboardprint?
- _gaq.push([‘._setCustomVar,
- 1, // first slot
- ’user-type’, // custom variable name
- ’regular-user’, // custom variable value
- 2 // custom variable scope - session-level
- ]);
But What Follows?
It’s time to present the results of the described script. After the script had been executing for a week, an advanced segment in Google Analytics panel was created. Its aim is to divide the data in the panel into: total, report for logged-in users, and report for users who didn’t log in for particular metrics.
The segment itself is created through
Advanced Segments => Create a new advanced segment. Then you should set the dimensions according to the screenshot below:The variable which we defined using JavaScript was in the first slot, so we have to select
Key 1andValue 1. Then, we set the key which we are interested in (user-type), and the value for the defined key (visitor) together using concatenation. Next, we name and test the advanced segment. The number of visits during a particular period of time for particular segments will be calculated within the test.We define the second segment which takes into account the logged-in users in the same way. We can create it by analogy with the pattern presented above – with the difference in that the custom variable is set as
regular-user.After establishing the two segments, we can activate them. The result is presented below. Such a set of data is a great basis for an in-depth analysis of the activities on a webpage.
It’s Worth Remembering…
- Don’t duplicate the names of custom variables between the slots.
- Set custom variables before the pageview call.
- You cannot use more than five custom variables in a single request.
- Consider event tracking instead of custom variables for some demands, as then no additional (false) pageviews are generated in the panel.
- You can determine whether custom variables work by observing requests within Firebug, or with the help of the Chrome extension, Google Analytics Tracking Code Debugger.
This is Only the Beginning
Using custom variables translates into more justified and accurate site decisions.
The example presented in this article only illustrate the process of using a single custom variable, and determining the best way to manage a website, according to the type of visitor. Of course, this is only the beginning. Custom variables can become incredibly powerful when we combine several of them at the same time. As a quick example, with the applicable data from a website’s registration process, we can then track, not only the sex of the visitor (session-level), but also his or her age bracket (session-level). Further, we could divide the visitors into groups who have made purchases in our fictional eShop, or even track those who took a specific action, such as clicking on a Facebook button.
These techniques translate into more justified and accurate site decisions.
(Published by Lukasz Koszela via NetTuts+)
Oh Lifehacker. You have been so good to me. Well, I already have a large list of lab features that I use on a daily basis that I am in love with. (Advanced Keyboard Shortcuts, Signature Tweaks, and a few small ones). Here is a good list for you Gmail and Google Apps users.
As if Gmail wasn’t powerful enough, you can find all sorts of goodies and extra features in Gmail Labs. The list is pretty massive, so we’ve narrowed down our 10 favorite labs to help increase your email productivity.
We’ve actually gone through our 10 favorite labs before, back when Labs was a bit younger. Now, many of those features are part of Gmail itself, so we’ve decided to revisit the labs and see what else Gmail has cooked up. To access these features in Gmail, just hit the green flask icon next to “Settings” in the Gmail web interface.
(Posted by Whitson Gordon via Lifehacker)
