Wednesday, 31 May 2017

My Journey Of Learning Programming Through Flatiron School #26

flatiron school

My name is Mason Ellwood, and I’m currently working on Flatiron School’s Online Full Stack Web Development Program. Each week, I’ll be writing about my experience, what I’m learning, and tips on learning to code.

Today I would like to touch on one of the most widely used tool, and in my opinion one of the the most important tools in development I have came across, Version Control, GIT, and GIThub.

 

“The past is never where you think you left it” – Katherine Anne Porter

When I first started using GIT and GitHub I really had no idea how to use the thing, other than I had to know to use it. I did not understand the necessity of storing a repo for my code, and for a lot of the implementation processes I had done in the past, it seemed mundane. Until a few years ago something happened. My computer crashed…..

There went all the code I had been working on, all the images, templates, everything. Poof. So I did what any sane person would do in the early 2000’s. I spent way too much money on portable hard drives. I bought two 512GB portable hard drives. And BAM my problem was solved. On these I could hold everything, images, code, movies, you name it. And it was safe in my drawer at home.

But like every great Disney movie, one day, for no apparent reason at all, everything decides to take a turn for the worse. My hard drive decided to stop working. SO BACK TO SQUARE ONE!

Through these poor experiences, i have begun my hunt for alternative sources to backup and save my data. This is where I fell in love with GIThub. Though this tool, I was able to read, write, and save code online in a public or private repo which was accessible and writable from anywhere. Version control has allowed to me better understand my own code, and comment what I did and why I did something better and faster than any other method I have found.

Version control is the process of storing multiple versions of a single project, allowing each version to be recalled at a later date. This is useful because it allows you to easily rollback to a previous version of your application, saving you extensive time and extra work. It is also useful for testing and implementing new versions you may have written without messing up for original database.

So there are two types of version control. The first is local version control. This stores all the information locally on your machine. This is great for personal projects, but not so great if you want to collaborate with a team; storing all your files within a local repository. A repository is a big folder that stores all the files of a particular project. And GIT.. GIT is the version control system you will use, which has become the most widely used version control system in the industry.

In the next post, I will get into how to create and set up this environment locally. Then after this basic setup is complete, how to sync that to a remote repository on Github, where you will be able to push, pull, and play with your code you are working on. The Flatiron School does a great job at explaining this concept. For the longest time, things just were not quite clicking. But through the lessons at The Flatiron School, I have been able to better understand the concept of version control and how it is used.

Read More at My Journey Of Learning Programming Through Flatiron School #26



from Web Design Ledger https://webdesignledger.com/my-journey-of-learning-programming-through-flatiron-school-26/

Tuesday, 30 May 2017

10 Best Udemy Courses For Learning Web Design

webdesign udemy courses

One of the cheapest and best quality sites for learning anything is Udemy. Their courses range from Photoshop to baking and even yoga, so there’s something here for pretty much everyone. But Udemy got its start as a digital learning resource and it still excels in that field. One of the most in-demand skills people […]

The post 10 Best Udemy Courses For Learning Web Design appeared first on Vandelay Design.



from Vandelay Design http://www.vandelaydesign.com/best-udemy-web-design-courses/

Monday, 29 May 2017

9 Free Minimalistic Fonts To Use On Your Next Project

Butler Free font example1

“The world is full of beautiful fonts—choosing the right one for your next project can be a daunting task.”

– Gary Hustwit

 

Regardless if it’s about print, logo, packaging or web design, minimalistic fonts are an integral part of the process for every designer who wants to create eye-catching, effective and memorable graphic design projects. In modern design trends, the typography has gained more and more importance, as each project requires a different font in order to match with the general visual design and convey the right message to the audience.

Every designer loves freebies and there are so many free fonts released out there, that is hard to keep track all of them Therefore, we have rounded up 9 of our favorite free fonts to help you.

1. Entra

Entra free font

 

 

Entra is an original and unusual looking font that was designed for usage in logos and eye-catching headlines. With a quite unique combination, the secret of this font lies in between sharp corners and rounded shapes, Entra is a modern looking cap-only font. Designed by Gatis Vilaks and Wild Ones Design, this font is free for personal and commercial use.

Free for personal and commercial usage.

Download this minimalistic font here 

 

