Category Archives: Web Design

web designs trends for 2015

Using More Larger Images

It is a fact that users prefer images to text, hence the triumph of info graphics, we have to say that these will also be a larger trend, if you have not noticed yet, more and more sites are using larger images for more impact, attracting and getting users to share two of the main social networks that are taking the web, Pinterest and Instagram, everything is becoming more visual and in 2015 we will see this trend with greater force.

Greatest, Stylized and Personality Many Fonts

This 2014 has been very good in the use of different fonts on the web; it is believed that next year they will be the protagonists of content, resurfacing bigger, better styles and the unique personality that characterizes them. The level of sophistication is marked sources that we use in our designs web pages and much of it is due to the high quality that can be found today in free or low cost fonts.

Expansion of Design “Responsive”

This should be obvious right? As we said, every day there are more users accessing the web from mobile, so it is important that the design of your website is responsive. This 2015 we will see how responsive design web pages increases and also the emergence of new tools and technologies or improvements thereon, to make it easier to work on designs responsive web pages.

Flat Design – Design Plano
Here you can have a debate, but I really think the flat design is not going to go anywhere and grow their tendency further in the coming year. Clear and clean items remain the protagonists giving a minimalist and sophisticated designs web pages style.

Windows 10 preview from Microsoft

Probably every one of us is waiting for the launch of Windows 10 preview from Microsoft. While there have been many leaks around the new factors of Windows 10, a lot has been left to assumptions. However, if the leaked information is to be believed, here’s a list of what to expect with the launch of Windows 10.

  • Ideally, Microsoft has skipped a number and renaming it’s new version as Windows instead of Windows 9.
  • Windows 10 is the last version going to be launched by Microsoft.
  • The newest OS is said to be compatible with different platforms, including the likes of computers, tablets, phones, and XBOX (hopefully, though, it’s not confirmed still).
  • The release date is slated to be sometime in spring 2015, as per the officials from Microsoft.
  • Last but not the least, users should be able to snap apps horizontally and vertically, which is currently unavailable with any other Windows OS.

With people piling up hopes with the launch of Windows 10, it’s yet to be seen if the newest entrant is able to meet the expectations of the users.

11 Rules for Better Writing, or How To not Use a Thesaurus

Typewriter by Flickr user Takashi Hososhima

(Flickr photo by Takashi Hososhima)

If You’re Struggling to write down Better Business and Marketing Copy, Listed below are Several General Writing Tips that allows you to Facilitate your Focus Your Skills.

My friend, a center-school teacher, tells a joke that goes like this:

He asked his students to put in writing essays about their winter-break vacations. One student wrote: “My family went skiing. It was good.”

My friend admonished him: “That’s fine, but ‘good’ is one of these bland word. Can’t you believe you studied of something else that conveys the experience better? Try using a thesaurus to locate a more exciting word than ‘good.’ ”

After consulting the thesaurus, the coed turned in his second attempt: “My family went skiing. It was an item on the market.”

Ah, ah! Funny, right?

Well, maybe if you’re a word nerd.

(In case you don’t get the joke: Of the whole possible synonyms the coed could’ve used, he chose person who made zero sense — not less than on this sentence. As opposed to substituting another adjective, say, “stupendous” or “satisfactory,” he chose a distinct portion of speech altogether — a noun, as in “goods and services.”)

The lesson: Beware the thesaurus. You can use it when writing. Just be absolutely certain you realize the total meaning of your preferred synonym and the context before plugging it in. It is able to change the meaning of your sentence, and maybe all the email message or website, entirely.

That’s one lesson we’ll cover on this post.

Free trial on Treehouse: Do you need to be informed more about starting your personal business in website design and development? Click here to take a look at a free 14-day trial on Treehouse.

As an editor for freelance writers and journalists, I’ve taught writing for several years to beginners, seasoned veterans and everybody in between. And along the way in which, I’ve continually run across common mistakes all writers, including me, commit.

In this guide, I’ll tackle basic writing for business and marketing purposes, which isn’t really that different than writing for publications. Most writing, at its core, is communicating information clearly to audiences — whether it’s one person or millions.

If it’s so simple, why achieve this a lot of people get it so wrong?

We can usually trace writing mistakes back to breaking certainly one of a handful of guidelines you should definitely follow when writing nearly anything. I say “nearly anything” because this recommendation probably wouldn’t suit presidential speechwriters, Russian novelists or haiku enthusiasts.

