Follow Inspired Magazine on Feedspot

Continue with Google
Continue with Facebook


Without any doubt, during the past five years, Google Chrome has emerged as the dominant force in the browser war for desktop users and (obviously) mobile users alike.  Developers, on the other hand, being more tech-savvy and security-conscious than the average user, have a tendency to prefer Firefox.  Indeed all security-focused distros feature Firefox as the browser of choice rather than Chromium, even though the latter is also open source and free in every sense of the word.

Fortunately the adherence to web standards means that the browser most developers are using is mostly compatible with the browser most ordinary users are using.  This is important because it means something developed in Firefox is 99% of the time going to work flawlessly in Chrome.  Internet Explorer is no longer a priority for most developers because it’s seen as a fringe browser only used to download other browsers for installation.  Nobody at present seems to be taking Edge very seriously either.

Security and privacy are not the only reasons to like Firefox, however.  Firefox has always been mostly a community-driven project (though, just like Wikipedia, the “community” has been becoming increasingly snooty and self-righteous),  and improving the user experience is at the heart of the community development model.  To put it another way, community-based projects can be expected to put the needs of users first.  Corporate projects can be expected to put the needs of corporations first.  What it means for you as a developer is that there is an abundance of free tools at your disposal to help make your job easier, and in general those tools are easier to use than most non-free alternatives.

1. Thimble

Thimble is primarily meant to be a tool for learning HTML, but because it is a full-featured HTML and CSS editor, it’s actually quite handy for bashing out a quick solution and then copying the resulting HTML to a file for uploading to your server.  It works a lot better than CPanel’s code editor, because it doesn’t do any annoying ghosting and doesn’t treat every apostrophe in your text copy as a string delimeter.

The interface is divided into two panes, as you’d expect, with the code pane on the left and the preview pane on the right.  There are three preview modes available:

  • Desktop
  • Mobile
  • Full Screen

In the third preview mode, the code pane is temporarily hidden until you return to the default view, which is as simple as clicking a button.  Automatic preview is on by default, which shows the results of your work as you type, but if you find that too distracting, you can turn it off.  It will even show the results of your CSS styling in real-time.  So if you create a content-filled element block first and then go back and add CSS style instructions, you can experiment with different looks very simply.

Unlike many other online editors, it is easy to include external files, and you can even create entire trees of folders to store them.  This makes Thimble my favorite go-to solution for knocking out a quick page or site update, especially when I’m traveling.

The downsides are obviously that it’s an online tool, meaning you’ll need to have an active Internet connection to run it (unless you’ve managed to successfully clone the Thimble platform to a locally hosted server), and secondly that you shouldn’t publish your commercial projects on their platform, because it’s not meant to be a hosting solution for professionals.

Instead, you’ll copy your HTML code and paste it into CPanel code editor or a text file, and save the result to your own server.  Of course, you’ll have your file tree already in place.

As with many Mozilla projects, Thimble documentation isn’t detailed enough, especially in the context of what you can and can’t do with it.  Their assumption is that you’ll read the Terms of Use, which is not really a reasonable assumption, even though every web manager who uses any online development solutions should always do so.

The important section of the Terms of Use is the part where it tells you that you grant Mozilla a royalty-free license to anything you publish on their platform and that you consent to other people re-using and modifying anything you publish.  Obviously, therefore, you really wouldn’t want to publish your professional projects there.

Because it’s an open source project, there’s nothing to stop you creating your own clone of it from the source code and using it on your own server for your own projects.

2. X-Ray Goggles

Kids have always been intrigued by the idea of X-Ray Goggles, but alas such technology (at least the kind that actually works as expected) is well beyond the reach of the average kid’s budget.  Mozilla’s X-Ray Goggles won’t let you see what the school nurse is concealing under her uniform, or what the Scottish groundskeeper has on under his kilt, but it will let you see how a web page works, and then edit the underlying code to make it work differently.  That has to be more exciting than simple voyeurism, right?

The primary use for this, from a professional point of view, is sandbox modeling to test alterations to existing designs without needing to make any permanent change.  It’s nice and simple, and installation is simply a matter of dragging the X-Ray Goggles button onto your bookmarks toolbar.  Click the button to activate it, and press ESC to turn it off again.

3. Webmaker

This isn’t quite so useful to most developers, since it is designed to be Android-only, and it’s not offering much that you couldn’t find in a social media platform.  In order to provide it, Mozilla ditched their actually quite useful online video editing tool (Popcorn), and replaced it with this.  Webmaker is good for beginners, because it enforces a mobile-first approach to design, which is essential to modern websites.  Experts, however, will feel frustrated by the limitations that come with developing in a mobile only environment, and it is fairly obvious this tool is mostly aimed at attracting teenagers to the Mozilla brand, and helping teachers to feel like they’re cool and hip because they can speak the lingo of mobile web development.

Another issue that will cause frustration for some is that it’s yet another app competing for space and resources on their device.  Android has a habit of filling up too quickly and most users don’t shut down their apps when they’re done with them because Google didn’t make it easy or intuitive to close anything.  Consequently, most Android phones are a mess after just a few months and people end up either replacing them or just being really upset that their phone is constantly reporting that it’s low on space.

4. Editor

This is the grand-daddy of Mozilla’s web development tools, and was originally called Composer.  Presumably the change of name is to differentiate it from KompoZer, which is actually a descendant of Composer.  The immediate predecessor of KompoZer was Nvu, and you wouldn’t want to use either of these because they’re not able to support HTML 5.  You might consider KompoZer’s half-brother, BlueGriffon, because that does support HTML 5, but with that you only get a CSS editor if you pay for a plug-in.  You can still get all of these tools except maybe Nvu.  Editor/Composer is still included in the Mozilla SeaMonkey browser.

5. Scratchpad

This is a device for writing and testing chunks of JavaScript.  Where the console only allows you to execute one line of script at a time, and is therefore very limited, the scratchpad lets you enter as many lines of code as you want.  Activate it in any Firefox tab by pressing Shift and F4 together.

After the window opens, you’ll see a simple text editor interface.  You can open existing scripts, edit them, and save your work.  You can also create new scripts.  The editor includes auto-complete for commands you enter, and inline documentation to help you with the syntax of your commands.  You can run the entire script or you can run just part of it by selecting that part before you click Run.

6. Responsive Design Mode

This is a feature built right into the Firefox browser (though to be fair, the feature also exists in Chromium and Google Chrome too).   It allows you to test your page layouts at different resolutions from a single desktop screen.  It isn’t perfect (in any browser), but it’s close enough for most practical scenarios to allow you to check the consistency of your site.  To activate responsive mode in Firefox, simply press Ctrl + Shift + M, and repeat this combination to return to normal browsing.

Control is provided from a row of buttons that appear above the layout you’re testing.  The first button on the left looks like a “close window” button and simply another way to jump out of Responsive Mode.  Next you’ll encounter a drop-down combo that lets you select from the different preset resolutions, define a new one, or (not recommended) remove an existing preset resolution from the list.  To the right of the combo is a button for re-orienting from landscape to portait and back.  Then there’s a button that lets you simulate touch events.  The final button is used to take a screenshot.

Some versions of Firefox also let you specify a device pixel ratio, but how well that works may depend on the pixel ratio of your own device.  There are other ways, besides the built in method, to view responsive layouts, which we’ll look at in a moment.