2. Ubuntu

Ubuntu font

 

 

The Ubuntu typeface has been specially created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.

The Ubuntu Font Family is a set of matching new libre/open fonts. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens. The technical font design work and implementation is being undertaken by Dalton Maag. Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an open license

Free minimalistic font for personal and commercial usage.

Download the font here 

 

3. Crimson Text

 

Crimson Text Font

 

This free font family has been created specifically for book production and it is inspired by old-time, Garamond-esque book typefaces. Crimson Text is the work of German-born, Toronto-based designer Sebastian Kosch, who says he was inspired by the work of Jan Tschichold, Robert Slimbach and Jonathan Hoefler. 

It’s also the favorite free aesthetic font of Taylor Palmer, a senior UX designer based out of Utah, USA. “Crimson is a sophisticated serif that makes a nice alternative to traditional Garamond-esque typefaces,” he says. “It also has a very expressive italic, which pairs nicely with strong, geometric sans-serifs like Futura or Avenir.”

Free for personal and commercial usage.

Download the font here

 

4. Comfortaa

 

comfortaa free font

 

Comfortaa is a rounded geometric sans-serif type design intended for large sizes. Created by Johan Aakerlund, it’s a simple, minimalistic font, which includes a large number of different characters and symbols. Part of the Google Font Improvements Project, the latest updates to the family include the addition of a Cyrillic character set and support for Vietnamese. David Airey, a graphic designer and occasional writer in Northern Ireland, is among its admirers. “For a recent identity project, I used Comfortaa as the base for a bespoke wordmark. The before and after are really quite different, but Johan’s work gave me a great foundation, and the client loves the result.”

Free for personal and commercial usage.

Download the font here

5. Butler

 

Butler Free font example Butler Free font example1

 

Inspired by a mix between both Dala Floda & the amazing Bodoni family, Butler is a free serif typeface. The main goal was to bring a bit of modernism to serif fonts by working on the curves of classical serif aesthetic fonts and adding an extra stencil family. Because of its highly contrasted typeface, this minimalist font is “great for posters, very big title, books and fancy stuff”. The Butler family contains a total of 334 characters, 7 regular weights and 7 stencil weights, text figures, ligatures, fractions and a lot more. It also suits many different languages with its added Free for personal and commercial usage.

Download the font here

 

6. Jaapokki

 

Jaapokki free font

Jaapokki free font1

 

Jaapokki has been created by Finnish designer Mikko Nuuttilaa. This beautiful sans-serif font features clean lines, two alternatives and large set of glyphs and it’s great for headlines, posters, logos and more. And Rob Hampson, head of design at The Bot Platform, is particularly attracted to the more unusual elements of this free aesthetic font family. Hampson explains: “I found Jaapokki around a year ago and instantly fell in love with it. In fact, it’s the font I chose to use on my personal website. It has a range of choices, with some being more experimental than others. For example, ‘alternative subtract’ [shown above] experiments with removing elements of the font. This is definitely one to use at larger sizes.”

Free for personal and commercial usage.

Download the font here

 

7. Clear Sans

 

Clear Sans Intel Free Font

Designed with on-screen legibility in mind, Clear Sans is a versatile OpenType font suitable for screen, print, and Web. It strikes a balance between contemporary, professional, and stylish expression and thoroughly functional purpose. It has a sophisticated and elegant personality at all sizes, though its thoughtful design becomes even more evident at the thin weight.

Clear Sans is notable for its minimized characters and slightly narrow proportions, making it a great choice for UI design, from short labels to long passages (it has, for instance, been adopted by Mozilla for the ‘Firefox for Android’ browser). Also, Michael Surtee (Typographica) gives credit to this minimalist font: “I was drawn to Clear Sans for its practical nature. The different weights …offer great options for both readability and contrast, making all sorts of type and numbers easy for users to digest.”

Created by Daniel Ratighan at Monotype under the direction of Intel, Clear Sans supports a wide range of languages using Latin, Cyrillic and Greek, and includes medium, regular, thin, and light weights with upright, italic, and bold styles.

Free for personal and commercial usage.

Download the font here

8. Source Sans Pro

Source sans Pro

 

 

 