But it will probably fit you.

In the top, writing — even for marketing and business purposes — is an art, like painting or composing music. You will get better, but only by understanding and practicing solid techniques.

Here are a number of them.

1. Be simple

Write clearly and simply for your audience. (Photo by Nevit Dilmenwiki/Wikimedia Commons)

Write clearly and easily on your audience. (Photo by Nevit Dilmenwiki/Wikimedia Commons)

Don’t overwrite.

Construct clear and easy passages. Write shorter sentences. Write shorter paragraphs. You’re not writing a unique or poem. Sure, you will have a welcoming and tasty voice, but you’re not attempting to win the person Booker Prize.

As you become a more well-off and disciplined writer, that you would be able to experiment with varying your sentence length, weaving longer and shorter paragraphs together, and adding spice and nuance.

Structure is extremely important, too. If you’re writing something lengthy, consider creating a top level view first that clears a path for you: the main points you must make, where you’ll want to cause them to and the way they ought to relate to one another.

Many writers mistakenly focus only on individual sentences and ignore their larger structure. When they’re done, there’s nothing ostensibly wrong with each sentence, however the structure is a multitude.

2. Be responsible

Answer to yourself.

You needs to be capable of justify every word, phrase, sentence and paragraph — especially if what you’re writing will live for a very long time and be read by many. Often, you must wonder: Is that this the word I really want to make use of? Do I understand its implications? You want to also justify your structure: Maybe this sentence is smart, but does it make sense in this location? Is it involving the passages near it? Will it confuse my readers?

3. Be yourself

Don’t force it.

All writers have a natural voice — whether you’re an accomplished wordsmith or not — and that voice should surface naturally if you write. If you’re seeking to write differently than you normally would, you’re not being yourself — after which you permit yourself open to awkward phrases and unintentional mistakes.

For instance, I purposely vary my sentence and paragraph lengths, often following an extended (but grammatically correct) sentence with a quick, impactful one who often stands alone as its own paragraph. I frequently use alliteration, detailed lists and colorful anecdotes. These don’t work for every person.

I also use plenty of em dashes (these items: —) when writing. And that’s fine because that’s a part of my voice, and that i understand when to take advantage of them. At the flip side, I detest ellipses (these items: …) though em dashes and ellipses are somewhat interchangeable. I’ll even occasionally use a well-placed exclamation point, though my wife — also a writer — thinks I’m crazy.

It all comes down your style. (But I’d suggest you don’t use ellipses. i believe they’re lazy!)

One caution: Don’t let your voice muddle clarity. You could have both, but don’t sacrifice understanding for cleverness.

Another caution: Once I say “be yourself,” I also mean that quite literally. Never steal someone else’s writing or ideas and pass them off as your individual. It would constitute plagiarism or copyright infringement. Always cite your sources and link to them.

More resources

Copyscape.com lets you input quite a lot of text right into a form field that then uses Yahoo and Google APIs to seek out matches on the net. This permits you to ascertain whether another person has used your work, or if you’ve unintentionally used someone else’s words. Each search costs five cents. You should use Google or Yahoo searches to review your work. But it’s tedious. That you have to put chunks in quotes to look for matches.

4. Be your audience

Don’t assume you’re making sense.

Remember that you’re writing what you’re writing because you think you are aware of it. Obviously it makes complete sense to you! Shouldn’t it make sense to everyone?

That’s a mistake. Attempt to see your writing through someone else’s eyes and ask: Does this really make sense? If in case you have the posh of a second perspective, have a peer or two read it. If they’re confused or should ask you questions on what you mean, address those portions. They’re likely right.

5. Be pitiless

Murder your darlings.

That old aphorism — sometimes attributed to William Faulker, Eudora Welty or Oscar Wilde, but probably coined by Arthur Quiller-Couch — simply means you’ll often ought to remove your favorite passages or words once you can’t justify their presence. All writers has been there: We’re in love with a phrase we’ve written, however it just doesn’t fit. When that occurs, kill it. Don’t stress over shoving it in somewhere.

6. Be brief

Write it once.

Redundancy is a typical mistake everyone makes. Writers often rewrite phrases, sentences and passages they’ve already written — just in numerous words. If they’re lucky, their readers won’t notice or care. What’s worse, their readers turns into frustrated or angry because they could feel like they’re wasting their time. Even worse than that: They lose interest. They’ll surrender and shut your site.

