When Humour Meets Good Web Design – 25 Beautiful/Funny Websites

As web designers, each project you work on has a unique set of goals and requirements. However, we all have one goal for all our projects – to impress people, creating the websites that are memorable. Who wouldn’t like this, right?

To accomplish this purpose, we usually think of all kinds of content strategies or try to follow at least some of the latest web design trends. But despite all receipts of creating great content, there is one that some of us have forgotten: a fun experience is often an enjoyable one and an enjoyable experience is a memorable one. By adding some fun to our projects, we can offer people a delightful experience that they will not only remember, but they also might share with others.

When I say “add fun”, I don’t mean to turn your client’s website into a circus web page (unless your client is a circus, of course). I am thinking of changes and additions that add a bit of fun into the interactions between viewers and web pages or at elements of a design that would help the websites you develop become more enjoyable to use, and more memorable overall.

At the same time, I’d like you to understand that “fun” doesn’t mean “silly”. You can add a touch of delight and enjoyment to the user experience without making your client seem childish or unprofessional. The trick is to know how much fun you can add, where is the best to use it, and when to admit that you’ve gone too far.

Let’s look at some examples of websites that do a great job of using fun to create both enjoyable and memorable experiences for their users.

Meomi

The whole Meomi’s design includes fun characters that move and respond as you scroll over them, the overall experience being filled with discovery and delight as you explore. I love especially the fact that as busy as the site is, you know quickly what’s all about due to the tagline placed towards the top of the page — “A little design studio dedicated to play, delight, and whismy.”

Slaveryfootprint

This website “allows consumers to visualize how their consumption habits are linked to modern day slavery”. Maybe doesn’t sound like a place where “fun” would work, but if you visit the website and select the “what?” arrow, the experience begins. The whole site includes cartoonish illustrations, a sense of anticipation, and fun interactivity, turning a simple web page into a memorable and powerful experience.

Pete Nottage

This portfolio site has a design that features different site illustrations, each representing sections such as contact, about, etc. The joyful cartoonish style is completed by funny text, turning the whole website into an enjoyable experience. This is an excellent example of a UX that balances simplicity and creativity.

Needagents

Needagents – ably and colorfully illustrates the company name, by using deep and solemn agent characters and dark blue color palette that is primordially associated with business stuff. On an otherwise serious topic, using the cartoon characters adds a touch of fun, turning a simple and serious subject matter into a pleasant experience.

Alessandra Balzani

The “emotional designer” Alessandra Balzani brings a note of funny yet sophisticated innocence, through her website design. By seeing this design, I have to admit that she knows how to play with lines, characters, and images, providing her visitors a great user experience. Good job!

Well Done Team GB

Well Done Team GB congratulates its Olympians in a quaint manner, colorfully and dynamically illustrating various victories. The parallax effect adds depth to the flat design and the funny characters used here not just add a touch of humor, but also help with their storytelling.

Fountain of Youth Coconut Water

Fountain of Youth Coconut Water – does a good job with this site. By combining the cartoonish style with animation and a sprightly music in the background, they add not just a funny touch, but also some depth to a flat design. And this is just the beginning. Just visit the website and the adventure will begin!

XHTML Crab 

XHTML Crab – draws onlookers’ attention to a glaring crab illustration in a center, which severely resembles a character from Walt Disney’s cartoon. Also, the vintage font and the imagery used for the whole website turn it into a pleasant user experience.

Dumb Ways To Die

Dumb ways to die is a website dedicated to the big problems of negligence in Metro. The website fascinates not only by its pleasing unique characters but also by the well-executed idea that is supported by specially devised song. Their focus is on making loads more fun entertainment for kids while continuing to remind them to be safe – primarily around trains.

Netiko

Netiko has a habitual light gray paper-based design. Of course, this approach is not new, but what is truly refreshing and appealing here is the integration of funny and kind robots throughout the whole design that has a look of old-school stickers.

Stuff and Nonsense

Stuff and Nonsense establishes a hilarious and slightly urban atmosphere by means of the cartoon-style illustrated header with cheerful personages. Their website not just conveys their personality, but it’s also distinctive and has a soul.

Mailboxing

Mailboxing is a fun little game for all ages. The website features low-poly graphics that add to website roughness, and, at the same time, queerness. Based on geometric forms and flat style, illustration gets an idiomatical appearance.

JSConf

JSConf is a website made for a javascript convention. It has a fun and creative cartoon design with various colors and animations.

CUPS

CUPS is a charity website that utilizes its design with illustrations to convey their very serious message in an attractive way. The illustrations make the page more interesting. It is even made more entertaining with animations. So, even if the subject is a very serious one, by using this fun and interesting approach we can see on the whole site, we are able to make the visitors stay and read further.

Easy Rocket Studio

Easy Rocket Studio has a space-themed web design that is filled with creative illustrations and animations that makes browsing more entertaining. Yet another proof that the world of sport is a special one.

Traveline Cymru

This cool combination of interactivity and motion graphics which works seamlessly is a horizontal scrolling one pager telling a Christmas story by Traveline Cymru. The single page website features comic-style illustrations, including falling snow as you browse.

BlackMoon Design

BlackMoon Design is a game development studio and its portfolio website has a spot on design. It has a classic game design as a background image. They love to play and this is obvious just by viewing this page.

Mango Languages

Mango prepares learners for realistic conversations and strengthens everyday communication skills in over 70 world languages, including English. They like to have fun and to create lovable language-learning experiences, and their website just conveys this message. A fun-infused way to learn a new language.

Nasty Creatures

Nasty Creatures is a full-service solution company providing rich user experience via mobile application development and digital media solutions. Their ingenuity manifests not just when taking care of their clients, but also when it comes to their website. The cartoonish design of Nasty Creature’s page adds some fun to a very serious subject, offering the visitors an enjoyable user experience.

Gisele Jaquenod

This is another funny and joyful portfolio website. Being herself a designer, Gisele uses the cartoons characters not just to present her work, but also to create a pleasant experience for the visitors.

Hungercrunch

When you dive a bit deeper into the copy and videos of this website you discover that when you “top up” on game supplies/add-ons, the proceeds go toward feeding orphaned children. The one-pager features such vibrant and well-illustrated characters from the game, including a comic section and an interactive hover-sensitive intro.

Visionare

Visionare is an upcoming application that claims to help you achieve your goals by drawing from the experience of people who have already achieved them. It’s a very nice blend of flat design and texture and the cartoon characters add a funny touch. What a great intro animation as well – slick, vibrant and sums up all the categories in one image.

Flying Piñata

Beautifully designed One Pager promoting a new startup that delivers piñatas via drones. Make sure you watch the video too – hilarious and really well made.

Memrise

They make learning languages and vocabulary so full of joy and life, you’ll laugh out loud. Funny design, great user experience.

Camp Flywheel

Flywheel is a delightful platform that empowers designers, developers and digital agencies to build beautiful and functional sites for their clients. And they also did a very good job with their website. Colorful parallax scrolling and low-poly design add a touch of fun and provide an enjoyable visual experience.

 

 

 

 

 

 

Read More at When Humour Meets Good Web Design – 25 Beautiful/Funny Websites

from Web Design Ledger https://webdesignledger.com/25-funny-websites-a-gallery-of-beautiful-web-designs/

Advertisements

UK Home Secretary embarrassingly ignorant: “I don’t need to understand how encryption works”


As the UK’s Home Secretary, Amber Rudd occupies one of the most important roles in the government. Her job, put in a nutshell, is to keep us safe from harm. In 2017, that task is harder than ever, not least due to the existence of the Internet, which weaves like a ribbon through every segment of society and industry. For Rudd to be able to do her job effectively, she really needs to understand how modern communications technology works. The problem is, she doesn’t. Not even on a superficial level. Rudd is particularly clueless when it comes to encryption. In…