Released in 2012, Source Sans Pro was the first open source type family for Adobe, and has proved to be wildly popular among the designers. It was envisioned as a classic grotesque typeface with a simple, unassuming design, intended to work well in user interfaces. Designed by Paul D. Hunt, who continues to work as a type designer at Adobe, Source Sans Pro has Source Serif Pro as complementary free aestetic font .

Source Sans Pro is one of the favorite free minimalist fonts of James Hollingworth, a senior-level digital designer and illustrator based near Bath, UK. “It’s such a solid, reliable font to use in design work,” he enthuses. “Being dyslexic myself, I find it a very easy font to read, and it works brilliantly in user interfaces.” 

Free for personal and commercial usage.

Download the free minimalist font here

 

9. Cormorant

 

Cormorant minimalist font Cormorant minimalist font

 

Cormorant is a display serif typeface inspired by the Garamond heritage. It was hand-drawn and produced by Christian Thalmann, (Catharsis Fonts), who describes it as containing “scandalously small counters, razor-sharp series, dangerously smooth curves, and flamboyantly tall accents”. The font is best used for headlines and poster text at large sizes, both on screen and in print, but is also highly legible at smaller text sizes.

The design goal of Cormorant was to distil the aesthetic font essence of Garamond, unfetter it from the limitations of metal printing, and allow it to bloom into its natural refined form at high definition.

Cormorant fonts come in three distinct master styles: The classic Cormorant Roman, the matching true italics, Cormorant Italic, and Cormorant Upright. Furthermore, in order to make it more accessible for users without OType savvyavvy applications, Cormorant Roman offers four variant styles:

  • Cormorant Garamond – offers larger counters and subtly more traditional Garamond shapes for a few key characters to achieve more reading comfort
  • Cormorant Infant  – the letters «a g y» and their derivatives are replaced by gentle schoolbook-style single-storey shapes; 
  • Cormorant SC –  the lowercase glyphs are replaced by small-caps
  • Cormorant Unicase  – a small-caps variant having some lowercase letterforms for an eye-catching futuristic look. 

Each style is available in a range of five weights: Light, Regular, Medium, Semibold, and Bold.

  • Free for personal and commercial usage.
  • Download the font here

 

Which one is your favorite minimalist font? Have we missed anything? Let us know in the comments bellow.

Here are more awesome headline fonts.

Read More at 9 Free Minimalistic Fonts To Use On Your Next Project



from Web Design Ledger https://webdesignledger.com/9-free-minimalistic-fonts-to-use-on-your-next-project-free-fonts/

Friday, 26 May 2017

How to optimise your landing pages for multi-channel marketing

landing pages

Building a high-converting landing page isn’t easy.

Unfortunately, it’s not any easier when you’re designing a landing page for a multi-channel marketing campaign, with multiple devices, platforms, and points of origin to take into account.

But despite all of this complexity, many of the same simple values still apply.

Here are a few tips to help you optimize your multi-channel landing pages, following four of the most essential tenets of landing page optimization – a singular purpose, a clear offer, minimal resistance, and a structured journey.

Stick to just one goal

You’re trying to optimise a landing page for prospects from multiple marketing channels. So you need some kind of all-in-one wonder-page, right?

Wrong.

If you’re looking for a page that can cater to every type of casual visitor, then what you’re really thinking of is a home page.

An effective landing page is one that’s designed with a singular purpose.

It doesn’t matter if your prospects are arriving on different devices or have been led there from different platforms. They should all be there for the same reason, and your landing page should be focused on encouraging your visitors to take the one action you need them to take.

So to get your landing page as focused as possible, make sure you:

  • Remove all unnecessary links. Ideally, the only thing left that can be clicked should be the call to action (CTA) that takes them where you want them to go next.
  • Craft a concise and clear headline. Your visitors should immediately know what you’re about, what they’ll get and how they can get it.
  • Keep your landing page simple and uncluttered. Your prospects’ eyes should automatically be drawn to the relevant information and the CTA without any mental effort on their part.

brand-generatorThe graphic design tool Brand-Generator is a great example of a landing page that’s been distilled down to the bare minimum. There’s nowhere to scroll, and minimal text and a small explainer video other than the headline, sub-header and the CTA.