I have zero scientific evidence to support this, but here’s my theory: Too-verbose writers create redundant passages because they subconsciously think they didn’t explain it well the primary time.

If you discover redundancies to your writing, wonder: Where did I explain this already, and did I explain it clearly?

Tighten your writing. Then tighten some more. (Flickr photo by Eric)

Tighten your writing. Then tighten some more. (Flickr photo by Eric)

7. Be tight

Squeeze out the flotsam.

Tightening is one of many best stuff you can do as a writer. There are a number of steps I follow when tightening: First i glance for major structural redundancies: What sections are similar and may be combined? Sometimes i will eliminate a complete paragraph.

Then i glance for passages and sentences that may be removed or combined with others. Wonder: Am I saying an analogous thing again? If that’s the case — or perhaps if it’s near the identical thing — I consider removing it.

Last, i glance for words i will remove without changing my meaning. This will trim your writing significantly and leave you with something fresh, clear and straightforward.

8. Be correct

Read what you wrote.

Then read it again.

And then read it again.

And always run a spelling, punctuation and grammar check. Microsoft Word remains the correct spellchecker around, but because it’s a chunk pricey, you could often find free tools like Google Docs (even though it won’t check grammar) that suffice.

Check for commonly misused homonyms, too. These are words that sound a similar, but are spelled differently and feature different meanings — like “their,” “there” and “they’re,” or “it’s” and “its.”

Also, be wary of shorthand, emoticons or emojis. We’ve all seen them: LOL, b4, ttyl, ppl and anything else. Sometimes they could make sense, but watch out and think about your audience.

More resources

This list from Weber State University contains common mistakes every writer should know, including homonyms, misused words and problem phrases.

Here’s an inventory of common mistakes — and the way to circumvent them — I compiled for Treehouse writers.

Grammar Girl, aka Mignon Fogarty of QuickandDirtyTips.com, is another excellent resource for those pesky grammar and punctuation problems.

9. Be courteous

Write on your grandma.

This mostly applies to emails and other communication. Remember: Written words can’t carry voice inflection, body language or every other modifying treatments. Therefore, you can’t control as easily how someone will react to what you write. What sounds cheerful to you might sound snide for your reader.

Put differently: Your audience can react negatively, although what you mean is written with the simplest intentions. When you’re corresponding with a shopper, a md or a coworker, be careful and write with professionalism.

Write with courtesy, like how you

Write in a well mannered way, like how you’d address your grandma. (Flickr photo by Wystan)

Try to incorporate a salutation — “Hi Tim,” — everytime you can. Always end with a “Thanks, Tim” or “Best, Tim” or similar sign-off. These common courtesies are short and free, they usually can mean an awful lot to the receiver.

Also be wary of writing an excessive amount of out of your cellular phone or tablet. The ease these devices provide will also be a pitfall and lead you to crafting curt and doubtless discourteous replies. In the event you must use a mobile device, try and include a salutation and “thank-you” sign-off or a minimum of your name. Always check your spelling, grammar and punctuation. And skim it for autocorrect errors. Then read it again.

10. Be prompt

Don’t cast off responses.

We’re often tempted to read emails immediately but not respond until later. If you’ve told someone one can email her by Tuesday, email her by Tuesday. The identical goes for promised communications or work you’ve done.

11. Be focused

Remove distractions.

If you end up having a tough time targeting your writing or proofreading, try removing all distractions: Turn off the television, radio, music or anything that gives auditory distractions. You might imagine you’re just reading, writing and looking out at your work — but you’re actually hearing it. Any competition can negatively affect your work, and unless you’ve been immersed in loud working environments — like a newspaper, a stock exchange or a nitroglycerin plant — your mind’s prone to wander. (If you’d like to work with music, play it softly and think about songs that don’t have lyrics, similar to classical or electronic music. You could love the Beatles, but trust me, Paul McCartney will fight your inner monologue.)

Turn off the TV if its bothering you even slightly. (Flickr photo by flash.pro)

Turn off the television if it’s bothering you even slightly. (Flickr photo by flash.pro)

If you’re still having trouble and end up missing easy mistakes, read aloud what you wrote and visually deal with each word as you go along. Hearing it aloud may help you notice missed or incorrect words.

