Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Follow Us on Twitter

Calculating Delivery for 7 Levels of Content Editing

All content work is not equal. Several factors influence how long it can take to edit a single document. Let’s review the seven levels of editing as detailed by Susan Wyche, and lay a foundation for how to calculate the time it takes to edit content. Read the rest of this post »

Posted in News

6 Ways to Overcome Programming Roadblocks

shutterstock_61202323Programmers, whether novice or professional, encounter roadblocks and issues every day while working with code. This can lead to unnecessary frustration, hamper productivity, and pose a threat to reaching the product deadline.

The following are a few measures that I, as a front-end developer, have developed to overcome roadblocks while working in fast-paced environments with stringent deadlines:

1. I am setting up my developer workspace. It is working for him but not for me.
Setting up a workspace can be one of the most tedious or scary tasks a developer encounters when he or she starts working on a new project. Set aside ample time for this, and do not be scared by the heavy stack of technical documentation. Follow each step meticulously, and make sure you have all the pre-requisites setup. Do not hesitate to take the help of a peer or your team lead if you come across a issue – be it simple or complex. Ultimately, having a proper workspace is the foundation for all the great work you are about to do on the new project.

2. My code is not working or it’s throwing up an error.
We encounter this issue almost every day. We would have gone through the requirement, analyzed the dependencies, made sure the functionality is there, and still the code does not work. Rather than simply blaming the code for throwing up an error, it is best to investigate why it is doing so. Check the browser console, error logs, stack trace. Often it could just be a spelling mistake or a syntax error causing the issue. Have a peer or your lead look over the codebase. A second eye helps in most instances. Do not lose hope, get frustrated, and start cursing your job or the client.

3. My jQuery on click function is not working.
As a front-end developer, you would be dealing with a lot of jQuery, and this issue is something we come across quite often. The blame is blandly put on jQuery or the browser itself. Rather, make use of breakpoints in the JavaScript console of your browser. Check if the code has been rendered on the page and if there are any errors in the console. Put appropriate the breakpoint and examine each step. A div id might be missing, could be a syntax error or even a missing semicolon. Breakpoints are your friend when it comes to javascript errors. Make use of them.

4. Clear browser cache.
We know this, but don’t do this. You have made change to a CSS file, and it is not reflecting on the browser. Always remember to clear your browser cache (It’s easy: Just press cmd+shift+del on your browser, check cached images and files and click Clear browsing data) for any new changes to be seen on the browser.

5. Know how to Google for error.
So you have checked the console logs, made sure there is no syntax error, cleared browser cache and still something doesn’t work – end of the world! Not really, as long as there is the Internet to help us out. Someone would have encountered this already and might have put a solution or the issue could be a well-known one. One important thing is to make sure how to make the best use of Google to help us fix errors. Search for the errors with meaningful phrases, such as ‘jQuery works in console, but not in code’, ‘bootstrap modal dialog function’ rather than simply searching for ‘jQuery is not working’ or ‘modal dialog issue.’ Another helpful measure is to search with the exact error message thrown in the console or error logs and often this might help us find a solution quickly.

6. Take breaks, and do not multitask.
Take adequate short breaks at regular intervals to regain your focus and keep up the concentration. If you have been looking at your computer screen for too long and you encounter an issue, chances are that you would end up stressed out or frustrated and lose focus. Hence, taking breaks is important. Secondly, we all think we can multitask, switch between different windows while drafting an email or checking one. We are actually not multi-tasking here. Rather, we are shifting the focus of our brain to different jobs in short intervals of time. This is bound to make you stressed out after a while and leave you feeling tired. It is best to focus on one job at a time, complete it, and then move on to the next to increase your productivity.

I hope these measures help you mitigate a roadblock when you are working with code every day. What are some of the measures you have been following? Share them below.

Responsive Web Design 2015 and the Totem Pole of Awesome

 

XD-team_RWD2015_w-Ethan-Karen

From left: Responsive Web Design presenters Karen McGrane and Ethan Marcotte with XD colleagues Tina Farmer, Martin Ridgway, Jennifer Siegfried, Cheryl Morton, Kristi Leach, Don Emory and Pete Eppestine

