Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 20 2017

07:54

Introduction to Object Oriented JavaScript

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

For some reason there’s a tendency in the IT industry to take the view that if you’re not using Object Oriented Programming (OOP) methods, then  you’re not a “real programmer”.   That is actually a somewhat silly stance to take, because there are many situations where OOP is not the most appropriate way to deal with a problem.  This is the flaw in languages like Java which force OOP into every programming task whether you need it or not.

JavaScript (which has almost nothing to do with Java) is quite a different language.  It provides almost unlimited freedom and versatility, with reduced complexity in most areas.  Unfortunately there are some things that are more complicated in JavaScript because of the freedom it tries to give you.

Why OOP isn’t always suitable for every task is that it adds more complexity to a program and will often involve extra steps, more work, and more things that can potentially go wrong if you’re not paying attention.  But OOP also can provide a lot of advantages if it’s used in situations where it is appropriate.

The most important advantage OOP can offer us is replication, which means we can clone an object and re-use it multiple times in the same program, whenever we need it.  The implied complexity, and the fact that JavaScript isn’t built from the start to be an OOP language (thus adding more complexity), is one of the reasons why OOP represents the final frontier for many fledgling JavaScript programmers before they earn their wings.

OK, it’s hard, but it’s not that hard

Before you start thinking the concept of Object Oriented JavaScript is too much for you, consider that you’re already using OOP even if you’re not aware of it.   Purists might disagree, but I think it is fair to say that if you’re already using HTML and CSS, and you’ve occasionally used JavaScript to manipulate HTML elements on a web page, then you’re already an experienced OOP programmer.

Every HTML element on a web page is actually an object.  They all fit into the Document Object Model (DOM) hierarchy, which means they have a defined class, defined properties, and defined inheritance.  Unless you explicitly set a property value, all objects will use their default property values.  When you write a CSS instruction, what’s really happening is you’re using a method to modify one or more property values of a class.

Every time you write a HTML instruction, you’re create a new instance of a class.  And as you would certainly already know, you can create your own classes based on the pre-defined class of each object type (for example, you can create <h2 class=”subheading”> which might have very different properties from the original class it was created from).  You may specify that H2 objects with this class will have a different color and size from the regular H2 objects.  And you can re-use those modified objects as often as you like.  The original H2 object is an object template and your new class is derived from the template class.

So yes, OOP isn’t easy, but you’re probably already doing it, so what is there to be afraid of?

The next level: creating your own objects

Working with built-in DOM objects is too easy.  You need more challenges.  Making your own objects is the first step to a higher level of OOP.

With all that preamble, you’re probably expecting that creating an object is a big deal requiring a lot of complex code.  Certainly if you’ve ever tried creating custom object classes in a language like Java or C#, you’ll be expecting to create a lengthy class constructor.  Here’s how we do it in JavaScript:

Well that was anti-climatic, huh? What we did there was we created an empty object of class “myObject”.  Obviously empty objects are boring, because they don’t do anything except take up space in memory.  To be useful, an object needs to have contents.  Let’s consider a more practical class:

The above shows an object called objAlien which has all these different properties (ordinary variables) and methods (function) defined within it.  Technically, then, you could also consider an object to be an array of variables and/or functions.

Using objects in a program

Once an object has been defined, you can reference it in your programs.  In a game, you’d have multiple aliens, but writing code for each individual alien would make the program too cumbersome.  A better way is to create an array to store all the aliens, and then use the alien class to create new aliens.  For example:

This code would make 20 slimy green aliens placing them 110 pixels apart (so we could guess from this that the image used to store the alien is 100px wide, and there’s a 10px margin between each alien).  Obviously, of course, this isn’t a good way to implement a game in JavaScript because there are better techniques, but this article isn’t about making games, it’s about creating and using objects.

Objects don’t always have to be added using the new keyword.  Here’s a sample of code from a project where an object sets its own properties using the values of another object:

 

Here we can see a really complex way of using an object, where the object’s values are passed to the attr property of the R object.  If you’re familiar with JSON (JavaScript Object Notation), then you may think the first part of the example is using JSON with syntax errors, but in fact it’s not JSON code.

The reason the variable names, except fill, are quoted is to prevent JavaScript from processing the minus operator in the variable names (which are CSS properties).  Since that program was written, changes were made to allow CSS properties like font-family to be written as fontFamily, but this legacy code hasn’t been adapted to take advantage of that change.

Why use objects?

Objects are best for situations where you need to make multiple instances of something, or where you need a simple way to group data related to something of a particular type.  In the game example above, we can see that it was possible to create multiple copies of the objAlien object, but we could also manipulate properties of the object after we added it, which in the case of the example was the x property.

When not to use objects?

You shouldn’t use objects if you project doesn’t really need them.  It’s pointless to over-complicate your programs without a good reason. If your program is designed to do something simple,  OOP techniques shouldn’t be required.

Why JavaScript Objects are easier to create than Objects in other OOP languages

In languages like Java and even Visual Basic, creating objects is a big task.  This is because you need to create a class template (or use an existing one) to base your object on before you can define it.  That isn’t necessary in JavaScript because we’re given a simple construction technique ( objectname={…} ).  Objects in JavaScript can also include any type of variable, including arrays, and type declarations are non-existent.  Return values are optional.

Whether it is a good thing or a bad thing is a matter of some debate, but JavaScript programs also won’t fail if you attempt to call up a property value that does not exist.  For example, if you typed:

You would quite rightly expect the above line of code to put 5 inside the element with ID “par1”.  But if you were to type something like:

You would not see the alien’s favorite flavor, you would see undefined appear in par1.  For most applications this would not be a problem, but for some it would be.  In those cases, you need to be prepared for that and write code that tests for valid values before relying on them.

One way to test for this is:

That response is a bit extreme, but you get the idea. Notice we are testing for “!==” and not “!=”, which is an easy thing to get confused about.  Here’s another way to do it:

Same thing, different way.  You can also add properties to objects after creating them.  You can do that this way:

Obviously you can also change the values of the properties in the same way.  To remove the favoriteFlavor property from the object, we’d need to do this:

There are very few situations where this would ever be necessary.

Making Objects more re-usable

You probably noticed the biggest potential problem with creating objects, which is that if you wanted to have different types of aliens, you’d need to make the objAlien.type property an array.  But there’s another way, which is better.

This technique is called object prototyping, which means you make a basic template for the object but don’t fill in all the details.  Here also, we’re getting closer to the real way to add objects to a game.

You can see now the methods of the object are defined, but most of the properties are not defined.  Also instead of being a simple variable, the object declaration is now wrapped inside a function, and that’s because it’s not actually an object yet.  It’s just a prototype of an object, describing how to create the object without actually creating it.