This story continues at The Next Web

from UK – The Next Web https://thenextweb.com/security/2017/10/03/uk-home-secretary-embarrassingly-ignorant-dont-need-understand-encryption-works/

7 Facebook Messenger Marketing Strategies You Can Try Today

There are now more than 1.3 billion people using Facebook Messenger every month1. Yes, billion with a b!

Have you considered the possibility of using it for your marketing?

We certainly have. And we have been experimenting with different ways to include Messenger as one of our go-to marketing tools, by sending out our latest blog posts through Messenger and engaging and helping our customerst through the platform too.

Since we are in the midst of figuring things out, we thought it would be great to share what we have found so far. Here’s everything we know about using Facebook Messenger for your marketing.

Here’s everything we know about using Facebook Messenger for your marketing.

Facebook Messenger Marketing: 7 Ideas You Can Try Today

Why use Facebook Messenger

We often think of social media as just the major social media networks such as Facebook, Instagram, Twitter, and LinkedIn. But that thinking misses a big part — a bigger part, in fact — of social media. And that’s messaging apps.

Messaging app vs social networks

According to BI Intelligence, more people are using the top four messaging apps (WhatsApp, Facebook Messenger, WeChat, and Viber) every month than the top four social media apps (Facebook, Instagram, Twitter, and LinkedIn)2. And it seems that the gap between the two lines is getting bigger.

Instead of being a one-to-many channel, social media is becoming a one-to-few — and often one-to-one — channel.

Facebook IQ conducted a study on the use of mobile messaging with 12,500 people across the world and found several promising trends among the people surveyed3:

  • Sixty-three percent said that their messaging with businesses has increased over the past two years
  • Fifty-six percent would rather message than call a business for customer service
  • Sixty-one percent likes personalized messages from businesses
  • More than 50 percent are more likely to shop with a business they can message
  • Here are a few more interesting statistics about messaging:

Facebook messaging study

If you are starting to think that messaging might be great for your business, read on to find out the seven ways of using Facebook Messenger for your marketing.

Section separator

7 ways to use Facebook Messenger for your marketing

1. Deliver your content

The most common approach to deliver content to your readers is to use email. But HubSpot wanted to find out if using Facebook Messenger is a better alternative. So instead of just asking people to fill out a form and get the gated content via email, they offered the option to skip the form and get the content via Facebook Messenger. After four weeks of testing, they found a clear winner4.

The Messenger strategy results in a 242 percent higher open rate and a 619 percent higher click rate5.

HubSpot Facebook Messenger vs email study

If you want to explore this strategy, Matthew Barby from HubSpot wrote a great guide on building a Messenger chatbot using ChatFuel. With ChatFuel, you can create a chatbot to deliver your content (and more) without having to code. And it’s free if you send less than 100,000 messages per month.

Here’s an example of how a chatbot newsletter opt-in looks 6:

Chatbot example: Newsletter opt-in

(We are testing a Facebook Messenger chatbot to deliver our latest blog posts. It’s not perfect yet but if you are interested, you can find it here.)

2. Help your followers find the most relevant content

Besides pushing content to your followers, you can also use Facebook Messenger to help your followers “pull” content to themselves.

There are many great examples of this use case on Facebook Messenger. Companies like Whole Foods Market, Food Network, and TechCrunch have Messenger chatbots that can help their followers find articles that they want to read. For example, this is what it looks like when I try to find articles related to Elon Musk on TechCrunch, using their chatbot:

TechCrunch Messenger chatbot

This turns things around for content marketing. You now have a non-intrusive way to deliver personalized content to your target audience. If you are considering this strategy, here are some best practices, according to Ana Gotter on the Social Media Examiner blog7:

– Treat your chatbot like content marketing. Selling shouldn’t be your primary objective, but you can use content to send users to your site.
– Ensure your site is mobile-responsive.
– Inform customers how and where to contact you if they need additional help, including customer service issues.
– Include browsing menus if possible. This makes it easier for users to find content they’re interested in, even if they don’t know exactly what they’re looking for yet.

Creating a chatbot that allows your followers to search is a little more complicated than creating a chatbot that simply delivers content. But tools like ChatFuel, ManyChat, and Botsify have guides and templates to help you. If this strategy excites you, I would encourage you to have a go at these tools and see what you can do with them.

3. Engage participants during event

Another way HubSpot uses Facebook Messenger is to send important information and reminders about events that people have signed up to. Similar to the example above, they found that the response rate on Facebook Messenger was significantly higher than that on email8.

Here’s a recent experience I had with HubSpot:

  • I signed up for their Four Days of Facebook event through Facebook Messenger (which felt much nicer than filling up a form).
  • The day before the event, they sent me a reminder with links to add the schedule to my calendar app.
  • During the four days, they updated me about the day’s talk and sent me a link to watch the session online.
  • At the end of the four days, they followed up to ask if I enjoyed the event.

HubSpot Messenger event

The entire experience felt smooth and appropriate for an event on Facebook. And it works well for events that are not on Facebook, too. For example, for their offline events, HubSpot made use of the Messenger code to allow attendees to receive real-time updates through Facebook Messenger9.

HubSpot Facebook Messenger use at events

With a tool like ManyChat, you can create subscriber lists and broadcast messages easily. Broadcasting messages is very similar to sending an email. Just type your message, add attachments, and send.

ManyChat broadcast

4. Generate high-quality sales leads

Since Facebook Messenger is still a relatively new and novel marketing channel, it is a great way to get people’s attention and to generate high-quality sales leads. According to Dmitriy Kachin from Chatfuel, the response rate on Facebook Messenger is incredibly high at the moment10:

Obviously, numbers vary across the board – and better bot experiences with more engaged audiences are getting 80-90% response rates. While even the least favorable experiences are in the 35-40% range.

Valassis, a marketing agency, built a Facebook Messenger chatbot for Feldman Automotive Group to help drive leads and sales for their local auto dealers. They ran click-to-Messenger ads with location targeting to reach their target audience on Facebook. When a person clicks on the ad to learn more, she will be brought into a Messenger conversation with a chatbot that would ask a series of questions. (She has the option to speak to a real sales rep, too.)11

Leads chatbot

Within a few months, they reached more than 100,000 people and generated about 50 sales per month through the Facebook Messenger chatbot.12

When HubSpot tried a similar approach to generate leads through Facebook Messenger, they “saw a staggering 477% reduction in our cost per lead, while lead quality only slightly decreased13. Their advice?

“It might take a little muscle to build a Facebook Messenger bot to collect lead information, but the effort is well worth it. Use Facebook ads plus Messenger as a powerful one-two punch.”14

5. Re-engage potential customers

One thing you might be wondering is this: how do I get people to talk to me on Facebook Messenger in the first place?

Facebook ads.

There are two types of Facebook Messenger ads you could use. The first type, click-to-Messenger ads, which I mentioned briefly above, allows you to direct people from the Facebook News Feed to a Messenger conversation with you. The second type, sponsored messages, allows you to initiate a Messenger conversation with anyone who has messaged your Facebook Page before.

A great way to use these Facebook Messenger ads is to re-engage potential customers, such as people who have visited your pricing page but didn’t purchase your product or people who have asked you questions via Facebook Messenger before15. For example, you can use the click-to-Messenger ads offer them a channel to ask any questions they have or you can use sponsored messages to send relevant content and offers to them16.

Facebook Messenger ad examples

Molly Pittman from Digital Marketer described these two approaches in great detail in her blog post. Using sponsored messages, she was able to get a read rate of 67 to 90 percent. Compared to an open rate of about 20 percent for emails17, these results are incredible!

Digital Marketer's Facebook Messenger sponsored messages results

For a detailed walkthrough on how to create these ads using the Facebook Ads Manager, check out Jon Loomer’s guide on Facebook Messenger ads.

