Servage Magazine

Unlike a physical store, our web shop and its identity lacks one key ingredient going in: a sense of trust within the community. With a physical store, everything is tangible, we know the actual location of the store and its owners, in many cases, are ones we can go to with complains or feedback. A daunting task for web designers and site owners is to create this sense of trust with their visitors, through various means. Why We Need Trust Design and content are the primary factors that influence visitors in providing trust for a website and its content, including products. Fortunately, with content, we can display our physical location and contact ...

When we draw on the Canvas context, we can make use of a stack of so-called drawing states. Each of these states stores data about the Canvas context at any one time. Here is a list of the data stored in the stack for each state: • Transformation matrix information such as rotations or translations using the context.rotate() and context.setTransform() methods • The current clipping region • The current values for canvas attributes, such as (but not limited to): —globalAlpha —globalCompositeOperation —strokeStyle —textAlign, textBaseline —lineCap, lineJoin, lineWidth, and miterLimit —fillStyle —font —shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY...

We usually design websites for our clients. Yet, most visitors to our clients’ sites are considered their targeted audience. And so ultimately, we look at end users as the base of a pyramid and our web designs as user-centric. From the pyramid perspective, clients are actually lower priority than users. User-centric designing serves most of our purposes for client-centric design work. User-Centric Design In the early days of web design, we did client-centric designs with the idea that clients are our bread and butter. Once we started incorporating user research, and accounting for user experiences through guerilla methods, we began evolving towards user-centric web design. Currently, ...

In many cases, copywriters and designers practice their crafts in different worlds with little knowledge of what the other is doing. If the two are seated near each other, and thus aware of each other’s work, this can make a huge difference for the results of our projects. Clients, of course, benefit from such an arrangement as such a team is likely to offer exceptional quality websites. Common Mistakes We commit big mistakes when: We keep the role of designers and copywriters entirely separate during our web design projects We design first and then instruct content writers to fill the void We prepare copy first and then design around that In such cases, we aren’t combining ...

Using HTML5 Canvas effectively requires a strong foundation in drawing, coloring, and transforming basic two-dimensional shapes. While the selection of built-in shapes is relatively limited, we can draw any shape we desire by using a series of line segments called paths. The HTML5 Canvas API is well covered in many online forms. The W3C site has an exhaustive and constantly updated reference that details the features of the Canvas 2D Drawing API. However, this online reference lacks concrete examples on using the API. Rather than simply reprinting this entire specification, we will spend our time creating examples to explain and explore as many features as we have ...

This article depicts about some advanced features about CSS techniques. The query starts with @media followed by the target media type keyword (screen in this case). The media feature and the value that is being tested are contained within parentheses. The style rules for browsers meeting those conditions get put between the curly braces. Here is another example that tests for two feature values: whether the screen is under 700 pixels wide and is in landscape orientation. Notice that each feature and value pair is placed inside parentheses. The word “and” strings the various requirements together. The device must pass all of the requirements in order to ...

In addition to the two-dimensional transform functions, the CSS Transforms spec also describes a system for creating a sense of space and perspective. Combined with transitions, you can use 3-D transforms to create rich interactive interfaces, such as image carousels, flippable cards, or spinning cubes! The below images shows a few examples of interfaces created with 3-D transforms. In the past, if you saw 3-D interfaces like these, you would assume it was Flash. Now it is native browser capabilities and good old CSS3. 3-D transforms are not a need-to-know skill for folks just starting out in web design, so I’m not going to go into full ...

The CSS Animations module allows authors to create real, honest-togoodness keyframe animation. Unlike transitions that go from one state to another, keyframe animation allows you to explicitly specify other states at points along the way, allowing for more granular control of the action. Those “points along the way” are established by keyframes that define the beginning or end of a segment of animation. CSS transitions are animations with two keyframes: a start state and an end state. More complex animations require many keyframes to control property changes in the sequence. Establishing the keyframes The animation process has two parts: first, establish the ...

We have already discussed using loops, arrays, Booleans, and other operators in JavaScript. Here I have provided an introduction to using functions in JavaScript. Functions are inevitable in JavaScript, especially for advanced Web Developers. Make sure that you are using Chrome, IE9+, or Firefox 5 for best performance. A function is a bit of code that doesn’t run until it is referenced or called. alert() is a function built into our browser. It’s a block of code that runs only when we explicitly tell it to. In a way, we can think of a function as a variable that contains logic, in that referencing that variable will run all the code stored ...

Because fluid layouts are fundamental to responsive design, I think it bears a quick recap. Fluid layouts are created using percentage width measurements so that elements resize proportionally to fill the available width of the screen or window. It’s not feasible to create a design for all the possible device widths on which your page might be viewed. Web designers generally create two or three designs (sometimes a few more) targeted at major device classes, such as smartphones, tablets, and desktop browsers. They rely on fluid layouts to take care of all the possible sizes in between. Fluid layouts avoid awkward amounts of leftover space and prevent the right ...