How to Track Ecommerce Transactions with Google Analytics

Original Source: https://www.sitepoint.com/track-ecommerce-transactions-google-analytics-reports/

Google Analytics is a really useful tool for tracking visitors on your website, but few developers go beyond adding the standard tracking code, which consists of a JavaScript snippet.

Other than custom Events (see the link above if you’re curious what Events are), we can also track ecommerce transactions in Google Analytics using some extra code.

Why Track Ecommerce Transactions in Google Analytics?

Most ecommerce systems offer detailed transaction statistics, but you can’t necessarily relate them to sessions, devices, demographics or other important metrics. For example, was an increase in sales caused by UX improvements, a successful marketing campaign, or seasonal variations? Who knows.

Recording transactions in Google Analytics means that:

product and user reports are richer and more insightful
you can relate transactions directly to AdWords and other campaigns systems
you can assess the success of campaigns and concentrate on those that lead to a high return on investment
you can award access to these reports to those in your company without having to add them to the ecommerce system.

Let’s dive in.

The Overall Concept

Typically, your users will add items to a cart, check out, possibly register, pay an amount, and then be redirected to a confirmation screen. The transaction details will then show up in Google Analytics, once the user has officially checked out.

Ecommerce transaction data is usually stored in your back-end system or the back-end system of a payment gateway. For this information to show up in Google Analytics, we need to update our JavaScript code so Google Analytics can track this data too.

How to Enable Ecommerce Tracking

Proceed to the Admin area (cog icon) on the left-hand side, select your PROPERTY (your website), and then select Ecommerce Settings. Switch the “Status” to ON.

Note: the Related Products feature was deprecated in April 2017, so avoid this entirely.

Enhanced Ecommerce Settings allows you to record product impressions, promotions and actions such as coupon usage. I recommend that you implement standard ecommerce tracking first, then consult the Enhanced Ecommerce Documentation when you want to move on to more advanced ecommerce tracking later down the line.

Finally, open the View Settings menu and change the Currency displayed as value if necessary.

Enable Ecommerce Transactions

Next, use this snippet to enable ecommerce transactions:

ga(‘require’, ‘ecommerce’);

Note: this must be run after the page tracking snippet and before any ecommerce functionality is used.

Starting a New Transaction

Next, the transaction is initiated with this JavaScript code:

ga(‘ecommerce:addTransaction’, {
‘id’: ‘[transactionId]’,
‘affiliation’: ‘[storeName]’,
‘revenue’: ‘[totalCost]’,
‘shipping’: ‘[shippingCost]’,
‘tax’: ‘[taxCost]’,
‘currency’: ‘[currency]’
});

Let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. ‘ABC-123’.

[storeName] (optional)

The affiliation or store name, e.g. ‘My Online Shop’.

[totalCost] (optional)

The total cost including shipping and taxes. A string-encoded number without currency symbols must be used, e.g. ‘12.99’.

[shippingCost] (optional)

The (numeric) cost of shipping, e.g. ‘2.99’.

[taxCost] (optional)

The (numeric) tax, e.g. ‘1.64’.

[currency] (optional)

We already set up the default currency earlier, but you can alternatively specify a 3-character ISO 4217 country code such as EUR (Euros) or GBP (British Pound) if the shopper opts to pay using a different currency.

Adding Items to a Transaction

Items are added to an existing transaction with this snippet:

ga(‘ecommerce:addItem’, {
‘id’: ‘[transactionId]’,
‘name’: ‘[productName]’,
‘sku’: ‘[productCode]’,
‘category’: ‘[categoryName]’,
‘price’: ‘[price]’,
‘quantity’: ‘[quantity]’
});

Again, let’s look at each of the lines in this object individually …

[transactionId] (required)

The unique transaction identifier, e.g. ‘ABC-123’. This must match the code used in the transaction above, to clarify that this item relates to the basket the user already has.

[productName] (required)