6. Reach your target audience one-to-one

The Facebook News Feed is saturated with ads. Imagine being able to reach your target audience without all the noise. One-to-one.

With Messenger ads, you can do just that. People will see your ad in the home tab of their Messenger mobile app. When they tap on the ad, they will be brought to your preferred destination — your website or a Messenger conversation.

Here’s a short video of how a Messenger ad looks like and works18:

But here’s something to consider: the reaction to such ads is mixed. While marketers are likely rejoicing at this opportunity, some people are finding such ads unpleasant. (What’s your take?) It might take some time for people to get used to having such ads in the Messenger app.

To have your Facebook ads displayed in the Messenger app, select Messenger Home for the placement of your ad.

Create Messenger ad

7. Provide speedy customer support

The last strategy (of this list) for using Facebook Messenger is something you might be already doing. That’s providing timely customer support through Facebook Messenger. As Jay Baer, President of Convince & Convert, suggests, social media customer service is the new marketing19.

It’s clear that people prefer to contact brands through messaging than through other channels.

And they want a response from brands — a quick one.

As mentioned earlier, Facebook found that 56 percent of their study’s respondents would rather message than call a business for customer service20. In a survey of more than 1,000 people, Sprout Social found that most consumers expect a response on social media within four hours (while brands take an average of 10 hours to reply). They also found that 30 percent of the people would go to a competitor if a brand doesn’t respond21.

The cost of ignoring social messages

It’s very easy to get started with this strategy.

First, you want to allow people to message you on Facebook Messenger. You can enable this in your Facebook Page settings. Under the “General” tab, look for “Messages” and click “Edit”. Then, check the box and click “Save Changes”.

Facebook Page Messenger settings

Now, visitors to your Page will see a “Message” button on your Page, which they can use to initiate a conversation with you on Facebook Messenger.

Facebook Page "Message" button

When you receive messages, hop over to your inbox by clicking on “Inbox” at the top of your Facebook Page. Your inbox will look something like this:

Facebook Page inbox

At Buffer, we use our social engagement tool, Buffer Reply, to reply to all conversations on Messenger — and Facebook, Instagram, and Twitter — from a single inbox. If you manage multiple social media profiles, we would love for you to check it out.

Section separator

How would you use Facebook Messenger?

As more and more people adopt messaging, the potential for you to market and grow your business through Facebook Messenger becomes even bigger. And Facebook is working hard to make Facebook Messenger a great channel for businesses. For example, Facebook created a new Messages objective for Facebook ads, which allows you to reach people who will most likely reply your business on Facebook Messenger.

I believe it’ll be great to follow this trend and not to be left behind. Here are the seven ways you can get started with Facebook Messenger marketing:

  1. Deliver your amazing content
  2. Help your followers find the most relevant content
  3. Engage participants during event
  4. Generate high-quality sales leads
  5. Re-engage your potential customers
  6. Reach your target audience one-to-one
  7. Provide speedy customer support

How would you use Facebook Messenger for your marketing? I would love to hear your thoughts, ideas, and dreams!

Image credit: Unsplash

.footnoteContent a{ font-size: 1.3rem !important;}

from Social https://blog.bufferapp.com/facebook-messenger-marketing

UK government outlines plan to be “the safest place in the world to go online”


Karen Bradley, the UK’s Culture Secretary, today gave a speech at the Conservative Party conference in Manchester, where she outlined her vision to make the UK the “safest place in the world to go online.” The UK government’s strategy gravitates around three main points. First, it intends to propose a code of conduct for social media companies to abide by. It also wants to encourage social media companies to design products with a “safety first” ethos. Finally, it plans to emphasise online safety education in schools. Bradley described the code of practice as “guidance” and “voluntary minimum standards,” although didn’t…

This story continues at The Next Web

from UK – The Next Web https://thenextweb.com/tech/2017/10/02/uk-government-outlines-plan-safest-place-world-go-online/

Declining Attention Spans And Your Design and Website Strategy: 9 Tips

user retention strategy

Declining attention spans is one of the biggest threats to your website.

In fact, a Microsoft study found that the average human attention span is shorter than that of a goldfish. More surprisingly, a recent Jampp study found that most mobile app users suffer an 88 percent decrease in attention span on an annual basis.

As a webmaster, it is important to pay special attention to these statistics. We, as humans, are becoming increasingly impatient, and this can have great implications for your business. In fact, the following statistics show just how dangerous having a slow website can be:

  • Slow loading websites cost the U.S. ecommerce market more than $500 billion annually
  • A one second delay in your site load time can cost you 7 percent in conversions
  • 40 percent of web users will abandon a website that takes longer than 3 seconds to load
  • A site speed increase from 8 to 2 seconds can boost your conversion rate by 74 percent
  • Google now uses site speed as a ranking factor

user retention

What a Slow Website Means for Your Business

If you have a slow website, here’s the impact it will have on your business:

It will cost you visitors: If you feel you’ve been doing your best but can’t seem to retain visitors to your website, perhaps it is time to address your website speed. As highlighted in the statistics above, at least 40 percent of visitors to your website will stop visiting if your website takes longer than 3 seconds to load.

It will cost you sales: Improving your website speed can dramatically boost sales on your website, even by as much as 74 percent as revealed in one of the statistics earlier referenced. It has also been established that a one second improvement in site speed can boost conversions by 7 percent.

It will cost you search engine rankings: Google has announced that they use site speed as a ranking factor and that faster sites will always outrank sites that are slow. If you’re not experiencing an improvement in your search engine rankings despite all your SEO efforts, then perhaps site speed is a culprit.

Thankfully, all hope is not lost. If your website is not fast enough, here are 9 practical tips guaranteed to insulate your website from declining attention spans:

  1. Get a Good Web Host

Your web host is the foundation of all your site optimization efforts; your web host controls the server infrastructure and configuration — and these are factors that impact your website speed more than anything else. I’ve had great experience with both Bluehost and Hostgator, and I did a comparison here.

  1. Get a Better Theme

You’ll be amazed to find out that many websites are ridiculously slow due to bloated code and poorly-constructed themes. More often than not, outside your web host, your website theme will determine your website speed.

  1. Enable GZIP Compression for your Website

In an article for Smashing Magazine, Marcus Taylor reported being able to reduce the size of his client website from 63kb to 13kb. That’s basically around 400 percent reduction in the site size, resulting in a massive boost in site load time since a user’s browser has to download much less. What did he do differently? He enabled GZIP compression on his client’s website.

GZIP works in a similar way to ZIP compression on computers, but for websites; a group of files that will ordinarily be big when their individual size is added together can instantly be reduced to one small ZIP file, resulting in a faster site load time and an increase in site speed for your site visitors.

  1. Optimize and Compress Your Images

Images alone can make your site a lot more slower; often, a site could be seven to ten times or more heavier due to images used on the website. The solution to this is to compress the images used on your website drastically; thankfully, there’s a way to do this without the quality of your images suffering much. If you use WordPress, the plugins Smush.it and/or EWWW Image Optimizer can help with compressing your images. If you don’t use WordPress you should check out the image compression tool offered by Kraken.io.

  1. Combine Your Images into CSS Sprites

Often times the number of requests a user’s browser sends to your server will influence how long it takes to load your website; the more requests sent, the slower your website will be for visitors. Background images can result in a lot of server requests, especially if they are hosted individually and have to be requested individually from your server — this eventually results in a much slower website. The solution to this is to combine your images into Sprites; basically, when several individual images are combined into one main image, the end result is a Sprite. Once your Sprite is ready, you can use CSS commands to tell your user’s browser to interpret various parts of that image individually.

  1. Use a CDN to Ensure Consistently Fast Access to Your Site Across All Locations

