Category Archives: Coding

Job Titles in the Web Industry

By | Coding | No Comments

There are loads of job titles in our industry. The opinion on their usefulness range from harmful (i.e. leads to “not my job” syndrome) to vital (i.e. people change companies sometimes and need common language). Since they are out there and we use them, there should be some consistency to their definition. Perhaps we can get closer to nailing that down.

Let’s light this fire, shall we? This is all debatable, of course.

 

Job Titles

These are legit in my opinion.

Web Designer

If “designer” is in the title, the job is designing. Literally deciding and implementing how websites look and work. “Web” is in the title because the job is specifically focused on the web. Specific skills would be design-tools-of-choice, HTML, CSS, and light JavaScript.

If the job is also designing for print, apps, signage, products, clothing, etc., the title would be widened to Designer.

Front End Developer

This job is focused on HTML, CSS, JavaScript, and light backend work. Not design. The lack of “designer” in the title is intentional. Because the job doesn’t require design, deeper skill in the other technologies is implied. You likely have a grasp on some concepts beyond the core technologies, for instance regression testing or performance.

A synonym might be Front End Engineer. I tend to think of that as a requiring a deeper and more specific skillset, possibly with more narrow focus or at a higher level.

Technology specific job titles may be also be appropriate here, like “JavaScript Developer” or “JavaScript Engineer” for a job where that is primarily what needs to be done. Although, none of the front end technologies live in a bubble so I generally prefer Front End Developer.

UI Designer

This job is more about designing and less about implementation. Really good at design-tools-of-choice with perhaps only light HTML and CSS skill. A synonym might be a Visual Designer.

UX Designer

A specific focus on studying and researching how people use a site. Then ushering changes for the better through the system and testing the results. May not have or need any design or implementation skill. All jobs should care about user experience, but this job lives it.

Interaction Designer

Primarily design, just like a UI Designer, but with specific focus on how things are used and movement.

Art Director

The job is quality control, leadership of other designers, and client communication. A synonym could be Design Director.

Web Developer

This job is focused on back end work and working with languages specific to the web, like PHP, ASP, Ruby, Python, etc. Medium skill in database/server work, medium skill in JavaScript, light skill in HTML. This is very different from a Front End Developer as there is little working with the design and heavier on programming concepts and concerns, like security and structure.

Synonyms could be Web Programmer or Web Application Developer.

Full Stack Developer

This job is a combination of front and back end work. Seriously though, not mostly one and a little of the other. Good crossover people are needed at organizations and this is a high end job.

Content Strategist

Rather than working directly on implementation, this job is about the structural design of websites. Things like the taxonomies, metadata, scheduling, and analysis of content. A synonym might be Information Architect. They might work with people who work with content in a more general way like a WriterCopywriter, or Editor.

IT Technician

This job works with the actual computers and tech equipment. A hardware person.

Dev Ops

The job bridges the gap between IT and Developers. They handle things like server software, version control, deployment, build processes, and testing servers/processes. I wish this had a more job-title-y feeling to it. As it stands it sounds like what you would call the whole team of people with this job.

Product Manager

This job is about guiding the site as a whole (or a major feature of the site) toward a better future. Largely dealing with people and planning. A Project Manager would be similar but smaller in scope and possibly a temporary role rather than full job title.

Customer Service Representative

This job is about communicating directly with users of the site to provide help. Then triaging bugs/problems to the internal team. Also understanding/communicating the voice and vibe of the community around the site.

SEO Specialist

This is a big enough sub industry that it can be its own job.

Job Title Prefixes

Any of these job titles can be prefixed with Junior or Senior. Junior meaning less skill/experience. Senior or Lead meaning more skill/experience. Responsibility and pay commensurate. The tech is the same.

Consultant might be suffix to any of these job titles as well, like a Front End Development Consultant, in which you offer strategic advice and help.

Bad Job Titles

