Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Archive for January, 2014

How to serve users better when building digital products

Friday, January 31st, 2014 by Servage
Designers today face immense pressure to be creative and produce out-the-of-box digital products. And so, being restrictive toward particular specialties or skills is a costly attitude for us, as we need to adapt to the changing needs of the industry. Our role expands beyond just caring about the interface. Various Job Titles If you look at the job ads for a web designer, you will find many different titles for a worker in the trade. If a laborer finds they are good at usability testing, compared to other designing and programming work, they will designate themselves as a Usability Web Designer. If user experiences ...

Drawing with Javascript

Tuesday, January 28th, 2014 by Servage
smily The Canvas API includes functions for creating basic shapes (such as strokeRect() for drawing a rectangular outline and beginPath() for starting a line drawing) and moving things around (such as rotate() and scale()), plus attributes for applying styles (for example, lineWidth, strokeStyle, fillStyle, and font). This example shows the simple smiley face we’ll be creating with the Canvas API. And here is the script that created it. Don’t worry that you don’t know any JavaScript yet. Just skim through the script and pay attention to the little notes. I’ll also describe some of the functions in use at the end. I bet you’ll get the gist of it just fine. <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded() ...

Working well with resolutions and transparency

Saturday, January 25th, 2014 by Servage
logo   Both GIF and PNG formats allow parts of an image to be transparent, allowing the background color or image to show through. In this section, we’ll take a closer look at transparent graphics, including tips on how to make them. Remember that there are two types of transparency. In binary transparency, pixels are either entirely transparent or entirely opaque, like an on/off switch. Both GIF and PNG files support binary transparency. In alpha (or alpha-channel) transparency, a pixel may be totally transparent, totally opaque, or up to 254 levels of opaqueness in between (a total of 256 opacity levels). Only PNGs support alpha transparency. The advantage of PNGs with alpha transparency is that ...

The benefits of Fireworks improve webdesign

Thursday, January 23rd, 2014 by Servage
Web designers are at a critical juncture, going from big to tiny device designs. We need more powerful tools to assist us with the challenge for responsive designing. Adobe Fireworks can meet that challenge. Therefore, I will discuss some of the positive aspects of Fireworks and its impact on our website designing and programming. More often than not, the web design community relies heavily on Photoshop and illustrator for every sort of graphic designing needs, whether it be for small websites or large ones for big businesses. In contrast, the general impression of Fireworks is for managing only small to medium level websites, especially when budget ...

Working with SVG Tools

Tuesday, January 21st, 2014 by Servage
inkscape-editing-svg-icon Technically, all you need to create SVG graphics is a text editor (and genius visualization skills, as well as heroic patience!), but you’ll be much happier having a graphics program doing it for you. Fortunately, in Adobe Illustrator, you can choose “SVG (svg)” from the Format menu when saving a drawing and ta da—SVG file! If you don’t have Illustrator, try downloading the Inkscape image editor, which is made specifically for SVG (inkscape.org). It is available for Windows, Mac, and Linux. It takes a little getting used to, but you can’t beat the price (free). Adding SVG to a page An SVG image can be ...

Choosing the best image formats

Sunday, January 19th, 2014 by Servage
GIF compression GIF compression is “lossless,” which means that no image information is sacrificed in order to compress the indexed image (although some image information may be lost when the RGB image is converted to a limited color palette). It uses a compression scheme (called “LZW” for Lempel-Ziv-Welch) that takes advantage of repetition in data. When it encounters a string of pixels of identical color, it can compress that into one data description. This is why images with large areas of flat color condense better than images with textures. To use an extremely simplified example, when the compression scheme encounters a row of 14 identical blue pixels, it ...

Design the search-elements for better conversion funnel

Friday, January 17th, 2014 by Servage
We are living in the age of a tech-savvy generation. Our modern visitors are thus jumping directly to the search feature of an e-commerce storefront, unless they are simply browsing or not clear on what they want to buy. Our complex e-commerce websites are equipped with the latest search functionality and its features. Therefore, I discuss some important aspects of search features and their role in conversion. Designing Search Let’s first think about designing the product search. We need to conceive of two things during designing. First is the placement for the product search. Generally, a search field is placed on the top of the page, ...

Introducing to SVG for websites

Thursday, January 16th, 2014 by Servage
svgSo far we have focused on the tried-and-true bitmapped web graphic formats, but there is another up-and-coming option that I’d like you to be familiar with. It’s somewhat misleading to call Scalable Vector Graphics (SVG) “up-and-coming” because the specification has been in development since 1999 and it became a Recommendation in 2003, but thanks to improving browser support, we may finally be able to take advantage of the benefits it has to offer. As I mentioned at the beginning, SVG is a bit of an oddball. Unlike other web image formats, SVG is a vector image format, meaning that it contains instructions for drawing shapes rather than grids of pixels. This makes SVG ...

Improve development-productivity with efficient project management

Tuesday, January 14th, 2014 by Servage
Keeping a project on track can be a bit tricky at times, so developing some efficient project management techniques helps us to synchronize the steps with clients and the development team. Project management creates a collaborative environment with accountability. I discuss project management here from the project kick-off stage, so we can build trust with our clients from the beginning. Tools for Project Management Most established web development companies use automated software to manage projects. Many employ the latest project management software that is available for free or they pay for a proprietary system. For startups, or a team of freelancers, finding suitable project management software can be ...

Using DOM elements in Javascript – Part 4

Saturday, January 11th, 2014 by Servage
JavaScript came about during a dark and lawless time, before the web standards movement, when all the major players in the browser world were—for want of a better term—winging it. It likely won’t come as a major surprise to anyone that Netscape and Microsoft implemented radically different versions of the DOM, with the prevailing sentiment being “may the best browser win.” insertBefore() The insertBefore() method, as you might guess, inserts an element before another element. It takes two arguments: the first is the node that gets inserted, and the second is the element it gets inserted in front of. You also need to know the ...