The product name, e.g. ‘mens blue shirt’.

[productCode] (optional)

A unique product code or stock-keeping unit (SKU), e.g. ‘MBS-00001’.

[categoryName] (optional)

A category or variation, e.g. ‘mens shirts’.

[price] (optional)

The numeric price of this item, e.g. ‘9.99’.

[quantity] (optional)

The quantity purchased, e.g. ‘2’.

Clearing Items in a Transaction

In case the user empties their cart, the following JavaScript command clears all items from the transaction:

ga(‘ecommerce:clear’);

Submit the Transaction to Google Analytics

The final transaction with all items must then be submitted with the following JavaScript command:

ga(‘ecommerce:send’);

Naturally, this would happen on the confirmation screen.

Continue reading %How to Track Ecommerce Transactions with Google Analytics%

30 Common UX Terms Every Web Designer Should Know

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/CMvoyjI3oaQ/

With so many intuitive content management systems and pre-built design templates available, there are many people – designers and non-designers alike – who can create a high-quality design. There is a difference, however, between creating an aesthetically pleasing website and one that’s effective in its mission. This is why user experience (UX) design is so important.

UX design is a much more thorough and rigorous version of web design as most of us know it. It involves a lot of research, planning, and testing, all to ensure that the resulting site provides an optimally enhanced experience for the user.

Here are 30 common UX terms every designer should know, whether you’re brand new to design or you’re wanting to take your skills to the next level

1. A/B Testing

The process by which different versions of a website are tested simultaneously in order to detect differences in user behavior and preference between the two.

2. Affinity Diagramming

A form of data organization used to clearly outline groups of ideas and establish relationships among them. In UX, this is used for the purposes of planning site layout or content.

3. Analysis

This is the stage where team members research all the data collected up to a point. The data (or “analytics”) is then used to decide how best to approach a design for the user experience.

4. Beta Launch

The soft launch of a website that gives designers (and others) an opportunity to see and interact with it live, and test out kinks before the official launch.

5. Card Sorting

Card sorting refers to the physical or digital cards used to capture information about various parts of the website (e.g. content, breadcrumb link trails, navigation). It’s done in a highly organized manner to ease the subsequent planning of the site.

6. Color Theory

The idea that color has an effect on user behavior. Also known as color psychology.

7. Competitor Analysis

This is the study of competitors’ websites for the purposes of identifying strengths and weaknesses. This information is then used to help designers form a plan based on what already works for the known audience, but that won’t hinder the site from standing out from the competition.

8. Comparative Analysis

Similar to competitor analysis, this is when other websites are studied with the intent of spotting strengths and weaknesses. This assessment, however, focuses more on comparing granular website elements.

9. Content Audit

During the initial review and assessment stage, all current content is catalogued and assessed for continued viability.

10. Content Strategy

Any type of planning that defines how content is written and structured within a website. Affinity diagramming and card sorting are part of this process.

11. Contextual Enquiry

UX designers can engage with a user in real time as they move through a website. This helps them get a better sense for how users feel as they interact with certain elements of the site.

12. Diary Study

This is similar to a contextual enquiry (above), except that a diary study takes place over the long-term and without instantaneous feedback. Users instead record their experiences and share them all at a later date.

13. Experience Architecture

Experience architecture, or map, is a clearly defined path through which users on a website should navigate to reach the intended goal (the conversion).

14. Heuristic Review

As part of the review phase, a website is assessed for usability issues that will require addressing in the next iteration.

15. Interaction Design

A form of web design that focuses on creating a meaningful and valuable connection between the visitor and the website.

16. Iterative Design

Rather than have a clear start and stop, iterative design is more cyclical in nature so that the process of review, planning, prototyping, implementation, and QA repeat until the desired result is achieved.

17. Mood Board

A mood board helps UX designers define a specific style for a website through a collection of images, colors, text, and other branding elements. Unlike other data collection and design manipulation methods, this is more of a free-flowing collage rather than a step-by-step diagram.