The following are not job titles.

  • Ninja _______ – Cutesy and meaningless. It’s a recruiter trying to say “we want someone really good” but then shooting themselves in the foot.
  • Rockstar _______ – Same.
  • Web Master / Webmaster – It feels outdated and cheesy, but more importantly, never developed any specific meaning.
  • _______ Hacker – Cheesy for anything with the possible exception of a job with the specific responsibility of finding security exploits.
  • I kind of like Web Worker as a term, but not as a job title (too vague).
  • Mobile _______ – Even if the job has that focus it feels overly specific.

Not Caring About Titles

Like I said in the intro, the opinion on job titles is hugely variant. Right in the middle is not caring at all. If that’s you, awesome! That probably means you work for yourself or for some little startup where your title can be like “Lead Hucklebucker” or some other nonsense. That’s just good fun, live it up!

Not Web

Careful with these if the job is actually web related.

  • Graphic Designer – This has come to mean “design, but not web design.”
  • Software Engineer / Programmer – This has come to mean “programming, but not for the web.”

source: CSS Tricks

How to speed up responsive websites

By | Coding | No Comments

Responsive web design is the buzzword of the decade already, and is ideal for the multi-screen connected world that we live in. However, the trade-off for this is in performance due to larger file sizes.

This has prompted some experts to say that, like the early days of Flash, responsive design is something that we could all be getting excited about for no good reason. However, while at the moment there are performance issues, these can be overcome to some extent with some small adjustments, compression and image resizing.

 

Why responsive design can perform slowly

Responsive design loads all of the same HTML elements for every device, including those intended for tablet and desktop delivery. This means that all content is often delivered, including images and scripts, no matter what device it’s being viewed on.

A study carried out last year showed that 86% of responsive sites currently online deliver a full desktop page to mobile devices. This is clearly a trend to the design technique that needs addressing, if we are to stop the progress of bloated web pages in its tracks.

At the moment responsive design is pushing up page sizes and this is the trend that needs to be addressed, especially when you consider that 57% of mobile users will leave if the site doesn’t load within 3 seconds.

 

How can performance be improved?

For those who already have a design in place and are wanting to now optimize, Mobitest can be used to measure performance in order to go on and address it. Of course, when planning out a design, optimization will be simpler to carry out at this stage and performance should always be considered an essential part of design, rather than an afterthought.

In order to improve performance, the size of the pages and resources loaded with it needs to be reduced. This can be carried out using various techniques, without seriously altering the look and feel of the site.

The first thing to consider is how to ensure that only the resources which are needed are sent to the target device. This can be done by minimizing the number of HTTP requests, so that the user spends less time waiting for the DOM to load. This can in turn be done by compressing CSS and Javascript resources, for which tools such as Compass — an open source CSS authoring framework — can be used. This allows developers to create cleaner markup and create sprites and extensions with minimal fuss.

With regards to JavaScript, tools such as UglifyJS can be used, which compresses code.

Conditional loading

This can be considered an important technique when it comes to responsive design, as it can be used to make sure that mobile and smartphone users don’t download the aspects of the site that slow it up, or that they won’t use.

Conditional loading can be used to stop all kinds of content from loading, including social widgets, images, maps and plenty more. It’s important to note at this point that the site should be thoroughly tested at each stage of optimization so that it’s easy to see what has made a difference as you go along.

Images

We all know that images are usually responsible for taking up the largest amount of kilobytes in a web page. It’s also safe to say that images which are designed for a desktop browser are going to underperform when delivered to a mobile device.

If a site also has a lot of legacy content, then this is going to affect performance even more and some way to prevent this content from loading needs to be implemented. While this can be done by altering the markup by changing the src or img elements, the PHP solution Adaptive Images is probably easier. The software detects screen size and automatically creates, caches and delivers the appropriate scaled down embedded HTML images, without the need for changing the markup. To be used in conjunction with Fluid Image techniques, it’s a handy solution and one that will save a lot of time. Adaptive Images uses one htaccess file, one php file and a single line of Javascript in order to determine the screen size of visitors to the site.