A CDN is a network of proxy servers in multiple locations that automatically serve users a version of your website closest to their location; for example, with a CDN, it isn’t unusual to have a version of your website hosted in all continents. So, someone trying to visit your website from India will be served a version of your website hosted in Asia instead of a version hosted in North America.

Two great CDN options are CloudFlare (both free and paid) and MaxCDN (paid).

  1. Focus on Creating a Better User Experience

While making your website faster will solve some of the problems, ensuring you’re better able to retain people on your site goes beyond that. It is essential to also work on creating a better user experience for your audience; when people visit your website, what happens? Your goal should be to ensure they easily find what they want, and that their experience with your website is satisfactory. Here are a few tips:

  • Pay special attention to your design; an appealing design won’t just make people love visiting your website, it will also make them likely to take the desired action you want them to.
  • Besides having clean design, user experience matters; let your users inform the direction of your site. Embrace usability best practices to ensure your site is easy to use.
  1. Introduce Elements of Social Proof

Thanks to technology and increasingly declining attention spans, we no longer have the patience to waste time with meaningless tasks. How do you then convince people to pay more attention to your website? By letting them know that they are not alone; research has shown that social proof is one of the biggest factors that influence human decisions; when we see that other people, like us, are doing something, we are more likely to do the same thing.

If you have a major achievement, or if you have a record number of people using your products, do not hesitate to indicate it on your website.

  1. Don’t Waste People’s Time; Create a Point of Focus

This is especially important if your goal is to get people to take action. Don’t waste their time by rambling around and beating about the bush; it also won’t help to present them with too many options than is necessary. Instead, create a focus point; make it clear what you want them to do, and ensure that’s your focus. Conversion optimization experts recommend focusing on one goal for one page; do that, and – by preventing distractions – you’ll be able to get people to focus more on your offer.

 

Read More at Declining Attention Spans And Your Design and Website Strategy: 9 Tips

from Web Design Ledger https://webdesignledger.com/declining-attention-spans-and-your-design-and-website-strategy-9-tips/

15 Great Google Font Combinations For Your Next Project Design

For any website, content is the most important part. So, naturally, you would want it to be as simple and straightforward as possible, in order not to worry about viewers trying to understand the cryptic messages hidden behind poor color choices and messy fonts.

This is why not only the general design and imagery but also the font choices and the overall consideration for typography are important for conveying the right message to the audience. By choosing appropriate font combinations and assigning the right hierarchy where needed, you can decrease the confusion and let the viewers stay and read your content.

In terms of appealing visual language, your text should have few characteristics, of which the most important are a readable font, the high contrast, and the hierarchy.

Even if there is a large library of fonts out there, many designers choose a sans serif fonts such as Helvetica, Verdana or Arial as their main font because they are familiar, very easy to read and adaptable to any design project. They also come standard, so by choosing fonts as these, they can be sure that the text will visually be the same not just for print, but also for web design.

Thankfully, the design world has advanced to the point where fonts are not nearly as limited as they once were. Starting with 2010 the Google Fonts were released, making the process of choosing and pairing fonts easier and quicker.

However, you should be aware that not every font combination in Google’s library is a recipe for typographical success. With the right font pairings and usage considerations, your brand will convey the right message to your audience, professionalism, and reader friendliness without the need for expensive customized fonts.

In this article, I’ll show you 15 great Google Font combinations that will help you to accomplish all this.

You will find below 15 spectacular Google Font combinations that together with images and graphics, will help you define your brand’s personality.

Open Sans Condensed + Open Sans

Open Sans Condensed / Open Sans

Here’s the easiest combination that works wonderfully for nearly any design project. Open Sans is one of—if not the—most versatile font in the entire collection of Google Fonts. It’s extremely easy to read in large blocks of text, at the same time being salient enough for headlines.

I can’t imagine any scenario where Open Sans would go wrong. Unless you’re looking specifically for a serif font, this one will serve perfectly almost any business, blog, landing page, or web app.

Simple. Elegant. Familiar.

Montserrat + Merriweather

Monserrat / Merriweather

Montserrat is a very appreciated font among designers for its versatility and simplicity, and Merriweather pairs wonderfully with it because its contrasting style and easy readability. It doean’t matter if you interchange them as headlines or paragraph text—they both work great as either!

This particular combination is a nice balance of modern and classic design. Therefore, its variety of uses could support many types of businesses.

Raleway + Roboto Slab

Raleway / Roboto Slab

Roboto Slab is a versatile font,  yet a bit more classical in style. When paired with the distinctive and bold Raleway, we can see an amazing match of clean and refined typography.

Raleway is one of those fonts that defines sophistication. When used as an all-caps headline, it works beautifully for luxury items like jewelry, designer clothing, perfumes and so on. Roboto Slab supports it well with simple and approachable descriptive text.

Playfair Display + Source Sans Pro

Playfair Display / Source Sans Pro

Playfair Display was inspired by the letterforms of the 18th century during the transition from quills to steel-tipped pens. So, it’s no surprise that this font expresses an old charm while having a modern twist.

This font adds a personal touch to something like a tagline or product description. If you use its currency symbols, you’ll immediately see why it’s the perfect choice for a product or service centered around luxury and appearances.

At the same time, Source Sans Pro keeps the text grounded in a modern and clean presentation, while pushes things a little further into the future and creates an intriguing combination.

Alegreya + Lato

Alegreya / Lato

Alegreya is a font without no pretense about its personality; what you see is what you get. On the other side, Lato could be champion of all-purpose fonts in Google’s library. Together they make for a combination that is fun, easy to read, and pragmatic.

This combination is great for small local businesses like cafes, or professionals who want to suggest a warm feeling to their clients’ design projects.

Fjalla One + Cantarell

Fjalla One / Cantarell

Maybe it’s not one of the most versatile fonts, but Fjalla One creates headlines that demand attention. Small or large, lowercase or all caps, those letters are hypnotic no matter what you do with them. Similarly, Cantarell has a charm that seems to attract the same attention that Fjalla One draws for headlines.

This pairing works extremely well for blogs, landing pages or anything else that includes long bodies of text that needs noticeable subheadings to break up content.

Roboto Condensed + Roboto

Roboto Condensed / Roboto

The Roboto font-family is extremely versatile, having many font weights, there’s practically no limitation to what the font could be used for. Modern and geometric, yet somehow friendly and dependable, Roboto is an exceed in terms of forms and functions.

Here’s another pairing that you could use. While Roboto works for just about anything, but it would work particularly for tech startups, modern small businesses, or any type of brand that looks into the future.

Amatic SC + Josefin Sans

Amatic SC / Josefin Sans

This is more for people with artistic inclinations. Obviously, the combination won’t work for everyone, but the bizarre nature of both Amatic SC and Josefin Sans create something that for sure will stand out, as long as you don’t overdo it.

If you’re a fun-spirited artist, musician or entertainer, you could use this pairing to capture your unique personality. Depending on the niche, tone, and topics, this combination could also work for a blog.

Oswald + Droid Serif

Oswald / Droid Serif

Regardless the font-weight or use of caps, Oswald is a great font for headlines. Its condensed nature helps it grab attention and pop, but it also makes for a pleasant text, if you use it as your main body’s font. On the other side, Droid Serif has a classic look, similar to Garamond. Used properly, this serif font can bring a nice elegance to your professional appearance.

The versatility of Oswald and the timelessness of Droid Serif make this combination great for professionals dealing with high-end clientele or for product descriptions where the text is important to emphasize a premium quality.

Unica One + Vollkorn

Unica One / Vollkorn

Unica One can be pretty funky on its own, but when used as all caps it becomes a headline that is all business. Vollkorn is a font reminiscent of classical literature. Contemporary and impactful, when they are used in this combination, somehow the two of them work amazingly together.

Archivo Black + Tenor Sans

Archivo Black / Tenor Sans