So now to actually create objects based on the prototype we could do this:

This is the same as doing this:

Because we created a prototype, we didn’t need to do it the second way, and declaring different types of aliens with different speeds, number of arms, weapons, and starting positions is much easier.

What next?

This article was an introduction to Object Oriented JavaScript, which hopefully demystified the subject and made it seem less intimidating.  We covered all the basics including how to create simple objects, how to add, remove, and modify properties, how to declare and use methods, and how to use prototyping to make objects easier to re-use.  But there’s still plenty more to learn, so now that you have a good starting point, you’ll be able to approach any tutorial or lesson on more advanced OOP with confidence.

This post Introduction to Object Oriented JavaScript was written by Inspired Mag Team and first appearedon Inspired Magazine.

January 30 2017

10:23

Mozilla’s Light-Weight Web Design Tools

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

This post Mozilla’s Light-Weight Web Design Tools was written by Inspired Mag Team and first appearedon Inspired Magazine.

January 24 2017

05:57

Zoey is An Advanced Ecommerce Platform for Web Designers and Agencies

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

It’s often tough to argue that one ecommerce building platform is faster than another, unless you complete an unbiased speed test with a large sample size. However, sometimes you can objectively say that a system is faster just by playing around with it.

That seems to be the case with Zoey, seeing as how during my tests I was able to launch a few ecommerce websites within minutes, and they actually looked great out of the box and I was technically able to start collecting payments from customers.

Granted, my sites were made for testing, but the same experience can be transferred over to regular developers. And that’s exactly what Zoey is trying to achieve. The company isn’t necessarily attempting to bring in regular ecommerce entrepreneurs, but rather the web designers who are making hundreds, or thousands, of ecommerce sites for clients.

We recommend you request a demo of Zoey to get a better feel for what the platform can do for you. It’s completely free, and it can give you a more hands on test to show you whether or not it’s something that might work for your business.

What’s Zoey Really All About?

As we mentioned above, the Zoey platform is for agencies and web designers, so you’re better off looking somewhere else if you only want to make one ecommerce site.

It’s an ecommerce platform that has two advantages: It includes the power and flexibility of a modern day open source solution, similar to how WordPress is so flexible. Secondly, Zoey also works like a SaaS platform, making it easier to use and more robust in its feature-set.

When looking at the features, I noticed that Zoey provides a wonderful drag and drop builder, along with robust ecommerce capabilities. I like this quite a bit, since it’s much harder to design with solutions like Shopify. In fact, Shopify doesn’t even have a drag and drop builder, so most developers are left with lots of settings they need to adjust for a new site.

Zoey also provides a blazing fast infrastructure, meaning that developers are able to service just about any type of client. For instance, let’s say you’re an experienced developer with multiple ecommerce clients. A new client wants a sophisticated B2B website, while another one is more interested in a basic startup online store, with everything they need for selling a handful of products.

Zoey has the cutting-edge platform to serve both of these clients.

Is There Anything Truly Unique About Zoey?

When you look at other ecommerce platforms like Shopify, Volusion and Bigcommerce, you’ll notice that these are more akin to consumer products, being marketed to every possible person who might want to make their own website. Yes, developers have been known to utilize Shopify and Volusion when making ecommerce sites for clients, but neither are built to make the process easier for developers.

Zoey, on the other hand, was made for designers and agencies, cutting out the amount of code needed, and expanding the number of possibilities when it comes to satisfying clients. In short, web designers should theoretically cut down the amount of time they spend developing with Zoey, and in turn, make more money.

Oh yea, this also makes support and client satisfaction a littler nicer.

The deep ecommerce functionality serves far more businesses than SaaS platforms like Shopify and Bigcommerce. Developers often have to utilize multiple ecommerce platforms for different clients. However, Zoey generally cuts down on the number of platforms needed, since Zoey is technically the only one required for all company sizes. Therefore, you could build an extremely complicated site right after pumping out a small shop with five products, all with the same platform.

I would compare this to a web designer who mainly generates blogs and business sites with WordPress. It’s far easier to stick with one CMS.

The Need for Speed

Zoey claims that building a website with its platform is 4X faster than if you were to go with a competitor like Shopify or Volusion. Does this hold up? I would say so, considering my tests brought me directly to the elements I needed, and the drag and drop editor is far more intuitive than some of the others I have used on the market.

Along with the design tools, Zoey provides rich functionality and a beautiful SaaS infrastructure, both of which allow agencies and freelancers to boost their production levels.

With this time, your company can save money and cut down on the amount of people working on one project. One site may require you to allocate two or three designers for full-time work. However, Zoey tends to eliminate the need for these development teams. Even the most complex ecommerce sites can be generated by one designer, freeing up time and resources for your other designers to handle other jobs. Overall, scaling up becomes more realistic, since your large freelance teams aren’t all tangled up in one project.

Affordability for Design Clients

One impressive part about Zoey involves wholesale and B2B tools. Zoey is the only SaaS system with a built-in wholesale and B2B suite. Therefore, web development clients aren’t forced to pay tens of thousands of dollars for a more custom/complex ecommerce site.

Not to mention, the B2B tools make it possible for freelancers and agencies to take on projects like these. In the past a freelancer might pass up a large, custom site, but now there’s no reason to skip out on this revenue stream. The interface is simple enough, you’re not burdened with tons of coding, and you even get some nice templates.

Who Should Use Zoey?

This answer is simple: Developers and agencies that want to stick to one platform and cut down on development time when making ecommerce sites. I wouldn’t say it’s the first recommendation for individuals constructing online shops, but the developers should be all over Zoey.

We encourage all agencies and developers to request a demo of Zoey. Let us know in the comments section if you have any questions about this gem.

This post Zoey is An Advanced Ecommerce Platform for Web Designers and Agencies was written by Inspired Mag Team and first appearedon Inspired Magazine.

January 20 2017

12:47

Freebie: Nava – clean, responsive HTML template

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

This post Freebie: Nava – clean, responsive HTML template was written by Inspired Mag Team and first appearedon Inspired Magazine.

January 16 2017

06:55

Infographic: 2017 Web Design & UX Trends to Boost Conversions

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

This post Infographic: 2017 Web Design & UX Trends to Boost Conversions was written by Inspired Mag Team and first appearedon Inspired Magazine.

December 20 2016

06:46

Web Design Trends to Avoid in 2017

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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

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.

This post Web Design Trends to Avoid in 2017 was written by John Stevens and first appearedon Inspired Magazine.

December 19 2016

08:48

Basic HTML5 Canvas Methods Every Designer Should Know

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