There’s just one extra place to click that doesn’t continue the sales pitch – the Log In button – but it’s clear that they’ve worked hard to make that link as close to invisible as they can.

In other words, they’ve designed their landing page around a singular goal, with an absolute minimum of options or distractions. Whether their visitors are arriving from an email campaign, a Google search or a TV advert, there’s only one thing for them to do: test out a heat-map of their own website.

Match your messages

When it comes to multi-channel marketing, you should always follow the three Cs – choice, consistency and continuity.

Your prospects should be free to choose which channel they use to engage with you, and they should be able to continue their journey with your brand by switching channels without being inconvenienced.

But what’s perhaps most important is that your multi-channel marketing efforts are consistent.

If your adverts and email campaigns are promising “flexible project management software”, but your landing page headline is talking only about “collaboration tools”, your visitors are going to think they’ve arrived at the wrong place. They’ll go straight back to Google to find one of your competitors, instead.

Similarly, if you’re running a pay-per-click (PPC) advert to capture browsers who are searching for “cloud accounting app”, you’d better make sure that both your advert and your landing page include those keywords in their headlines and copy. If not, they’ll bounce – and you’ll have just paid for a wasted click.

Here are a couple of examples to show how much of a difference a simple thing like message matching can make to a prospect’s journey.

A quick search for “landing page builder” brings up a handful of adverts.

First up is Leadpages. Their advert in the search engine has the headline “Build Landing Pages”. A little dry, but so far, so good – the advert nearly matches the exact keyword phrase we were searching for.

landing-page-builder

Following the link, we find a landing page with the headline “The #1 Landing Page Builder”. It’s a perfect match, and we instantly know that we’ve arrived at a place that can give us what we want.

lead-pages

They’ve even added a little internal consistency within their own landing page, with a CTA button that matches the page’s headline: “Start Building Pages”. At that final critical moment of decision, we’ve been reassured of what we’re about to do, and what this landing page is offering us.

At every step of our journey with Leadpages – PPC advert, landing page headline, and CTA – we’ve had a consistent set of messages, confirming what’s been previously promised, using almost the same wording that we used to search for it.

It’s not just a case of avoiding confusion. This consistency makes us feel more confident in the landing page that we’re dealing with – Leadpages has managed to gain our trust.

On the other hand, the same search also offers us an advert for Easymarketer, with the advert headline “Master Email Marketing in 2017”. That might have something to do with what we’re looking for, but it can hardly be called a match.

Following that link, we arrive at a landing page with the headline “Builderall Email/Funnel Builder”.

BuilderallAside from the word “Builder”, this headline bears no resemblance to our search terms, and isn’t even close to the headline on their own Google advert.

It’s not immediately clear that we’ve arrived at a place that can give us what we want. We’re confused, possibly annoyed, and we’re ready to go back to Google.

Make it mobile-friendly

With more than 50% of all online sales coming from mobile devices, you need a landing page that can keep those mobile users happy.

Unfortunately, there’s a whole lot more to designing a mobile-friendly site than just getting the font size right.

Perfecting a mobile-friendly version of a landing page is a complex discipline, but there are a few critical points that any designer should keep in mind.

First, a mobile-friendly landing page needs to be fast.

According to Google, 53% of mobile visits are abandoned if the page takes longer than 3 seconds to load – which means that a slow landing page is a crippling disadvantage to your conversions.

So keep your page lightweight.

Remove unnecessary images or scripts, and reduce the size or resolution of your images as much as you can – anything you can do to reduce the number of megabytes standing between your prospect and your desired outcome.

If you’re not sure where to begin, you can use Google’s handy site-tester to get a mobile-friendly score and a few suggestions for improvement.

Second, a mobile-friendly landing page needs to be thumb-friendly.

We all know what it’s like to struggle with a fiddly link on a mobile device – and if your visitors have to zoom in on every button or link, they’ll quickly back out to find a competitor who’s more accommodating to fat-fingered customers.

According to Google’s recommendations, the average pad size of an adult finger is around 10mm wide – and that means your tap targets need to be at least 7mm in size, with no other targets within 5mm.

Finally, a mobile-friendly landing page needs to be concise.

No matter how much you’re in love with it, that killer twelve-word headline you spent hours crafting might simply be too long for a mobile device.