18. Personas

This is a general marketing term, by nature, and one that seeks to establish a clear identity for the target audience. This is especially helpful in UX as it’s the user’s predicted behaviors and desires that affect how a website is to be designed in the first place.

19. Progressive Disclosure

This is a subset of interaction design, one which is meant to simplify the user experience as much as possible. So rather than present users with all the information at one time, they feed the minimum amount to them slowly over a series of steps of dynamic shifts.

20. Prototype

A prototype is an outline or sketch of a proposed web design. Low-level prototypes are usually just the bare bones of what a website may look like. High-level prototypes include more details, but fall short of a full design mockup.

21. Qualitative Research

During the information gathering phase, UX designers utilize a number of techniques. Through interviews, contextual enquiries, diary studies, and more, the goal is to better understand how users interact with a website; thus, focusing on the quality of the interactions.

22. Quantitative Research

Quantitative research is the other side of the research coin. Instead of focusing on the quality of a user’s experience with a website, solid data is what matters most. A/B testing and competitor analysis are two examples of this.

23. Scenario

A scenario is a story that a designer envisions for their users. It usually begins with a look into the hypothetical life of the target audience. The scenario then plays out how the website would factor into providing them with a solution to a problem they face in their everyday life.

24. Storyboard

A storyboard is a sketch. In UX, it can be the visual sketch of a scenario or it can be the rough sketches of how a designer envisions a website will look.

25. UI Elements

These are the parts of a website that enable users to control their experience. Buttons, navigation bars, slider arrows, and anything else that may be engaged with in order to move through the website is a user interface (UI) element.

26. Usability

This refers to the basic ease of interacting with and navigating through a website.

27. User-centered Design

This is the main goal of UX design: to create a website wholly centered around accommodating to the user’s experience.

28. User Journey

A user journey is the pathway that a UX designer establishes for site visitors, from the point of entry to conversion. This may also be referred to as UX flow.

29. User Research

User research is another term for all the analytical tasks that are completed in order to understand a brand’s audience better. Quantitative and qualitative research are the two segments of this.

30. User Test

The key difference between a user test and a contextual enquiry is that users are monitored live and in-person as they interact with a website.

31. UX Assets

UX assets are tools used to iteratively build a site’s design, including prototypes, wireframes, moodboards, mockups, etc.

32. Wireframe

Wireframes take place before prototyping and aim to establish the basic skeleton of a website’s layout.

Now that you have learned the most important UX terms, you should also learn about the most important marketing terms as well.


The 10 Best Newsletters Web Designers & Developers Should Subscribe To

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/pIrwhJl8sL8/

Newsletters offer a direct way to stay in touch with news and updates in the design world. They arrive right in your inbox and share only the best stuff.

1. Sidebar

Sidebar is really a design curation site where the creator Sacha Greif hand-picks 5 new links every day to promote. These are always design related posts covering tutorials, breaking news, or insights from industry thought leaders.

sidebar newsletter

The Sidebar newsletter comes daily and it gives you these 5 links right into your inbox. It’s a super convenient way to stay on top of Sidebar without constantly visiting the site.

2. 1stWebDesigner

Here at 1stWebDesigner we also have a sweet newsletter geared towards design professionals. This heavily curated resource shares only the best news and articles from around the web targeted specifically at designers.

1stwebdesigner newsletter

It offers a great way to satiate your design curiosity with top-quality content.

3. Really Good Emails

It doesn’t get more meta than the Really Good Emails Newsletter. A site devoted to newsletters with their own newsletter? Yep, and it’s pretty awesome too!

rly good newsletter

Every major site needs a newsletter. But the toughest part can be designing one and understanding how to orient content. With this newsletter you’ll get inspiration and marketing tips sent directly to your inbox once a week.

4. The Web Designer