You may additionally give it an hour or an afternoon. Return in your writing after a break. You’ll catch mistakes in the event you give yourself a rest.

This guide isn’t exhaustive, after all. Learning to be a more in-depth writer takes years. The neatest advice I’ve learned is that this: Read an awful lot. Write much. Scour the internet for the kind of writing you should do. See what others are writing and the way it affects you as a reader.

With consistent and practiced effort, you’ll improve.

Flexbox: The subsequent Generation of CSS Layout Has Arrived

Rubber-Band-Duncan-Hull

(Stretch your CSS layout options with Flexbox. Flickr photo by Duncan Hull.)

Flexbox is a completely new set of CSS properties that permits designers to create flexible layouts. It really is great news for responsive design since it dramatically reduces the complexity of fluid grids. Browser support for flexbox is finally here, so whenever you haven’t learned about flexbox yet, then it’s time to start.

Flexbox is Ready

The web was originally conceived as a mechanism for exchanging scientific documents. Web technology has evolved a lot since then, but we still depend upon CSS properties which have their roots in digital publishing. Indeed, CSS layout and positioning are most of the most difficult concepts for web designers, without reference to experience. Designers have faith in using CSS properties like float and clear, or CSS declarations like display: block; and display: inline; to govern their designs. With display: flexbox; designers at the moment are accountable for the direction, alignment, and spacing of page elements.

Free trial on Treehouse: Do you need to enhance your website design skills? Click here to aim a free 14-day trial on Treehouse.

Flexbox is a remarkably intelligent option to a protracted-standing convoluted problem. For the previous couple of years, designers were patiently awaiting browser support to catch as much as the CSS Flexible Box Layout Module specification. Finally, the newest versions of all major browsers include flexbox support. (For more detailed information, see the browser support section below.)

Flexbox Example and Syntax

Flexbox and media queries make for an impressive combination. Within the following example, I’ve recreated a simplified version of the Treehouse homepage header using a mobile-first flexbox approach. Open this pen in a brand new browser window and resize the window to work out the header in action.

See the Pen Treehouse Flexbox Example by Nick Pettit (@nickpettit) on CodePen.

At first glance, it could actually not appear very special. However, in case you take a look at the code, you’ll notice that this layout uses no position or float properties. It also doesn’t use any block or inline values for display.

I’ve separated the instance CSS into the flexbox styles after which the entire less relevant code that just makes it look nice. Here’s how each portion of the flexbox styling is operating on this example.

display: flex

The declaration display: flex; defines a “flex container” and its direct children automatically become “flex items.” A flex container has a prime axis, that is the main direction by which flex items are laid out. The cross axis is perpendicular to the foremost axis. Both the principle axis and the cross axis have a hard and fast of properties which can control how flex items are placed in the case of each other.

This diagram from the W3C specification for flexbox describes how the foremost axis and cross axis relate to each other.

You also can nest flex containers inside each other, which I’ve done within the example code, because the display property isn’t always automatically inherited. Both the .header and .nav classes have the display: flex; declaration applied. This can be corresponding to how rows and columns in a CSS framework like Foundation would be nested.

flex-direction

One thing to notice is that the principle axis is the first direction, and never necessarily the horizontal direction. The direction of a flex container may be changed with the flex-direction property. At mobile sizes, the navigation inside the example becomes a 1-column list instead of horizontal links. This can be accomplished within the example with the flex-direction: column; declaration.

Then, at larger sizes, the declaration flex-direction: row; is used to make the navigation horizontal again. The default value for flex-direction is row, so even when the flex-direction property wasn’t used in any respect, then the list elements would still appear horizontal.

flex

The flex property is applied to flex items. It’s a shorthand property that mixes the flex-grow, flex-shrink, and flex-basis properties into one declaration. The flex-grow and flex-shrink properties both take a unitless value that defines how much space each element should soak up in proportion to each other. By default, flex-grow is 0 and flex-shrink is 1, meaning that each one the weather may be in proportion to each other. The flex-basis property defines the dimensions of elements before more space is sent and its default value is auto.

The latter two properties are optional, so if we simply apply the declaration flex: 1; to the .nav class, it changes the flex-grow value to at least one. The alternative flex item within the same flex container is the h1 element with the category .logo, and because flex-grow is 0 by default, the .nav will always take in extra space than the .logo.

justify-content

If there’s space left over inside a flex container, either as the flex items have reached their maximum size or because they’re inflexible, then the justify-content property can define how the gap ought to be used. Within the example, the .header has the declaration justify-content: space-between; which implies the 1st flex item should be at the beginning of the road, the very last thing will touch the tip of the road, and anything between might be evenly distributed. At the nested .nav flex container, the declaration justify-content: space-around; is used to distribute the remainder space evenly around each navigation link.

See this diagram from the W3C to work out how all the justify-content properties behave.

This image from the W3C demonstrates how the various values for the justify-content property will behave.

This image from the W3C demonstrates how the numerous values for the justify-content property will behave.

And more…

This is simply a small sample of the hot flexbox properties. For more comprehensive information, see the resources section below.

Browser Support

In general, in the event you only have to support the most recent browsers (equivalent to a blog for web designers) then you’re safe to exploit flexbox. However, there are a couple of caveats that should be addressed for slightly older browsers. To illustrate, as of Safari 7.0 and mobile Safari 7.0, the -webkit- prefix continues to be required.

More importantly, there are multiple implementations of the flexbox syntax. Previous to the introduction of the fashionable syntax within the W3C spec, an unofficial syntax was supported by several legacy browsers. Further, there’s a good older display: box syntax. There also are a couple of bugs to observe out for (even in modern browsers) that will or is probably not minor, counting on the context of a project.

For specific information regarding browser support, see the Am i able to Use support table for flexbox. You may additionally need to examine tips on how to support flexbox in legacy browsers.

One more note: It’s not really really useful to apply flexbox for overall page layouts. Rendering content with flexbox causes horizontal misalignment and shifting because the page is loading, because of the way sizes must be calculated. This would actually make the page load a piece slower in most instances. However, the grid layout module aims to further address page layout and browser support should arrive someday.

Flexbox Resources

This article is barely meant to spread awareness and excitement in regards to the arrival of flexbox, and there’s so much more to be informed. If you’re considering using flexbox, here’s some essential reading:

  • CSS Layout Techniques: During this Treehouse course, Guil Hernandez covers common layout and positioning methods, including flexbox.
  • A Complete Guide to Flexbox | CSS-Tricks: If you would like to grasp more about each element and property within the flexbox module, i like to recommend this guide from Chris Coyier.
  • Flexbox within the real world: a superb blog post from Sean Fioritto about find out how to use flexbox responsibly to deal with various browser traffic scenarios, including detailed code to assist support legacy browsers if necessary.
  • The Ultimate Flexbox Cheat Sheet: An incredible “cheat sheet” page (also from Sean Fioritto) about easy methods to use various flexbox properties and values.
  • CSS Flexible Box Layout Module | W3C: For very detailed technical information, read the W3C flexbox specification.
  • Flexplorer: Amazing tool by Bennett Feely that enables you to quickly experiment with some of the flexbox properties and values.

An Introduction to Perceived Performance

Speeding Up Page Load Times

(Illustration by Mat Helme, Treehouse)

Perceived Performance Is a Measure of the way Quick a User Thinks Your Site Is, and That’s Often More Important Than Its True Speed

Performance is crucial. It will probably mean the adaptation between creating a sale, or losing a customer to the contest. Your website should respond quickly to requests from users and this implies optimising your site with performance in mind. I’ve written about performance optimisation long ago, but from the point of view of you, the developer. Examining network timelines and PageSpeed scores is all well and good, but there’s a complete area of performance optimisation that this technical stuff doesn’t cover.

Perceived performance refers to how briskly a user thinks your website is, not necessarily how briskly your technical stats say it’s far. When it involves optimising your websites, it’s what the user thinks that truly matters, not the technical wizardry that’s occurring backstage.

In this post, you’re going to be told a few few key concepts of perceived performance, and a few techniques you should use to make your websites feel faster.

Note: Using the techniques outlined during this post are on no account an alternative to good (traditional) performance optimisations. Instead, you should utilize these techniques to go with your existing optimisation strategies and extra enhance the entire user experience.

Response Times and Perceived Performance