7. Web Developer Tools Extension

This doesn’t come directly from Mozilla, but it’s a Firefox extension created by Chris Pederick.  Within it is packed a huge assortment of tools to meet a range of needs.  You can use it to:

  • toggle things on and off
  • control cookies
  • mess with the CSS of a page
  • tamper with form fields in a page
  • unmask password fields
  • retrieve in-depth information about images
  • explore every DOM element in a page in minute detail
  • outline elements
  • resize the display
  • view responsive layouts in a better way than the built-in method
  • and lots of other things.

The easiest way to describe this extension is as a sort of “Swiss Army Knife” of development tools.  It’s got most of what you need, but the tools remain discretely tucked away until you need them.  You can access them via a right-click context menu, or there’s also a tool bar, which is probably the best way.

8. Firefox Developer Tools

Much of the functionality that was contained in Firebug is now available directly through this built-in feature, which also incorporates the web console.  It looks and works similarly to the one in Chromium and Google Chrome.  The interface is not intuitive, and unless you make a lot of mistakes, it could take years before you master and comprehend every feature of it.

One feature inexperienced users are likely to miss noticing is the JavaScript CLI at the bottom of the console, because it’s not marked in any way.  It works better than the Chromium/Chrome version, but their implementation, which adds a blinking cursor directly into the console, is more obvious about its purpose.

9. MeasureIt Extension

While it’s simpler to just install Ian McIntosh’s excellent Screen Ruler, the MeasureIt extension developed by Kevin Freitas has the advantage of being able to measure both height and width simultaneously and more accurately than Screen Ruler can.  It’s always a useful item to have available for measuring anything in a browser window.  It’s been reported not to work in some versions of Firefox, but this may be due to conflicts with other extensions.  Try disabling your other extensions before uninstalling it.

10. ColorZilla Extension and Eyedroper

Either or both of these are a must-have for designers because they makes short work of finding the color of any pixel in the browser.  You can also use GColor, which is a Gnome tool that does essentially the same thing, but with the advantage of being able to sample a color from any window, not just the browser.  The advantage ColorZilla and Eyedropper offer over GColor is that they show a zoomed in view of the pixel you’re fetching the color from.

Activate by clicking the eyedropper icon and the mouse cursor will change to a cross-hair pattern (ColorZilla) or a big magnifying circle (Eyedropper).  Hover around the window until you find the pixel that you want to retrieve the color value of.  Then left click to set the color in the clipboard (as a hex value), and the extension will automatically close itself.

These are shortcuts, they won’t do all the work for you

You are still the developer, and you still need to do your job.  What these tools do is make the task easier, if you use them correctly.  They help you in different ways, and some are actually no help at all for most people, despite Mozilla’s best intentions.  When there’s a better tool for the same purpose it’s usually better to use that one, but sometimes it’s good to know there’s a free Mozilla tool you can resort to when you need it.

The post Mozilla’s Light-Weight Web Design Tools appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

We’ve partnered with the talented guys from Symu to offer you an exclusive resource. They crafted the design of this beautiful template and our friends over at Design Hooks carefully coded it. This is how Nava was born. It’s a clean, modern and responsive HTML template for sites related to sailing boats, yachts, catamarans, ships, cruisers, etc. You can also use Nava HTML template for all kind of tourism and vacation projects.

Get this awesome HTML template now and start building great things! Download it from here.

The post Freebie: Nava – clean, responsive HTML template appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Savvy web designers understand that websites have to do lots more than look good — they need to deliver ROI in the form of conversions. Whether your clients are selling directly through their website or using it to collect leads, every site you design should be the hub of their marketing efforts. As such, everything from the look and feel to the call-to-action must work together to deliver customers for your customers.
Keeping up with trends is important for any business. But when it comes to website trends, you want to make sure you’re on a path to improving your clients’ bottom line. Which will in turn, allow you to charge a premium for your services.
Fortunately, the website consulting team at The Deep End has put together an infographic exploring the top 2017 Web Design & UX Trends to Boost Conversions.
From aesthetics to functionality to all-important strategy, this list of 10 trends is packed with great ideas. But most important, it helps you understand how these tactics will help boost conversions. Try one or more of these ideas — or combine them — to help power up your website projects in the new year.

The post Infographic: 2017 Web Design & UX Trends to Boost Conversions appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The web and the way people interact with it is constantly evolving. That means you must be at the top of your game in 2017. Start by ditching these old trends to usher in a year of fresh web design.

Parallax Scrolling

Parallax is a pretty nifty design technique that gives depth to a website by making the background and foreground elements scroll at different speeds. However, it may not be the best technique in terms of user experience.

One of the main drawbacks to parallax scrolling is that it causes web pages to load much slower than their non-parallax counterparts. Of course, this leads to bigger problems. For one, slow websites are bad for SEO. Two, web visitors are generally turned off by them. A one-second delay in page speed results in seven percent fewer conversions, and 79 percent of shoppers who are dissatisfied with website performance are less likely to buy from that site again.

Of course, there are numerous factors that play into your website’s speed. The best WordPress hosting services will be quicker than others, and the amount of content and type of content on the page will affect loading times. But if you have the choice between parallax scrolling or not, ditching it will help speed up your site.

The question is, is parallax scrolling worth it? In some cases, yes. It helps tell a story and can help convert on its own. In most cases, no. It’s just a fancy effect that leaves web visitors frustrated and with a touch of motion sickness.

Hamburger Menus

Hamburger menus have been around long enough that most people know what they mean and how to use them. But does that mean they have a place on your website? Perhaps not.

Hamburger menus were designed to simplify websites and reduce clutter. That’s great for mobile devices, but as these menus moved to desktop sites, people saw higher bounce rates because navigation options weren’t as obvious.

The problem with hamburger menus is that they add another step to the process. Users must consciously decide to navigate the site. If they’ve clicked on the hamburger menu, they’re typically already looking for something.

And that works…sometimes.

Other times, it reduces discoverability, which is particularly detrimental to ecommerce sites where discoverability is what the experience is all about.

That said, you don’t have to ditch hamburger menus entirely. You might, for instance, create a hybrid navigation bar that features the most important navigation items prominently with the rest hidden under the hamburger menu. You might also choose to keep the hamburger menu enabled entirely for smartphone users.

Your best bet is to test where users are clicking to see if this tactic is working for you. In many cases, however, you’ll be sacrificing user-friendliness and discoverability for aesthetics, and that doesn’t translate into positive conversion rates or ROI.


Carousels—or slide shows—are a thing of the past. They were once used to highlight multiple pieces of content without cramming the page with too much information at once. Unfortunately, this design element comes with its fair share of drawbacks.

For one, carousels can slow your site, which doesn’t fare well with site visitors. You should always be looking to optimize for speed.

It’s also difficult to time carousels correctly. Each visitor will read or scroll through your site at a different pace. For some people, the carousel will be too slow. For others, it will be too fast. This makes it inefficient at getting your point across to readers. It’s another case of aesthetics versus user friendliness, and it doesn’t perform well with users. In most cases, carousels are simply a distraction.

Not only that, but carousels have been so overused that they give websites a cookie-cutter appeal. They’re not good for SEO, they’re oftentimes inaccessible, and thanks to banner blindness, many users simply ignore them.

Try displaying your content in grids instead. This mimics newspaper columns and social media newsfeeds. You can always display featured content in a larger grid module to draw attention to it.