You may be surprised to learn The Web Designer isn’t a blog, community, or gallery. It’s solely a newsletter dedicated to web designers and the design industry.

the webdesigner newsletter

It’s one of the fastest-growing newsletters online with over 23k subscribers and counting. These emails include a hodgepodge of design freebies, JS plugins, and awesome articles that deserve your attention.

5. The Smashing Newsletter

Smashing Magazine has built an empire of incredible content in the design & dev space. Their Smashing Newsletter has to be one of the most viewed in the design community with over 230k subscribers.

smashing magazine newsletter

This newsletter covers a little bit of everything. You’ll find coding tutorials, UX design articles, WordPress articles, and everything relevant to a modern designer. If you’ve never read any newsletters before then this is a great place to start.

6. Responsive Design Newsletter

Every designer knows & loves responsive design. It’s the way of the future for web design and with Responsive Design Weekly you can keep up with all the latest news, tutorials, and top-quality inspiration dedicated to responsive design.

responsive newsletter

We’ve reached a point where non-responsive design is almost a strange relic of olden times. By staying on top of the responsive design community you’ll be at the forefront of the newest techniques and CSS/JS libraries.

7. Hacking UI

I’d say that Hacking UI is geared towards coders over designers. It covers a lot about startups, building quality interfaces, and front-end coding with the right tools.

hacking ui

The site also runs a podcast and offers dozens of amazing tutorials so you have a huge library to pick from. But their newsletter curates everything together into a nice little bundle delivered to you on a weekly basis.

8. Web Designer News

User-curated news was popularized by Digg and carried on through many other websites. One design-oriented site is Web Designer News and it’s quickly becoming the source for breaking design news online.

webdesigner newsletter

Their newsletter gets delivered daily with all the latest news over the past few days & weeks. If you don’t want daily updates then this may not be for you.

But it’s the best resource to get design news hand-delivered without any effort.

9. CSS Weekly

Frontend technology has so much room for modern CSS3 to grow into uncharted territory over the next few years. And CSS Weekly is sure to keep you updated on all the latest happenings as they occur.

css weekly newsletter

The newsletter is only focused on CSS but can include tools/resources on Sass, Less, and other similar tools. Everything is hand-curated by Zoran Jambor and it’s the single best resource for staying on top of the latest CSS developments.

10. UX Design Weekly

Another weekly resource is UX Design Weekly which covers a broad scope of user experience and interaction design. Every issue of the newsletter can be seen on the website including all links from the prior week.

ux design weekly newsletter

This newsletter is perfect for finding UX tutorials, case studies, opinion pieces and tools. This info is imperative for every skilled UX designer & aspiring designer.

Wrapping Up

Finding the right newsletter is all about matching your interests with a resource that can add value to your career.

Take another look at this collection and sign up for any newsletters that grab your attention. They are all completely free, and you can always unsubscribe, so there’s nothing to lose!

You might also like to take a look at the 30 best web design blogs worth following.


Collective #378

Original Source: http://feedproxy.google.com/~r/tympanus/~3/cLCa4EcsSsM/

C378_Sponsor

Our Sponsor
Create Beautiful Websites Visually

The free & easy way to design WordPress websites. Create a stunning new website with Elementor Page Builder, zero coding needed.

Check it out

C378_Toapi

Toapi

A library for easily letting any website provide APIs. By Jiuli Gao.

Check it out

C378_gridopinion

How should we resolve percentage margins and padding on grid and flex items?

The CSS Working Group is asking the community’s opinion on a longstanding issue in the CSS Grid Layout and Flexbox specification. Rachel Andrew has put together some examples that showcase the issue.

Read it

C378_Tinder

A Tinder Progressive Web App Performance Case Study

Addy Osmani writes about Tinder Online’s journey of becoming a Progressive Web App.

Read it

C378_slider

A Sliding Nightmare: Understanding the Range Input

Ana Tudor dives into browser inconsistencies of the range input slider.