This post Basic HTML5 Canvas Methods Every Designer Should Know was written by Inspired Mag Team and first appearedon Inspired Magazine.

December 05 2016

08:51

Is WP Engine’s Free WordPress Staging for Developers Legit?

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

noul

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?

kiking

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.

support

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!

This post Is WP Engine’s Free WordPress Staging for Developers Legit? was written by Inspired Mag Team and first appearedon Inspired Magazine.

November 18 2016

17:51

Depositphotos.com Gives Designers a More Affordable and Flexible Stock Photo Solution

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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.

deposit-photos

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.

29

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?

all-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?

tree-photo-search

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.

download-image

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.

downloads

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.

This post Depositphotos.com Gives Designers a More Affordable and Flexible Stock Photo Solution was written by Inspired Mag Team and first appearedon Inspired Magazine.

November 14 2016

07:56

Under-exploited HTML5 Features

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

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:

screen-shot-2016-11-14-at-09-37-09

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:

screen-shot-2016-11-14-at-09-38-21

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:

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:

img

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:

this-path

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:

input

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:

canadian

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:

input-2

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:

placeholders

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:

input-3

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:

figure

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.

This post Under-exploited HTML5 Features was written by Inspired Mag Team and first appearedon Inspired Magazine.

July 10 2015

11:45

Are your websites too slow?

Once upon a time, Tim Berners-Lee and a few other very smart people made the Web. They looked upon what they had made, and saw that it was okay; but they would fix it up later.

They never got around to it.

On that day was born an information network so vast, so all-encompassing, that we often forget that most of the world doesn’t actually have access to it. At least, relatively few of us have high-speed, twenty-four-seven Internet access. It’s not quite as pervasive as we might imagine.

high-speed, twenty-four-seven Internet access [is] not quite as pervasive as we might imagine

I got to experience, well… not the infancy of the Internet, but its “terrible twos”. The 56k modem, in all of its static-y, phone-line-blocking glory was the way I played Flash games on the Disney and Cartoon Network sites. Those were good times, even if I did have to wait half an hour for the games to load.

As I got into web design as a profession, I did what every new web designer does: I learned how to make my sites “fancy”. I added animated slide-shows, learned the ways of jQuery, used drop-down navigation, accordion menus, accordion content, and one time, even page transitions. Then Facebook said they wanted to load my articles without loading the rest of my site…

…Facebook only knows who I am in the sense that I’ve given them far too much information about myself. But this is a thing that’s happening, and I don’t blame Facebook for doing it. Our websites load slow, these days.

What are you talking about?

Yes, yes, our Internet speeds are faster than ever, in Korea, or if you’re lucky enough to have Google Fiber. 4G is amazing, too. We can deliver information like nobody’s business, and that is, indirectly, part of the problem.

That parallax effect can’t weigh too much. Can it?

After all, if we can deliver the data faster, why not deliver more of it? That parallax effect can’t weigh too much. Can it?

This discussion isn’t anything new. People have been saying for years that it’s silly to throw more and more digital weight into our websites, and they’ve been right all along. But now we’re starting to see someone try to do something about it, and the solution has dangerous repercussions.

(Do you want Facebook to deliver all content? I don’t. They know too much as it is.)

Now let’s be clear about something: I’m not talking about web apps. Web apps are a whole other story. This is about the websites we use to deliver our content, our news articles, our portfolios, and our sales pitches. Too many of them are too big, too bulky, and too slow.

Don’t believe me?

Think back. How many websites have you included jQuery on because you needed to animate one thing? Don’t forget all of the WordPress websites. They come with jQuery by default.

Better yet, don’t take my word for it. Head over and look at the results of this study. The average page served to mobile devices is over one megabyte in size, and the overall average for every device is around two.

Keep in mind, that means many are bigger.

we have access to the single most important information resource in the world; and we don’t want to wait more than a second for that information

This may not be a big deal for anyone who actually gets at least 10MB per second, and is close to the originating server, isn’t downloading anything else, or Skyping with a friend, and isn’t on a bad mobile network. For anyone else, however, yeah, it’s a big deal.

See, here’s the thing about people: we have access to the single most important information resource in the world; and we don’t want to wait more than a second for that information to come to us. Does that seem a bit petulant? Yeah, but it’s not going to change.

Time, after all, is our most valuable resource.

Why do we do this to ourselves?

These are only a few of the possible reasons:

People will use libraries and frameworks for every little thing

Sometimes, people are just doing things “the easy way” and rapidly coding something up, just to get it done. I get it. I truly understand the appeal. But much of the time, we probably don’t use half of what’s in those massive frameworks, and so we build sites that are too heavy.

The other part of the problem is that frameworks are part of programming and front-end curriculums now. In some places, they don’t teach newbies JavaScript, they teach jQuery. Not Ruby or Python, but Rails and Django. Don’t get me started on the number of people who barely know what HTML and CSS are who ask, “Should I learn Bootstrap?”

Pre-made themes

Those WordPress themes that have kitchen sinks? Yeah, those are some of the worst offenders. The people who buy them won’t use half of the features they offer, but often everything still gets loaded, just in case.

The same is true of themes for other CMSs, of course.

Massive images

Big images sell more. That much is certain. But a lot of those big images aren’t implemented responsively, at least not yet. Worse, some are barely even compressed. Go back and look at the stats. The images are over half the problem.

People don’t think it matters

Not everyone has 4G. Not everyone even has broadband at home. Hell, much has been made of the fact that some two million people still use AOL’s dial-up service in the USA. That’s two million people hearing that delightful dial-up tone whenever they want to access the World Wide Web; and let me tell you, massive numbers of websites simply won’t work for them.

When you’ve got the best, it’s very very easy to forget that not everyone else has it too.

Fix it

I’m not saying the whole Web has to be plain. Just that it has to load faster. Ask yourself if that parallax effect that needs a preloader will actually enhance the user experience.

(Hint: it won’t.)

 

Featured image, slow connection image via Shutterstock.

450+ Modern Photoshop Actions from Inventicons – only $24!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
10:49

This week in design news – saying goodbye to Adobe, if famous people created famous logos and much more

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, tutorials, resources and other goodies. This week we look at things such as saying goodbye to Adobe, what if Facebook was a startup in 2015 and much more.

Thank you for everything, Adobe. I really want to move on

I started using Adobe products in middle school. At the time, I never thought I’d do anything remotely connected with design, I just liked messing around with computers. Like most kids, I didn’t know about the technical differences between designers, developers and probably IT support people, I just liked computers and did all sorts of random things while others were focused on gaming.

Screen Shot 2015-07-10 at 12.03.30 PM

How to End the Client vs. Designer Feud