A contingent of XDers from across the country recently met up in New York City to attend the Responsive Web Design conference and workshop (RWD) led by the awesome duo of Ethan Marcotte and Karen McGrane. Several of us will be posting deeper digs on the subjects covered, but I wanted to share a few quick highlights from my perspective.

    1. Responsive Design Is Good for Everyone
      Ethan and Karen did a great job showing us how to integrate responsive thinking into every aspect of a digital project. It’s not simply where the breakpoints are, it’s how you think about your communication hierarchy, how you choose when to scale and when to crop images, and it’s always thinking about the people visiting your site. The point is to ensure you’re communicating a complete idea, visually or with text, on every device, so avoid trailing sentences and cluttered images.

      Ethan told us a great story about a news organization that started thinking about how to ensure they were conveying a story no matter the image size. They developed a style of cropping photos they still use today, but they did so long before the age of smartphones.

    2. Content First + Mobile First
      Karen emphasized the need to really understand the purpose of your content as well as the context. Not simply  “what device are they using,” but what does the site visitor need and how can you best deliver that? She reminded anyone who needed reminding that the scroll is no longer a hindrance, and neither is going to another page – people are reading books on their smartphones – but incomplete or confusing information is, politely speaking, frustrating.

      We had an open discussion about applying character limits and creating content that builds in depth, not simply length. Create different length sections to your story that both stand alone and complement each other. I’m going to be writing more about this in an upcoming post, but one essential takeaway is to resist the temptation of truncation.

    3.  From a Single Column to Awesome
      One of the highlights of day one was a content layout challenge that reinforced the important relationship between responsive design and a user-centric, content first strategy. Teams of four or five worked together from a list of elements to create a single column ordered by perceived need and priority.

      Later, we were challenged to defend our columns and then to rethink them with a more flexible approach that still focused on the user. I’m happy to say that the XD team came up with a compelling hybrid version, dubbed the “Totem Pole of Awesome,” and endorsed by Ethan as “possibly the greatest term ever” for the challenge.

    4.  Content Choreography & Content Modeling
      How content moves and interacts with the other site elements to serve both your site visitors and business objectives is critical to the success of a responsive site. Several blogs are planned to share what we learned, and how we’re thinking of applying Content Choreography and Content Modeling. As XD’s content geeks and word nerds, the strategy, research and content teams are ready to kick these ideas into high gear. Though we’ve been practicing the fundamentals of these two important steps to content management and distribution, Karen’s workshop really helped to solidify and build on the work we’ve started.

    5.  Responsive Is Here to Stay
      About 10% of Americans only browse the internet on their smartphones, and tablet and mobile device browsing is increasing at an exponential rate around the globe. When you consider these two simple facts, it’s easy to understand the importance of responsive web design for every project.
      XD_RWD_RWD2015_quote1
      Just because the word “design” is in title, this isn’t simply an art director’s problem. Creating truly responsive, user-centric websites is the responsibility of everyone on the team. That’s why we need to plan to actively involve and check in with each other, and to continuously improve our work in a cumulative fashion.

Posted in News

The Connected Car Platform Conundrum

I recently completed some proof-of-concept work for a major automotive manufacturer and I have come to the realization that the automotive manufacturer’s approach to the concept of the “Connected Car Platform” is going to run into growing pains as the pace of mobile innovation continues unabated.

One of first issues I ran into was that I did not own any of the client’s vehicles so I could not develop against an actual head unit but instead, had to use a head unit emulator.  Each manufacturer has their own head unit (that is the screen in the dash and all the associated systems that controls the music and any information displayed on the screen) with their own custom software and approach to connectivity.  This requires a mobile developer to work with aconnected_car multitude of manufacturer’s SDKs in order to have their mobile app work with any number of vehicle platforms.  The current state of the world in terms of mobile development for car platforms is very similar to what we found ourselves at a number of years ago when you were trying to decide how to support four or five different mobile platforms (iOS, Android, Microsoft, Blackberry and maybe Symbian).