Text

It’s worth thinking about text too, as this will wrap naturally when the device is narrowed and could cause display issues. FitText is a tool that can help address this, a jQuery plugin which auto-updates font size, with options for the minimum and maximum sizes that will be allowed.

This is ideal for headlines that may be displayed badly on a mobile device and allows the CSS3 specified font size to be ignored. However, FitText is only intended for headlines and shouldn’t be used within paragraph text.

 

Why choose to design responsively?

Whilst responsive design has its problems, much like any relatively new technology or technique, it’s still worth choosing to build a site in this way. Nobody wants to go backwards and while it may be easier to build a mobile website, it’s much better to be as innovative as possible.

Google agrees, their advice is to use responsive design as the best way to design for mobile. Of course to the search giants, this means that they only have one URL to crawl, rather than numerous URLs for what’s essentially the same site, so it’s in their interests really.

However, in this time of social sharing mania it also makes sense, as mobile users may share a page with someone using a desktop. In order to create a uniform experience, this should deliver the same content.

Further to that, having a responsive site improves productivity in the workforce as there is essentially a lot less to do. This applies to content, updates and SEO, as this will need to be carried out separately if different sites are built.

The figures

Mobile devices and tablets are becoming the norm for connecting to the internet and surfing in this, almost, post-PC era. Tablet sales worldwide have soared in just a year, more than doubling in that time and with many consumers now choosing different devices running Android, as well as iOS.

There’s little doubt that so far responsive design is having a positive impact, despite performance worries. According to one report, which asked some of the world’s top brands how having a responsive site had affected traffic, visits across all devices were up considerably.

This included an average increase of 23% by mobile visitors, as well as a lowered bounce rate of 26%, with visitors spending around 7.5% more time on the sites than was previously seen.

O’Neill, the trendy surf clothing retailer, report a conversion rate that is 65.7% higher on iPad and iPhone as a result of developing a responsive site. This accounted for a 101.2% revenue growth on these devices alone.

With regard to Android devices, the conversion rate was even better, at a whopping 407.3%, accounting for a huge revenue growth of 591.4%. A smaller conversion rate was seen on non-mobile devices, although growth was still seen.

This is just one of the brands that release their figures and it’s quite difficult to get the data from others right now, much as it was with the impact of social media a couple of years ago. However, it goes some way to proving that the returns from designing a responsive website can be substantial.

Bearing that in mind, what further reason does any designer need to start designing responsively for their clients and trying to ensure that they perform as well as they possibly can? There isn’t one, and those designers who don’t want to go to the trouble of learning how to design, build and optimize a site using responsive techniques may find themselves left in the dust.

67% of users say they have purchased via a mobile site and it’s thought that mobile internet usage will overtake that of desktop by next year. Bearing all of this in mind, it’s easy to see why businesses will become more and more interested in the best mobile web solutions that they can offer.

Responsive design may still be in its infancy at the moment but it seems clear that market demand will make it grow up quickly, so it’s worthwhile learning as many aspects to the discipline as possible now.

source: Web Designer Depot

Nav going under youtube video on Internet Explorer

By | Coding | No Comments

I used to have an issue with flash objects that were right under the nav appearing on top of the items when there was a dropdown. I learned a while ago that this was a pretty easy fix. Just had to change the wmode value from opaque to transparent or just add that attribute to the object.

But recently i had an issue with an youtube video on a wordpress site. An easy fix too… Just add the same wmode=transparent at the end of the iframe and that’s fixed!

But you can’t expect your client to learn this trick and remember to add this to every video embedded. So i found this link with an easier fix.

Just add this to your scripts file and the magic is done.

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
        //$(this).attr("src",url+"&wmode=transparent");
    });
});

ps: When the video is embedded with ‘?rel=0’ to disable the related videos that show up at the end of your video clip the ?wmode=transparent will not work. In that case you need to use &wmode=transparent and make sure it goes after ‘?rel=0’. i found this on this thread and maimooninc gave the tip.