When it comes to graphic design, it seems like there’s an age-old conflict between designer and client. It’s an ever-present battle of opinions, a tug-of-war.Designers are hired as an essential part of the project, so why are their decisions so often challenged and even overruled by the client and other stakeholders?As many things in design often do, it all comes down to psychology and history, to an extent. And no matter how beautiful the finished product turns out, client relationships can make or break business for both parties.

clientrelationship2-1024x681

What if Facebook started in 2015? – Facebook as a Startup Concept

We can’t imagine a world without Facebook, but what if the social media network was just getting started in 2015. Would it grow to become one of the fastest growing startups? Or would it get lost in the hustle and bustle of new startups?

Screen Shot 2015-07-10 at 12.04.33 PM

20 Useful CSS Tools for Designers and Developers

CSS is a web designing language which does not require any kind of formal introduction to be provided. It is the most famous language across the globe when it comes to website designing. It has become a lot easier to learn and work in CSS based web designing environment, thanks to various great tools and tutorials for CSS development which are available freely on the World Wide Web. Being very clean and having an organized structure makes web designers fall in love with CSS. It helps reduce a web page’s load time and makes the webpage look very stylish, leaving the visitors overwhelmed.

css-tools1

What if famous painters created big brand logos?

When in design school, I remember one teacher explaining us that trying to imitate the style of famous designers or artists as an exercise was one of the best ways to progress. In fact, when doint this, you have to try to put yourself in the person’s shoes and learn how to thing like that artist. Italian designer Francesco Vittorioso did that exercise as a personal project, but he added a little twist to it. He took on famous brands using the style of iconic artists. The results are cool, in my opinion the best is the Modigliani Starbucks logo.

Screen Shot 2015-07-10 at 12.08.17 PM

Affinity Photo Launches

5 years in the making, Affinity Photo redefines the boundaries for professional photo editing software for the Mac. With a meticulous focus on workflow it offers sophisticated tools for enhancing, editing and retouching your images in an incredibly intuitive interface with all the power and performance you need.

Screen Shot 2015-07-10 at 12.09.44 PM

Google’s Free Website Builder Makes It Dead Simple To Implement Material Design

By now, we’ve all heard of Google’s enticing pitch on Material Design—their design language that re-imagines the pieces of user interface as real, physical objects. But while Google offers tools for any Android developer to build an app that adheres to Material Design standards, what if you just want to make a snazzy, Material Design website?

3048295-slide-s-1-googles-free-website-builder-creates-material

Top 10 Little-Known Mobile Apps That Startup Entrepreneurs Love to Use

Twitter, Evernote and Dropbox are common tools that almost everyone uses. But startup entrepreneurs usually have a list of their own favorites when it comes to tools, resources and mobile apps in order to effectively manage and run their startup businesses. Here, we present to you a list of top 10 apps that celebrity entrepreneurs’ love to use. We’re sure this list will compel you to try these tools and inspire you to search for other comparatively unknown apps to make managing your startup an easy task. And if you’re the inventive kind, you may come up with your own app or tool and get a customized mobile app design to meet your specific work related needs. You may share it with other entrepreneurs and spread some startup love.

Blog-Post78

Feature image curtsey of  Luis Liwag ®

 

This post This week in design news – saying goodbye to Adobe, if famous people created famous logos and much more was written by Catalin Zorzini and first appearedon Inspired Magazine.

July 09 2015

14:00

Serif releases Affinity Photo

Today, Serif launches Affinity Photo, the highly anticipated companion app to 2014’s Affinity Designer. Whilst Affinity Designer was aimed at vector artwork, Affinity Photo is a professional bitmap editor.

The whole ethos around the Affinity range is producing incredibly fast, sophisticated tools that are focused to provide a productive workflow for creative and photography professionals — Ashley Hewson, Managing director of Serif

We first reported on Affinity Photo back in February, when it was released as a public beta. Since then, 230,000 designers have downloaded the app and Serif have been working on adding feature requests from the beta period, today we’re getting our first look at the results.

Workflow

Affinity Photo is an incredibly fast alternative to an app like Photoshop. The power behind it means that almost everything happens live on the artboard, not in preview panels.

Affinity Photo can both import, and export, the PSD file format.

Affinity Photo doesn’t set out to feature-match Photoshop, but it does support almost everything Adobe’s behemoth sports: there’s support for RGB, CMYK, Greyscale, and LAB; ABR brush files can be imported; export options include PNG, TIFF, JPG, GIF, SVG, EPS, and PDF; there are unlimited layers, adjustment layers (including clarity, vibrance, white balance, and more), filters, and masks; export @1x, @2x, and @3x from layers, slices, or entire documents; split (or mirrored) screens are available to display before and after views.

Most importantly for anyone working professionally, Affinity Photo can both import, and export, the PSD file format.

In addition, Affinity Photo delivers a number of features that Photoshop is crying out for: personally I was particularly impressed with the option to save the history panel for a document for access later on.

Performance

The first thing you’ll notice opening up Affinity Photo is its speed relative to Adobe Photoshop. Utilizing core Apple tech like OpenGL, Grand Central Dispatch, and Core Graphics produces an extremely enjoyable alternative to the spinning beachball of death.

Affinity Photo began life as a series of experiments, one of which was to edit memory-intensive images on iOS. Thanks to the shared architecture of iOS and MacOS, the innovative solutions devised to solve that conundrum can be scaled up to run on desktop machines:

…all the lean, mean efficiency required to meet my iOS performance goals, unleashed on OS X devices with gigabytes of RAM – Andy Somerfield, lead Affinity Photo developer

After a few hours of working with Affinity Photo, it’s clear this is the new benchmark for graphics app performance.

No subscription

One of the chief complaints levelled at Adobe in the last couple of years has been their subscription model.

Serif have rejected the subscription model: the full price of Affinity Photo is $49.99 with free updates for 2 years.

Coincidently, one month’s subscription of the complete Adobe CC 2015 suite is also $49.99. Which means if you switch from Photoshop to Affinity Photo, you’ll have $1149.77 to spend on a shiny new iMac on which to run it. Of course the Creative Cloud subscription covers more than a single app, but it’s a tempting proposition nonetheless.

To further whet your appetite, for the next two weeks Affinity Pro, and its partner Affinity Designer, will both be sold exclusively through the App Store for $39.99 (reverting to $49.99 on the 23rd July).

Future plans

Two of Serif’s trinity of apps (Affinity Designer and Affinity Photo) are now live, and Affinity Publisher — expected to rival Adobe’s InDesign — is scheduled for release in late 2015/early 2016.

