But what’s the best way to present, combine and balance media with great web design to produce quality websites? We’ve curated a list of aesthetically and functionally smart ways to incorporate media into your site.

Tony Romo’s Jersey Journey At ESPN

Pro American NFL player Tony Romo’s career is at a crossroads, with sports commentators all asking the question – what team will he be playing for in 2017?

Using a ‘base image’ of Romo posing with a football, the reader scrolls through this animated ESPN article as different team jerseys scroll over Romo himself. It’s the kind of clever animation perfectly fitting for the structure of this piece – when discussing how Romo would sit on the Denver Broncos, we see him in a Broncos jersey. It’s a perfect union of journalistic description and animated design – in our books, ESPN have scored a touchdown with this one.

Supple Shines A Light On Their Tools

Melbourne based Digital Marketing agency Supple does more than just provide marketing services – they’ve also developed a collection of helpful tools helping you navigate everything from schema markup to being adding Facebook messenger as a chat tool to your website.

But it’s the way they’ve presented this handy toolkit which we’re focusing on today. Rather than simply displaying screenshots of the tools in actions, they’ve added panels with minimalist icons which – when hovered over – reveal a window peering through to the screenshot. Much like a torch casting light into a darkened room, this hover effect is engaging and inviting, a smarter way to showcase screenshots.

Bring your products to life!

In the current competitive online market, websites need to find innovative ways to help their products stand out from the crowd. We’ve seen animated still photos being used in movie intro sequences you can use the same technique on your website! These techniques can help to not only showcase your product but also wow your visitors.

Romain Bouchereau Balances Static With Dynamic

Freelance designer, art director and animator Romain Bouchereau brings smart media sensibility to his portfolio page. The background is an immediately engaging starting point – animated television static gives a grainy quality to the whole site, reminding you that you’re looking at a screen – which is, of course, the primary medium showcasing Bouchereau’s work.

However, it’s the clever pairing of a marker-pen/highlighter hover highlight effect, and a cycling image gallery, that brings his portfolio to life. In particular, the interactivity and colour-coding that comes with the hover effect helps distinguish each project from the next, establishing the breadth with which Bouchereau can work as a designer.

Paramount Artists’ Clearly Labelled Gallery

Paramount Artists’ use a similar approach to the classic hover effect, drawing attention to their media. Rather than cycling through images as you hover, the entire gallery of their team is shown in grayscale – only becoming saturated as as you move your cursor over it.

This also brings up a clear label of who is being shown, with the text sitting just to the left or right of the image depending on page space. It’s a clever use of hover interactivity that looks great no matter how big or small your browser window is.

W̶i̶n̶t̶e̶r̶ Website is Coming

Having a Coming Soon page is a great way to generate interest in your product and collect email addresses from interested users. However, most coming soon pages are disinteresting and, as a result, don’t generate good marketing leads. Animation can be a very impactful way to build greater engagement with visitors to your Coming Soon page.

If you want to build a Coming Soon page, you can use the template from UkieWeb on ThemeForest to set up a unique under construction page that’ll be sure to catch the eye of your visitors.

Blueair Offers A Breath Of Fresh Air For Their Online Air Pollution Browser

Want to measure the air quality in your neighborhood? Air View by Blueair is an air pollutant visualizer that uses data from pollutant measurers around the earth – and delivered in an innovative way. Rather than give you a random list of numbers and chemicals, Air View instead gathers images of your address from Google Maps and overlays animated pollutant data over it.

This means you can really navigate your own area, and really be aware that these particles are in the atmosphere. It’s a novel use of media taken from local Maps information, used for a good cause – does it make you want to sign their petition for a World Air Day? Or invest in a new gas mask/hazmat suit for whenever you’re next outside for some ‘fresh air’?

The Hideout Shows It All With Their Great Image Effects

The Hideout is a studio of ‘designers, developers and content makers’, and their homepage lives up to that with some stunning minimalist design and smart use of media and images. As you scroll down the page, you’ll see the largely empty white space is dotted with images of past projects and ideas – and these images expand slightly as you do so. It’s a small touch, hard to notice at first, but it adds a level of dynamic movement that draws the eye to each image as it grows.

Similarly a portfolio gallery lower down in the page uses a bright yellow hover effect to link through to more in-depth pages and case studies. It’s a great way to let images speak for themselves, inviting the user to hover – and they’re rewarded with the reveal of the link for their curiosity. Here is a snippet that lets you add a similar image reveal effect to your site.