Archivo Black was designed to meet the intensive needs of print and digital platforms. Originally created for headlines and highlights, this font is ideal for high-geared press work.

On the other hand, Tenor Sans has as purpose to aid page body text setting. Because of its legible characters, this font gives an elegant and relaxed feel and it can also be applied to headlines. Combining these two fonts, you will have a highly legible and well-crafted typography that’s a recipe for high-performance typesetting.

Pathway Gothic One + Cardo

Pathway Gothic One / Cardo

Cardo is a large font perfect for linguists, classicists, medieval specialists and biblical scholars.  It is largely used for documentation and other extensive publications. It offers a variety of punctuation techniques, text figures, and ligatures.

Pathway Gothic One is a stylish font with an outlandish compressed design. It is an attractive choice among typesetting and typography experts. The result of combining these two fonts is nothing short of amazing.

Six Caps + Archivo Narrow

Six Caps / Archivo Narrow

Six Caps is a highly condensed and tight display font. It is a stripped down and normalized version of classic grotesque display letterforms.

Archivo Narrow was designed to be used simultaneously in print and digital platforms and it was originally created for highlights and headlines. The technical and aesthetic characteristics of the font are both crafted for high-performance typography.

With a warm and modern feeling, the combination works perfectly for design projects related to the entertainment industry.

Oswald + Open Sans

Oswald / Open Sans

Here again Open Sans. This humanist sans serif typeface was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Regardless the font-weight or use of caps, Oswald is great for headlines, so pairing them will bring you the timeless feeling of elegance and refinement.

Poppins + Sintony

Poppins / Sintony

Sintony is a modern sans serif typeface, drawn with a slightly square structure and smooth stroke modulation. It’s great for long passages of text, providing any text with a calm and clear feeling.

On the other side, Poppins is one of the newcomers to the long tradition of the geometric sans serif fonts. These typefaces have been a popular design tool ever since these actors took to the world’s stage.

The combination works perfectly and can serve almost any business, blog, landing page, or web app.

 

 

 

 

 

 

 

 

 

Read More at 15 Great Google Font Combinations For Your Next Project Design

from Web Design Ledger https://webdesignledger.com/15-great-google-font-combinations-for-your-next-project-design/

How to Engage With Your Social Media Followers Quickly and Authentically

How do you feel when people comment on your social media posts?

Awesome, right?

A comment is or some form of engagement is usually a sign that people love your social media content. And it’s important to reciprocate and respond to these interactions.

But at the same time, engaging with your followers can be time-consuming. If you are a solo social media manager or a small business owner, you know you don’t have the whole day to engage with your followers.

So how can you minimize the time it takes to engage with your followers and still be authentic at the same time?

In this post, we’ll share the tactics and tools we use to engage with our amazing social media followers quickly and authentically. 

How to Engage With Your Social Media Followers Quickly and Authentically

5 creative types of replies you can use

If you have been replying to comments and mentions with a thank you, that’s a great first step. But it can be easy to fall into the habit of using a few standard replies. I’m definitely guilty of that!

There are many ways you can spice up your replies, show your brand’s personality, and delight your followers. Here are some that I like:

1. Questions

//platform.twitter.com/widgets.js

Instead of a simple “Thank you”, I love to engage with the person further and continue the discussion. A great method is to ask for her or his opinions on the topic.

For example, if someone commented on your social media post that links to a blog post, you could ask the following questions:

  • What is your favorite part of the blog post?
  • What’s your main takeaway from the blog post?
  • Do you agree with the idea mentioned in the blog post?
  • How has your experience with (a strategy or tool) been like?
  • Have you tried any of the tips in the blog post before? If yes, how did it go?

If they reply to your questions, that’s awesome! You can continue the conversation and build a good relationship with them.

2. Emojis

Emojis in replies

The easiest way to make your replies a little more fun is to include emojis. 🙌

As emojis become part of the social media language, most people are used to seeing and using emojis in their social media posts and comments.

It is also an efficient way to convey your tone and emotions in your replies. Unlike talking face-to-face or on the phone, it’s not easy for your followers to pick up your tone and emotions in a text reply. But with a happy emoji such as 😄, your followers would know instantly that you’re smiling while replying.

Both Mac and Windows have a shortcut for adding emojis. If you’re on a Mac, an emoji app that I would recommend is Rocket. It allows you to quickly type emojis by starting with a colon (:). Here’s a demo from the website:

Rocket demo

3. Images

//platform.twitter.com/widgets.js

Sometimes, the fastest and easiest way to show or explain something on social media is to use an image — especially on Twitter where you have only 140 characters.

We found that images are generally best for answering support questions where we have to show or point to something.

Tools like CloudApp, Nimbus, and Droplr (which we’ll discuss below) allow you to add annotations to your images, making your explanation clearer.

4. GIFs

//platform.twitter.com/widgets.js

Using GIFs is our favorite way of thanking people who shared our content, gave us a shout out, and more.

With the new GIF button on Twitter and Facebook, you can easily find and add a GIF to your replies.

Twitter and Facebook GIF button

If you would like to create your own GIFs, here’s our guide on how to create your own GIFs in minutes.

5. Videos

//platform.twitter.com/widgets.js

In 2015, the User Happiness team at Medium did a #AskMedium campaign where they answered questions with video replies. And their followers loved it!

In a blog post about Twitter’s video feature, Gary Vaynerchuck explained why video replies are great for engagement:

It takes me nine to twelve seconds to make a video and reply, but those extra seconds hold a lot of meaning. Not to mention it’s more personal, visual, and we are living in a world where the visual is often regarded as a better engagement than the written.

It’s easy to Like a comment or reply with “Thank you!”. Recording a video reply — even a short one — takes a little more effort, which shows your followers how much you care about them.

Section separator

6 ways to save time while engaging with your followers

While engaging with your followers is important, you likely also have many other important things to do, such as creating content, planning, or running your business.

Here are six strategies to help you save time while you engage with your followers.

1. Craft your replies to common comments in advance

Thanks for sharing this informative video!

How do you work as a social media team of one?

Do you have any tips for growing an Instagram account?

These are some of the common comments we get, and you likely have yours.

Preparing the answers to these common comments and questions can help you reply faster as you don’t have to think on your feet.

I would recommend coming up with a few variations so that you aren’t always replying with the same phrases. For example, instead of saying “Thanks for reading our blog post!”, you could also say the following:

  • Yay! Thanks for reading this! (GIF)
  • You rock for reading our blog post! 🙌
  • Thank you for checking it out! Will you be trying any of the tips mentioned?
  • Thanks! Have you tried any of the tactics before? It’ll be great to hear how it went for you!

Variations of replies

2. Have a handy list of GIFs, emojis, and more

Besides searching for GIFs on Twitter and Facebook, I have a folder of my favorite GIFs for various types of replies. This way, I can grab and use them quickly without having to search. (There have been times when I was looking for a particular GIF and just couldn’t find it through search).

Here are some of my favorites:

Aww, thank you:

http://giphy.com/embed/NjjvZdmoVhgrK

You’re welcome:

http://giphy.com/embed/3oEduNDk23BaPKTVT2

Awesome:

http://giphy.com/embed/dkGhBWE3SyzXW

Excited:

http://giphy.com/embed/IxKt9HOM1mI80

You could download your favorite GIFs into an easily-accessible folder so that you can grab one quickly whenever you are replying to comments on your social media posts.

To download a GIF from GIPHY, click on “Download” on the right of the GIF and select the file type you want.

Download GIF on GIPHY

You could do the same for commonly-used screenshots and videos and also create a list of your favorite emojis in an Evernote note (or your preferred note-taking app) for quick access.

3. Use productivity tools

Using tools is another great way to help you reply your followers faster. Here are a few tools that we use:

Text Expander: Instantly insert snippets of text

Text Expander