One Page Design

The idea behind a single page design is simple, and it’s a good one. It helps deliver the content people need all in one place without having to navigate around the site. Plus, it puts you in control of the flow of information to guide users through a specific journey.

That said, one-page designs rely heavily on above-the-fold information to capture visitors. But what if that’s not enough? Visitors might assume that what they see is all there is. These sites can be difficult to navigate if you have other content for available, such as a blog. Plus, with all the content on one page, it can take the site longer to load. Finally, it’s not exactly good for SEO since you have fewer pages, which means fewer opportunities to target multiple keywords.

Cookie-Cutter Web Themes

Web themes have their advantages. They make it incredibly easy for someone with no design skills to lay out their website in a beautiful, user-friendly fashion. Unfortunately, this leads to many websites that look practically the same. What’s worse, while these themes may be built for user friendliness, they may not suit your brand message. If that’s the case, the user-friendliness matters little because you won’t be converting the people you want to draw to your brand most.

Optimize the user experience by making your site one-of-a-kind. Does that mean you have to start from scratch? Not necessarily. Is that a good idea for some businesses? Certainly. You might hire a web design company or freelancer to build your layout from scratch, giving it a completely unique look and layout.

But that’s not always needed. If you’re on a budget, cheap web hosting and a highly customizable WordPress theme can get you started for only a few hundred dollars, if that. A good web theme will allow you to build practically anything out of it with unlimited color options, hundreds of fonts to choose from, and multiple template layouts. Plus, you can always hire an agency or designer to make the tweaks to the theme for you to give it an original touch.

What you don’t want to do is use free web themes with little customization options. You’ll end up looking like everyone else out there using the same theme. Not only will that keep your site from expressing its individuality, but it can keep you from delivering the messages that could be better said through premium design elements. In many cases, these premium web themes that stray from the cookie-cutter approach will be more user-friendly anyway, helping improve the user experience and boost conversion rates.

The important thing to remember is that your website is for your users. You can always “break the rules” of web design as long as it’s a strategic move that will impact user-friendliness for the better. However, don’t assume a design tweak will be for the better; test it! Unfortunately, these abovementioned design trends have been tested time and time again and don’t prove as effective as initially imagined. In 2017, it’s time to ditch these trends in search of new ones that will take user experience and aesthetics to the next level.

The post Web Design Trends to Avoid in 2017 appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Using the canvas of HTML5 should have become second nature by now, but actually it’s still very rarely utilized by designers.  This could be in part due to the fact that the average business site has no great need to make use of canvas features, but that’s not always the case, and understanding how to use the canvas is an essential skill that every designer should have at least some familiarity with.

The canvas provides a way to draw and animate directly on the web page, and as such it allows the creation of real-time graphics that can be quite useful in a variety of ways.  For example, you could make charts that indicate live stock value fluctuations.  Or you could just draw a cartoon mouse being chased by a herd of hungry velociraptors.  What you draw depends on the needs of the job.  How you draw it depends on your skills as a designer.

Setting up canvas objects

The canvas object actually existed before HTML5, but it wasn’t something natively supported.  You could create it in code with graphics libraries like Raphaël, but you couldn’t declare it as any other HTML element.

Example – setting up a canvas object in HTML4 with Raphaël:

Example – setting up a canvas object in HTML5 natively:

As you can easily see, it is a much simpler matter to create a canvas object in HTML5 than it was to do something remotely similar in previous versions of HTML.

The default HTML5 canvas is a magical thing that can apparently only be seen by animals and perhaps small children.  Therefore anyone else wanting to see the canvas object as an object will need to apply some CSS rules (like a border, for example).  This is fine, because most of the time we won’t want to see the canvas, only whatever is drawn on top of it.

It is also best, in most situations, to set the display type of canvas to “block”, in order to prevent any strange behaviors caused by layout quirks.

The above code example sets up a canvas object 800px wide and 450px high (16:9 aspect ratio) and makes sure there is nothing nearby that might accidentally encroach upon the canvas space.

Every canvas should, as shown, have an id attribute, so you can specify which canvas any drawing routine is supposed to be sending output to.

Drawing to the canvas requires JavaScript

While HTML5 supplies the canvas object, it can’t actually draw anything on it without help from a script.  You can create a drawing by directly drawing an SVG image in HTML without using scripts, but this doesn’t require a canvas object.

Drawing to a canvas with JavaScript requires firstly identifying which canvas is to be drawn to (using the getElementByID method), and then defining the drawing context (either 2D or 3D) using the canvas.getContext method.  Both need to be initialized as variables.  As an example:

The above initializes the required variables for drawing to canvas01.  The next step would be to include an actual drawing instruction in the drawToCanv01 function. Doing any kind of drawing, we refer to the context variable (in the example it is identified as “ctx”), and execute any of the available JavaScript drawing methods on that context.

List of JavaScript drawing methods

There are not too many drawing commands to master, but there is enough complexity that it usually takes a while to master them all.  The problem is that there’s no really simple methods like you get with normal SVG drawing.  In JavaScript, you often need to use multiple commands together to produce a single result.  On the positive side, drawing commands in JavaScript use a much simpler syntax than SVG drawing commands.

These methods will each be explained in detail in a moment.  One thing you may have noticed is that these methods only tell the browser what to draw, but not how to draw it.  For that, you need to use a style one of the style methods indicated in the following table.

Drawing like a professional requires planning like one

You definitely can just sit down and bash out a drawing by trial and error, but that is a slow process for most of us.  The professional way to design canvas drawings is to sketch them on graph paper first.  You should always define a precise height and width for your canvas, and ideally set these values in pixels, because that will give you very precise coordinates.

Work out the scale of your sketch, and then mark pixel units along the X and Y planes.  Usually a sketch is plotted 1:1, but if you have a big drawing you might need to use 1:10 or even higher.  The top left corner is always 0,0 and if you are using a 1:1 scale then the point of the first major line intersection on the graph paper will be at position 10,10.

Then just use a pencil to draw your sketch.  With this sketch in hand, it is now very easy to translate your physical drawing onto the canvas because you have the precise coordinates for each part.  This is especially useful for circular objects, because it makes it easy to find their center point.

Make sure you remember that the order you issue your drawing commands determines the layering of each object on the canvas, so decide which shapes are supposed to appear on top of other shapes, and add those last.

Putting down some lines

Drawing lines is really a 6-step process (unless your lines are going to be 1px solid black, in which case you don’t need to bother with setting the stroke style or line width, because those are the default values).

1. Set the line width

2. Set the stroke style

3. Start a path

4. Plot the lines for the path

5. Draw the lines

6. End the path

You can set new line widths and stroke styles for as many lines as you want.  Here’s an example:

Making circles and arcs

A circle is simply an arc that goes all the way around.  The first thing you need in order to create one is the center point of the circle which will be expressed as x and y coordinates.  You then need to supply the radius (r), start angle (sa) and end angle (ea).  There is an optional “direction” flag (0 = clockwise, 1 = anticlockwise) but there is rarely much need for it.

The process for drawing the circles is similar to creating lines.  You specify a lineWidth, strokeStyle, and optional fillStyle if it is to be a filled circle.  You don’t need to bother with end-caps or line-joins unless you’re making an incomplete arc.  If the arc connects to other lines, then the precision of your angle in combination with the line-joins used on both components will affect the smoothness of the result.