Like Affinity Designer, Affinity Photo is currently Mac only. This allows Serif to integrate Mac-specific features like the force touch trackpad. Serif are still working on El Capitan integration, and Metal is expected push Affinity Photo’s performance even further.

However, once El Capitan updates roll out, and Affinity Publisher is released, Serif plan to bring the apps to new platforms, including iOS and Windows.

Photoshop killer?

Affinity Photo has been in development for five years, and although it’s often said that Photoshop has a 20 year head-start, it’s starting to feel more like 20 years of baggage.

Affinity Photo doesn’t try to feature-match Photoshop, it aims to be better; it’s precisely because Serif haven’t replicated every Photoshop function that they’ve delivered a faster, more efficient bitmap application.

It’s probably time to stop talking about Affinity Photo as a Photoshop rival, and instead start talking about Photoshop as an alternative to Affinity Photo.

LAST DAY: 1624 Gorgeous Swifticons Icons (in 3 Styles) – only $29!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
09:47

Getting started in digital design without breaking the bank

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

It can be a tough ask trying to get any new business up and running from scratch, but with focused drive and commitment, it’s certainly possible to do it and without it costing a fortune to get started up.

The digital industry is well known for the number of people who started out small but had a great idea and made a huge success of their business. In the early days, it was the hardware and software side that propelled Bill Gates of Microsoft and Steve Jobs of Apple to enormous success and worldwide fame. Now it’s the multiplicity of design agencies that is moving the industry forward.

Getting started

Before getting a basic digital design business set up, it’s important for entrepreneurs to work out exactly what they want to do, how they intend to achieve their goals and, perhaps the most important part at the beginning, how much it is going to cost.

In the end, the initial costs will come down to what level of equipment, both hardware and software, is wanted and needed, and whether it is bought new or second hand, how much will be paid for business premises and other expenses, and what level of marketing is undertaken.

The first thing to do is to carry out some intensive research on what is available and what is suitable for the specific area of digital design capabilities being targeted. The internet is the first port of call to begin looking at capacities of desktop and laptop computers, what types of graphic design software they come with as part of the package, the cost of software that is not bundled in with a computer, and peripherals such as printers and photocopiers, though as often as not the two come bundled together.

As a digital designer, it’s generally considered essential to have as large a screen as possible so that the clarity of the design, the layout, and colors can be seen in high resolution and thus is easy to work with. As for whether to go with Macs or PCs, it’s a decision that may well come down to cost. In the digital design world, Macs are highly popular, but they are considerably more expensive than PCs.

Cutting down on costs

It’s not necessary to go for brand new every time, though entrepreneurs with deep pockets or the backing of family and friends may well want to opt for new. There’s nothing wrong, for example, with a good second-hand laptop to start out on organizing a digital design business, and if the internet is the first port of call, then it’s worth checking on http://www.for-sale.in/laptop. It’s always important to check that any laptop being considered will do what the user wants it to do or it will be like throwing good money down the drain.

Anyone who is uncertain about exactly what capacities particular laptops have should get advice – asking costs nothing and could prevent a costly mistake. Here, it’s a good idea to find web forums that specifically deal with digital design questions. People in the IT world are always willing to give the benefit of their experience, especially to those who are just starting out.

Huge savings can be made by buying second hand – when the business is up and running and making money, then it could be the time to go for new, but some designers can remain perfectly content with what they originally bought.

Peripherals and business expenses

It’s essential to invest in a high-spec printer that will really show the quality and colors of the design when it is printed out. Here again, it’s easily possible to go for a good second-hand printer, so designers then need to investigate whether they want to go for an inkjet or a laser printer. Inkjets are cheaper, but here it’s sensible to try and get a comparison of the quality of the end product that will emerge.

Storage can become a problem, perhaps not immediately, but as digital files build up, they will continue to use memory in the laptop and have the potential to slow operations down. At this stage, an external hard drive may be useful to free up internal hard drive memory.

Many digital designers start learning the trade by using Photoshop, but this is now only available on subscription. If that seems too expensive, then there are other providers that cost less, and it’s also possible to search for information on free software available, so a designer can start exploring and experimenting before upgrading to a higher-quality piece of software.

In terms of other business costs, it’s essential to have a domain name so that the marketing can begin, as well as fast broadband connection that will be able to deal with the large files that will be sent to clients or potential clients. Building up a portfolio is one of the best ways to show people what the business can do, and marketing costs nothing on social media such as Facebook, Twitter, Instagram, LinkedIn, and many other useful platforms.

Word of mouth is also an excellent tool for marketing, and by producing work that is of excellent quality, to brief, and to deadline, recommendations will often begin to flow.

When setting up a domain name and broadband package, designers should look for special offers and also look into the costs of hosting the name. It’s easy to lose control of these types of costs, so keeping an eye on what’s going out on a monthly, recurring basis is crucial.

Many designers start out in their bedroom or a spare room in the house with minimal premises costs, but as the business grows, it’s sensible to plan in potential rental costs for expansion.

Keeping expenditure low

Starting a digital design business doesn’t have to be very expensive and can initially be done on a small budget. As the business expands, the budget can expand correspondingly, with more money going into equipment, software, and marketing.

Feature image curtsey of  Burnt Toast Creative

This post Getting started in digital design without breaking the bank was written by Catalin Zorzini and first appearedon Inspired Magazine.

July 08 2015

11:45

Everything you need to know about the long-scrolling trend

Long-scrolling pages are at the heart of the above the fold vs. there is no fold debate. For a while, designers and marketers thought that your most important content (calls to action, contact info, etc.) should be above the fold because barely anyone scrolled below the fold.

Of course, this has been proven absolutely false, as lots of research proves that people today will gladly scroll below the fold and still gobble up your content (provided it’s relevant and high-quality). Back in the mid-90s it was atypical to scroll, but things have changed…a whole lot in 20 years!

That brings us right to the present moment, when long-scrolling pages are increasingly popular and downright cool-looking, in addition to being functional.

Memorable visual design

If there’s one thing that these long-scrolling pages are getting a reputation for, it’s featuring a memorable, visual design. Hey, you have to when you show site visitors a long page…that has to keep their interest and motivate them to scroll down for more content, after all!

One of the best examples of a long-scrolling page that does this is Bounty Beverages’ site. With a striking background, attractive images, and easy-to-read headlines and subheadings, intelligent section spacing to guide the eyes, and chunked copy to facilitate scanning, this page illustrates how effective and appealing these types of pages can be if done right.

Of course, the entire point of a long-scrolling page is getting the visitor to take some form of action via the call to action buttons. Bounty Beverages’ page is replete with them. Above the fold, you see a helpful directional cue pointing up to where visitors should click to learn more about its beers. At the bottom of the page, you also see calls to action prompting visitors to leave feedback and spread the brand’s message on social media.