With Text Expander, you can quickly type commonly-used phrases with just a few characters. For example, instead of typing “Thank you for sharing this post”, you could type “tks1” and Text Expander would automatically expand it.

If you have come up with a list of replies according to tip 1 above, you could add them to this app. You can customize the abbreviation for each of your snippets.

Other tools like Text Expander: Alfred, Typinator, and Phrase Express

CloudApp: Quickly create & share GIFs, annotated screenshots, and more

CloudApp

With CloudApp, you can capture anything on your screen as an image, GIF, or video in just seconds. You can even record a video of yourself — which is great for creating video replies!

CloudApp will automatically add a link to your file to your clipboard. You can then paste it into your reply or download the file and add it to your reply.

What I love about CloudApp is that I can access its features by just hitting a few keys on my keyboard.

  • Cmd/Alt + Shift + 5: Take a screenshot
  • Cmd/Alt + Shift + a: Take a screenshot and add annotations
  • Cmd/Alt + Shift + 6: Take a screen recording (as a GIF or HD video)
  • Cmd/Alt + Shift + 8: Record a video with your computer’s camera

Other tools like CloudApp: Nimbus, Droplr, and Dropbox

4. Use a social media engagement tool

Our top tip for engaging with social media followers quickly is to use a tool that’s built specifically for social media engagement.

Instead of having to log in to each social media platform and open each notification in a new tab, you can efficiently reply to comments and mentions from a single place.

Our favorite social media engagement tool is Buffer Reply.

Buffer Reply

With Buffer Reply, you can have all your Twitter, Facebook, and Instagram conversations in a single inbox. It works even better if you are in a team as you can respond to conversations together.

There are also many other social media engagement tools out there, such as Facebook’s unified inbox, Hootsuite, and TweetDeck.

5. Use automation to assist you

This is where a social media engagement tool can be super helpful. For example, we set up automation rules with Buffer Reply, such as the following, so that we can respond to social media conversations as quickly as possible.

  • Filter out spam and automated tweets and automatically close those conversations – so that we can focus on those that require a reply
  • Move Facebook and Instagram comments into a separate folder – so that Brian Peters, who manages our Facebook Page and Instagram account, can focus on them
  • Move tweets with our support hashtag, #BufferSupport, into a separate folder – so that our Customer Advocates can reply to them as soon as possible

Automation tools like Zapier and IFTTT can also be useful here. The way they work is that an activity in an app will trigger another activity in another app. For example, if you want to reply as soon as someone mentions your brand on Twitter, you could use Zapier to send any Twitter mentions into your Slack.

Zapier automation

Here are more social media engagement and monitoring automation by Zapier.

6. Schedule time to engage

It’s great to jump onto any comments immediately and give a prompt reply. If it doesn’t disrupt to your workflow, you should probably keep it up!

But for many of us who wear multiple hats, constantly stopping our work to reply to a comment can affect our productivity (unless your main role is to reply and help customers on social media).

One thing that Brian, who manages our social media profiles, do is this: he schedules two 30-minutes time blocks every day to respond and engage with our community. Here’s how engaging with our community fits into his morning schedule:

Brian Peter's schedule

Section separator

How do you engage with your followers?

Engaging with your followers is a great way to build your brand. While the process can sometimes be time-consuming, there are tactics and tools that can help to minimize the time it takes for you to engage with your followers while staying authentic:

  • Craft your replies to common comments in advance
  • Have a handy list of GIFs, emojis, and more
  • Use productivity tools like TextExpander
  • Use a social media engagement tool
  • Use automation to assist you
  • Schedule time to engage

I would also love to learn from you. How do you engage with your followers? What tips do you have for those who want to minimize the time it takes to engage with their followers? 

Image credit: Unsplash

from Social https://blog.bufferapp.com/engage-quickly-authentically

35 Design Jokes That Will Make You Laugh

Have you ever had one of those bad days when it seems that everything is crashing around you? Fatigue, stress, nerves, tight deadlines or a difficult client often makes us want to escape. Regardless of the jobs we have, we are all human and we need from time to time a bit of relaxation to change our mood. This is where design jokes come along. It not only helps us overcome the difficult moments but also reload our batteries and focus on the projects we have to do. There are many ways to get ahead of the difficult moments: some of us listen to music, others do sports, others go for a walk, or others just dream eyes open J. But I think the simplest and easiest way to change our mood (or not even get into the dark and cold cave of the bad mood) is, well, to laugh.
😄

As the saying goes, a day without laughter is a day wasted! And well, once again, we all need a good laugh to break up the ho-hum and the stress of everyday life.

Cheer up with these 35 funny design jokes that will definitely make you laugh! I selected some really funny jokes turned into images, cartoons, memes, photos, posters, drawings and many other funny images. All of them are about subjects such as Photoshop, designer school, designer work, freelancing, fonts, clients, icons, creative process, and so on!

Check them out and enjoy!

Designers vs regular people

Some people say the graphic designers are extremely complicated human beings. Let’s take a look at this real proof of how they perceive the colors.

Photoshop always works

I don’t know what’s in the mind of this patient, but for sure, he would like the surgeon to be as good as the graphic designer.

Gotcha!

That delightful moment when you get the invoice from your web designer :). Some pills against heart attack, please!

Why Photoshop is more powerful than Sketch

It could be a good thing if the designer knows what he is doing. And it seems is for free, so… I would expect a lot of people to park there :).

What’s your ideal client?

You know the life of a graphic designer is pretty hard, but… you can keep dreaming, right?

How to piss the Rock

Relax, this is almost the regular conversation between a graphic designer and his client, especially when the last one doesn’t know what’s all about!

Thanks to the Courier, we have different fonts

Sometimes, the regular people ask themselves why we love so much to be a graphic designer….. conferring character to the fonts is just one of the reasons.

How web designers ask for help

Maybe you should think better if you have the crazy idea of web designer from drowning. Unless you are not a web designer also, God knows what you could understand!

The difference between doctors and web designers

Thankfully, the doctors are not treated like web designers. Otherwise, we would have just designers and no doctors :).

What’s missing here?

Life isn’t always #000000 and #FFFFFF…. even if we would want this. Does someone see the missing of the gray area?

Comic Sans walks into a bar….

Even if the characters have a modern twist here….. does someone see the picture of a classic western?

Font guide

I might be taught, but I just hope you’ll never follow this guide when you’ll choose the font for your next design project.

The Little Mermaid

If the Little Mermaid would have been a font…. Probably she would have looked like this. Fortunately, she’s just a character of Hans Christian Andersen’s imagination and a beautiful story. Let’s stay to the origins. 🙂

Corporate graphic design guide

Maybe you know this process… Maybe you experience this process… But don’t be sad, you are not alone :(.

Did you know?????

….. the most regular people don’t have any idea what’s going on if you speak Klingon with them? Please repeat it in English! Please….

How people see the design

Do you see the process here? Wow! This is actually happening! Don’t tell me I haven’t warned you!

Self-discipline according to web designers

I know the web designers could be the hardest workers on the planet, but…. Do you need a time management app? An efficient one?

There are always two sides of a coin

 

The most important part is to find the balance between both of them…. Can you see the picture???

The many emotions of a programmer

Like all of us, the programmers are also people. They live their emotions like all people. So, do not wonder why their invoices are so big. Just see what happens to them after they complete a project…

When a client says “We love your style”……

…. You could expect something like this. Don’t tell me I haven’t warned you! Just 1 question: do you think it could be better NOT to like your style???

Starting another side project

Just remember to keep the track of them, even if this could be a daunting task. In the end, you don’t want your projects to look like a war field, do you?

This is the eternal question….

For civilians, it’s a matter of imagination…. But…. does the equation make sense to you? Maybe someone can explain it to us, novices :).

Sex and design

From time to time, we should go back to the basics and listen to the advice of the wisest ones than us. This is one of those situations…..