Similarly, the average mobile user isn’t always browsing in the comfort of their own home. They’re on the move, with little free time and a myriad of distractions around them. So your online sales pitch needs to be brief: cut down the copy and the headline to the absolute minimum.

Control the journey with the fold

You’ve got a fast-loading site that’s been tailored to work well on different devices. Your graphics and links have all been adjusted, and your copy has been trimmed down to cater to the typical short attention span.

But there’s still one essential element of your visitors’ experiences that you haven’t addressed yet – the precise journey they’ll go through as they arrive on your site.

When everything you include in your landing page has been chosen to aid the conversion process, it can be hard to decide what should be relegated to the area below the fold. It’s not an exact science, and there’s still plenty of debate about the importance of the fold. But in general, it’s usually a safe bet if you:

  • Keep everything above the fold simple and inviting. Get your offer across to a new visitor immediately, without any other distractions.
  • Push dense text or complicated information below the fold. The last thing you want to do is overwhelm a prospect within the first few seconds.
  • Put your call-to-action (CTA) at the place where your visitors are most ready to commit. That might be above the fold, below the fold, or both. Don’t let the fold dictate where you put it – let the overall journey of your sales pitch decide the best place.
  • Use directional cues to encourage scrolling. It could be an animated arrow pointing down, or even a simple “find out more”.

WorkflowMax‘s landing page, for example, hasn’t followed the stereotypical approach to the fold.

workflow1They know that project management software isn’t something you just sign up for within the first few seconds.

Their prospects need to learn a little more about how the software works, or even to see it in action to get a feel for it. So to the right of the headline and imagery – where you might normally expect a sign-up form or a CTA – they’ve included a huge and highly clickable link to watch a short video.

workflow2The sign-up form and CTA are actually found immediately below the fold, represented by the horizontal red line below.

The natural progression is to arrive on the landing page and watch an introductory video showcasing the software’s features, and then be presented with a sign-up form after you’ve already been warmed up to the product.

And just in case there was any confusion about what to do after the video, the border of the main background image above the fold has been shaped into a downward-pointing arrow – an inoffensive and unobtrusive cue to move further down the page.

Of course, in a multi-channel marketing effort, you can’t rely on presenting the same above-the-fold experience to every user without a little extra configuration.

Your prospects will be arriving from all sorts of devices, and all sorts of screen resolutions. So make sure you test out how your landing page looks on different screens with tools like the Responsive Design Checker and the Fold Tester.

Putting it all into practice

Sadly, there’s no guaranteed formula for improving conversions on any landing page. The variables are too numerous, and human behaviour is far too erratic – and things only get more complicated when you’re dealing with prospects from multiple marketing channels.

With that said, you’d do well to keep the following rules of thumb in mind:

  • Pick a single goal and stick to it. It could be gathering email addresses, getting visitors on board with a free trial, or closing a sale. Stay focused and keep it simple – don’t let too many options distract your visitors away from the purpose of your landing page.
  • Always be clear and consistent. Make sure your headlines, offers, and CTAs all match up to the messages you use in your other platforms and channels. Confirm and reassure your prospects, and you’ll build trust and confidence in your business.
  • Make it easy for every user and every device. No matter where your potential customers are or how they’re engaging with you, you need to make it quick and painless to move from interest to action.
  • Plan out every step of their journey. Your job is to make your visitors feel comfortable and informed enough to commit to your business – not to overwhelm them at the start or blast them with a demanding CTA as soon as they arrive.

It’ll be a long journey to fully optimise a landing page, and you’ll need plenty of testing along the way before you arrive at the best combination of tweaks.

But with enough time and diligence, you’ll start to see the results of a multi-channel marketing campaign that really converts – and a landing page that’s doing most of the work for you.

 

About the Author:
Danny Molt has been involved in design for almost 25 years working with some of the top uk design and marketing agencies. Having launched several companies online and offline, he is currently head of digital marketing strategies for Print-Print Limited
You can contact him at on Twitter @DanMolt

Read More at How to optimise your landing pages for multi-channel marketing



from Web Design Ledger https://webdesignledger.com/how-to-optimise-your-landing-pages-for-multi-channel-marketing/

Thursday, 25 May 2017

15 Best Sliders and Galleries For Your Next Project