Read it

C378_talkingemoji

How I made a talking emoji using regular emojis and JavaScript

Maurizio Carboni shows how to make an emoji talk.

Read it

C378_Ether

Ether

Ether is a modular base for any design system.

Check it out

C378_pikolo

Free Font: Pikolo Block Alt

A stylish two-line display typeface designed by Ideabuk.

Get it

C378_dom

How To Make Changes to the DOM

As part of the series “Understanding the DOM” by DigitalOcean, Tania Rascia’s explains how to create, modify, and remove DOM elements in this article.

Read it

C378_productivity

Productivity Tips And Tricks: The Community Shares Its Piece Of Advice

Rachel Andrew summarizes the most interesting productivity tips of the web community.

Read it

C378_kathedral

Cathedrale

A great Christmas Experiment made by David Ronai.

Check it out

C378_gridscreencasts

Want to learn CSS Grid? Here’s my free full-length course. Merry Christmas!

Per Harald Borgen shares 13 interactive screencasts for learning CSS Grid.

Check it out

C378_colormanagement

Colour management, part 2

Read about how color space conversion works in this article by the folks of Bjango.

Read it

C378_documentation

Designing Better Design Documentation

Slava Shestopalov shows some ways for making documentation clearer, better structured, and more appealing.

Read it

C378_elasticpoints

Pointer Controlled Elastic Points

An elastic shape demo by Jack Rugile where you can click and drag to move the triangles.

Check it out

C378_behance

Behance: Year in Review 2017

It’s a special year for Behance: it marks Behance’s 10 year anniversary. Look back at a decade of creativity.

Check it out

C378_colorglyph

Colorglyph

A fun pixel glyph collection game where you create and trade tiny pixel art.

Check it out

C378_opensource

Start your open-source career

An article by Vincent Voyer on getting started with open source and finding your first project.

Read it

C378_peter

“We’ve centralized all of our data to a guy called Mark Zuckerberg” says Pirate Bay Founder

A very interesting interview with Pirate Bay founder Peter Sunde on the centralization of the internet.

Read it

C378_nectarjs

NectarJS: compiling JavaScript into Native Binaries for Every Platform

In case you missed it: Adrien Thierry shares the fascinating story of the exciting NectarJS project.

Read it

C378_cssglitch

From Our Blog
CSS Glitch Effect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

Check it out

Collective #378 was written by Pedro Botelho and published on Codrops.

A Look Back at 2017: Round-up of Codrops Resources

Original Source: http://feedproxy.google.com/~r/tympanus/~3/2UTS6k1Tgqc/

codrops2017

2017 was yet another incredible year for web designers and developers! We’de like to invite you to a quick look back at all our resources we’ve released this year. The round-up contains all demos we’ve created in 2017, together with our talented contributors! We are very much looking forward to the next year and hope it brings much inspiration and evolution. We wish you a healthy 2018 and encourage you to make a difference. Let’s be bold and fearless, let’s turn this new year into a milestone of change!

From all our hearts, we thank our amazing readers, supporters, contributors and sponsors! Have a wonderful new year full of good vibes, kindness and love. Make it count!

With love,
Pedro, Manoela & little Lucas

A Look Back at 2017: Round-up of Codrops Resources was written by Mary Lou and published on Codrops.

Review: Adobe Creative Cloud All-in-One For Dummies

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/qy4vMDoZHqk/review-adobe-creative-cloud-all-in-one-for-dummies

Hey, it’s OK to be a dummy sometimes; especially when it comes to the complexities and nuances of the increasingly vast Adobe Creative Cloud suite. So as a creative (or indeed anyone whose career or hobbyist interests rely on making things with image and text that look clear and pretty) what better gift than the power of mastering these essential tools?

What’s great about this particular well-known brand of reference guides is that it’s written by experts, rather than writers speaking to experts (so in this case, designers). As such, the tips and guidance are spelled out in a way that’s not only comprehensible to those in the design industry, but in a way that is tailored to those looking to work in it. 