Don’t use that tone with me!

The designers always say the colors have a voice and express a message. But….. can you imagine a real conversation between them? This could be an option :).

Make the logo bigger

….. But, please keep it in your mind that it should fit somewhere….. on print…. or in some different screen sizes….

Can you turn this around…

…. so, we can see more of the front? Again, a very-often heard question…. This is happening when the clients don’t know Photoshop is a design software, not a cloning or a 3D printing one :).

The designer has many faces…

… I’m sure you know this. Just pick how many you want and tell us which are yours :).

The creative process

You shouldn’t believe what you hear: the creative process is nice, smooth and you have time for everything. Rather, it looks like here :).

The real life of a graphic designer

Never, but never…. do not take into account what your friends think you do. It might be a huge difference.

Every designer in this world knows this

I’m sure you have been there with at least one of your client. But here’s the tip: save just the last two files and maybe you’ll not suffer anymore.

This is how they did it

Back to the origins…. Does someone remember how to do some handcraft work?

We are designers, not tools

This is a global message for clients around the world who think the designers are just some tools ready to execute their weird and ugly ideas. We don’t have any problems with the screwdrivers.

The Unforgiven

And now? What’s next? Or even better: what’s the reward?

The best endorser

Sometimes, a barter could be a smart choice. Especially when your client is Santa Clause. 🙂

Why we call it italic

This is what italic looks like in real life. Does anyone have any doubt?

Let us know which one of these designer jokes you liked most. Do you know more jokes? Don’t be shy – let us know in the comments!

Read More at 35 Design Jokes That Will Make You Laugh

from Web Design Ledger https://webdesignledger.com/35-design-jokes-will-make-you-laugh/

The Ideal Cover Photo Size for Each of the Major Social Media Platforms

One of the first few things people see when they visit your social media profiles is your cover photo.

Whether it’s your Facebook Page, LinkedIn Company Page, or YouTube channel, your cover photo is the biggest image on the page. And people will see your cover photo even before they see any of your posts.

So how do you make your cover photo show up the exact way you want it to be?

One of the key factors is the size. Without the correct dimensions (width and height), your cover photo might be cropped to fit the space available and people will miss the important details on your photo.

While there isn’t a one-size-fits-all cover photo size for all the social media platforms, the information is out there.

We’ve collected all the answers here so that you can have a single point of reference for all cover photo sizes.

The Ideal Cover Photo Size for Each of the Major Social Media Platforms

The best cover photo size for all major social media platform

Some social media platforms display cover photos slightly different on the desktop and on mobile. But in general, here are the ideal cover photo sizes for the platforms with a cover photo.

(Feel free to click on a social media platform to see more details for that particular platform.)

Facebook – 820px x 462px (Profile, Page, and Group), 820px by 465px (Page video), 1920px by 1080px (Event)

LinkedIn – 1584px x 396px (Profile), 1536px x 768px (Company Page)

YouTube – 2560px x 1440px

Twitter – 1,500px x 500px

Google+ – 1600px x 900px (Profile and Page), 368px x 207px (Collection and community)

Tumblr – 1600px x 900px

If you spot an error or an outdated information, I’m be grateful if you could let me know in the comments section below. Thanks!

Section separator

Ideal cover photo size for Facebook

Facebook profile cover photo – 820px x 462px

Facebook profile cover photo

The ideal size for your Facebook (personal) profile cover photo is 820 pixels wide by 462 pixels tall. According to Facebook, your cover photo has to be at least 720 pixels wide.

There are four important details to take note of when creating a cover photo for your Facebook profile:

1. Your cover photo will look slightly different on mobile. 

On mobile, Facebook shows your cover photo at a different dimension — slightly taller or narrower. Facebook will either show more of your image if your image is tall enough or crop the sides away.

From my tests, 820 pixels wide by 462 pixels tall is an ideal size for both desktop and mobile. Facebook will show the blue section on the desktop and both the green and blue sections on mobile.

Facebook cover photo template

You can grab a Photoshop file of this template here.

2. You can reposition your cover photo on the desktop.

In case you have any important details at the top or bottom of your cover photo and you worry that Facebook will crop them away on the desktop, Facebook allows you to reposition your cover photo by dragging it up or down.

Drag Facebook profile cover photo

3. Your profile photo, your name, and a few buttons overlay your cover photo.

As you might have noticed in the example above, several things overlay the cover photo. You might want to take this into consideration when choosing or creating your cover photo. On mobile, your profile photo will overlay your cover photo in the middle.

Facebook profile cover photo on mobile

A good rule-of-thumb is to avoid having any important details in the lower half of your cover photo that might be hidden behind your profile photo.

4. Facebook shows only about half of your cover photo when someone lands on your profile.

When someone navigates to your Facebook profile, Facebook would not show your entire cover photo immediately. She or he has to scroll up a little to see the full image.

Facebook profile cover photo

To encourage people to scroll up and check out your full cover photo, you might want to have something attractive enough in the bottom-half of your cover photo.

Facebook Page cover photo – 820px x 462px

Facebook Page cover photo

We have a post that goes into more detail about the Facebook Page cover photo. Here are some of the key points:

1. Unlike your profile cover photo, nothing overlays your Facebook Page cover photo.

This is great because you don’t have to worry about anything blocking important details on your cover photo.

2. Like your profile cover photo, your Facebook Page cover photo will look slightly different on mobile. 

According to Facebook, your Facebook Page cover photo displays at 820 pixels wide by 312 pixels tall on desktops and 640 pixels wide by 360 pixels tall on mobile.

From my tests, I found that it’s best to use an image that is 820 pixels wide by 462 pixels tall and to have what you want to show up on the desktop within a 820-pixels wide-by-312-pixels tall box (or the blue section).

Facebook cover photo on desktop and mobile

You can grab a template of the ideal Facebook Page cover photo here.

3. Use a PNG file for better resolution.

According to Facebook, if your cover photo has your logo or text, your logo or text might show up better when you use a PNG file.

Facebook Page cover video – 820px by 465px

Buffer Facebook cover video

Yes! You can use a video for your cover photo. Isn’t that amazing?

Here are the recommendations by Facebook for your Facebook Page cover video:

  • Your video should be at least 820 pixels wide by 312 pixels tall. For best results, upload a cover video that’s 820 pixels wide and 456 pixels tall.
  • Your video should be between 20 and 90 seconds.

As for the video file format, I believe MP4 or MOV is recommended; though any of the formats on this list should work, too.

Facebook Group cover photo – 820px x 462px

Facebook Group cover photo

The Facebook Group cover photo is almost identical to the Facebook Page cover photo — just a little shorter.

The ideal cover photo size is 820 pixels wide by 462 pixels tall (similar to the Facebook Page cover photo). But the area visible on the desktop is 820 pixels wide by 250 pixels tall (slightly shorter than the Facebook Page cover photo). Your photo has to be at least 400 pixels wide and 150 pixels tall, according to Facebook.

Feel free to grab a template of the ideal Facebook Group cover photo here.

One thing to bear in mind is that while nothing overlays your Facebook Group cover photo on the desktop, your Facebook Group name will overlay your cover photo on mobile.

Facebook Group cover photo on mobile

Another thing you might want to think about is how your cover photo shows up in the Groups section of the Facebook mobile app.

Facebook Groups on mobile app

According to Marie Page, it’s best to have your copy in the center of your cover photo for the copy to show up nicely.

Facebook event photo – 1920px by 1080px

Facebook event photo

The recommended size for the event photo, according to Facebook, is 1920 pixels wide by 1080 pixels tall (a 16:9 aspect ratio).

For a public event, anyone who views the event can see the event photo. For a private event, only people who are invited to the event can see the event photo.

 

Section separator

Ideal cover photo size for LinkedIn