Great Views Of Quechua’s Mountaineering Range

The structure of Quechua’s catalogue lets you travel to a selection of mountain ranges and hiking locations across South Africa – clicking through an interactive menu takes you to Grabouw, Kalbaskraal, Beaverlac and many more natural landmarks.

A loading animation brings up a silhouette of the mountain range in question, before you’re smoothly transported there, with a collection of featured product stills that showcase Quechua apparel in all situations.

The scroll effect on each product image against the earth tone background uses a parallax effect, with image panel and background moving ever so slightly out of sync. The effect is depth – it’s design and presentation of product content that conjures the very outdoors it wants you to explore (while wearing one of their their mesh t-shirts, of course).

Envato Element’s Hovering Cards

Envato Elements provides a slew of templates and design assets for sites, apps, you name it. Highlighting just some of their content is a 3D template gallery, angled such that it gives a sense of depth – like business cards laid on a table.

Another great touch is the hover effect – each ‘card’ lifts slightly, revealing a bright pink shadow effect beneath. Even simply tilting the angle and presentation of an otherwise simple image gallery can really draw the eye to your on-page media – why not try it sometime on your site!

Milwaukee Ballet Company’s Scroll-Effect is On Pointe

Milwaukee Ballet Company showcases their performers, directors and team using a combination of stunning image content and a simple scroll technique.

As you make your way down the page, a scrolling effect transforms stunning, high-quality grayscale images into colour – a gentle transition to colour transition with the effect of breathing life into an otherwise minimalist page. It’s chic, it’s refined, and in many ways, just like ballet itself.

Rebecca Lloyd-Evans’ Clever Use Of Cursor Images

Rebecca Lloyd-Evans is a director and storyteller, whose work has spanned online content, television and film. Her homepage comes with a list of previous works – but it’s the presentation of this portfolio which really caught our eye. As you track your cursor over each link, a small image follows the movement of your mouse.

It’s a small window into the content in the outgoing link – a way to tempt you into exploring further. It’s a persuasive use of images, inviting and engaging further interaction from site visitors. If you’re looking to achieve something similar, why not check out this snippet on CodeMyUI?

Carv produces a range of high-tech, wireless wearables for skiing, collecting data on your progress and providing a ‘digital ski coach’ for your own improvement.

It’s no surprise such innovative technology is paired with a similarly innovative site design – something modern and minimalist. Technical cross-sections of the technology float along a snow-white backdrop, with a parallax effect created against their respective labels and added info.

If you like these web design animation examples you might also enjoy adding animation to your images directly using Photoshop Actions. Here are a few Photoshop Image Actions to add Sparkler, Ink and Rain effect to your images.

These have been a collection of sites and brands that have incorporated media and images into their site in subtle, stylish and engaging ways. Have you been inspired? I am sure you all would have seen various animation on the websites you frequent, let us know what are some of your favourites in the comments below – we’d love to see your take on the subtlety of animating media content.

Have you navigated to the world’s end searching for quality Powerpoint templates with animation that you can use for an upcoming presentation, and come up empty-handed? We are about to change that today by highlighting some top-quality PowerPoint templates.

A well-designed Powerpoint template has to get a lot of things right—from the fonts used in the slides to the colors and images in the presentation—and it’s by no means an easy feat. Thankfully, we have some talented designers on GraphicRiver who understand that there is a demand for professional Powerpoint templates and deliver some amazing designs to choose from.

So, if you’re looking for a new PowerPoint template to help you deliver a riveting presentation, have a look at these handpicked templates. You won’t be disappointed! Each one features animated slides.

A handcrafted theme with custom infographic elements. Make this Powerpoint template your own by choosing one of the 20 retro/vintage colour palettes, and one of the six included texture PNG files to customise easily the look and feel of your presentation. Whether you want to use bright and vibrant or a more subdued colours, there’s a palette and texture to suit your presentation.

Motagua is one of the best-selling PowerPoint templates on our marketplace of all time, and it’s easy to see why – with handmade infographics on everything from world maps to funnel diagrams, it’s a one-stop shop for presenting.

An infographic social media Powerpoint template, appropriate for a social media agency, social media marketer or researcher, or any type of business related on social networking, including web marketing, SEO services, and infographic social media surveys. The template includes 30 unique slides, presented in three different versions. PSD source files are also included for each slide and each version. It’s carefully created and easy to customize: Each element is separated, so you can manage it the way you want.