The authors Jennifer and Christopher Smith certainly have pedigree: Jennifer is a UX consultant, designer, educator, and author of 12 or so books on digital imaging and web publishing; while Christopher is president of the American Graphics Institute and author of numerous books on web, interactive, and print publishing technology, including many official Adobe training guides.

Seven mini-books

Adobe Creative Cloud All-in-One For Dummies (Second Edition) is divided into seven mini-books across a hefty 800 pages, and covers InDesign CC, Illustrator CC, Photoshop CC, Acrobat Pro, Adobe Bridge, and Adobe XD. While there’s no doubt this book is aimed more at those at the beginning of their creative software journey, it’s undoubtedly helpful for those already proficient in their tools. 

There's advice on using advanced features, and of course, helping a Photoshop whizz incorporate other tools and work across different programmes to make their lives easier and their work sparkle. 

What’s potentially off-putting for a book about how to design well is that it certainly isn’t the most beautiful, or indeed well-designed book we’ve ever seen: the icons are ugly; and the typographic decisions leave a lot to be desired. 

It’s also slightly misleading to bill the title as as 'all-in-one', when it doesn’t actually cover programmes like Lightroom, Premiere Pro and After Effects. But in fairness, it’s probably wise to master the less complex programmes before tackling moving image and animation software. 

Adobe Creative Cloud All-in-One For Dummies is certainly aimed more at the beginner end of the spectrum, although there’s definitely a few gems in here for the more advanced. However, it might take a bit of slightly frustrating rifling through this hefty tome to get there.

Related articles:

Review: Dieter Rams – Ten Principles for Good Design 26 books every graphic designer should read5 must-read books for design students

Top 9 Graphic Design Tools of 2018

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/VemTK4Jt8dg/top-9-graphic-design-tools-2018

It hasn’t been long since we’ve been in awe of experiencing the change that machines and computers brought into our everyday life. Since then technology continues to evolve and unfold many of its inspiring phases. We have seen a rapid evolution in the digital industry for which technology contributes at a large scale. Similarly, graphic […]

The post Top 9 Graphic Design Tools of 2018 appeared first on designrfix.com.

Build a Professional-Grade Website With Wix

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/lMYSZ-eA6wE/

Chances are you’ve heard of Wix – one of the top website builders out there. As a web professional, you may think that it’s solely a DIY tool aimed at beginners. While the Wix interface is intuitive to use it’s also incredibly powerful.

Wix offers an extensive feature list including professional web tools and design features and advanced code capabilities. You can use it to build a site for yourself or for your clients that is both powerful and mobile optimized.

Create Without Limits

Wix now offers advanced code capabilities, so you can create your own content-rich websites and web applications. If you’re comfortable with CSS, JavaScript and databases, you’ll have a blast creating anything you want with Wix Code. Now here’s the best part, Wix Code works directly with the Wix editor so you can code using the stunning visual components of the Wix Editor. Plus, it’s all SEO compatible, so you can make sure the website you build can get found online.

Professional Features from Wix

Wix has a huge app market that offers tons of professional tools to help you manage and grow your business online. Want an online store? Check. Start accept bookings online? Done. Sell your artwork or videos online? You got it. By this point, Wix has become so good at offering every business niche, you’d be hard-pressed to find something they don’t have.

Professional features include:

Real-time feedback and design sharing

eCommerce

Online booking system

Retina-ready image galleries

SEO (Search Engine Optimization) tools

Designer-made templates for any business need

Invoices

Design With Peak Efficiency

Wix takes care of the hard stuff, so you can focus on what really matter – designing your stunning website. Wix offers hundreds of design features that you can use to create something beautiful without stressing yourself out. Their intuitive drag and drop UI means that you can position elements where you want without having to tweak code. It’ll save you time and unnecessary headaches.