LinkedIn profile background photo – 1584px x 396px

LinkedIn background photo

1. The ideal aspect ratio is 4:1.

Your LinkedIn profile background photo is displayed at a 4:1 aspect ratio. LinkedIn recommends using photos that are 1584 pixels wide and 396 pixels tall.

If your background photo looks blurry after uploading, LinkedIn has some suggestions for you:

If your background image appears blurry or pixelated, please choose an image with a file size as close to the maximum as possible [8MB], as images with larger file sizes typically look better. Photos will also look better than images with logos. If your image is still blurry or pixelated, you may want to run it through a compression tool such as Trimage for Windows or ImageOptim for Mac before uploading it to LinkedIn.

2. LinkedIn will crop your background photo on mobile.

In its mobile app, LinkedIn will crop away the sides of your background photo, as seen in the screenshot below.

LinkedIn profile background photo on mobile

LinkedIn Company Page cover photo – 1536px x 768px

LinkedIn Company Page background photo

1. LinkedIn will crop your cover photo on the desktop.

While LinkedIn recommends the dimensions of 1536 pixels wide by 768 pixels tall, it seems to crop away the top and bottom of the photo on the desktop, as seen in the screenshot above.

So it might be best to keep the important aspects of your photo to the middle of the photo if possible.

(The minimum dimensions required by LinkedIn is 1192 pixels tall by 220 pixels wide.)

2. LinkedIn will show a bigger cover photo on mobile.

The reason LinkedIn recommends those dimensions might be because it displays a bigger cover photo in the mobile app.

LinkedIn Company Page background photo on mobile

Section separator

Ideal channel art size for YouTube

2560px x 1440px

YouTube channel art

1. Your channel art looks differently on the desktop, mobile, and TV.

The cover photo for your YouTube channel is known as the channel art.

Because YouTube can be viewed on a desktop, mobile, and even TV, your channel art will be displayed differently on different devices. The ideal dimensions that YouTube recommends are 2560 pixels wide by 1440 pixels tall.

Here are a few more details to take note of:

  • Minimum dimension for upload: 2048 x 1152 px.
  • Minimum safe area for text and logos: 1546 x 423 px. Larger images may get cropped on certain views or devices.
  • Maximum width: 2560 x 423 px. This means that the “safe area” is always visible regardless of screen size. The areas to each side of the channel art are visible or cropped depending on browser size.
  • File size: 4MB or smaller.

YouTube has created an awesome channel art template that you can use to see how your channel art will look like on various devices.

YouTube channel art template

The template comes in a Photoshop file and a Fireworks file so you can overlay it on your image to get a sense of how your image will be cropped and displayed. Here’s an example that Ash created previously:

YouTube channel art template example

2. Be mindful of your profile image and channel links.

When you are creating your channel art, you might want to avoid having any important details in the upper-left and lower-right corners of your channel art.

That’s because your profile image and channel links will be placed on top of your channel art when viewed on the desktop and mobile.

Here’s how your channel art will look like on the desktop and mobile with your profile image:

YouTube channel art overlay

YouTube channel art overlay on mobile

For tips on optimizing your YouTube channel, you might like our guide on creating a YouTube channel.

Section separator

Ideal header photo size for Twitter

1500px x 500px

Twitter header photo

Twitter recommends that your header photo be 1500 pixels wide by 500 pixels tall — much wider than it is tall, compared to most cover photos.

It’ll be great to use an image that is wide enough to prevent Twitter from stretching the image and making it blurry.

1. Your profile photo overlays your header photo.

Just like your Facebook profile, your Twitter profile photo will cover a tiny part of your header photo. It’s great to be mindful of this so that your profile photo doesn’t cover anything important in your header photo.

2. Twitter allows you to reposition and scale your image.

Something nice about Twitter’s header photo is that Twitter allows you to reposition and scale the photo you uploaded to your liking.

Twitter header photo adjustments

3. Your header photo is slightly bigger on mobile.

On mobile, Twitter seems to show a little more of your photo on the top and bottom if it is tall enough. (Notice how you can see my shoes in the mobile header photo but not in the desktop header photo.)

Twitter header photo on mobile

If your header photo is 500 pixels tall (or shorter), Twitter might scale your photo up and crop a little of the sides away.

Section separator

Ideal cover photo size for Google+

Google+ profile and page cover photo – 1600px x 900px

Google+ cover photo

Google+ cover photos seem to be displayed at 1084 pixels wide and 610 pixels tall, which is very close to the aspect ratio of 16:9. To ensure that your cover photo looks clear on your profile, it might be best to use an image that is 1600 pixels wide and 900 pixels tall.

1. Keep the important details in the middle of the cover photo.

Here’s something amazing about Google+ cover photos: they are responsive. Your cover photo will automatically crop as you scroll down the page so that the middle of the cover photo will always be in focus.

Google+ cover photo scroll

2. Google+ lets you crop your image according to its recommended dimensions.

When you upload your cover photo, Google+ allows you to edit the crop of the image if it doesn’t fit the aspect ratio of 16:9.

Google+ cover photo adjustments

3. Your cover photo looks and behaves the same on mobile.

On mobile, the cover photo seems to appear at the same aspect ratio (16:9) without any crop. It also automatically crops as you scroll down.

Google+ cover photo on mobile

Google+ collection and community cover photo – 368px x 207px

Google+ collection and community cover photo

For Google+ collections and communities, your cover photo will show up as a small image in the upper-left corner, at 368 pixels wide by 207 pixels tall (which is a 16:9 aspect ratio again).

On mobile, your cover photo will show up with the same aspect ratio without any crop.

Google+ collection and community cover photo on mobile

Section separator

Ideal header image size for Tumblr

1600px x 900px

Tumblr header image

1. Most people won’t see your Tumblr header image.

Tumblr is an interesting case: Unless you are using the official Tumblr blog theme, people will only see your header image when they view your blog within Tumblr itself — when your blog shows up in their search result (screenshot above) or when they hover over your profile image (screenshot below).

Tumblr dashboard popover

According to Morgana Johnson, Tumblr will display your header image at various sizes on the desktop and on mobile with a fixed aspect ratio of 16:9.

2. There might not be an ideal size.

If you are using the official Tumblr blog theme, there might not be an ideal size for your header image. I noticed that the size of the header image and the crop change as I change the size of the browser.

Tumblr header image sizes

From my tests, it seems best to use an image with an aspect ratio of 16:9 that has the important information in the middle of the image.

Section separator

Over to you

I hope you found this resource useful for creating the perfect cover photo for your social media profiles.

Do you have any tips and tricks for creating cover photos? It’ll be great to hear from you in the comments section below!

Finally, I would love to keep this resource updated. If you spot any outdated information (or mistakes), would you be up for letting me know in the comments section below, too? Thank you!

Image credit: UnsplashMark Zuckerberg’s Facebook profile, TED YouTube channelThe Late Late Show with James Corden YouTube Channel, Social Media Examiner Google+ Page, Our Universe Google+ collection, Tumblr

from Social https://blog.bufferapp.com/ideal-cover-photo-size

The infamous Brexit Bus is now being used to promote a fintech startup


Remember the Brexit Bus? During the fraught campaigning surrounding the UK’s referendum on its EU-membership, the Vote Leave campaign hired a bus, and plastered on it the words “We send the EU £350 million a week. Let’s fund our NHS instead.” They didn’t realize it at the time, but this would come to symbolize the fact-free nature of the Leave campaign. For starters, there was no £350 million; when you subtract the UK’s rebate, the real figure is much lower. And courtesy of higher costs following the post-Brexit drop in the pound, and the troubling matter of the “divorce bill,”…

This story continues at The Next Web

from UK – The Next Web https://thenextweb.com/money/2017/09/25/the-infamous-brexit-bus-is-now-being-used-to-promote-a-fintech-startup/