This clean, simple and elegant template comes with custom graphic elements and animations. Its simple design makes the user to focus on important information. The presentation is easily customizable and is perfect for business. Create your presentation in no time with 35 customizable slides. Check out the video for the Keynote template, which you can get here. The PowerPoint version has slight differences.

If you’re a manager wanting to present the potential of your company, a lecturer eager to attract attention, or a student who wants to present a report, this is the template for you. It will enable you to work faster and easier than ever before.

An ideal choice for a presentation about social media, this template comes with 35 high-quality slides. Every slide uses fully editable objects, to make it easy to change the color or size of text or objects.

Sleek, modern templates in a cutting-edge, international style. These are ideal for social media, non-profit, tech, advertising, new media, web, mobile, venture capital, creative, or general business. Created with full vector objects to allow for easy recoloring and rebranding, the set includes seven templates with 14 color schemes.

i9 has hundreds of animated designs, with surprising motion and movement in each infographic, chart, and table. Each slide is designed with real presentations and content in mind, and it features custom gradient folders, so it’s forward-thinking and on-trend.

]]>https://envato.com/blog/powerpoint-templates-with-animation-to-captivate-your-audience/feed/1Gift Ideas For Creative & Designer Friendshttps://envato.com/blog/gift-ideas-creative-designer/
https://envato.com/blog/gift-ideas-creative-designer/#commentsFri, 09 Dec 2016 06:33:58 +0000http://envato.com/?p=35780In an attempt to find the perfect gift for a designer friend, I reached out to many of the creative folks here at Envato and asked them for gift ideas.

]]>Let’s be honest with each other, designers can be a fussy bunch. I am sorry, but it has to be said. Although, I am not actually saying that being fussy is an altogether bad thing, I mean when it comes to creativity that very fussiness is what makes their work great. We all know that. But it also makes them very hard to please, especially when it comes to buying them gifts.

In my attempt to find the perfect gift for a designer friend, I reached out to many of the creative folks here at Envato and asked them for some gift ideas. Their recommendations were fantastic.

So, I have taken all of their ideas and suggestions and created this post for you lot that have to regularly buy gifts for designers and have no idea what to get them.

Ferrolic

These prototype clocks should be seen as a limited edition art piece than a consumer-grade alarm clock. Ferrolic uses ferrofluid – a liquid that becomes strongly magnetized in the presence of a magnetic field, to display the time in digital format.

Paper Trophy

I was in love with these paper trophy idea the very first time I saw them. I do believe they are a bit pricey, but if money is not a factor this might be a gift they will remember for years to come.

DC Super Heroes Pop Up Book

CMYK Playing Cards

Now who wouldn’t like a bit of healthy gambling with friends once in a while, these CMYK Playing Cards are perfect for that. The idea behind this project is very simple they swapped out the suits for colours of ink used in printed media (cyan, magenta, yellow and black) and the numbers on each card for a percentage of ink on the surface.

Popup Lighting

Popup Lighting these brilliantly simple, yet elegant, light fixtures will enhance the ambience of any room with an air of mystery. According to the designer, the inspiration for this comes from popup books. Please be warned, they are quite an expensive gift.

SwatchMate

SwatchMate is a small, portable cube device that captures the colour of any surface. Using Bluetooth, it then sends the colour data to a smartphone or even to Photoshop. With this little gadget, designers can use colour inspiration from everyday objects and transfer it to their projects.

Leap Motion

With the Leap Motion Controller, you’re the instrument! Working a little bit like the Kinect (but for Macs and Windows PCs), it senses the natural movement of your hands, allowing you to control your computer screen in a highly original and creative way.

Perhaps not that great for real productive stuff, but it does look a lot of fun.

Moleskine Notebooks

Livescribe Moleskine

Designers simply love their Evernote Notebooks by Moleskine. It apparently uses specially patterned lines that allows the Evernote software to recognize and capture your writing or drawings from the page. It would make a great gift for those designers that like to sketch on the go. Our CEO loves em and that is good enough for me.

Moleskine partnered with Livescribe to offer a new notebook that can transfer your pen-and-ink scribbles to your digital device in real time via the Livescribe+ companion app. This could be a great gift for anyone who likes to have a digital copy of their notes.

Field Notes

Just like the Evernote Notebooks above, creatives are also obsessed with Field Notes. Mind you, any notebook with the tagline of, “big enough to accommodate ideas from both sides of your brain”, certainly warrants attention.

Personalized M&M’s

This one is pretty straightforward. You can order M&M’s with a custom and personalized message, or even a photo for that matter. And the thing is, and trust me about this, ALL designers love M&Ms!

United Pixelworkers Home Town Tees

I can guarantee that your designer friends will already have a huge collection of custom t-shirts. They all do.

UI Stencils

If your designer friends incorporate wireframe sketching into their design process, then they will love the Stencil Kit series from UI Stencils, which includes stencils for both web and mobile app design (iPhone and Android).

Leaf Ties

Does you designer friend use cable-ties to make sure their cables don’t run all over the place. Probably not. It’s about time they did though. Say hello to Leaf Tie, an elegant spaghetti-cable solution.

Die Gestalten Books

Chances are your designer friend’s bookshelf is already stacked full of Die Gestalten’s books, if not you get to be the hip friend who does get them one.

MakerBot Replicator Desktop 3D Printer

The MakerBot Replicator is a full-featured consumer 3D printer. With this gizmo you can 3D print whatever you want all from the comfort of your own home. Every designer would want one of these. Heck, I wouldn’t mind one myself.

Cloud

The Cloud is an interactive lamp and speaker system that has been designed to mimic a thundercloud, and using motion sensors detects a user’s presence and creates a unique lightning and thunder show dictated by their movement.

This is quite possibly the coolest gift ever. Although the price is more than likely going to be in the “never going to happen” category – designers can dream though.

Hopefully I have given you a few gift ideas for your designer friends.

I’m also sure you folks will have your own gift ideas as well, I would love to hear about them in the comments below.

]]>https://envato.com/blog/gift-ideas-creative-designer/feed/2Anatomy of a 404 Error Pagehttps://envato.com/blog/anatomy-of-a-404-error-page-get-your-inspiration-from-the-best-404-pages/
https://envato.com/blog/anatomy-of-a-404-error-page-get-your-inspiration-from-the-best-404-pages/#commentsThu, 13 Oct 2016 17:30:41 +0000http://envato.com/?p=29328When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity. Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them […]

]]>When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity. Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them the requested information was not found on your website.

As a brand, you can use custom 404 error page to make a memorable impression on your visitors, as mentioned by Renny Gleeson in his TED Talk “404, The Story of a Page Not Found.” You can use a cleverly crafted 404 page to keep the visitor on your site, and guide them to a resource that will help them find more information on what they were looking for.

Anatomy of a Good 404 Page

Having a creative or humorous 404 can certainly grab the attention of your users, but from a functionality point of view it might not be a great 404 page design. There are some fundamental things you should consider having on every 404 page:

Why the 404 page is being shown.

What the user can do next. Here are some things to consider:

Provide an easy way to go to the homepage.

Show some popular/related items your visitors might be interested in.

Give them the ability to search for what they want.

Make it easy for them to report an issue.

Leave a lasting impression.

Stick to your overall brand and design guidelines.

Header response should be a 404.

Consider making the 404 page context-sensitive.

Here are some examples of context-sensitive 404s. On an e-commerce store, if someone tries to access a page for an item you no longer stock, the 404 page could show related products from the same category. Or if your visitor gets lost while browsing the categories, you could show trending categories and contact information.

Animated/Interactive 404 Pages

In this section, we’ll take a look at some interactive and animated 404 pages. The users can interact with some of them, and others have a subtle animation that makes them unique. Click on the “404” links below to visit the sites’ actual 404 pages.

404 represent a broken page, what better way is there to tell your visitor about it than this. On the flip side less savvy visitors might think they might have been infected with a virus, so tread carefully with this one.

Want to see a vortex pull everything in on a page? Well, this 404 page by Hugo Bonacci does all that using CSS. All the important links are clickable, so users can navigate to the homepage or other areas easily.

This site gives the option to play a mini-game when you land on a 404. This entices their customers to visit some of the core pages—like the homepage, About Us and Features page—to unlock the treasure chest, which gives you 25% off their product.

Personally, I’m in love with this idea. Not only is it a cool landing page, but it serves the purpose of getting people to use the product. If I were to try to improve on this, I would probably have a landing page that serves the all important content on one page, and the treasure chest would be activated as the customer scrolls down.

When you hit a 404 on this cruise booking site, you are shown an animated image of someone on a beach (who might be stranded, or perhaps just relaxing), with the caption, “Uh Oh! Looks like you’re stranded…” Then you’re presented with the option to search for and book a cruise. A nice 404 design that offers good functionality to ‘stranded’ visitors.

If you stay on the page, you will sacrifice 404 lemmings. Try to save them if you can. Towards the end, the site will tell you how many you managed to save, and warns you to stay away from the 404 page to prevent a future massacre.

Funny 404 Pages

The following 404 pages makes use of a funny image or animation to captivate the user’s attention. The best use of this technique is when the image directly relates to the product or brand.

LonelyPlanet has a cute 404 page, they use what looks like a gif of a baby sloth. Being a travel website the copy “Some places are great to lose yourself in, but not on this occasion.” will work well with their visitors. HT: @ribenaberry

NDP (New Democratic Party) Canada has an amusing 404 page. When a visitor lands on a page they are shown an image that says “Ottawa’s Broken. And so is this Link.”

This is funny because, from what I understand, they are not the ruling party, and are saying Ottawa (the capital of Canada) is broken because someone else is in power. Shifting blame might not be that classy, but I had a good laugh, so it’s going up here.

This bike equipment store uses an image with a lone cyclist who fell off his bike in what looks like a professional tour, and is captioned “Oops! Looks Like We Lost One.” While I can sympathise with the guy that tumbled over, this image fits perfectly with the brand, and will relate well with their audience.

This page uses HTTP status codes to convey the message to their visitors. While this may not be considered to be a very helpful 404 page for the average user, I can certainly appreciate the extra effort they put into making it highly unique.

If you replace the HTTP status codes, the page would read:

This page is Gone! You’ve officially made an Unauthorized Bad Request and you are Forbidden to view this page.

To Continue you may have to Reset Content, or settle for Partial Content by clicking the link above.

This site shows you a somewhat random movie quote when you land on a 404 page.

Conclusion

So there you have it — a collection of inspiring 404 pages. I’m sure there are many more examples out there, and if you’ve come across some cool, unique or funny 404 pages, please let us know via the comments below.

]]>When you think about it, the most common method for website interaction is either via a contact form to get in touch with you, a login form to access your site, or, and perhaps most importantly, especially for many services and ecommerce stores, the simple signup form.

Because it’s highly likely that your users will end up using some sort of form at some point or the other on your site, in this post I demonstrate that with just some small and subtle UI ideas and tweaks, you can greatly improve the usability of your form and ultimately take the first steps to improving sign-up conversions. Plus, GIFs!!!

You can jump to any of the sections of this post by using the links below:

Innovative Form Ideas

Instead of showing the entire six fields that this form idea requires, this minimal form interface only shows one text input at a time, thus minimizing any distractions. One drawback with using this idea is that there is no way to go back to the previous entry.

]]>https://envato.com/blog/subtly-animated-forms/feed/3Small Change to Portfolio Meta Titlehttps://envato.com/blog/small-change-to-portfolio-meta-title/
Wed, 15 Jul 2015 12:33:11 +0000http://envato.com/?p=44050We have just made a small change to how we generate the meta titles for Portfolio pages. We used to generate the same meta title for your profile page and your portfolio page. So this is how it might have shown up on Google’s search result page when someone Googled you. With this update we […]

]]>SEO Best Practices for Authors on Envato Markethttps://envato.com/blog/seo-best-practices-authors-envato-market/
Thu, 16 Apr 2015 02:33:00 +0000https://envato.com/?p=54854The subtle art of becoming more easily found in a Search Engines Results Page (SERPs) — commonly known as Search Engine Optimization (SEO) — is the cornerstone of your success that will help drive a lot of targeted traffic towards your item pages. How do you do that, you might ask? Well, I’m going to […]

]]>The subtle art of becoming more easily found in a Search Engines Results Page (SERPs) — commonly known as Search Engine Optimization (SEO) — is the cornerstone of your success that will help drive a lot of targeted traffic towards your item pages.

How do you do that, you might ask? Well, I’m going to share with you some tips that you can painlessly and very quickly implement. Let’s get started!

Find Keywords That Buyers Are Actually Searching For

The idea behind getting the right keyword is to choose one that:

has decent search volume,

is not too competitive,

and is relevant to your item.

I’m sure you’ve been given this advice before, but today I’ll show you how to go about doing this with some of my favorite tools. Most of these tools are fairly easy to use, and you can easily find lots of tutorials and how-to guides on using them.

Gather Keyword Ideas

You might have noticed that when you type something into Google search, you’re given some suggestions. These are the currently trending and popular searches.

Here are some tools that can help you to use these suggestions to get keyword ideas:

Übersuggest will help you export the suggestions to an Excel file, where you can use Adwords to pull up the search volume for those keywords.

Soovle will help you get some keyword ideas by pulling suggestions from various services.

Google Trends will let you see keywords that are becoming popular, and try and capitalize on them before everyone tries to rank on them.

You can also look at the related search suggestions from Google for inspiration.

Gather Keyword Data

Once you have a list of keywords, you need to gather some data on how many people actually search for them. Google Keyword Planner is my go to tool to gather this data. You will need an AdWords account to use it. Alternatives include WordStream and Wordtracker.

Identify Keyword Difficulty

Use something like the Moz Keyword Difficulty Tool to identity the level of difficultly for your chosen keywords. One advantage you authors have, is that your item pages are on Envato-owned sites, with high domain authority. This means you’ll be able to rank relatively easily for highly competitive keywords.

Optimize Your Item’s Title and Content

Optimize Your Title

Your item’s title is one of the most important factors fwhen it comes to SEO. It appears as the h1 title on your item page, and is also used in the title tag in thehead of the page.

Google cuts off the title after a certain width, so don’t make it too long. Roughly 50-55 characters should be fine. If a title is too long, Google will generate a titlefor the page based on other signals.

That being said, don’t be afraid to go over the limit if you need to in order to have a meaningful title. For example, if you were to create an Unbounce Template to be used as a medical/pharmaceutical landing page, and decide to use a technical medical term likePneumonoultramicroscopicsilicovolcanoconiosis in the title, then by all means feel free to name it “Pneumonoultramicroscopicsilicovolcanoconiosis Unbounce Pharmaceutical Template”.

Some key pointers to remember when you choosing a title:

Use a title that gives buyers a clear idea of what to expect when they visit your item page

Try to use your main keywords in the title.

Keep your title within the 100 character limit we have on the Market.

For example, for a WordPress theme that uses Parallax scrolling and is targeted towards musicians, you could use the title “ABCD Parallax WordPress Theme for Musicians”.

Optimize Your Content

Include generous amounts of text on your item page, instead of using images for the entire description. Google focuses on text to understand what a page is about and match it to a search query. To get a rough idea of what Google sees, try plugging your item’s URL into browseo.

Note: I’m not asking you not to add images. When I browse through the Market for an item, I usually look at the images to get an idea of what it offers. Just make sure you optimize them (see below), and add relevant text as well.

The first 150-160 characters will likely be used in the meta description in search results. This is a great place to highlight some key features of your item. Keywords here will not affect your ranking, but could improve your click through rate (CTR) because your description will be more relevant and appealing. Mention things like free support and free lifetime updates.

Use h2 and h2 subtitles to highlight secondary keywords and key selling points for your item. I often use these to target long tail keyphrases and keyword variations. A good example is the Parallax WordPress Themescollection, where I target long tail key phrases like “Multi Directional Parallax Effect“.

Make it a habit to cross link your related items. Having internal links to relevant items will allow the SEO juice to flow between your inter-connected pages. This also helps buyers to check out some of your other interesting items.

Google loves unique content, so use unique item descriptions for your pages. This will give you a better chance at ranking above pages that tend to reuse content on all their item pages.

Optimize Your Images

Images on your item pages play a significant role in your page speed, so it’s in your best interest to make sure you don’t bloat the page with unoptimized images. I tend to use Kraken to optimize images.

Perform Competitor Analysis

One of the my favorite ways to get backlinks is to look at where the competition get theirs from. I usually use Open Site Explorer, add the competitor’s link, and look at the incoming external links to that page which pass link equity. Since these folk have linked to my competitor, chances are I can get a link from them to my page as well.

Make Use of Social Signals

While Google claims that social signals are not a ranking factor, multiple independentstudies have shown correlation between social signals and ranking, while others claim they have no impact. Even if there is no impact on ranking, social media sites can certainly send a healthy amount of traffic to your item pages.

Here are some great articles that will help you share more effectively on social media:

]]>Exploring Interactive Multi-Screen & Device Experienceshttps://envato.com/blog/exploring-interactive-multi-screen-device-experiences/
https://envato.com/blog/exploring-interactive-multi-screen-device-experiences/#commentsThu, 13 Nov 2014 11:05:10 +0000http://marketblog.envato.com/?p=34450Lately I have seen a few of these so called multi-screen experiences, sites where users are able to interact with the desktop version of website using their mobile device.

]]>Lately I have seen a few of these so called multi-screen experiences, sites where users are able to interact with the desktop version of website using their mobile device.

With the rising popularity of mobile devices like smartphones and tablets, we will be seeing a lot more of these multi-screen experiences. I don’t think it will be something that will become popular in mainstream web development any time soon, but it’s a cool concept as far as experimental web design goes and certainly something worth exploring.

The core technology that makes this possible is the WebSocket protocol. With WebSockets you can pass messages back and forth between a desktop website and the mobile version.

The majority of multi-screen experience websites seem to be mostly games, but I have come across a few for products and services as well. Today we will be taking a quick look at some of these multi-screen experience websites. If I have missed any please do let me know about it in the comments below.

Mobile Browser Multi-screen Experiences

Super Sync Sports

Super Sync Sports allows you and 3 friends to compete in running, swimming and cycling games on a shared computer screen, using a mobile device as the game controller.

Diplomatic-Cover

The Diplomatic-Cover website connects your smartphone with the desktop browser, allowing you to navigate and consume the content they offer using your phone.

El Monstruo

ING Direct and UNICEF have partnered up to create The Monster. You are shown a video where a monster is destroying school property and frightening off children from a local school, and you are encouraged to send a text message (it will cost €1.20, all of which goes to UNICEF) so that the teacher and students can defeat the monster and return to school.

Racer

Racer is a slot car game that works across multiple mobile/tablet browser screens. Start a race, sync up the devices and tap your screens to accelerate and release to slow down. But, don’t accelerate too much or you might go off track. It can also support up to five screens/users.

Roll It

With Roll It you can roll a ball from your phone to your desktop browser. This game also makes use of the phone’s accelerometer to perform some special moves.

Just a Reflektor

Just a Reflektor is an interactive short film that makes use of the desktop and mobile device to tell a story. Once you sync your phone with the browser, you will have to align the screen and the webcam and then the story will begin.

Omnisense Experience

Omnisense is an interactive experience that aims to make you think about the different uses of social data.

Digital Trip

Digital Trip is a 3D game that can be played using one of three optional controllers – the keyboard, your mobile device, or your webcam.

Native App Multi-screen Experiences

Llévalos a la escuela

Just as they did above with The Monster (above), ING Direct and UNICEF also partnered up to create Llévalos a la Escuela. The story begins on a website and ends on your mobile device.

Brass Monkey

Brass Monkey is a video game console that uses your smartphone as a controller and web browser as the main display. You can download a mobile app from their website that allows you to sync your browser with your phone. Then you can then use it to select the various games they offer.

Concluding

So, after all that, no doubt you will be wanting to learn more about WebSockets! As expected, Tuts+ offer a few comprehensive tutorials:

You should also check out some of the tutorials on html5rocks and MDN to get you started, and there is also a great tutorial from James Morrish.

There are a few more examples over at Chrome Experiments as well. I would love to feature other sites that offer similar features, so if you come across any other cool multi-screen experiences, or if you develop one, please do let me know and I will showcase them here.

You really don’t have to be a Photoshop expert to use Photoshop Actions. You really don’t.

Put simply, Photoshop allows you to record the events you action, and can replay those steps for you. This is called an action. You are also not limited to just using the actions you have created yourself, you can download actions others have created, and apply them to your own files as well.

They are a great time saver, especially if you have to redo the same set of steps over and over again.

So, lets take a quick look at how to download, install and use a Photoshop Action:

What is a Photoshop Action?

Photoshop Actions are a series of predefined steps that can be applied to the files you work with. It can usually be applied with just a few simple clicks without needing to manually apply each event.

This allows you to easily apply stunning effects to your photos without wasting a lot of time. So, it’s basically a shortcut for adding effects to your images. They are available for download in the form of .ATN files.

How to Install Photoshop Actions?

Download the ZIP file and extract the contents. You will find the Photoshop Action .ATN file(s) there.