Having a superbly designed page leads to the main benefit of long-scrolling pages, which your clients can’t get enough of, namely…

An increase in conversions

When the way the page has been conceived and executed is strong, visitors will enjoy spending more time on it, and when your bounce rates drop, your conversions increase, as research shows time and again. It just stands to reason: the longer visitors stay on a site, the more chance they’ll be persuaded to respond to your calls to action.

Your visitors spend more time on a site if they are fully engaged engaged with it. This is the key aspect of capitalizing on a great long-scrolling design. That begs the question, how can designers increase the user engagement level in the first place?

There are numerous factors that measure a user’s engagement level. They include:

  • page views per session;
  • time spent on a site;
  • frequency of site visits;
  • interactions with on-screen elements;
  • bounce rate;
  • conversion rate;
  • abandonment rate.

The beauty of long-scrolling pages is that they can include enough content to entice visitors to spend a longer time on the site than usual—which they can help along with strategic storytelling. In fact, over the past couple of years storytelling has been increasingly used in web design.

Make sure to use storytelling in your long-scrolling pages to keep your visitors’ interest and get them excited about converting at the bottom of your page. After all, we human beings are simply suckers for a good story.

Okay, so now it’s more than clear that long-scrolling pages are good for business, the only thing left is deciding how to lay out your awesome, long-scrolling page.

Laying out long-scrolling pages

Nailing the placement of specific elements on the page is key to its success. The order really matters because, as we explained, long-scrolling pages tend to tell brand stories, so the elements have to unfold logically.

If there’s a common bond among all long-scrolling pages regarding what first catches your eye, it’s the presence of mega images that are in the header. Sometimes these mega images are part of an automatic carousel or stretch across the entire width of the page. Together with these images, you’ll usually see the name of the company in the header, along with a value proposition for whatever’s being sold. All this is above the fold.

When you start to scroll, though, that’s when things get all the more interesting!

See, that’s when the storytelling begins in earnest, as in the case of Nest, the control-it-from-anywhere thermostat. When you begin to scroll, you get invited to take a tour of the product and how your life can change because of it. In fact, each time you scroll, you see another short section that invites you to explore Nest from a unique angle.

Other long-scrolling pages, like The Beetle’s, feature videos, so that visitors can see the car in action. Besides this, there’s a collection spotlight that invites visitors to take a glance at all the cars in the Beetle collection. It’s a slightly different approach, but, again, the gist is the same: it’s still about storytelling to introduce the product to visitors and get them excited about it.

Sometimes, a long-scrolling page can be the ideal place to showcase a restaurant’s menu items, as is the case with Whitmans’ restaurant in New York City: its long-scrolling page is basically an excuse for customers and those thinking about going to Whitmans for the first time to preview what they can order.

Storytelling can also be a vehicle for efficiently moving visitors through the many services and features of a company, such as with Squarespace’s page. This content-management system that lets people create websites and blogs needed a page to show off its many services. When you scroll down, you see everything from the various types of sites you can create to the different things you can do on Squarespace.

Why long-scrolling?

Long-scrolling is a trend that’s only going to get bigger, especially with many big brands using it for their prominent products and services. If you like this new design approach, you can thank mobile for bringing this more to the mainstream.

With more and more users depending on mobile, designers had to find a way to efficiently and neatly display content on a smaller and narrower screen. Just think of how you scroll down with your thumb when you’re looking at a site on your mobile device.

The good thing about these pages is that they work equally well on desktop as they do on mobile. You can expect to see designers continue to embrace this trend as we move forward.

LAST DAY: 1624 Gorgeous Swifticons Icons (in 3 Styles) – only $29!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
09:09

25 Graffiti fonts to inspire you for your next web design project

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

Some call it vandalism, some call it art, whatever your opinion is, there is no denying Graffiti fonts can be used in many different situations. Many web designers are giving their web designs that grungy look, and nothing fits better than these graffiti fonts to complete the picture. Today we have found 25 crazy graffiti fonts that we are sure you will enjoy as much as we have. Most of these are free, however some might require a purchase or donation.

Gang Bang Crime

Screen Shot 2014-10-14 at 9.15.23 PM

Degrassi

Screen Shot 2014-10-14 at 9.14.58 PM

Aerosol

Screen Shot 2014-10-14 at 9.14.51 PM

Gangland

Screen Shot 2014-10-14 at 9.14.43 PM

Most Wasted

Screen Shot 2014-10-14 at 9.20.25 PM

Urban Decay

Screen Shot 2014-10-14 at 9.20.44 PM

punk kid font

Screen Shot 2014-10-14 at 9.20.57 PM

graffiti treat font

Screen Shot 2014-10-14 at 9.21.12 PM

mawns graffiti filled font

Screen Shot 2014-10-14 at 9.24.49 PM

You Murderer

Screen Shot 2014-10-14 at 9.25.04 PM

London Graffiti

Screen Shot 2014-10-14 at 9.25.15 PM

pwgraffiti font

Screen Shot 2014-10-14 at 9.25.25 PM

Urban Jungle

Screen Shot 2014-10-14 at 9.25.37 PM

A Dripping Marker

Screen Shot 2014-10-15 at 10.27.16 AM

Bring Tha Noize

Screen Shot 2014-10-15 at 10.27.27 AM

Juice

Screen Shot 2014-10-15 at 10.27.42 AM

Throwupz

Screen Shot 2014-10-15 at 10.27.58 AM

From Street Art

Screen Shot 2014-10-15 at 10.29.00 AM

Thug

Screen Shot 2014-10-15 at 10.35.52 AM

tribal funk font

Screen Shot 2014-10-15 at 10.33.28 AM

Graffiti Drips

Screen Shot 2014-10-15 at 10.33.50 AM

Graffiti Paint Brush

Screen Shot 2014-10-15 at 10.34.09 AM

Street Writer

Screen Shot 2014-10-15 at 10.37.46 AM

Nosegrind

Screen Shot 2014-10-15 at 10.37.59 AM

Brock Vandalo

Screen Shot 2014-10-15 at 10.38.38 AM

 

Feature image curtsey of Nick Chamberlin

This post 25 Graffiti fonts to inspire you for your next web design project was written by Catalin Zorzini and first appearedon Inspired Magazine.

July 07 2015

15:21

Google unveils Material Design Lite

Yesterday Google announced the release of Material Design Lite. Not, as the name might imply, a streamlined version of Material Design; rather, a framework for easily implementing Material Design on websites.

In the year since Google unveiled Material Design at I/O 2014, it has changed Google’s not-inconsiderable output beyond recognition. Everything from Google Drive to Android OS sports Material Design’s minimal(ish) style. Even Google’s flagship search page has adopted Material Design elements.