They’ve even simplified complicated features like parallax scrolling, video backgrounds and animation. Each one can be easily added to your design. Plus, you’ll find hundreds of installed fonts and the ability to upload your own.

Everything works with minimal effort on your part. Layouts are also a piece of cake – including multi-column. You don’t need to resort to hacks to get the exact look you’re after. The Wix UI means that you can focus your attention right where it needs to be: On building an amazing website. There’s no need to pull up multiple applications or browser windows. You’ll have access to everything you need in one place.

Tools Designed With You in Mind

Putting powerful features in the hands of designers is what Wix does best. They want you to stay ahead of the pack and on top of the latest trends. Always in Style With their collection of gorgeous templates, you’ll always be right on the cutting edge when it comes to design. And with new templates constantly being added, you’ll stay that way well into the future. Taking advantage of the latest design is a matter of a few clicks.

Feedback in Real-Time When you’re working on a project, you’ll often need to bring clients and colleagues into the loop. Wix lets you share your work with a single click and collect feedback in real-time. You’ll speed up the revision process and avoid unproductive email chains. Design With AI That Understands You Using Wix Artificial Design Intelligence (ADI) brings a new level of efficiency to site creation.

The first AI that will design a website for you, the system learns your needs and builds a site to your specifications. Resources and Services You Need There’s no need to search the web for top resources – Wix has you covered. Their image collection contains thousands of visuals from both Wix and Shutterstock that you can use on your site. Plus, there are built-in tools to help you with critical tasks like invoicing, email marketing and SEO.

Build It Your Way With Wix

If you’re a designer looking for a fast, stable and secure platform – look no further than Wix. They can provide you with the tools you need to build a great site with full control over the entire process. Start building with Wix for free and put the most technologically advanced website builder to work for you.

This article has been sponsored by Syndicate Ads.


10 Alternative Android Keyboard Apps

Original Source: https://www.hongkiat.com/blog/android-keyboard-apps/

Every Android device has its own keyboard build into the system, but no matter how feature-filled the built-in keyboard is, it is still very general. So, if you think the current keyboard in your…

Visit hongkiat.com for full content.

Our 10 Favorite Open Source Resources From 2017

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/2ivqzei80og/

So many new projects are released every year and it’s tough to keep track. This is great for developers who benefit from the open source community. But it makes searching a lot more difficult.

I’ve scoured GitHub, organizing the best projects I could find that were released in 2017. These are my personal favorites and they’re likely to be around for quite a while.

Note that these are projects that were originally created during 2017. They each show tons of value and potential for growth. There may be other existing projects that grew a lot over 2017, but I’m hoping to focus on newer resources that have been gaining traction.

1. Vivify

Vivify css framework

The Vivify CSS library was first published to GitHub in late August 2017. It’s been updated a few times but the core goal of the library is pretty clear: awesome CSS effects.

Have a look at the current homepage and see what you think. It works much like the Animate.css library – except the features are somewhat limited. Yet, they also feel easier to customize.

There are a bunch of custom animations in here that I’ve never seen anywhere else. Things like paper folding animations, rolling out with fades and fast dives/swoops from all directions.

One of the best new libraries to use for modern CSS3 animations.

2. jQuery Steps

jquery steps plugin

With the right plugins you can extend your forms with a bunch of handy UX features. Some of these may be aesthetic-only, while others can radically improve your form’s usability.

The jQuery Steps plugin is one such example. It was first released on April 19th and perhaps the coolest progress step plugin out there.

It’s super lightweight and runs with just a few lines of JS code (plus a CSS stylesheet).

Take a look at their GitHub repo for a full setup guide. It’s a lot easier than you might think and the final result looks fantastic.

Plus, the plugin comes with several options to customize the progress bar’s design.

3. Petal CSS

Petal css framework

There’s a heavy debate on whether frontend frameworks are must-haves in the current web space. You certainly have a lot to pick from and they all vary so much. But one of my newest favorites is Petal CSS.

No doubt one of the better frameworks released in 2017, I’ve recommended this many times over the past year. I think it’s a powerful choice for minimalist designers.

It doesn’t force any certain type of interface and it gives you so much control over which features you want to use.

This can’t compete with the likes of Bootstrap…but thankfully it wasn’t designed to! For a small minimalist framework, Petal is a real treat.

4. Flex UI

Flex ui framework

The Flex UI Kit is another CSS framework released in 2017. This one’s a bit newer so it doesn’t have as many updates. But it’s still usable in real-world projects.

Flex UI stands out because it runs the entire framework on the flexbox property. This means that all of the responsive codes, layout grids and typography is structured using flexbox. No more floated elements and clearfix hacks with this framework.

I do find this a little more generic than the Petal framework, but it’s also a reliable choice. Have a look at the demo page for sample UI elements.

5. Sticky Sidebar

Sticky Sidebar plugin

You can add sticky sidebars onto any site to increase ad views, keep featured stories while scrolling or even increase email signups through your opt-in form.

In May 2017, developer Ahmed Bouhuolia released this Sticky Sidebar plugin. It runs on pure JavaScript and uses custom functions to auto-calculate where the last item should appear, based on the viewer’s browser width.

The demo page has plenty of examples, along with guides for getting started. Anyone who’s into vanilla JS should give this a shot.

6. rFramework

rFramework plugin

Looking for another awesome startup framework for the web? rFramework might be worth your time since it’s fully semantic and plays nice with other libraries such as Angular.

To get started all you need are the two CSS & JS files – both of which you can pull from the GitHub repo. All the styles are pretty basic which makes this a great starting point for building websites without reworking your own code base.

Also take a look at their live page showcasing all of the core features that rFramework has to offer.

It may not seem like much now, but this has the potential to grow into a solid minimalist framework in the coming years.

7. NoobScroll

NoobScroll plugin

In mid-April 2017 NoobScroll was released. It’s a scrolling library in JavaScript that lets you create some pretty wacky effects with user scroll behaviors.

Have a look over the main page for some live demos and documentation. With this library you can disable certain scrollbars, create smooth scroll animations or even add a custom scroll bar into any element.

This is perfect for creating long flyout navigation on mobile screens. With this approach, you can have lengthy dropdown menus without having them grow too large.

8. jQuery Gantt

jquery Gantt plugin

Tech enthusiasts and data scientists likely know about gantt charts – although they’re less common to the general public. This is typically a graphical representation of scheduling and it’s not something you usually find on the web.

jQuery Gantt is the first plugin of its kind, released on April 24, 2017. This has so many uses for booking, managing teams or even with SaaS apps that rely heavily on scheduling (ex: social media management tools).

It works in all modern browsers with legacy support for IE 11. You can learn more on their GitHub page, which also has setup docs for getting started.

9. Paroller.js

Paroller.js plugin

Building your own parallax site is easier now than ever before. And thanks to plugins like Paroller.js, you can do it in record time.

This free jQuery plugin lets you add custom parallax scrolling features onto any page element. You can target specific background photos, change the scroll speed, and even alter the direction between horizontal and vertical.

It’s a pretty solid plugin that still gets frequent updates. Have a look at their GitHub repo for more details.

10. Password Strength Meter

Password Strength Meter plugin

Last, but certainly not least on my list is this password strength plugin, created March 11, 2017. It’s built on jQuery and gets frequent updates for new features & bug fixes.

With this plugin you can change the difficulty rating for password complexity. Plus, you can define certain parameters like the total number of required uppercase letters or special characters.

If you’re interested in adding this to your own site, the GitHub repo is a nice place to start. The main demo page also has some cool examples you can test out.

But if you’re looking for more new open source projects, try searching GitHub to see what you find. The best resources often find a way of accruing stars, forks and social shares pretty fast.