Example – three unfilled circles:

The result may not have produced what you expected.  Can you guess why?  Although it probably shouldn’t, the pen stays down on the canvas the whole time unless you use a moveTo instruction.  This causes the pen to be temporarily lifted.

Let’s try that same thing again, but lifting the pen between creating each circle.

Hmm… it’s almost right, except that now there’s these weird lines inside the last two circles.  This happened because the move to point was the center of each circle.

To fix it, you need to move to the edge of the circle, so that means adjusting the x coordinate by 17.5px.  Let’s try it one more time.

Curious about where that 17.5px figure comes from?  It’s 0.75 times the radius amount plus half the line width.  This prevents any pixels from hanging out into space.  It feels unnatural to specify half a pixel, but it’s legal and it works.  Without that extra half pixel, you’ll get a small but noticeable bump on your line.

Drawing a cubic curve

Now let’s try something a little more advanced.  Cubic curves are a type of bezier curve.   They differ from quadratic bezier curves because they have two control points instead of just one, which makes them more complicated but also more refined.

To draw a cubic curve, you need to move the pen to the location where you want the curve to start, then use a bezierCurveTo instruction, where you will supply the x and y coordinates for the first control point (x0,y0),  the x and y coordinates for the second control point (x1,y1), and finally the x and y coordinates for the ending point of the line (x2,y2).  Example:

To draw a quadratic curve, simply don’t use the coordinates for the second control point.  Learning to draw bezier curves well is a topic for an entire tutorial on its own, but it’s still good to know the method used to create them.

Drawing a filled shape

So far we have only looked at simple line drawings.  To create a filled shape is not especially more complex.  For example, to create a filled circle, you can just do this:

So what is different there is the use of a fillStyle and then using a fill command.  That is really all that’s necessary.  Something that it’s also worth knowing is that you can apply the fill without using a stroke, but be aware that the stroke line width is still there even though you haven’t actually drawn it.

Filling with a gradient

Solid colors are fine, but sometimes you might want to use gradients, and that is possible in HTML5 canvas.  For a circle, as in the example, we’d normally use a radial gradient.  For other types of shapes, linear gradients are more popular.  Linear gradients are slightly more complicated since you also need to specify the direction (horizontal, vertical, diagonal) for the gradient to progress in.

Creating a radial gradient involves setting an inner circle, an outer circle, and color stop values to determine what colors the gradient will progress through.  For the example circle, which is quite small, we’ll need to set two circles inside it, starting with the same center point as the original circle.

You may recall that the center point for the circle was 50,25 and the radius was 20px.  The radius for our inner circle gradient should be set to 50,25 and it’s radius should be set to 5px.  The radius for the outer circle should be set to 50,25 and the radius can be anything between 6px and 20px.

Notice how even though the outer circle of the gradient is the same size as the circle to be filled, the stroke line of the circle is not overwritten by the fill color.

Applying a linear gradient

This time we’ll use a linear gradient, and also show what happens when the bounding area of the gradient fill is larger than the shape to be filled.

Notice that the fill, even though it is larger in size than the shape being filled and is rectangular, does not go outside the borders of the shape.  The gradient is also smoother and less eccentric than the radial gradient.

These techniques are by no means all you will have to learn in order to use the canvas to its full potential, but they are the basic techniques that every designer should know.  With these fundamental principles firmly understood, the learning curve for gaining mastery over the canvas will be a simple stroll from point to point, rather than a mad uphill scramble.

The post Basic HTML5 Canvas Methods Every Designer Should Know appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

A while back managed WordPress host WP Engine announced they were offering free unlimited staging for WordPress projects to freelancers and agencies. “Free and unlimited” aren’t usually things associated with services with real-world costs, but this offer from WP Engine is real and actually comes with some handy developer tools for working in WordPress.

How free staging works

WP Engine is offering free $29 hosting plans to verified freelancers and agencies. The $29 plan only allows for one live site, but like any other WP Engine plan comes with free and unlimited password protected WordPress installs you can use to stage client work. These WordPress installs (called “transferable installs”) do not count against the account’s total number of allowed installs so you can use as many as you need.

You’re even allowed to use the free staging for clients who don’t want to host on WP Engine. Basically, you can stage all of your WordPress projects for free on WP Engine.

What’s in it for them?

Hearts and minds of course. WP Engine recognizes that you are the influencers over where your clients host. By giving away free staging and developer tools that make your job easier, you’ll be more likely to refer customers their way.

Also, by staging your work on WP Engine prior to releasing the site to your client, you can showcase your work in WP Engine’s impressively fast environment, which can ultimately help retain your client. .

How easy is it to work inside of WP Engine?

So WP Engine has a suite of advanced “built for developer” features which we detail below, including a few workflow tools that stand out at helping freelancers and agencies onboard customers and launch projects faster and easier.

Onboarding: Use the WP Engine migration plugin to quickly move a new customer’s site into your free account so you can instantly start working. All the customer needs to do is give you wp-admin access and even a Project Manager can use the plugin to move a customer’s site into your account so your devs get to working on what they do best.

Launches: When your customer pays their bill and it’s time to move the site you’ve created to their hosting account, WP Engine makes it super easy to transfer that site to the customer.

Within the WPE portal, you can select to “transfer the site” to any email address you’d like. Current WPE customers can simply “accept” the transfer via a link in a confirmation email. Non-WPE customers can sign up for a new account and have the site you built them automatically available after they sign up.

WPE will also co-brand all of these emails with your logo and can automatically insert your affiliate link for new customer signups (WPE pays a minimum of $200 per referral). You are able to transfer client sites to 3rd party hosts using typical FTP workflows.

Backups / Rollback: Within the WP Engine portal (and in wp-admin), you can quickly trigger a backup or roll back to a previous manual or automated backup. This can be super handy for customers who make mistakes and come crying for you to fix. A few simple clicks in the portal and you can help customers quickly recover from mistakes.

One-Click Staging: If you need to perform a plugin update or quick change, you can use WP Engine’s one-click staging feature inside of wp-admin to quickly spin up a copy of the site to test changes and updates. You can easily then push to production in one click and roll back changes if things go wrong.

Enough with the parlor tricks, where’s the meat?

So WP Engine’s simplified site management tools are handy, but their platform goes much deeper when it comes to supporting tools and workflows for agencies and freelancers.

This suite of tools is available in the free account they offer to freelancers and agencies.

Collaborate and Maintain Control With Git Push: Use your favorite code versioning workflow to make your job easier.

Actual smart support people: WP Engine staff are 100% focused on WordPress, filled with WordPress influencers, and super deep in their ability to support developers. WP Engine’s team is literally the best support group in the world (not just hosting) having won the prestigious 2016 Customer Service Department International Gold Stevie award.

Performance Intelligence: Run deep WordPress speed performance analyses on your sites.

Universal Login: Your login can be tied to multiple customers’ WP Engine accounts for all-in-one access.

Copy / Template Site: Instantly create copies of sites (or starter tech stacks) to use as a jump point for new projects.

One-Click CDN: Quickly add a CDN to any site. Available for free on all plans except the “Personal” plan.

Free SSL: With Let’s Encrypt, WP Engine offers free SSL, easily set up in your customer portal.

Vulnerability Scanning: All sites are regularly scanned for PHP vulnerabilities and Cloudflare is used to help mitigate outside attacks.