One of the chief stumbling blocks for widespread adoption of Material Design principles beyond Google’s own products, has been competing styles imposed by frameworks. There have been several community-driven attempts to rationalize Material Design and, for example, Bootstrap; Material Design Lite is an attempt to provide a Google-sanctioned implementation.

Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available. — getmdl.io/faq

How do I use Material Design Lite?

A code implementation of Material Design (MD), Material Design Lite (MDL) is a small (around 27Kb gzipped) library of components for use on web pages and web apps.

It’s written in Sass using BEM, and can be downloaded from GitHub then modified for your own purposes. Or you can, as per Google’s stated preference, import the full framework from Google’s CDN.

You can cherry-pick elements to integrate with your designs, or if you are looking for a really simple option, Google have provided a theme customizer which allows you to make (very) minor changes to the framework before you use it.

What’s included in Material Design Lite?

MDL’s component library features MD versions of common UI elements such as check boxes, text input fields, and buttons. There are also MD UI elements such as cards, sliders, spinners, and tabs.

MDL also includes five templates: a blog, the android.com skin, a dashboard, a text-heavy web page, and a standalone article page:

Browser support for Material Design Lite

MDL will, according to Google, work in “modern evergreen browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari”. Subtle swipe at Apple aside, this means that we can expect it to work in the last two major versions of all notable browsers.

MDL has been optimized to support content heavy sites. Its core aims are browser portability, device independence, and graceful degradation. The first two aims are in line with responsive design best practices, and although graceful degradation has been supplanted by progressive enhancement in the last few years, legacy support means graceful degradation is an important feature.

MDL includes a “Cutting the mustard” test which has to be passed before MDL’s JavaScript enhancements are applied to the framework. Older browsers, like IE9, will fail the test and be served a CSS-only version. Antique browsers, like IE8, won’t even fully support the CSS-only version. There is for example, use of Flexbox that neither IE8 or IE9 can cope with; however MDL’s graceful degradation means that even IE8 should display some of the framework correctly.

Issues with Material Design Lite

Numerous UX issues crop up with MD, and naturally MDL inherits them all. For example one of the most distinctive elements of MD, the floating button, is frequently positioned inconsistently, and on mobile often requires an extra knuckle in your thumb to tap it.

MDL feels like a framework with an agenda

Broadly speaking MDL is well built, however there are some questionable approaches; it is, for example, yet another framework that relies on JavaScript for layout.

MDL even extends into typography, which is where things get really sticky. The default font is Roboto, and although you can change this, I’m not confident that the majority of users will do so.

CSS frameworks like Bootstrap, and Foundation, have always included visual elements. They have not however, been as distinct as MDL. MDL takes a step further than most frameworks by delivering a complete visual style; MDL feels like a framework with an agenda.

Should you use Material Design Lite?

MDL is the way that Google thinks the majority of websites should be built. And whilst there is absolutely no suggestion that Google will enforce this way of building, they certainly could if they chose to; Google wants to ensure that search results it serves to customers are fast, clean, user-friendly pages, what better way than to add the use of a framework it controls, to its algorithm?

The use of any framework inevitably introduces some borrowed visual elements. However, most successful frameworks are successful because they are flexible. Where MDL differs, is that it is not just a framework, but a framework that favors a specific design approach.

MD, as a design guide, is a well-crafted and intelligent attempt to rationalise Google’s output into a coherent brand. Its failing is that it’s too brand-specific to be applied beyond Google’s product range.

We can learn a lot from the design wisdom in MD, but implementing it wholesale — which is MDL’s great strength — makes little sense most of the time.

LAST DAY: 1624 Gorgeous Swifticons Icons (in 3 Styles) – only $29!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

July 06 2015

17:20

Inbox Trail Review

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

When was the last time you sent an email newsletter only to realize that some of your messages landed in customer spam boxes? Are you even aware of this at all?

Unfortunately, email service providers like MailChimp, AWeber and ContactContact don’t provide this information. They only inform you which of the emails have been delivered successfully, meaning that those emails could have landed in inboxes or spam boxes.

They only care that the emails were sent and landed somewhere. Unfortunately, an email that hits a spam box is just as useless as one that didn’t send at all. That’s why it’s essential to understand what triggers spam placement, and what you can do to ensure that most of your emails don’t go to the dreaded pit that is the spam box.

That’s where Inboxtrail comes in.

Screen Shot 2015-07-06 at 6.06.31 PM

It’s a wonderful service that allows for testing of your email blasts, analyzing which emails go to spam boxes, and why. The best part is that you can make modifications before sending out to your real subscribers. After that, see which email providers are harder for you to work with. That said, let’s take a deeper look into this intriguing company they call Inboxtrail.

What’s the Deal with Inboxtrail? How Can it Help My Online Business?

Inboxtrail’s email deliverability tests tell you if your emails will go to the spam folder before you send them out to your mailing list.

Before sending an email, you use the Inboxtrail seed accounts, which are completely separate from your regular email list.

The system then gives you a report on whether or not the emails land in inboxes or spam folders. This testing is completed on all major ISPs, such as Gmail, Hotmail/Outlook, Yahoo and AOL.

The goal is to encourage organizations to improve their response rates, by simply solving the problem most companies have with spam filters. Any company or organization that sends emails should be regularly testing their deliverability so they can identify and fix email delivery problems before shooting them out to their paying customers.

The Ultimate Goal

Since content is so important, one email you send might make it to the inbox, while another might land in the spam folder. The only way to make sure your emails reach your recipients is to perform email delivery tests on all the emails you send.

Since Inboxtrail utilizes seed accounts, or test accounts, you have a chance to see how these emails will trigger spam filters before blindly blasting your email list with words or even images that may insinuate that the email is filled with spam content.

Lots of components lead to emails ending up in spam folders, from gimmicky subject lines to email attachments. The goal is to feed you this information before you go through with the Send button. After all, modifying this content before you send your emails is much better than hearing from a customer three months later that all of your emails go to their spam box.

Inboxtrail’s Overall Ease of Use

Screen Shot 2015-07-06 at 6.06.47 PM

If you use email services like MailChimp, AWeber, Campaign Monitor, ConstantContact or GetResponse, it’s rather easy to use Inboxtrail to test emails before you send them.

The process starts with setting up a free account and receiving a few free tests. After that, you just import Inboxtrail’s seed list into your account. I would recommend creating a completely new test list in your email service provider, considering you don’t want to mix these up with your actual subscribers and hinder your reporting ability.

The process also requires you to tag your email with a test ID. As you can see in the screenshot above, various options are available for pasting a test ID in your email, HTML, header or even a text-only portion of an email.