Either you choose the top two or three, depending on the size of your development staff or looked at an expensive alternative such as Verivo. For the small mobile developer or development team, are you only going to support Ford and GM, leaving out all the other vehicle platforms? That might have worked in the 50s when GM and Ford dominated the automotive landscape, similar to what iOS and Android do in mobile today but not now.  There are initiatives such as the Open Automotive Alliance, however, their goal is to bring Android Auto to vehicles.  That cuts out the iOS platform and for families like mine who are blended (I have an Android phone but the rest of my family has iPhones), that won’t work.  Apple has come out with CarPlay but again, supporting that platform in a vehicle cuts out the Android consumer. Read the rest of this post »

Front End Development: CSS-centric or JS-centric

Recently, I was reading this article which came across my newsletter, outlining what Front end developers need to know for this year and beyond. What struck me was where the author talks about the growing gulf between those who focus on CSS and those who focus on javascript. Isn’t Front end development about both css and javascript? Lets not forget html! But what’s been mentioned is indeed true. Here is how I tend to see this pattern.

I started my career as a web developer and my daily source of bread involved taking a psd asset, slicing and dicing it and creating pixel perfect, browser compatible html and css using cool jQuery plugins to beautify the UI. And that’s where my interest towards javascript began. I got to know the basics, understood the different paradigms, kept track of its progress, introduced to the MV* frameworks, got to know node, the build tools, pre-processors, et al.I would say many of us peers share a similar career path. 

But there is another set of front end developers (or what do I call them) who solely focus on javascript and thanks to css frameworks (bootstrap, foundation, etc), writing css has never been so easy. They need not know the intricate differences between css2 and css3 nor how different browser engines interpret the css box model. They need not even support IE8. They are skilled and adept in the javascript MV* frameworks, node, the different build tools, good enough to create a web application. 

These two different breeds of front end development raises some very interesting questions. How should the former advance his career ? And should the latter fall back to learning basics of creating pixel perfect sites ? Or are there two different sets of Front end developers now ? One solely focusing on creating pixel perfect html, css and js while the other focusses on MV* frameworks. How should the corporations decide on hiring whom they need ? 

I personally feel if you are from either group, it is still important to know the basics of any fundamental technology you are working on, think from a broader perspective and be inclusive. What do you think ? 

6 Tips for Staying Fit at Your Desk Job

The majority of jobs that we hold have us sitting at our desks from 8am to 5pm, five days a week. That’s 40 hours of sitting, typing, and talking. Sure, we walk to the bathroom, we walk to get coffee, but when I tracked my steps for an average day in the office, I was at around 3,000. For comparison, it is recommended that we walk 10,000 steps a day.

Many of us have difficult schedules and conflicts that don’t allow us to workout at the crack of dawn, or maybe we have to pick up the kids from school after work, so that is shot, too. Even though your schedule may not allow for you to carve out 45 minutes a day to work out, here are a few tips for staying “active” while sitting at your desk.

  1. Take a lap!

So it only takes you 15 steps to get coffee or go to the bathroom? Instead of taking the closest route, take the long way! For example, walk a lap around your entire office, get coffee/go to the bathroom, and then take another lap. This activity will easily add at least 100-200 more steps to you daily routine.

  1. Invest in a stability ball

A pregnant co-worker of mine was the first in my office to bring in a yoga ball to sit on to help with her symptoms. While this does help ease those side effects, it’s also very effective if you’re not pregnant! In a study done by the State University of New York Buffalo, people who sat on a stability ball burned 4.1 times more calories than those that sat on a chair. This may not sound like much to you, but it adds up to more than 160 additional calories burned each week and 640 additional calories burned each month. Buying a stability ball doesn’t have to break the bank! Target, Five Below, and Wal-Mart carry quality stability balls that will meet your budget. Read the rest of this post »

Posted in News

5 Quick SEO Tips

shutterstock_1644686571. Put your users first and search engines second. Providing a great user experience and creating valuable content for your target audience, will positively impact your Search Engine Optimization efforts by default.