Environment Specifications Audit: If you have a large client who needs a larger cluster or to prepare for aggressive growth, WP Engine’s account team will help with right-sizing and load testing to make sure your big customers don’t have big problems.

Vagrant Environment Integration: WP Engine offers a vagrant environment solution; however, with one-click staging and super fast servers, you can replicate a site’s environment (including the CDN) with just one click directly on the server itself. Either solution gives you the flexibility you need.

Any tips on getting the free staging account from WP Engine?

All you really need to do is apply and their team will verify you as a freelancer or agency. They do require you send them four referrals per year to maintain the free account, but you have a whole year to get there. The WP Engine team is extremely laid back and easy to work with.

Make sure to ask about the co-branded experience for your customers and some free options WP Engine has that can help *you* get leads for your business.

Good Luck!

The post Is WP Engine’s Free WordPress Staging for Developers Legit? appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Whenever I need an image for a blog post, I immediately start looking at free stock photo sites. There aren’t too many good ones out there, but it’s worth a shot to save a little money.

If my efforts fail, I then move onto the paid, royalty-free stock photo sites, where I utilize some of my subscriptions. The only thing is that I’m a writer/hobbyist developer. Therefore, my need for photos is not nearly as thirsty as someone who actually makes money as a designer.

Regardless, most paid stock photo sites make it difficult for designers, since you generally end up getting far too many photos for a subscription, or the on-demand plans drain your wallet.

Most stock photo companies don’t have that in-between plan with reasonable monthly rates for maybe a few dozen photos per month.

Until now.

The Depositphotos.com website recently came out with a Flexible Plan, which is far more suitable for mid-sized companies and designers.

The company seems to have talked to some of its customers to understand what they are looking for, and I’m certain they discovered a group of users who are unsatisfied with the current price offerings of most stock image sites.

Therefore, keep reading to learn a little more about the new Flexible Plan, along with which industries and companies might find it useful.

How does the New, Flexible Pricing Help Designers?

Here’s the deal: The Flexible Plan from Depositphotos.com goes for $29 per month. With that, you gain access to 30 high-resolution photos, all of which you can immediately download at any size or resolution.

In addition, you don’t have to utilize all of your downloads each month. So, if you have a slow month and leave five or ten of the images undownloaded, these roll over to the next month, saving you even more money.

Since some folks might go over the 30 image limit, the charge for going over is $1 per photo. This is far better than most on-demand plans in the industry, and you still receive access to the same library of over 50 million royalty-free options.

Furthermore, the Depositphotos.com library includes other items like vectors and videos. All of the photos and videos on the site have no expiration date, so you can log into your account and find your past purchases in case you need to download them again.

Oh yeah, and if you decide to pay for an entire year upfront, you save $49 overall.

How Does This Compare to the Other Plans?

Here’s where the true benefits come into view. The on-demand pricing starts at $99 for 25 images. On the other end of the spectrum you can choose a monthly subscription for $69 (giving you 75 images). Those are the lowest priced plans in those categories.

It’s easy to see that many designers and brands might not like this setup, considering a regular freelance designer might not ever use more than 30 images per month. On the other hand, you end up paying an insane amount of money per image if you go the on-demand route.

That’s why $29 per month for 30 images makes more sense. Heck, when you compare this to the $99 for 25 on-demand images, it’s pretty much a no-brainer.

Does the Depositphotos.com Library Have Worthwhile Photos and Videos?

As we talked about above, the Depositphotos.com site provides over 50 million images, vectors and videos. This is a solid selection, but what do the images actually look like?

After all, I’ve seen some huge libraries, but sometimes the stock images seem outdated-looking or corny.

However, that’s not the case with Depositphotos.com. I made a few simple searches for keywords like “office,” “tree,” “camping,” and “party.” The results were relevant, and I would be more than happy to use most of them for blog posts, ecommerce promotional banners, slider images and more.

Although I’m not as experienced with vectors and videos, these collections seem intriguing as well.

One of the things I noticed was that Depositphotos.com provides lists of popular searches, along with categories and collections. this way, designers can go in there to view pertinent collections, like for holidays and such.

Some Standout Features

My favorite part of the Depositphotos.com interface has to be the ability to Favorite certain photos for later use. An account must be created for this, but you can list and categorize your favorite images, just in case you’re preparing for a project into the future.

The lightbox preview of each image lets you share the item with friends. Not to mention, it displays a wonderful view of the image for seeing if you actually want to buy it.

It’s also nice that you receive an incredible amount of picture information from each option. For example, you can look at related photos for each one, while also searching for similar photos with the same models in them. The resolutions, sizes and formats are mentioned in the lightbox as well, along with a large Download button for when you’re ready to buy.

Finally, you do have the ability to create folders and share them with people in your organization. For example, a design company might have a group of people working on an email marketing campaign. If that’s the case, they’ll need to select certain photos to break up the text.

Instead of opening a Google Drive file, you can keep all of the photos on the Depositphotos website for quick and easy viewing. That’s all there is to it.

Who Should Consider Signing Up For The Depositphotos.com Flexible Plan?

I really like the Depositphotos.com Flexible plan for medium-sized companies and designers. Some bloggers might find it reasonable for their budgets as well.

The only reason I would go with a monthly plan is if my photo usage was far higher than 30 images per month. The on-demand plan doesn’t make any sense to me unless you’re only grabbing less than a handful of items per month.

Feel free to try out the new plan here, and let us know in the comments section if you have any thoughts about Depositphotos.com in general.

The post Depositphotos.com Gives Designers a More Affordable and Flexible Stock Photo Solution appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Inspired Magazine by Inspired Mag Team - 5M ago

HTML5 brought web development into a new era.  Unfortunately, many designers haven’t really caught on to its full potential, and actually are developing HTML4 pages with a simplified doctype and header section.  Looking at the source code, unless it is written by somebody who never worked in HTML4 or XHTML, you would often easily mistake it for HTML4 because those designers aren’t changing their style.

This is a tremendous shame because HTML5 really does give us some fantastic improvements over HTML4. If we really push those improvements to their limit, the results would more than justify the small investment of time required to learn how to do that.

In this article, we’ll go over some of the biggest improvements HTML5 has to offer (and which, in general, are being ignored by designers and developers), with some information on how you can put them to work for your advantage.

Big improvements for better work flow in HTML5

The big changes that came with HTML5 aren’t universally known, so here are the highlights:

1. HTML5 doesn’t need to identify itself

Just when we’d all gotten used to the need for declaring a doctype, it turns out that HTML5 doesn’t really need one at all.  Yes, that’s right, not even that <!DOCTYPE html> declaration that all the books and tutorial websites tell you to have.  However, just because you don’t need it doesn’t mean you shouldn’t have it.  This declaration is still useful because it tells you what the document is not.

2. HTML5 gets rid of all the pesky pendantic details

It seemed once the intention of W3C was to make each new markup evolution more strict, more pedantic, and more complicated.  So you can imagine the collective gasps of astonishment when it was revealed that HTML5 is less complicated than any previous implementation of markup, and we now can get more done because its so relaxed about rule enforcement.  The focus of HTML5 is on productivity, not pedantic details.

3. HTML5 drops the need for identifying content types

You know the kind of code code that says something like type=”text/css”? Now you don’t have to do that.  It never made sense that this was necessary, because it could be known from the file extension and the file content itself what type it was, without that needing to be declared.