After that, all you have to do is send the email to your seed list. The results come back, allowing you to make your changes. The final step is to simply send out the modified emails to your real list, free of spam-causing elements.

Inboxtrail Does What Email Service Providers Can’t

Screen Shot 2015-07-06 at 6.15.33 PM

 

Sending emails from an Email Service Provider (like MailChimp, AWeber, Campaign Monitor, ConstantContact or GetResponse) does not guarantee your emails won’t land in the spam folder, since your email content matters just as much as the sender’s reputation.

This means that the chances of your emails hitting the spam boxes relies on two factors: Your content and how solid your email service provider’s reputation is. For example, MailChimp is considered to have a wonderful sending reputation, but it’s truly impossible for you to figure that out until you use a tool like Inboxtrail.

So, you go with a reputable company, but that company can’t guarantee that your email content doesn’t look or sound like spam. Therefore, you must test the emails to see if the problem is on your end.

The Ultimate Tips and Analysis from Inboxtrail

dashboard_result_1

Let’s say your emails are going to some spam folders. With Inboxtrail, you can fix the problem by following tips that come in from the analysis that follows testing.

The service provides a Spam Score analysis, which reveals a percentage of the emails that actually landed in the inbox.

Inboxtrail has a cool dashboard that shows the results of all the tests you’ve ever tried. When you run a test you can watch the results update in real-time as the seed accounts receive your emails. This is a pretty cool feature, since you can start making changes to your email as the system works its magic.

Comparisons to Figure Out if Your Email Service Provider is the Problem

Screen Shot 2015-07-06 at 6.07.02 PM

Inboxtrail also has an email service provider comparison center where you can see the inbox placement of different email service providers (MailChimp, AWeber, Campaign Monitor, and others).

How does this help you? Well, since email service providers won’t willingly tell you if their delivery rates are lower, you have to do that yourself. This allows you to check if your sender’s reputation is responsible for your email delivery issues. Sometimes your content is fine, but you need to switch to a different provider.

Free trial

Inboxtrail lets you run a few tests for free, and if you like the service you can choose between affordable pay-as-you-go options or a monthly package starting at $20.

That’s it for learning how to test your spam and inbox delivery rates with Inboxtrail! Let us know in the comments if you have any questions about this service.

This content is sponsored via Syndicate Ads.

This post Inbox Trail Review was written by Catalin Zorzini and first appearedon Inspired Magazine.

11:45

7 secrets for enhancing UX with micro-interactions

Knowing that we all judge a book by its cover, smart designers create catchy and practical interfaces. Potential users may be hooked, but how do you reel them all the way in?

In trying to answer this question, all roads lead to a human-centered design approach, where the user is the prime focus. Be human: your application should speak the same language we use every day, including emotions, colloquial speech, and with a pinch of “come-hither” look. An interface should be your good friend, ready to give advice striving to enhance your experience, and make you chuckle.

Curtains up, hit the lights: micro-interactions come into play. To be more precise, this is about interactive animations that come along with an interface to make it more appealing. A good animation can:

  • Communicate status and provide feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions

In UX, what matters is how you deal with users and how they feel when using the product. Even minor details deserve close attention. Micro-interactions provide users with needed feedback and an understanding of the ongoing processes, making an interface approachable no matter how complicated the logic behind it may be.

1) Show system status

The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. Users expect to get responses immediately, but there are situations when a site needs some time before an action is completed.

So, the interface should keep the user enlightened about what is happening by displaying a graphic in the background, measuring bitrate, or playing a sound. The same principle relates to file transfers: don’t let your user get bored; show them progress. Even a not-so-pleasant notification such as a transfer fail should be delivered in a cute way. Make your user smile!

2) Highlight changes

Often, to save space, an app will simply replace one button with another when it’s needed. Sometimes we have to show notifications to make sure the user sees it. Animation will attract their attention and not let users overlook what you think is important.

3) Keep context

In the era of smartphones and smart watches with small screens, it can be difficult to fit a lot of information on one screen. One way to handle it is to keep clear navigation between different pages; so the user understands what appeared from where, and is able to easily navigate back. There are many options for this:

4) Non-standard layouts

Continuing with the previous examples, micro-interactions should help users understand how to interact with uncommon layouts without unnecessary confusion. Photos flipping forward, scrolling graphs, and rotating characters are all great options:

5) Calls to action

Apart from helping a user effectively interact with an application, micro-interactions have the power to encourage users to actually interact: keep on browsing, like, or share content, just because it’s attractive and they don’t want to leave:

6) Visualize input

Data input is one of the most important elements of any application. The quality results users get depends on the data input. As a rule, it is pretty boring, but micro-interactions turn this process into something special:

7) Make tutorials come alive

And of course, animations can help educate users after the launch of an application by highlighting basic features and controls needed for further usage without a hitch.

Conclusions

So, if you value your user experience, polish your interface from A to Z, spicing it up with micro-interactions and animations. It will breathe life into your project.

Attention to each and every detail is key to your success making human-computer interaction easy to use.

LAST DAY: 1624 Gorgeous Swifticons Icons (in 3 Styles) – only $29!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

July 05 2015

09:56

Popular design news of the week: June 29, 2015 – July 5, 2015

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Bye, Bye Adobe

 

Safari is the New IE

 

New Facebook Logo

 

Site Design: Apple Store Revamped

 

Apple Music is a Usability Nightmare

 

Ads: Then and Now

 

Apple Interns Make Almost $7,000 a Month, but They Can’t Whisper a Word to their Friends About their Jobs

 

Color Vs Contrast: Which One Brings More Conversion?

 

A UI so Good, it Breaks Language Barriers

 

The Sad State of Job Titles

 

Building Websites in Collaboration with Clients, not in Spite of Them

 

The Roots of Minimalism in Web Design

 

The Font Matcherator

 

10 Great Quotes for User Experience Designers

 

Posters that Spoil the Endings of Movies

 

Ideas are Fragile

 

Steve Jobs – Official Trailer

 

This Online Anonymity Box Puts You a Mile Away from your IP Address

 

Google Made a Chatbot that Debates the Meaning of Life

 

Mark Zuckerberg: The Future of Facebook is Telepathy

 

Reddit Moderators are Locking up the Site’s Most Popular Pages in Protest

 

Microsoft Edge is Already Good Enough for Me to Drop Chrome

 

Google Hangouts for IOS Gets a Redesign, Better Performance

 

Unsplash: How Side Projects Saved Our Startup

 

How to Calculate your Freelance Rate

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: 1624 Gorgeous Swifticons Icons (in 3 Styles) – only $29!


Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl