How to Easily Animate SVGs With SVGator
SVG animation is a great alternative to using animated GIFs on the web, but it’s not always easy. In this tutorial I’m going to explain how you can easily animate SVGs using an online tool called “SVGator”. SVGator allows you to import SVG files, then animate individual elements within those SVGs.Animate SVGs With SVGator
A Quick Introduction to SVGatorYou can find SVGator by visiting www.svgator.com.SVGator is an online SVG animation tool, a subscription for which (at the time of writing) costs $18 per month, or $12 per month if paid annually. A 7 day free trial is available so you can take a look before committing. It’s super easy to use, doesn’t require any coding skills, and is cross-platform.Upon logging in you’ll be shown all the projects you have saved. You can duplicate them, delete them, download them, or you can edit them in the animation editor. The editor UI will be familiar to you if you’ve ever used Adobe Animate, After Effects, or any video editing software. The main stage holds your animation, whilst a timeline shows your layers and keyframes along the bottom:The left hand panel is home to the Elements tree, showing the elements within the SVG, and on the right you have some more options, plus a code editor which shows you the code you’re creating.
1. Enough of All That, Let’s Animate Something!We’re going to use SVGator to animate a couple of graphics from...
Figma Image Tips
Figma offers a range of shortcuts and controls for importing images, placing them on the canvas, and modifying them once they’re in position. Let’s take a look!Watch Tips
1. Use Fill Settings on Images to Control SizeWhen you drop an image into Figma, in actual fact a rectangle is created, then the image is set as that rectangle’s background fill. To modify how that image is displayed, go to the rectangle’s fill properties in the Properties panel.Much like the way we can control how a background image is displayed via CSS, here we can state that the image should:
Fill: the image crops horizontally or vertically so that it completely fills the object.
Fit: all of the image is visible, which often leaves an area of the rectangle unfilled.
Crop: where the image actually stretches with the size of the rectangle.
Tile: the image tiles to cover the rectangle. The size of the tiles can be changed via a secondary set of sizing handles.
Using Figma’s fill properties to change the way an image is displayed
2. Import Whole Sets of ImagesTo import a whole set of images you can drag and drop a folder onto the Figma canvas, then all the images will be automatically imported for you.
3. Import and Place Multiple ImagesTo keep batch importing images more organized, first set up some frames where you’d like to display your images, then hit (CMD or CTRL) + SHIFT + K, click somewhere on...
Developer Preview of better AMP URLs in Google Search
AMP users and publishers have told us that they prefer that the original domain names be used anywhere their AMP pages are displayed.
Earlier this year, we demonstrated a technology named Signed HTTP Exchanges that supports transforming cached AMP URLs on any AMP Cache. Google Chrome has since started an origin trial for Signed Exchanges in Chrome 71. Today Google Search is opening up a developer preview of this technology that any publisher can try out for themselves.
Signed Exchanges, used by an AMP Cache, have benefits for users and publishers, beyond the visual experience of the URL bar. Signed Exchanges also:
Provide a guarantee, using cryptographic signatures, that the content is exactly what the publisher intended to show the user.
Allow the browser to treat a document as belonging to the publisher’s Origin. This allows a publisher to use first party cookies to customize content, execute service workers, and measure analytics.
Signed Exchanges are part of a wider web proposal named Web Packaging. The Web Packaging specifications, first proposed in 2015 as a W3C draft are evolving over time with feedback from members of standards bodies, other browser vendors, security experts, and publishers and web developers.
Steps to try a Google Search demonstration
Signed Exchanges are currently only enabled in Chrome version 71 or greater. At the time of writing, this...
Figma Properties Tips
Objects in Figma can have a range of properties applied to them. In this part of our Figma tips and tricks series we’ll look at ways to work with properties, better and faster!Watch Tips
1. Copy Single or Multiple Properties Between ObjectsIn Figma you can copy all properties from an object, or you can copy them one at a time. To copy all the properties an object has: select it, then go to Edit > Copy Properties, or use the shortcut (CTRL or CMD) + ALT + C, then select your new object and go to Edit > Paste Properties or hit (CTRL or CMD) + ALT + V.To copy just one of the properties applied to an object: select the object, then go over to the Properties panel and click just to the left of a property (such as Fill). This will select that one property, so you can then hit (CTRL or CMD) + C to copy. (CTRL or CMD) + V will paste that property onto the selected object. Holding SHIFT whilst selecting individual properties will allow you to specify exactly the ones you want to copy.
2. Smooth Out Corners With “Squircles”You can control how corners are rounded by using something known as “squircles”. On an objects with rounded corners, click on the Independent Corners option in the properties panel to control each corner independently, then next to the radius values hit the menu icon to open up the Corner Smoothing slider. Changing this value will alter the way the curve is...
How to Create a Landing Page in WordPress Quickly
While a website is a great way for your business to get noticed, a WordPress landing page is an even better way to promote a specific offer. When you create a landing page in WordPress, you can easily focus all your marketing efforts on one offer, marketing campaign, product or service, drive signups to that page, and generate leads for your business.The best part about landing pages is that your visitors are focused on one action since the goal of the landing page is to remove all distractions such as other pages on your site, social media links, and other elements that could drive visitors away.Luckily, creating a landing page in WordPress is easy even if you aren’t a designer. Thanks to numerous WordPress landing page themes, you can make a landing page in WordPress in a couple of hours and start driving traffic to it. In this post, we’ll talk about what makes landing pages in WordPress special, how to make a landing page in WordPress, and share actionable tips for designing high-converting landing pages.What Makes WordPress Landing Pages a Good Choice?When it comes to creating a landing page in WordPress, there are several advantages to consider and keep in mind.1. Requires No Coding KnowledgeThe biggest advantage is that you don’t have to learn any code to do it. Thanks to WordPress themes that were made specifically for landing pages, all you've got to do is install the...
15+ Best WooCommerce Themes: To Make a Better Online Store
Adding an online store is a big step toward expanding your customer base and increasing your revenue. WooCommerce has many benefits that make it an ideal solution for small business owners who want to sell online in an elegant way, whether they are selling physical or digital products, or a combination of both. Why Choose WooCommerce?WooCommerce is easy to setup and use. The core plugin is free, which means you can have a fully functional store up and running within minutes.It integrates with any WordPress theme, and it features a clean and minimal design which means your store won’t look out of place.Payments are also easily setup and you can choose between PayPal, direct bank transfer, cash on delivery, or check payments. It’s worth mentioning that you can add additional payment methods with various WooCommerce extensions.And that last point there is the most compelling reason for using WooCommerce. From adding email optin integrations to integrating WooCommerce with popular accounting software such as QuickBooks, WooCommerce can handle all of that and much more.Finally, since WooCommerce is so popular, you can easily find answers and support from other users or developers who specialize in WooCommerce development and customization.“WooCommerce powers over 28% of all online stores” — stats from BuiltwithSo yeah. It’s pretty cool.Check out the WooCommerce themes on...
Best Selling UX and UI Kits For Sketch, Photoshop, Illustrator, XD, and Figma
UX and UI Kits help designers in all kinds of ways, and at different stages in the design process. In this roundup I’ll show you some of the best-selling UX and UI kits available from Envato, to get you started wireframing, prototyping, and designing your next website or app.What Are UX and UI Kits?The following kits are a great way to get your design process rolling. They can serve as inspiration, a way to quickly present an idea to a client, or give you the bare bones for a full design. Usually available for Sketch, Adobe Illustrator and others, kits are provided in a logical way with artboards, styles, and symbols, to help you find and work with the elements you’re looking for.Some are multipurpose and provide a huge number of elements, some are specifically for wireframing, others are more niche and cater for something like eCommerce, social media, maps and navigation, real estate, mobile UIs, whatever you care to name.
How to Organize Your Sketch Styles and Symbols Like a Pro
Efficiency Tips for Working With Sketch Artboards and Layers
A Beginner’s Guide to Wireframing
Supported Design ApplicationsEach kit listed here is compatible with at least one of the following, and usually more:
Nowadays you can open a Sketch file in Sketch (obviously), Adobe...
Learn CSS by Creating These 5 Image Hover Effects
Want to improve your CSS skills and create some amazing image hover effects at the same time? Try our new short course, 5 CSS Projects: Image Hover Effects.What You’ll LearnCreating a hover effect for an image is a great opportunity to display additional information whilst also spicing up an otherwise normal design. In this short course, you’ll learn how to code five creative image hover effects with vanilla CSS.
This is a course for beginners, with every step explained in detail. Each lesson comes with source code which you can use to follow along or double check your work. And Adi Purdila explains each project in an easy-to-follow video of less than ten minutes, so it's simple to get some useful CSS practice without making a huge time commitment.Watch the Introduction Take the CourseYou can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. Plus you now get unlimited downloads from the huge Envato Elements library of 730,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
So your AMP test doesn’t perform — now what?
Editor’s note: The following was posted on Medium by Martin Schierle, Mobile Solutions Consultant at Google.
Accelerated Mobile Pages (AMP) are a great and easy way to build very fast pages, and as we know speed is key — for every second delay in mobile page load, conversions can fall by up to 20%. So obviously the first thing people do after they built their first AMP is to A/B test it, sometimes just to find out it may not perform well…
In fact it’s not as trivial to test AMP as it may seem at first. There are a few things to be aware of when you go down the AMP path of speed, and by keeping these in mind you should be just fine!
When testing AMP, different audiences often look for different metrics. Conversions are often a good target, but it’s important to keep in mind that AMP will have less impact the farther the conversion is from the AMP page. If the conversion is at the end of a 10 screen purchase funnel, it may not help much to just AMP the initial landing page, when the user might still have to navigate through nine slow pages afterwards to finish the conversion. For publishers, ad revenue is a compelling metric, but it’s often overlooked that the incremental uplift through AMP will not necessarily be seen in CPM, but rather in traffic and user engagement. For publishers it therefore makes more sense to look at revenue per session, rather...
Figma Project, Page & Artboard Tips
Welcome to the next in our series of Figma tips and tricks! This time we’ll be improving the way you work with Figma projects, pages, and artboards.Watch Tips
1. Customize Project ThumbnailsIt’s perfectly possible to create custom project thumbnails which will show up in your dashboard drafts area. Make sure that the first page of your document has just a single frame of 620x320px, then fill that frame with whatever content you want as your thumbnail.
2. Keyboard Shortcuts to Navigate Between PagesNavigating between pages with a keyboard shortcut makes things much quicker. On Mac OS use fn + up or down arrow keys, and on Windows or Linux use PageUp or PageDown.
3. Keyboard Shortcuts to Navigate Between ArtboardsIt’s also possible to navigate between artboards using the keyboard. On Mac OS use fn + left or right arrow keys, and on Windows or Linux use Home or End.
4. Navigate and Zoom Between ArtboardsBy default, when you’re navigating through your artboards with the keyboard shortcuts they’ll remain at the same zoom level. However, by pressing n or SHIFT + n, you’ll navigate left or right respectively, whilst zooming into the whole artboard automatically.
5. Enhance Artboard Boundary VisibilityWhen you have artboards with the same backround color as your overall document it can be difficult to see where the edges of your frames are. Assuming your artboard is actually a...
How to Create Responsive SVG Images
In this tutorial I’ll explain how to create responsive SVG images; more specifically, I’ll explain how to create SVG logos, icons, and images, which change depending on the screen they’re displayed with.
Responsive SVG Images
Let’s begin with a demo. Here’s what we’re working towards (check out the full screen version for maximum effect):
If you resize the container (hat tip to Rick Strahl for his jQuery Resizable plugin) or the browser window, you’ll see the SVG respond.What We’re DoingFollow the video to learn how to:
Create this logo in Adobe XD
Export the SVG assets
Clean up and optimize the SVG using SVGOMG.
Once you have your SVG (download the optimized assets here if you like) the following steps describe how you make a responsive logo.
1. Hand Code the SVG ElementWe’re going to hand code the beginnings of this SVG, pasting in pieces of our logo assets wherever needed. Begin by opening an SVG element.Note: we need to include these peculiar namespace strings so that we can use href attributes etc. further down the line.<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
2. Define Some SymbolsNested inside our svg we need to define some symbols; each of our components will have its own symbol. Here’s what a symbol looks like, including, in this case, a viewBox of 60x60 (...
Streaming in the Shadow Reader
What did we do?
We made The Shadow Reader faster again!
We created The Shadow Reader (https://amp.cards) to demonstrate how AMP pages can be used within a Progressive Web App (PWA) (read our announcement post for more context). The site folds real articles from The Guardian into an immersive news reader experience. It’s a demo, but it’s also a fully functional site, containing everything you need to embed AMPs inside a beautiful PWA.
Earlier this year, we enhanced the Shadow Reader to follow an AMP=>AMP/PWA pattern, which made initial article loads faster and made the entire app more SEO-friendly. Now, we’ve made the site even faster by adding DOM streaming. That means the browser can render content as it loads – it doesn’t have to wait until the full load!