Some things that are maybe not so good

It may come down to a matter of personal opinion, but there are some features of HTML5 that won’t win every heart.  They include:

1. Editable content

Somebody, somewhere, thought it would be a good idea to let users edit something right there on the page.  This doesn’t seem to have much practical application for anything.  In fact, it could be downright dangerous, because the user could make it look like your site is saying something that it’s not.  Why? For a prank. 

“Hey, mom, look at what this terrible website is saying about old people!”.  Then they can take a screenshot, complete with your actual URL visible in the URL bar, forward it to relevant authorities, and before you can say “legal injunction” you have a problem on your hands.

2. Unterminated tag pairs

Some HTML tags are made to stand alone (not a good feature, because consistency is a good thing), but most have required closing in order to be valid.  In HTML5, that’s not the case.  You don’t have to close your tags.  This will potentially lead to the creation of code that’s even more difficult to read and maintain than the already-too-complex source code that properly set out HTML produces.  This just doesn’t look like a great idea.

3. An annoying new incorrectly used buzz-word: semantics

A pet peeve for anyone who actually cares about semantics is the hijacking of the word “semantic”.  This word actually means “something pertaining to language and the use of words”.  The way it is being used in the industry, however, pertains to document structure.

Therefore it is semantically incorrect to refer to these structural elements as semantic, yet we’re stuck with this buzz-word because it is now so widely used.  Professionals who are aware of this anomaly usually refer to the same elements as “structural elements”, so they won’t sound like morons.  This, however, doesn’t work, because those who have adapted to the buzzword will correct you and say “Hey, it’s a semantic element.  What are you, some kind of moron?”

The best bits

HTML5 gives unprecedented support for multimedia, and eliminates the need for using third party plug-ins such as Flash.  Using the new multimedia features is also much simpler than the older methods, and supports more media formats.

1. Video

Including video content in your page could not be more simple.  You simply use a video tag pair to declare a player object and set the source for the video using an unpaired source tag. Example:

The only confusing thing there is why it’s necessary to follow the source keyword with src when they mean exactly the same thing.  Although webm format is more efficient than mp4 in terms of file size, currently mp4 works in all major browsers that support HTML5, while webm may not work in older versions of IE and Safari.  Therefore mp4 is the recommended format.

2. Audio

As you may have already guessed, adding an audio player to your page is virtually the same process, except that you declare an audio player instead of a video player.  Example:

The mp3 format is supported by all browsers that support HTML5 and it is therefore the recommended audio format to use for web audio.

3. Drawing and animation

There are a few different ways to implement drawing into a web page, and some are better than the built-in HTML5 methods, but those built-in methods are there for you to exploit.  There’s a steeper learning curve involved here than for the other media items, but learning these techniques will open up a lot of interesting design possibilities for you.

The primary method for drawing uses the canvas:

The above example just creates a simple primitive drawing, but you can create drawings and animations that are much more spectacular.  In fact, the only limit is your own imagination.

4. SVG

Bitmapped graphics are so yesterday when it comes to illustrations. Until recently, SVG wasn’t widely supported by browsers, but now all major browsers that support HTML5 can display SVG content, so there’s no reason not to use it.

There is a big learning curve involved in drawing an SVG image in code, but you don’t actually need to do it that way.  There are two methods you can use.

The first is to declare the SVG image the same way you would declare any other image, for example:

The disadvantage with the above method is that it may not give you access to every node as something you can manipulate with script, so the other way you can do it is to draw your image in your favorite vector drawing application (for example, Inkscape or Adobe Illustrator) and ensure you save the result as a plain SVG, which will strip out any extra information that isn’t needed.

Then open the SVG file in a text editor and copy all the markup.  Paste that into your HTML document.  The code will look something like this:

Typing all that out by hand would be a nightmare, but using a dedicated SVG drawing application makes it easy, and because the path ID for each node is created for you automatically, you can easily take control with scripting.  Setting an ID for the SVG object itself would be a good idea, too.  Then you can apply CSS styling to it.

HTML5 makes forms easier to manage

There are a few little tricks that HTML5 introduces that significantly reduce our workload when it comes to forms.

1. Enforcement of required fields

You no longer need to use scripts to check whether required fields have been filled.  So many people still are doing this the old way that it was worth mentioning. To use this feature you only need to add the required to any input element. Example:

When the required keyword is present in a form field, the form can not be submitted until the field is completed.  The required keyword does not check the validity of the data, only that it exists.  When used in combination with other HTML5 form validation methods, it does a great job.

2. Pattern-matching for data validation

The pattern attribute lets you perform simple data validation using regular expressions.  Used alone, it will only check that entered data is valid, but won’t check if it is missing.  In order to force data entry and then validate it, you’ll need to use required in combination with pattern.  Example:

The above example checks for a valid Canadian zip code, which resembles a string similar to the following:

R3R 3A1

It will always have this pattern of letter-number-letter-space-number-letter-number, and the first letter cannot be D,I,O,Q,U,W or Z.  If you’re not already familiar with regular expressions, you’ll first need to learn about them before you can write expressions to solve problems like the one in the example, and then you’ll need to learn how to adapt ordinary regular expressions to work as HTML5 patterns.

A special type of input control that has built-in pattern validation is the email type.  Using this, you don’t need to define a pattern.  Example:

3. Placeholders

These are things you can both love and hate at the same time.  It’s true placeholders can cause confusion for some users, but they also can be really helpful if you don’t have a lot of screen space available for your form components.  Placeholders put ghost text into an input area, which can be used either as a replacement for a label or to provide an input example.  They’re especially useful on mobile layouts.  Example:

The big problem with placeholders, especially when they’re used as example input, is that they can lead to UX complications.  The first such confusion is that users might consider the placeholder text as being physically present in the input area, and thus they may try to manually delete or modify it by positioning the cursor at an appropriate point, which of course won’t work.

A related problem is where your sample input exactly matches the input the user wanted to type.  They may consider the data to already be filled, and not type anything in manually.  When submitted, the form processor will treat the field as empty, not as containing the placeholder text, and it will produce the wrong result.

4. Autofocus

Making sure your form sends focus to the correct input area can be important, and you do this with the autofocus keyword, used in the same way as required. Example:

Adding autofocus to more than one component may cause your carefully planned form to malfunction.

Document structure – a matter of semantics

As mentioned earlier, the use of the word “semantics” is wrong for structural elements, but that argument is in itself simply a matter of semantics.  So choose what name you will, the function of them is still the same – to help you better understand your document structure when reading it.

Most developers are still using div for this job and that’s fine.  Using the structural elements just makes everything a touch more official, and it’s easier to read the source code.  There’s no real advantage to using structural elements in your document.  For the sake of completeness, we’ll briefly step through them.

1. Article

An article is some part of the page that is isolated in context from everything else on the page.  It’s a complete portion of content that doesn’t relate to other portions of content.  Using this element doesn’t solve any problems for you.

2. Section

Similar to articles, but without the intention of defining that the content isn’t related to any other content.  So for example, you may have an article that is divided into sections, and a section could contain one or more articles.  These are purely for your own reference, to help you organize the source code, however you also get features identical to using a real div.

3. Header

This is supposed to contain things like titles, logos, and other things like that.

4. Nav

A dedicated section for navigational components.

5. Aside

Defines content that’s supposed to be treated like a sidebar (though there’s no rule about where an aside gets placed, its actual placement is up to you).

6. Figure

The first—and perhaps only—structural element that serves any kind of purpose at all is the figure element. Using these makes you sound all academic, and what spoiled upper-class English girls of the Victorian era would have described as “frightfully clever”.

Figures let you encapsulate images so you can include captions with them.  Example:

7. Footer

The correct use for a footer is to contain footnotes, but it’s more usually used to provide miscellaneous links, copyright information, and contact information.  You can put anything inside it that you want.

Concluding remarks

There’s a lot more to discover, but the above methods from HTML5 have reached a point of maturity now where they shouldn’t be getting as ignored as they are.  Many sites, for example, continue to use the antiquated and soon-to-be-obsolete Flash Player to provide video content, which is just plain crazy.

Making the jump from HTML4 to HTML5 isn’t difficult at all, but dropping those HTML4 habits may be a lot harder, and that’s probably why HTML5 hasn’t been embraced as fully or as enthusiastically as expected.

Using HTML5 properly, without including unnecessary HTML4 artifacts will make development faster.  It will make your code more readable and easier to maintain.  And it will ensure your pages aren’t weighed down with legacy code you don’t need.

The post Under-exploited HTML5 Features appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Before you start browsing through the web apps list, check the productivity tips outlined here to see if there are any you might be neglecting. You should find these productivity tips and project management principles to be of significant value in managing your day-to-day workflow processes. Or if that all feels too serious you might want to take a quick look at this fun Photoshop article on how to create a text affect.

Productivity Tips 

–        Clarify Expectations – poorly stated expectations can lead to unintended outcomes. For individuals, following poorly stated or ambiguous client requirements usually leads to trouble. This includes task prioritization as well.

–        Keep Communications Open. Insufficient communication, whether between a team leader and team members, or individual designers and their clients, can be a productivity killer. This should be a constant process, since requirements, priorities, and needs can change.

–        Give Team Members Autonomy. By doing so, team members feel empowered, and are more likely to grow in their work.

–        Rethink Meetings. Structure a meeting to support project objectives. Whether the meeting consists of a roomful of people, or a one-on-one between a designer and the client.

–        Reserve Downtime. This is important for team morale, but it’s a guideline that the individual designer should heed as well.

Management Principles Project and Team Leaders Should Follow
  • Block off times for work and for downtime.
  • Keep reports advised of project status. It keeps them accountable.
  • Communicate when extra hours will be required and when they won’t. Unpredictable work schedules can hurt productivity and team morale.
  • Don’t micromanage. The designers are the experts at what they do.
  • Don’t overcommit your team; or worse yet, make a habit of doing so.

If you heed the above tips and principles, you should find it easier to get the greatest benefit from any of these web apps.


With InVision, web designers can upload their design files, add animations, gestures, and transitions, and create a high-fidelity prototype within 5 minutes.

This web app is a productivity enhancer. But, it is much more than that. InVision offers concrete solutions to many of the issues web designers must deal with during their day-to-day prototyping, collaboration, and task management activities.

InVison’s user base, consisting of startups, corporations, design agencies, and individual designers, is large indeed. Startups like MailChimp and Evernote like it because it’s great for usability testing, and it helps design teams, particularly distributed design teams, stay in sync.

Global companies like Adobe, Dell, PayPal, and Cisco like InVision because the prototypes are online, making the review and collaboration processes just that much easier. Ease of use is another reason large companies favor InVision.

If you want to discover you own reasons for liking this powerful, efficient web app, all you need to do is sign up. It won’t cost you anything, and you can work with one active prototype while you check out the available pricing plans.


Individual designers, design teams, and project managers alike, use Proto.io to enhance their design processes through its ability to allow them to quickly create interactive prototypes without the necessity of code.

These prototypes are not only realistic, but since Proto.io is a web app, they are easily shareable as well. You’ll have at your disposal beautifully crafted UI components for Android, iOS, Windows, and watchOS to design your apps or you can directly import your Sketch or Photoshop designs.

Just add the animations, interactions, and transitions you want in your prototype and you’re ready for sharing or usability testing. Sharing a prototype with clients, team members, or key stakeholders takes but a single click.

Proto.io has found favor with Fortune 500 companies and smoking-hot startups as well, not to mention countless small and medium size businesses, agencies, and individuals. Sign up for a 15-day free trial to find out what this popular web app can do for you.


When web designers assemble their toolkits, one item that is often neglected is a marketing tool; one example being Sendloop. In today’s e-commerce environment, having a tool like this, is almost guaranteed to help your client’s conversion rates soar is essential.

Sendloop has some pretty hefty marketing capabilities, and you don’t require any special coding or technical capabilities to use it.

Whether you, or your client, relies on email marketing totally or in conjunction with website or social media marketing, this web app belongs in your toolkit. All that is required on your part is a list of subscribers, and your ability to brand and customize any of the more than 100 email templates Sendloop makes available.

These professionally-designed templates will put your email marketing efforts on a par with the best that major corporations offer. For $10 a month, you can send an unlimited number of emails to up to 2,000 subscribers.


Releasing a web app that is expected to provide individual web designers and design teams alike with the most intuitive task management tool on the web, is quite a challenge. The creators of MeisterTask appear to have been more than up to that challenge.

MeisterTask’s flexible project boards, which are based on the popular Kanban system, enable you to set up customized workflows that reflect the way your team works. It not only helps you manage tasks efficiently, it encourages team members to work together and lets them keep track of what everybody else is up to. MeisterTask is yours to try for free.


Paymo is another proponent of providing solutions with Kanban techniques. This web app is a nice fit for a small to medium size business team. It’s a modern project management tool that provides, offline, online, and automatic time management and time tracking functions.

Kanban board technology enables you to highlight progress toward project goals and objectives, and summarize past and current workflow activities. Project information can be stored and shared, and you can create templates of your projects for potential future use.

Try Paymo for 15 days for free.

Form Analytics by Use It Better

            Form Analytics by Use It Better is a super-convenient web app to have available if you are experienced lower than hoped for user conversion rates, or, if you want to verify that your forms are fulfilling their intended purposes.

This web app is free for small-scale users. It collects and analyzes form field data, and indicates user interactions with your online forms. You can tell which field were completed, and when forms are abandoned, you can often tell why. With this information, you can take remedial action so your forms can contribute to, rather than depress, your conversion rates.

Final thoughts

These web apps created for use by design teams and team managers, can also fill a void that individual designers overlook.

The prototyping, sharing and testing features several of them offer apply to teams and individual designers alike.

Some are unaware of the tremendous productivity improvements that can be achieved by using a task or project management web app. Others neglect to take advantage of the marketing tools that are available.

By heeding the productivity tips offered here, and investing in one or more of these top web apps, you should see your productivity soar. The apps can’t do all the heavy lifting, but they can free up your time to do what you do best – web design.

The post Probably the Best Web Apps for Designers and Teams appeared first on Inspired Magazine.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Media queries are one of the best things ever to happen in Web development, but even though they’re now being widely used (largely due to their implementation in templates and frameworks), they’re still not very well understood by the majority of developers.  The power and features available to developers to create better websites is definitely being under-utilized.  So with that in mind, we have put together this guide to media queries.  If you haven’t given much attention to media queries before, this is your opportunity to gain more insight into everything you can do with them.

