Category Archives: Web

The Need For Responsive Web Design

Up to 51% OFF,Low to $1.39 for Thanksgiving Day,EXP:Nov.30,
rwdAlmost every client now wants to support mobile version of their site at the risk of losing a potential customer. It is becoming more difficult to keep up with the growing market of new mobile devices, varying in screen resolution size, aspect ratio and viewing modes. Creating a new website version for each resolution and new device would be costly and inefficient. Is there an alternative to this issue? Responsive Web Design to the rescue!

Responsive Web Design is the approach that allows your website or web app to respond to the user’s behavior and environment based on screen size, platform and orientation.

The implementation of Responsive Web Design is based on number of factors including coding flexible HTML grid layouts, using auto-resizable images, CSS media queries, dynamic measurement units for font sizes, such as “rem”, “%”, and of course thoughtful design planning.

You can implement everything by yourself from scratch. That would be, of course, a more involving task. Or you can use freely available resources on the web, such as Bootsrap framework. By loading a few extra files into your website and following their well documented rules, such as using special CSS classes for grid layout, and dynamic image resizing property in CSS, adding and customizing media queries, your site will transition into a magically fluid tapestry that will automatically adjust based on screen size. Bootstrap offers even more. I choose to use Bootstrap for rapid prototyping, as it provides basic, consistent and good looking modules that saves me time otherwise spent on trivial decorative tasks that would be later scrapped, anyway.

Implementing Responsive Web Design is not a simple task that can be completed overnight by adopting some magical plug-in. The process requires to revamp your existing code and it takes time. However, the payoff of keeping and gaining more customers that can access your site from any device, by far, worth the effort.

Up to 71% OFF,Low to $0.99 for Black Friday,EXP:Nov.28,
Up to 71% OFF,Low to $0.99 for Black Friday,EXP:Nov.28,

Web Performance Optimization

Up to 71% OFF,Low to $0.99 for Black Friday,EXP:Nov.28,
Web Performance

In today’s impassioned world we demand smarter technology that solves complex problems faster. We want richer user experience and interactivity, more and upfront functionality with lesser steps to accomplish tasks. Web and mobile applications evolve, driven by constant user demand to enhance and enrich the experience by allowing a faster responsiveness. As web developers introduce more complexity to the code we have to be conscious of the added bulk that impacts the performance.

Recently, I was asked by a client to analyze the Front End Web Performance of a web application my team was building. This large scale cloud application involved a myriad of internal and external systems dependencies relying on numerous parallel and nonparallel API requests tied to the local resources. After running a basic and initial analysis in Chrome’s Developer Tool Inspector, it was obvious to notice the latency and slow response times of both APIs and static resources. The app would definitely use some Performance Optimization techniques.

Since optimizing APIs would involve a different conversation, I’d like to stay with the focus on Front End Performance Optimization, in this article. To fine-tune Front End Performance a number of things should be considered. Here’s a short list of what I feel is the some of the most important techniques:

  • Minifying and “uglifying” resources
  • Concatenating (Combining files) to minimize the number of requests to the server
  • Using CDN (Content Delivery Network)
  • Caching resources
  • Gzipping resources
  • Optimizing images
  • Smart loading or on demand loading, such as using Require.js

For now, I’d like to pick the first 2.

It is always good to understand the tech stack used to build the application before jumping to decide on what particular optimization solutions should be used. This particular web app Front End was architected using Angular.js with Require.js running on Java stack and using RESTful services. Require.js project comes with a complementary Optimizer component – r.js.

Running the r.js optimization process will combine, minify and uglify scripts for optimal browser delivery. It works well on both javascript and css files. Now, your production code can utilize the optimized set of generated resources that will definitely boost your app’s performance.

Up to 51% OFF,Low to $1.39 for Thanksgiving Day,EXP:Nov.30,
Up to 51% OFF,Low to $1.39 for Thanksgiving Day,EXP:Nov.30,

Top 5 Strategies of SEO: The Fusion of Art and Science

Writing relevant content and satisfying SEO requirements for ranking your web pages is known as both Art and Science. No doubt, your content needs to be a piece of art to engage your users and motivate them to come back later. However, would your colorful words and graphics persuade Search Engines to reflect their relevance to your products and services and thus rank your website high on the list of results? If Search Engines were humans, that could be true. Art, you would agree, in most cases, would win! However, Search Engines are programs. They send chunks of code fragments that follow very precise algorithmic execution of selecting data from your web pages, computing, evaluating and indexing them, in order to rank your web site among millions of other competing prospects. Very scientific. Wouldn’t you say?

1. Use Meta Tags

Meta tags are snippets of text that describe your web page’s content. Meta tags is HTML code that your users don’t see as part of the content. They are places in the Head portion of your HTML as so:
<meta name=”description” content=”zelement data visualization”>
<meta name=”keywords” content=”charts, online charts, graphs”>
For the purpose of focusing only on SEO process, the example above, includes only SEO relevant meta tags. Both tags help Search Engine spiders understand what your web site is about. However, its very important to make sure the values of both are used in your site’s content.

2. Optimal Range of Keyword Repetition

Keyword optimal range repetition, should be not little, and not too much. Search engines penalize for excessive use of keywords, evaluating such forceful strategy as “manipulation of search results”. Typically, keyword repetition should be no less than 6-7 times per page. Check with your Search Engine guides. Anything below that would loose ranking in comparison to your competition that fights for the same term.

3. Establish your Keyword Density Strategy

Keyword Density is the percentage of times a keyword or phrase appears on a web page compared to the total number of words on the page. The higher your Keyword Density – the more chance your page would rank higher than your competitor. Use keyword density analyzers to help you with this task. Remember not to overstate this by breaking rule #2!
See how this becomes more science than art, now?

4. Links from external trusted websites

If I would to pick one but the most effective SEO Optimization technique, this would be it. The irony of this, however, is that its very difficult to persuade to link to your site someone in charge of content on those trusted websites. This is a pure business development task. “Link exchange” or “reciprocal links” is the concept you want to consider researching.

5. Use image “alt” attribute

When search engines send crawlers/spiders that read your pages, they don’t pick up the information on graphics. However, what they do read is the image “alt” attribute values of the tag. Make sure all your images provide values and they are relevant to your site. This miserable task of adding alt attribute to your images may have a dramatic impact on your ranking. Use it.