If you want to grab a visitor’s attention by displaying a set of images, sliders are a great way to get that done. The best sliders are attention-getting, with attractive animations that match the tone and purpose of your site. We’ve collected a list of some of our favorite sliders and galleries below.

Fair warning: like many animated web plugins, most of these sliders are based on jQuery, the hat that JavaScript wears when it wants to seem cool. If you’re not already familiar with it, it’s fairly easy to learn, but it is distinct from JS in its own special ways. jQuery sliders also might not be ideal for every application. They often require large scripts that need to be downloaded and executed on the client computer, making them clumsy for mobile applications where data use is a concern. And some developers just plain don’t like jQuery, feeling like it’s the child’s version of JavaScript. If you’re not into it, Sequence.js and WOW Slider are CSS-only options.

Amazing Slider

best sliders gallery

Based on jQuery, Amazing Slider offers numerous skins to users. You can choose from a gallery of options including custom backgrounds, banner buttons, thumbnail icons, vertical sliders and a lot more. It can be so flexible because it’s not just free code. Non-watermarked versions of the slider start at $69 and go up from there.

Huge IT Slider

best sliders gallery

The Huge IT Slider is a plugin for WordPress that supports video and photo content along with captions and variety of interaction styles. It’s one of the best sliders for websites built on WordPress, and one of the more flexible.

Unslider

best sliders gallery

Unslider is a minimal jQuery slider for a more modern aesthetic. Promoting itself as “ultra simple,” the code is as basic as an unordered list with some animation elements applied. It’s simplicity means it can support a huge range of options, if you know what you’re doing, from full-page sliders to text-only options.

Avia Slider

best slider gallery

Avia Slider is a jQuery slider that builds itself on unique transitions. The diagonal block build is particular impressive, and each feature of the slider is thoroughly documented by the developer

Jssor

best sliders gallery

Jssor is a flexible jQuery slider built with a deep level of customization available. It includes complex features like z-axis animation and layers effects alongside common options like thumbnail views and video panes. Users can download a variety of pre-built version, or apply pre-developed skins to their own slider. In the tradition of open-source projects, power users have almost unlimited flexibility in how they use the project, and it’s free to download. Jssor is also one of the few sliders on this list that comes in a non-jQuery version as well, and one of the best sliders available for free.

Camera Slideshow

best sliders gallery

Camera Slideshow is a responsive and adaptive slider built with jQuery. It’s basic but free, and includes a number of skins that ship with the code for limited customization. Mostly, though, it looks nice out of the box, and its plain enough to drop into most projects without clashing with your aesthetic.

Sequence.js

best sliders gallery

Sequence.js is goes beyond the best sliders and offers a “responsive CSS animation framework,” allowing developers to create a whole host of effects by applying CSS3 animations to their projects. CSS animations are astounding simple to implement, support by a wide variety of browsers, lightweight and modern. This also makes Sequence one of the most complex sliders on this list. However, that also makes it the most customizable by far. Sequence.js is supported by every browser since Explorer 10, with graceful degradations in place for Explorer 8 and 9.

jQuery Banner Rotator

best slider gallery

jQuery Banner Rotator is a simple but useful jQuery-based slider. It offers solid animation options, a variety of transitions and easy super-imposed text options. You also get configurable tool tips for each thumbnail, flexible text descriptions and resizable UI elements.

Sideways

best slider gallery

Sideways is one of the more unique best sliders on our list. It’s forte is full-page sliders with complex, side-mounted gallery tabs. An excellent choice for building out a photographer’s portfolio, though not as applicable for headers on corporate sites. Users also get custom toolbars and mouse wheel-based navigation.

Bootstrap Carousel

best sliders gallery

Bootstrap Carousel is made for non-coders, offering robust WYSIWYG tools and with a complete set of point-and-click options. The slider is built is custom software and then exported to your site. Users can even build full sites using the drag-and-drop website builder for quicker development timelines.

Master Slider

best sliders gallery

Like Bootstrap Carousel, Master Slider also offers a visual builder for creating WYSIWYG sliders without coding. It’s based on jQuery, with support for animated layers and touch navigation as well as more than 25 pre-built templates that users can implement immediately.

WOW Slider