2. Best practices are just that. Even though we have several best practices for different SEO factors, if something doesn’t make sense for your business or customers, then you should not obsess over it.

3. SEO is not a one-time or a stand-alone activity. SEO should be part of the overall Digital Marketing strategy and should be implemented throughout all digital efforts (press releases, social media, blogs, webpages, etc.)

4. Learn from the past, don’t take short-cuts and follow your gut. If it sounds too easy to be true (e.g. write articles just for backlinks, or “sprinkle” keyword X as much as possible on the copy), you will probably have to pay for it later. Search engines will only get smarter so do things the right way, and ask yourself if it adds value to your human users before proceeding.

5. It is a joint effort. If you are working with an agency it is critical to work together in order to succeed. Nowadays you can’t expect to outsource SEO work, let them “do their magic” and appear on the first page of search results. Having good communication and making sure SEO consultants are involved with the digital marketing team is key.

The Importance of Color and the Mind

Color is an important element of visual language in most user interface designs. People process color before they are consciously aware of it., so the colors you choose to use can be the difference between a user-friendly design and a confusing, unusable design. Careful planning and implementation of color will create not only an aesthetically pleasing website, but a functional one as well. Below are ten color –related benefits you may want to consider when creating your next design.

1.  Speed visual search.  Color-coding will help the user stay focused on a certain area of information. This comes in handy when multiple areas of information are being displayed. Color-coding helps keep the eye focused and the information organized.

Screen Shot 2015-03-20 at 3.39.24 PM

2.  Improve object recognition.  Colors should reflect the physical world. Seeing objects that are colored different than real world expectations causes cognitive confusion. For speedy recognition, use colors that are normally associated with objects, e.g., bananas are yellow.

Screen Shot 2015-03-20 at 3.39.08 PM

3.  Enhance meaning.  Colors can be used for emphasis, to display a most important element or message. The example below shows an emphasis on red that gets our attention and clues us to what the site is all about.

Screen Shot 2015-03-20 at 3.40.04 PM

4.  Convey structure.  In addition to speeding visual search, color can structure a page or presentation. It offers yet another form of organization, allowing the user to quickly identify and recognize information.

Screen Shot 2015-03-20 at 3.40.36 PM

5.  Establish identity.  In today’s world, brand identity is the greatest visual recognition element of any business or organization. Color is ubiquitous and is a source of information; incorporating and utilizing the appropriate color palette in your visual design will reinforce the client’s brand throughout the user experience.

Screen Shot 2015-03-20 at 3.41.18 PM

6.  Symbolism.  Color can also be used to represent cultural and psychological concepts. Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Context plays a large part in color symbolism. One color can have positive or negative connotations depending on the larger framework. Take a look at the “white” website image below. In western cultures, white represents color of purity and peace. In Eastern and Asian cultures, white is the color of death. Understanding the cultural context of your client’s audience can alert you to culturally based color sensitivity. 

Screen Shot 2015-03-20 at 3.42.03 PM

7.  Improve usability.  Colors impact site visitors psychologically, and can affect the user’s experience. In user interfaces, color informs visitors of the most important functions and areas of the screen. Take the user’s need and site functionality into consideration before strategizing your use of color.

8.  Communicate mood.  Color creates mood. Research shows that lighter colors have a more positive effect on users than darker colors. The following link provides examples of colors and the psychology it impacts.  http://usabilitygeek.com/colour-user-experience-psychology/

9.  Show associations.  Color can be used to indicate associations to groupings or other graphical elements. For example, we recognize the U.S. political party colors to be blue for democratic and red for republican. In the same way, colors used in web design can be utilized to help a user identify certain information or functionality.

Screen Shot 2015-03-20 at 3.34.35 PM

10.  Express metaphors.  You have heard of feeling blue or seeing red as metaphors for being sad or angry. Metaphoric inferences can be translated visually in your design.  Utilizing a color like pink, for example, can translate into a young, teen girl experience for a youth clothing store.

Screen Shot 2015-03-20 at 3.24.40 PM

In the end, don’t be afraid to experiment with the use of color to enhance the appearance and functionality of your design. Color has great meaning and will you create an impactful, functional and beneficial user experience.

 Tell us about your color experience and design considerations. Are there specific colors you avoid in your design to improve the user experience?

“5 Quick Ways to Improve Website Usability”-usabilitygeek.com

“10 Reasons to Use Color”-understandinggraphics.com

“Color Theory for Designers” –smashingmagazine.com

Posted in Creative, Design

Client side Templating and Performance

A lot has been talked about client side view templates hindering the critical path, thus affecting performance. I have made an effort to summarize the need for client side rendering and measures to enhance the performance.

Before we actually jump on to measures, lets revisit how today’s web application ended up being rendered and compiled on the client (browser) using javascript based templates -

Before the advent of nodejs and javascript templates, how did one used to render json data on the browser ? 

Front end developers (FED) used to write prototypes based on html, css, jquery and hand this over to the backend developers. Backend devs take this asset and integrate it with the java code, parsing the json themselves directly in the servlet or jsp. Here, it takes only one call for the page to load and FED can focus on optimizing critical path, gzip the assets, etc thus improving the performance. This really worked well when we had only one or two FEDs for the whole project and a waterfall approach was followed. Designers used to provide the comps, UI developers created pixel perfect prototypes, and no design changes were allowed once the development started.

And then, what happened ?

Coming back to where we are today, as the web evolved, more focus is put on User Experience, and with the introduction of LeanUX, design and development are being done simultaneously. Now, backend developers cannot change the html in the jsp or servlet every time the design changes and becomes frustrating for them and they don’t see the need to do that at all. Enter jQuery and ajax. FEDs can make an ajax call to the RESTful service, parse the json and render it on the presentation layer, i.e jsp. But, this resulted in a convoluted mess of spaghetti code and became hard to maintain as the application grew. 

Same time, javascript became more mature and nodejs was introduced.  With the help of nodejs, enter client side templating – handlebars, mustache, htmlbars, etc. These templates are logic less (no if, else, for loop statements in the html) and provided a clear, neat separation of html and data paving the way for a true MVC architecture on the client. Both front end developers and back end devevelopers are happy as FEDs can focus on neat reusable, DRY html with dynamic data while backend developers can focus on generating the RESTful API service, data binding and need not worry about design changes at all. Because, data parsing is completely done on the browser now. To help with this data parsing and templating for the FEDs, a host of task runners to improve performance, based again on nodejs got introduced – grunt, gulp, etc. So that, FEDs can focus on the html and the task runner can do all the performance optimizations for them. Wonderful, isn’t it ?

So, what is the disadvantage of this client side templating ? 

With client side templating, every ajax call we make, there is an extra http call on the browser, and the template has to parse this data as well as render itself on the browser. Enter performance issues and critical path rendering.  

How to remediate ?

Fallback to nodejs for solutions again. Client side templating is still fairly new and as the web progresses, definitely the focus will be on ways to render the data on the server itself. There is already htmlbars, which is out to do that as mentioned herehere and also here.

Ultimately, the advantage of separating html from the backend code and allowing front end developers to make robust design changes concurrent with the development cycle has proved more advantageous, than the performance issues with the client side templating.

Take the Plunge. Get Up to Speed with Front-End Build Tools

A colleague recently asked me to give him a high-level overview on how to get started using these fancy front-end build tools everyone’s talking about. Since I’m a team player, I thought it would be best to share my advice with all of you as well!

First, what the heck am I talking about? What are “front-end build tools”? Simply put, there is a community of people and a whole bunch of services out there who just want to make it easier for front-end developers to build projects. Their motivation? Why go through the hubbub of setting up your working directory structure, downloading the plugins and libraries you need, writing scripts for minification, etc., when all of that can be automated?  Enter the realm of build tools.

Now that you know what they do, how do you use them? I fully support the idea of learning by doing, so my job here is to introduce you to your new friends, and let you guys get to know each other on your own time. Have fun!

The Tool Trifecta

Read the rest of this post »