One of the most important bottlenecks in usability is response times — looking ahead to new content to load, or an operation to finish. In his book Usability Engineering, Jakob Nielsen identifies three main response deadlines.

  • 0.1 seconds — Operations which might be completed in 100ms or fewer will feel instantaneous to the user. Here’s the most reliable that you can aim for when optimising your websites.
  • 1 second — Operations that take 1 second to end are generally OK, however the user will feel the pause. If all your operations take 1 second to accomplish, your website may feel a touch sluggish.
  • 10 seconds — If an operation takes 10 seconds or more to finish, you’ll struggle to keep up the user’s attention. They will switch over to a brand new tab, or stop in your website completely. Needless to say this relies on what operation is being completed. As an example, users are prone to stick around if they’ve just submitted their card details within the checkout than if they’re waiting to load a product page.

Jakob Nielsen originally published these three limits back in 1993. i suspect the primary two are still reasonable, but i might speculate the higher limit is now towards 5 seconds. As internet speeds have increased, we’ve grown used to browsing the internet at a lighting pace. The facility to multi-task has also shortened our attention span as we’ll are likely to switch to something else if an online page is taking too long to load. Some even say that we now live in an A.D.D. Culture, where attention has become essentially the mostsome of the most valuable resource.

Free trial on Treehouse: Do you need to benefit more about obtimising your website and other front-end tips? Click here to aim a free 14-day trial on Treehouse.

Loading Dialogs

You now find out about the response limits you should aim for, but what if it’s just impossible to finish an action in 100ms? There’s always going to be operations that take time to complete. Whether you’re loading content over a network, or manipulating an extremely large data set at the client (think: sorting tables), some operations simply take time. In these instances, it’s best to take advantage of some form of loading dialog to turn the user that something is going on and that your website hasn’t just locked up. The way you decide to display this loading dialog may have a huge impact in your websites perceived performance. Let’s explore.

This tweet by @deeje was doing the rounds earlier this year showing how Facebook found that changing the advent of the loading animation impacted who users gave the impression to be behind the slow loading time (Facebook or iOS).

progress bar with label

Progress bars provide realtime feedback to the user and help to extend perceived performance.

Loading animations like spinners are good, but progress bars (with a percentage figure) are even better. While you can, it’s always best to display a progress bar to the user that offers them realtime feedback on how much “work” is left to do before they’ll continue using your website. Needless to say, there’ll be times whenever you simply don’t understand how much work must be done and therefore cannot use progress bars.

Note: There has been a fantastic study (pdf) conducted by researchers from the Human Computer Interaction Institute at Carnegie Mellon University that found varying the animations on progress bars could also affect perceived performance.

If you can not use progress bars, another choice is to mask loading time by way of animations. Research has shown which you can significantly reduce the sensation of waiting by keeping a user’s attention occupied. Say that you’re loading some content from the server that’s going to take 1 second. You might want to mask this loading time by applying a 1-second animation that slides out the present content after which slides within the new content loaded from the server. If the content loads before the animation has completed, the user could be none the wiser that the recent content needed to be fetched from the server. If the animation completes before the content is loaded, you’re able to fall back to displaying a loading spinner. As a consequence, users will still feel as if they’re awaiting a shorter period of time as they’re going to was distracted by the animation.

loading animations

Using animations to mask loading times.

Note: Many browsers now support hardware acceleration for CSS3 animations. Ensure that you are taking full good thing about this on the way to make your animations smooth. I’ve found jQuery Transit really handy for managing animations prior to now. The library will use CSS3 animations when available, or fall back to JavaScript animations in older browsers.

While this strategy can are available in very handy, it’s important to take advantage of these animations carefully. Having a large number of long-running animations may make it hard for a user to navigate through your website, leading to a negative user experience.

Buttons on Mobile

Traditionally mobile browsers have waited 300ms after a user touches a button to peer if the user will make a double tap. Refer back to the 3 main response limits we checked out earlier, and you’ll notice we’ve already blown the best 100ms response time by 300 percent before we’ve even began to execute an operation!

In the past, developers have gotten around this problem by disabling zooming using the subsequent meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no">
 

This isn’t ideal, though, because pinch-zooming could be a very useful feature.

Luckily, browser vendors have identified this as an issue and some months ago the Chrome team led the style by removing the 300ms delay in Chrome 32. To try this, in addition they removed the feature that enables a user to zoom by double-tapping at the page, but have retained pinch-zooming. Firefox has since removed the delay also. A polyfill called FastClick have been developed by FT Labs for you to remove the delay in other browsers.

Use Button States

active button state

Use the :active button state to make the UI feel more responsive.

Another way of ensuring that button clicks appear responsive is to make use of states in your buttons. This enables you to use different styling when a button is concentrated, hovered, or pressed. The :active state is especially important for making your applications appear responsive. This state is triggered when the user clicks on a component.

button:active {
     /* Change the styling */
     background-color: rgba(0,0,0,0.5);
 }
 

To get the ‘:active’ state working in some mobile browsers, you’ll have to apply this JavaScript hack in your page.

document.addEventListener("touchstart", function(){}, true);
 

Some browsers will apply a default styling to active buttons. You could remove this by adding the next style rules on your buttons.

-webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 

These rules will set the highlight color to be transparent.

Final Thoughts

It’s easy to get caught up with examining network timelines and optimising page assets to extend performance. But if it comes all the way down to it, perceived performance may be more important than actual performance.

The user is king and if he thinks your site is slow, it doesn’t matter how high your PageSpeed score is. You’ve got a true problem. Don’t get me wrong. I’m not advocating you overlook traditional performance optimisations. All that stuff continues to be super-important, but it’s invisible to the user. It’s the visible things that make a difference to perceived performance. To ensure that you have got :active states in your buttons, appropriately used animations to mask loading times, and progress bars all help to make your website feel fast to the user. In the end, that’s what really matters.

There’s an incredible area of analysis surrounding perceived performance. During this post you’ve barely scratched the skin. If you’re all for learning more, i like to recommend that you just investigate cross-check one of the links below.

Further Reading

5 Skills You Didn’t Know You Needed

One important skill: Seeing a project from a birds-eye view. (Flick photo by Irene Grassi)

One important skill: Seeing a project from a bird’s-eye view. (Flick photo by Irene Grassi)

The sheer excitement of making something valuable fueled his early interest in writing code, and the pride of achieving something his peers found genuinely interesting left an indelible impression.

For Dan LaMotte, now an internet application programmer for internal projects at software giant Symantec in Wakeeney, Kan., that moment materialized from an effortless calculator program he wrote in junior highschool to recollect common math formulas for area, volume, and more.

“At the time, it didn’t quite register as ‘programming,’ however it was a ton of fun writing it and watching as people flocked to it due to the value,” LaMotte, 28, says.

Often it’s that very appetite to create, to fulfill a necessity and to realize that propels us into web development and design within the first place and carries us during the first ups and downs.

Eventually, though, it becomes apparent that creativity and exuberance alone aren’t enough.

You need skills, too.

And not only “I can code” skills. Rather, for those folks just starting out, these high-demand and sometimes-used skills are ones we don’t even realize we’d like.

For website design convert Tim Brown, 28, of Minneapolis, navigating that transition remains relatively fresh in his memory.

“For someone who’s just getting started in website design, I’d suggest keeping your eyes at the path directly in front of you, get excited in the event you can manipulate basic HTML and CSS, and do fun projects that exercise your current abilities,” says the freelancer, whose artistic expression steered him toward website design and led him to be told more; he have been his own boss for greater than two years now. “Then slowly add jQuery and PHP or other next-level languages, and be pleased with yourself for buying over speed bumps; every one sets you farther aside from the wider fold of non-coding designers. It’s difficult, but it’s rewarding.”

Free trial on Treehouse: Would you like to benefit more of the programming skills that employers want? Click here to take a look at a free 14-day trial on Treehouse.

To help take your raw talents and basic skills to the subsequent level, listed here are five important but not intuitive strands of recommendation from developers and architects who spoke to Treehouse recently:

1. Ask the correct Questions

On the heels of latest clients and new challenges comes a brand new skill: the art of asking the suitable questions and drawing out the client’s dos, don’ts and unspoken expectations.

Jake Peterson

Jake Peterson

Web designer Jake Peterson of 5j Design in Sioux Falls, S.D., says he feels that notwithstanding clients say they don’t have any idea what they need, they frequently leave things unsaid about what they don’t want.

“Make certain to ask a variety of questions up front and get as close as you may to their vision,” Peterson, 30, tells Treehouse.

And ask your entire stakeholders, Brown adds.

“That’s where creative curation and a radical initial discovery become major assets in a designer’s arsenal, and it’s something that I’m learning pays off later inside the project,” he says.

2. Translate Between Technical and Visual

Having all of the information and direction you would like for a project is a smart first step. But knowing tips on how to translate that vision into the optimal technical components of a website’s code or design is more of an issue-solving skill than an easy matter of information.

In the design space, you can actually sometimes become overwhelmed by requests or changes, Brown says:

“Knowing the way to process that information and create relevant modifications while maintaining the integrity of the design is a useful skill.”

Sometimes the challenge is vice versa, and often, LaMotte notes, in preference to just writing code, “programmers get installed odd spots where they must understand the code in addition to ways to structure it.”

Being tasked with an , like reports with easy-to-understand graphs or charts, means first identifying what data must be gathered after which translating that data right into a program that showcases the information visually.

“I have the original position of understanding the technical details in addition to the ‘soft details,’ which individuals lean on,” he says. “Understanding what’s possible technically in addition to what has to be accomplished within the big picture is important.”

3. See the massive Picture

Stepping back from the main points of the code to get a bird’s-eye view of the project as an entire doesn’t often come naturally.

Dan LaMotte

Dan LaMotte

“At some point, programming becomes a device for your toolbox, kind of like a hammer,” LaMotte continues. “Understanding when to apply the hammer is essential, and understanding that not all issues want a hammer is much more important. In my experience, whenever you start, the sole thing you should worry about is the way to code. Eventually, ‘how to code’ is discreet, and naturally there are new things to take care of with, but understanding the consequences of the code and the way it plays a component inside the big picture is an important skill someone must learn.”

For him, learning the craft well enough to begin specializing in the larger picture required time spent outside of sophistication. For Peterson, it took the shape of countless online forum posts, Google searches, instructional videos and frequent calls to his father-in-law, a programmer. Upon getting developed a very good grasp of the technical details, the challenge is to place the client’s vision inside the right context.

“Try to determine the small nugget of truth in what they’re asking after which weigh that against the remainder of the product,” LaMotte says. “Also weigh it against what the important audience needs. Keep seeking what people need and never what people want. Get as much time as you could with the folks who make the choices and pick their brain. Understand their vision before understanding how they ‘want’ it implemented, and know the way they want it implemented.

“Vision isn’t the same as the product. The vision delivers understanding into the way it has to be used and worked with. The product they suspect they wish could be very different because they don’t understand the technical details in play such as you do.”

4. Position with Persuasion

There is skill and experience in learning to translate the abstract into the concrete and to determine from an even bigger perspective, but clients typically don’t — and infrequently can’t — take all of that into consideration when dreaming up their vision for a project. That’s where the skill of persuasion comes into play.

Through “many, many, many failures,” LaMotte says the article he “found most effective was asking trusted people (I’ve always had great working relationships with my managers) about how I acted in meetings and different situations and getting feedback. … The largest lesson with soft skills is that technical prowess, knowledge and correctness won’t win your battles. You’ll be persuading those that don’t know how things work on that level. You must position yourself properly.”

Brown applies an identical principle to career advancement.

Tim Brown

Tim Brown

“I never realized how important networking will be after I got into website design,” he says. “In this current market, even individuals who aren’t technically in sales will do well to sharpen their sales skills. It’s all about ‘non-sales selling;’ even technical coder types can go farther of their career in the event that they can phrase their expertise within the right way, selling themselves for roles in consultation, freelance and contract positions. To be agile and ready to adapt is very large, and although i used to be aware this was the case, I’ve realized people migrate much in our current website design industry that you’ve got to have the mentality of a freelancer in loads of ways.”

He developed that skill by networking with online communities of fellow web designers, members of a pro association, classmates and others in natural social situations he found his way into, the entire while noticing needs for his services and intentionally starting those conversations on his own.

5. Keep It Simple

The culmination of translating the appropriate information into the suitable context inside the right way is then distilling all of it back into its simplest form. Keeping things simpler than they should be was a key takeaway for Peterson, who notes that a shopper who asks for 10 pages describing all his products would likely be better served through streamlining that information on half as many pages or organizing them better.

The challenge is taking things that typically sound complex and designing them in a technique on the way to achieve a good, lasting effect at the user, and it involves greater than just the text and pictures.

“There’s much more to design than what it looks as if,” he says. “It’s the way you navigate a page, where you draw the attention to. On the internet, things can move and alter, so how do you create a flow?”

It’s taking the client’s ultimate goals — producing leads, making sales, conveying a message or prompting a phone call — and integrating them in a method that doesn’t wander away in clutter.

Call it clean, minimalist or simple elegance. “More and more, that’s what people want,” he says.