The last slider for folks who would prefer not to code, WOW Slider is designed to be easy to use.  It’s also built entirely off CSS, letting you ditch the heavy scripts required for many jQuery plugins. Users get a surprisingly wide array of options, include Joomla and WordPress support, complex transitions, intelligent image caching, and support for every browser since Internet Explorer 6.

Accordion Slider

best sliders gallery

Accordion Slider uses a somewhat-unique user interface metaphor, displaying an “accordion” of images for users to choose from in the carousel. It’s not the first or last slider to do this, but it’s the most popular and flexible to offer this option. It’s touch enabled and SEO friendly, with animated layers and smooth animations.

Rhinoslider

best sliders gallery

Rhinoslider bills itself as “the most flexible jQuery slideshow there is.” All its flexibility is wrapped inside of a generator that allows those with limited JavaScript and jQuery experience to swiftly implement the slider’s features on their website.

CSSSlider

best sliders gallery

Lastly, there’s CSSSlider, an aggressively non-jQuery slider. It’s not as functional as some of its jQuery counterparts, with fewer animations available, but its responsive and massively cross-browser.

You might also like:

How To Build a Grid-Style Image Gallery with jQuery Modal Popups

Code a Dynamic Featured Image Gallery Layout using jQuery

The 32 Best Free Icons for Commercial Use to Download Today

The post 15 Best Sliders and Galleries For Your Next Project appeared first on SpyreStudios.



from SpyreStudios http://spyrestudios.com/best-sliders-galleries-jquery/

Wednesday, 24 May 2017

How to Add Gradient Text to your Adobe Muse Website

Muse For You - Gradient Text Widget - Adobe Muse CC - Web Design Ledger

How to Add Gradient Text in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Gradients can be a great touch when wanting to add more styling to your website. With a lot of UI and UX design these days we are seeing gradients everywhere. It is actually a real art and skill to make sure the right colors blend together and to give the user a unique visual representation of a product or brand. Lately, I’ve been having a lot of fun with gradients and looking at different ways to incorporate more advanced gradients into Adobe Muse. Adobe Muse has its own built-in gradient option but it only allows you to add two colors and make the gradient either horizontal or vertical. That is why I released the “Advanced Gradients” widget that allows you to add more than two colors to a gradient and to set the gradient angle from 0 to 360 degrees. I myself have been using it quite often to add more styling to sample pages I’ve been creating. I will talk more about the Advanced Gradients widget in another article.

In this article, I am going to be covering the “Gradient Text” widget. I haven’t seen gradient text as often as elements with gradients so I thought now would be the perfect time to introduce it. Gradient text looks really slick and it can add that extra bit of styling to make a website really stand out.

Muse For You - Gradient Text Widget - Adobe Muse CC - Web Design Ledger

Here is how to add the Gradient Text widget in Adobe Muse:

1. Install the widget by double clicking on the .mulib file.

2. Go to the Library Panel in Adobe Muse. If you do not see the Library Panel go to Window > Library.

3. Click, hold, and drag the widget onto your Adobe Muse website. The initial text will say “Muse For You,” and it will have a blue to green gradient.

4. Set the instance number for the widget in the “Instance” section. Each new gradient text with different styling properties should have a unique instance number.

5. Type the text you would like to apply a gradient to in the “Text” section.

6. Format the text within the “Text” section of the widget. Here you will find all the options to customize the size, letter spacing, line-height, text transform, alignment, and font weight of the text. To change the font type for the text select the widget and then go to the built-in Adobe Muse text option and select a web font from the drop-down.

7. Next, open the “Gradient” section. Here you can set the gradient angle, the first color, and the second color for the gradient. You can also adjust the gradient position and opacity for each color.

8. There is an “IE Fallback” section that allows you to select the color for the text on browsers that do not support gradient text. At the moment Internet Explorer browsers do not support gradient text. The Edge browser does support gradient text.

9. To make sure the gradient shows up well within the text make sure the widget container is not too large in width. Making the width of the widget container larger stretches out the gradient behind the text and makes the gradient not as visible. You can set the gradient width so it is very close to the left and right side of the text.

10. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

Read More at How to Add Gradient Text to your Adobe Muse Website



from Web Design Ledger https://webdesignledger.com/how-to-add-gradient-text-to-your-adobe-muse-website/