Extracting the .ATN file from the Zip file

There are multiple ways to go about installing Photoshop Actions:

Method 1:
Browse to your Photoshop folder, enter the Presets folder and then the Actions folder. Once you are in the Actions folder, copy paste the .ATN file there (or you can drag and drop the .ATN file).

Copying & Pasting the ATN file to the Actions Folder

Method 2:
In Photoshop, go to the Window menu and open the Actions panel. Click the flyout menu on the upper right corner of the Actions panel and select Load Actions … Now navigate to the Action(s) file you want to load, select it and click Load.

Loading the .ATN file from within Photoshop

Now that we have downloaded and installed them, we can now move on to actually using them…

How to Use Photoshop Actions?

Once installed, you can open any image in Photoshop and run the selected action. All you have to do is select the action you want to use, and click the play selection icon to get the desired result.

In the below example I am not actually going to perform any customization, I am just going to keep hitting enter for the action to run its course.

Apply Action in Photoshop

Here are some samples from this particular action:

An example of the Action in action

Finished!

And that is it. And yes, it really is that easy!

Where do you go from here? Well, now that you have learned how to install and apply a Photoshop Action your next step could be to grab one of the many professional Photoshop Actions we have available on GraphicRiver, or you could head over to Tuts+, they have published a handy roundup of 100 Free Photoshop Actions.

]]>https://envato.com/blog/photoshop-actions/feed/1How to Future Proof Your WordPress Site With Child Themeshttps://envato.com/blog/how-to-future-proof-your-wordpress-site-with-child-themes/
https://envato.com/blog/how-to-future-proof-your-wordpress-site-with-child-themes/#respondFri, 25 Jul 2014 07:13:16 +0000http://envato.com/?p=30592Once when I was having a chat with a developer about WordPress Themes, he mentioned something about child themes. I am guessing by the confused look on my face, he figured out that I have no bloody clue as to what he was going on about. That was my “Have you met Ted?” moment. After […]

]]>
Once when I was having a chat with a developer about WordPress Themes, he mentioned something about child themes. I am guessing by the confused look on my face, he figured out that I have no bloody clue as to what he was going on about. That was my “Have you met Ted?” moment.

After our chat, I went on to Google to find more about this new thing called child themes, that would go on to save me hours of hard work and frustration in the future. Today we are going to look at what child themes are and why you should be using them.

What Is a Child Theme?

So what exactly are child themes? When you download a new theme, it is usually the main theme or what one would call a Parent Theme. A child theme is a theme that inherits the look and functionality of the parent theme.

At this point a few of you might be thinking, “Great, so how does this help me exactly?” Good question. Any changes you make to the child theme overrides the defaults from the parent theme. So now you can easily made edits to the child theme, and those changes will be visible on your website without touching any of the files in your parent theme.

Now imagine a theme update rolls out, and you need to update your theme. You download the new file and overwrite the existing theme file (parent theme). Lo and behold, you have updated the theme, and all those edits you made in your child theme still exist. ( ͡° ͜ʖ ͡°)

No more looking through the theme to find all the edits you have made to the original theme, no more manually updating the theme files before uploading them to the site. In short, updating themes are now a piece of cake.

How to Make a Child Theme?

Now that you are a big fan of child themes like I am, let us learn how to create a child theme from your parent theme. There are many ways to go about it. There is a WordPress plugin called Child Theme Configurator that will help you set up a child theme for your existing parent theme in a few simple clicks.

Now some of you might be, like, I rather not use a plugin unless there is no other way. Don’t worry, we got you covered. If you prefer to do it manually, just follow the steps outlined below.

Navigate to your themes folder in your WordPress installation using your favorite FTP client – it should be under wp-content/themes. Create a new directory and give it a unique name. Please note that the name should not contain any space.

Navigate to the new child theme folder you just created and create a file in there called style.css. The child theme’s stylesheet is included after the parent theme’s, so the child theme’s CSS will override those in the parent theme’s stylesheet.

For Theme Name: you can pick any name you want. For Template: you should add the folder name of your parent theme (as they appear in wp-content/themes).

You will find your new child theme in there, in our case “Newspaper Child Theme”.

Click on the activate button.

Give yourself a pat on the back. You just created and installed a child theme!

So now that you folks are experts at creating and installing WordPress child themes, go ahead and try it. Let us know what you think of this “How to” style of article. If you found it to be useful, we can do more.