Media queries are at the heart of responsive design and adaptive design

Responsive design is a really big thing these days.  Adaptive design is actually better, but because it’s more work, not many people prefer to do it.  Both of these design methods rely on media queries to make them work.  Before we had media queries, it was necessary to use JavaScript or PHP server variables to detect information about the user’s browsing environment.  That was a messy solution and often didn’t work well.

The default breakpoints in some responsive design frameworks are dead wrong

Framework developers have targeted platforms using a very broad brush, with the result that many intermediary resolutions are ignored when calculating responsive screen layouts.  This can be detrimental in some situations, because their idea of “small” might be very different from yours.  Set your own breakpoints manually for the best results.

Difference between CSS2 and CSS3 media queries

In CSS2, the style sheet asks the device “Hey, what kind of device are you?” and the device responds with something like “I’m a phone” or “I’m a printer”.  The browser then formats the web page according to the instructions in the style sheet.  CSS3 media queries work differently.  Instead of merely asking “What are you?”, CSS3 asks “What can you do?”.

Knowing all the capabilities of a device allows the browser to be much more specific about the way content is formatted.  Devices are able to supply a lot of detailed information about what they can do, but most designers are checking only one thing: the width of the viewport.

To implement the CSS2 functionality correctly, you needed to create a different style sheet for each media type.  Prior to CSS3, the media types that could be recognized included:

  • Screen
  • Print
  • Handheld
  • Projection
  • TV
  • TTY
  • Aural
  • Braille
  • All

As you can see, some of the media types could be confusing.  A handheld device and a projection device, for example, do have a screen.  To implement multiple styles, you would need to use a csv list enclosed in quotes, like:

In HTML5 and CSS3, the ability to assign specific style sheets to specific media types has not been dropped.  You can still do that, but you can also do a lot more.

Responsive design should be more than just shrinking and squashing

Way too many designs are labeled as “responsive” when all they do is shrink or grow their content to match the available width.  This is not how responsive design is supposed to work, yet you’d find a lot of designers claiming they know how to do responsive design just because they can make content fit the width.

True responsive design means exploiting as much of the available technology as you can.  For example, if the device seems likely to be a touch screen, then the entire interface should be engineered to be touch screen friendly.  Unfortunately CSS3 doesn’t allow us to test for that specifically, we have to guess based on other clues, but it will be available in CSS4.

That upgrade we can expect in CSS4 is important, because currently the method for guessing if a device might be a touch screen is inadequate, and could degrade the user experience in some conditions.

What a device can tell you about itself

If there’s a flaw in CSS3 media queries, it’s that there’s not enough of them.  Currently the information a device can report includes:

  • Width – the number of pixels or dots that can fit on a single continuous row of output
  • Height – the number of pixels or dots that can fit on a single continuous column of output
  • Device Width – refers to the maximum physical horizontal resolution
  • Device Height – refers to the maximum physical vertical resolution
  • Orientation – a computed value that compares width to height
  • Aspect Ratio – similar to orientation, but more precise
  • Device Aspect Ratio – the permanent physical aspect ratio of the device
  • Color – helps to determine if a device can display color, and how many colors
  • Color Index – the size (number of entries) of the color lookup table of the device
  • Monochrome – provides the bits per pixel value in a monochrome frame buffer
  • Resolution – refers to pixel density
  • Scan – relevant only to TV devices, it determines the scan type (interlace or progressive)
  • Grid – helps to identify a non-bitmap visual or tactile device

In CSS4 there will be additional things you can test for, including:

  • Update – the frequency at which the display (if any) is updated (none, slow, fast)
  • Overflow Block – default device behavior for overflowed content blocks
  • Overflow Inline – default device behavior for overflowed inline content
  • Color Gamut – an approximate range of colors that can be displayed
  • Pointer – the precision of accuracy of the device pointer (coarse, fine, or none)
  • Hover – does the device have the ability for a pointer to hover over an element?
  • Any Pointer – determines if any available device pointers match the requested criteria
  • Any Hover – determines if any of the available device pointers can hover
  • Scripting – determines whether client-side scripting is supported, and in what way

CSS4 also will deprecate device-width, device-height, and device-aspect-ratio.  These were kind of useless anyway, so that won’t be too painful.

The new CSS4 media queries will add useful features to help us deliver more targeted designs.  For example, a coarse pointer type in combination with the lack of hover ability would be an indication that the user is accessing the page from a touch screen or special device type such as an X-Box.  Using additional media queries can help eliminate any doubt about the device type.

The advantage of using CSS4 to do these checks is that currently we need to rely on JavaScript to do the same.  In particular, one library called Modernizrr.  Having to use JavaScript is clearly disadvantageous.

Using CSS3 media queries

A media query can be applied to a style sheet in the following manner:

This will cause the instructions to only be executed on a device supporting at least 8-bit color.  This can be refined more by specifying a type (in the previous example, the default type “all” was applied automatically as the result of type omission):

Note that when using the “and” keyword, white space is important.  There must be a space between the keyword and what follows.

Using media queries correctly makes you a true designer

The word “designer” is over-used and abused.  Most people using that title to describe themselves don’t deserve to use it, because they haven’t earned that right.  A true designer is an engineer, somebody who innovates a creative solution to a practical problem using applied principles of design.  The average so-called “designer” just hacks an existing template (created by someone else) into shape the best way they can manage.

These impostors to the design title are a blight on the industry, and create problems for everyone else.  Unfortunately they sprung up and spread faster than mold on a budget hotel bathroom ceiling, so we’re stuck with them for now.

As a real designer, you’ll be developing an understanding of the underlying technologies you use, and the technical abilities and features of the various device types you are supporting.  You should be engineering solutions that are tailor made for different environments.  For example, on a phone, one of the most difficult things to do is use a drop-down list.  Radio buttons and checkboxes can also present a challenge.  You could consider making these items larger, more accessible, and more distinct, so that they’re easier to select.

Detailed information

All media queries are written as a line in a section of CSS code, and include media-specific CSS.  When the media type is omitted, the browser will assume that the default type “all” is intended, and will apply the CSS instructions to any media type that can accept the instructions.  This of course means that you never actually need to include the word “all”, as it is implied if no type is specified.  When the media type “all” is included, that is mainly for the benefit of a human reader, as the browser does not need that information.

The optional keyword “only” must appear before the media type if it is used at all (and certainly does not have to be, because it is implied, except when contraindicated).  That instruction is more for the benefit of a human reader than for a browser.

The optional keyword “not”, on the other hand, is for the browser, and is used to indicate that the instructions should only apply to devices that are identified as not being the specified type.

Most media queries accept modifiers and may require units to be specified in order to work correctly.  If there are no modifiers, the unit values must match exactly whatever is shown.

Many media types that were valid in CSS2 are now deprecated in CSS3 and CSS4 but still accepted and can be used.  The use of deprecated media types is discouraged but not forbidden.

The types now deprecated are aural, braille, embossed, handheld, projection, tty, and tv.  There are many reasons for this, but one was that, as stated earlier, almost nobody uses them (in CSS, but they do use them as devices).  This may be the only contemporary example of W3C rolling back a feature that was intended to provide greater accessibility.

The post An in-depth guide to CSS3 Media Queries appeared first on Inspired Magazine.

Read for later

Articles marked as Favorite are saved for later viewing.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview