Loading...

Follow Webdesigner Depot - Web Design Blog on Feedspot

Continue with Google
Continue with Facebook
or

Valid

For those too young to remember, the Browser Wars entailed a tech rush by, among others, Netscape and Microsoft, resulting in useless features being implemented because they were fast to bolt-on, and useful features being rushed because they were hard. After the Browser Wars, the internet entered an era of stability as the last vestiges of the old web were mercilessly hunted down and destroyed by Google.

Chrome and Chromium-based browsers have the vast majority of the market share, and with the new version of Edge being based on Chromium, only Firefox is truly left to compete. We’re already seeing the effects of this, and they’re not ideal.

Get ready, this one is going to have a lot of links, and they’re important…

The Saga of <std-toast>

On June 12th, 2019, Google developers asked for a review of a proposed new element for HTML. Specifically, they asked the Web Platform Incubator Community Group (WICG), a community dedicated to fostering open discussion about the future of the Internet as a platform. It’s run by the W3C, and generally, it’s exactly where you should be asking about potential changes to the actual foundation of the Internet.

On the same day, however, they announced their intent to include the element in the Blink rendering engine. Now, that doesn’t mean it’s going to happen any time soon, but it caused some significant consternation.

The Basic Idea

Well first, let’s talk about the element itself. It’s a pop-up notification. Literally, it’s a notification that pops up from the bottom of your screen, like toast… from a toaster, or from the top, like toast from an upside-down toaster [feel free to insert a joke about Australia here].

This notification element can show up and disappear on its own (the term used is “auto-expiring”, or it can require interaction to send it away. It’s basically an HTML element devoted just to “we use cookies” notifications.

The basic HTML could be written like one of the following examples:

<std-toast>Hello world!</std-toast>
<std-toast><p>Hello world!</p></std-toast>
<std-toast>
  <p>Hello world!</p>
  <button>Click me!</button>
</std-toast>
<std-toast>
  <p>Hello world!</p>
  <a href="https://example.com/" >Click me!</button>
</std-toast>
The Problems with <std-toast>

I mean… besides the unfortunate acronym at the beginning of the tag? And the problem that actual toasters are not, in fact, a universal metaphor in Internet-having countries, as pointed out by the ever-brilliant Jen Simmons?

I believe new HTML elements should go through a standards process, be debated by multiple parties (not one), be useful to most websites (pave the cowpaths), and be written in language that makes sense for HTML, especially for folks who don’t speak English well. So no on this.

Jen Simmons

Ignoring those issues, it still requires JavaScript to work properly at all.

It’s additionally galling that toast is fundamentally an ephemeral UI element that is apart from page layout, and can’t work without JavaScript. Is there any other html element with those semantics? It’s a really odd precedent.

Matthew McEachen

An HTML element that requires JavaScript. I’ll say it one more time for the Google devs at the back: JavaScript breaks, and it breaks a lot more often than plain HTML/CSS.

Then, it’s just gimmicky as hell. I mean, it’s something that we can already make with existing technology, and implementing it into HTML doesn’t actually make it that much easier. Nor is it particularly useful outside of a very narrow use-case. All it does is make the web’s underlying technologies “more like apps”, and while that’s not strictly a bad thing, is that really all we want for the Internet?

<toast> makes no sense to me. It reminds me of <marquee>, <blink>, and all the other gimmicky tags from before we figured we should separate styling, behavior and markup.

Matteo Cargnelutti

An additional point: even marquee and blink didn’t need JavaScript to just work. They were awful in so many ways, but they ‘worked’ on their own.

The Development and Review Process

One common perception is that a couple of employees at Google had this idea, and decided to just throw it into their browser engine, figuring that everyone else would just go with it. As previously mentioned, the whole situation is highly reminiscent of the browser wars, when browser vendors came up with gimmicky proprietary elements in an effort to compete.

Timeline: initial commit to personal repo: May 24 comment by an editor of WHATWG HTML (also a Google employee): May 28 Intent to implement email: June 12 Request for TAG review: June 12 First mention in WICG: June 12

Dave Cramer

Web standardization according to Google? “Nobody outside my team has reviewed or approved of the explainer in my private repo, but if we implement and encourage devs to use it, surely our competitors will agree to implement it [because our market dominance determines compat]”.

Elika J Etemad

This has understandably upset people who very strongly believe in a community-driven approach to developing technologies as basic and open as HTML.

One of the benefits of standardization through W3C Working Groups is diversity of input. W3C requires the consideration of all feedback, requires consensus to move forward. The diversity of vendor perspectives considered matters, because different vendors have different values.

Elika J Etemad

There is a process. It’s quite formal and clear. It’s not new. It’s not a matter of personal preference, nor a “misunderstanding”. Not a “you say tomato I say tomato”.
https://www.w3.org/2005/10/Process-20051014/tr.html#cfi

Jen Simmons

Think of all the many HTML elements that were considered and rejected over the years — and we are supposed to be on-board with TOAST? Because a couple guys at Google decided they want it. And they can. So no to <footnote> <author> <publication-date> But yes to <toast> ???

Jen Simmons

Even people who generally like and support the idea of the std-toast element are unhappy with how it was presented to the community:

Look, I get the “Move fast! Break things!” attitude. And I think it is exactly right that Google should experiment with the web. We all should! And, again, I think that <toast> is probably a useful addition to HTML.
But the way Google has gone about introducing it to the world betrays a huge lack of empathy for the poor sods who have review standards, for other browsers, for users, and for the broader Web community.

Terence Eden

The Implications

Despite everything shady Google has ever pulled [please don’t kill our PageRank, thanks!], I’d honestly like to believe that this was the mistake of a few, rather than the beginning of Google dictating the direction of web design and development as a whole. But if it is, we have a whole new problem on our hands.

Google’s priority has been, is, and always will be making loads of money. And who can blame them? But if we don’t have competition between, not just browsers, but browser rendering engines, then a couple of random people at Google who haven’t necessarily thought things through will be able to drastically change the direction of the web pretty much whenever they like.

Look, I still generally like the things Google makes, but let’s be real: they don’t always make the best decisions. I could make a joke about Google+, here, or the even more ill-fated Google Buzz, but let’s have a look at a something that more directly impacts web designers and developers:

If Google were in charge of the Web Platform, we would not have CSS Grid Layout. With the personal exception of @tabatkins, Google did not believe in CSS Grid. Microsoft and Mozilla implemented their own, but it was Bloomberg who funded @igalia to code Blink’s implementation.

Elika J Etemad

Featured image via DepositPhotos.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

After months of extensive testing, the new design is a confident, and positive change for one of the web’s biggest names, albeit with some controversy that is bound to cause a ruckus. If you’d like to be among the first to have an opinion, you can opt-in right now, or Twitter will opt-in for you in the coming days, because this change is mandatory.

the new Twitter site is self-consciously dashboard-like

Twitter’s life began as a deliberately stripped down social network, in the same way that Google began as a stripped down search interface. Throughout its history, design changes seem to have been attempts to add features, without changing the core simplicity of its timeline UI.

The new Twitter design throws that strategy out of the window, with fundamental changes to the site. Where once there was the illusion of a simple news feed, the new Twitter site is self-consciously dashboard-like. Helped, in no small part, by the relocation of the menu from top horizontal, to left vertical.

The navigation change has been an opportunity – or more probably, a solution – to expose some of the features that have been introduced, but are rarely used outside of the mobile apps; the explore tab, bookmarks, and lists are all prioritized, and direct messages now have a dedicated space.

You’ll also find the introduction of not one, but two dark modes, which is presumably intended to increase eye-fatigue, ensuring you spend less time on the site ranting about the lack of an edit button.

there’s very little new here, other than a more app-like experience for users who prefer not to use an app

There is, frustratingly, still no edit button. Anyone who spends any time on Twitter will be aware that 50%+ of all tweets are instant replies, by the same account, correcting a typo in its original tweet. Of course people can’t be allowed to edit a tweet that’s already been liked or retweeted, but there’s no reason Twitter couldn’t strip likes and retweets from any edit.

Perhaps more frustrating is the fact that verification is still limited. Pop-stars, movie-stars, politicians, et al get a little blue badge, but you and I don’t. What this means is the platform is still essentially anonymous, and will continue to be plagued by bots, trolls, and spam. If Twitter is looking for a way to monetize its main product, paid verification with the option to auto-mute anyone not verified, would make Twitter more usable, more profitable, and just plain nicer overnight.

This design feels like a long-overdue update, delivering necessary breathing room to allow the introduction of as yet unseen features. However, there’s very little new here, other than a more app-like experience for users who prefer not to use an app.

Some might suggest that a company is entitled to update its site design any time it likes, but those people must not have witnessed the meltdown some users had the last time Twitter introduced a far less substantial tweak to its UI than this. Others might question whether anyone actually uses Twitter on desktop; isn’t that what cellphones and bathroom breaks were invented for?

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

It’s hard to stay focused this time of year. With vacations coming up (or having recently passed) it’s easy to get distracted from work-related tasks. For that reason, this month’s roundup is full of design tools plus a few design diversions that you can have fun with.

404 Illustrations

Have you ever wanted to create a cool 404 page but didn’t have the time or inspiration? 404 Illustrations takes all the work out of it for you with funky and trendy illustrations for lost website users. Each illustration comes with a cute description as well and they are free to use. The designers promise more illustrations in the future.

Spotlight

Spotlight is a lightbox gallery library that’s lightweight, easy to run, and has no dependencies. It literally runs from the download without additional JavaScript, HTML snippets, additional CSS resources, images or assets, and no additional handling of dynamic content.

Eva Design System

Eva is a free and open-source design system that’s adaptable to your needs and team. It works with Sketch and provides symbols and style configurations. The system allows you to design and code using a quick process that can eliminate repetitive work.

Screenzy

Screenzy is a tool for creating and editing screenshots quickly. Just paste an image or URL and use on-screen settings to adjust the image, add text or choose from one of 5 pre-set options.

Drag and Drop Sticky

Scott Kellum created a cool drag and drop sticky note element with no JavaScript. It works as a textarea element and as you move it around, technically you are just resizing a the textarea and the “note” follows.

Freezeframe.js

Freezeframe.js lets you pause animated gifs and then reanimate on a hover, mouse click, touch event, or another manual trigger. The new version of this tool no longer uses jQuery and functions thanks to modern JavaScript.

Space Shooter

Space Shooter is a fun pen by Andrew Rubin that’s a good distraction when you are trying to work through a design problem and a fun bit of inspiration. You can build something like this. Why not make a game? Fork it and play around.

Pika CDN

Pika CDN is made for packages written in ES Module syntax, that runs natively in browser. Use it to distribute more modern, unminified packages that uses a proprietary package builder, putting everything into a ready-to-import JavaScript file. The tool is free and a pro version is on the way. (Sign up to get notified when it is ready.)

Swipemix

Swipemix will help you design better layouts and collages on Instagram. It allows you to sequence images with easy templates in just a few minutes from an app on your iPhone.

Source Wireframe Kit

Source Wireframe Kit helps you prototype faster with more than 500 blocks that can be moved, combined, and adjusted into a complete design system. Everything is grouped into categories to help you work faster and you can use it with Sketch, Figma, Marvel, or Invision to bring prototypes to life.

Hubcap

Hubcap is a free screen recorder that works without installing any software. It works with Chrome or Firefox and allows you to record a screengrab and share it instantly. You can record up to five minutes and Hubcap will store if for up to 2 weeks at no cost.

Brutalism Web Kit

Brutalism Web Kit is a collection of artboards to jumpstart website projects using this design trend. It includes 70 styles and works with free tools including Google Fonts.

Ant Design UI Kit

Any Design UI Kit is a collection of components for Figma based on the React UI library. It includes 2,100 components, 630 icons, 140 customizable styles, and 43 screens, making it one of the biggest component inventories for Figma.

Anggada

Anggada looks like it could be inspired by the title characters in recent Aladdin movie release. It includes a full character set that’s most appropriate for display use. The demo version is free and the full font is available from the typeface designer.

Basier Mono

Basier Mono is a modern style monospaced typeface with a free and family (premium) download option with square and circular shapes. The typeface is also packed with cool alternates, fractions, and supports multiple languages.

Bright Salkiy

Bright Salkiy is a scrawling script with thin lines that has the look of an elegant signature. The free version is for personal use only and includes a full character and number set.

Cataclysmo

Cataclysmo is a bold, tall slab serif for display use. It includes an uppercase-only character set and numbers.

Nairi Amber

Nairi Amber includes a regular sans serif, italic sans serif, and script character set for personal use with the free version. Each character set in the family works well together with a wide stance and rounded letterforms. The script is somewhat more compact.

Rise of Kingdom

Rise of Kingdom is an uppercase serif typeface that would be a great display option. It has a somewhat whimsical feel with tall letterforms on the thin side.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Web Designers Create the Most Annoying UI Ever

Ad-Free Internet by Firefox

Creating the Perfect Color Palette for a Website

Menu (or not)

Web Design Color Trends for 2019

Site Design: The Atlas of Moons

The Twelfth Fourth

Bringing New CSS Techniques to Production

Design Principles are Dead

My Approach to On-Page SEO in 2019

How to Run a Small Social Network Site for your Friends

Google’s Taking Another Crack at Building a Social Network

It’s Never Going to Be Perfect, so Just Get it Done

No, not “everyone is a Designer”

Niice Insights

How We Used UI/UX to Confront the Climate Crisis

Canvas UI Kit: A UI Kit for your Growing Business – For Sketch & Figma

JavaScript Classes – A Friendly Introduction

Eva Design System: Deep Learning Color Generator

Awesome Stranger Things Fan Art

Why Information Architecture in UX Process is a Necessity

How to Build a Bulletproof Product Design Strategy

Google has a Fun Wimbledon Easter Egg You Can Play

You’re Getting Screwed on Amazon Prime Day

It’s Never Too Late to Be Successful and Happy

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The online community has been around since 2010 and is one of the top platforms where designers can share work, or shots, and get feedback.

The invite-only community is a showcase of portfolio projects and personal artwork for digital graphics and user interface design, illustrations, animations, and pretty much any other design work you can think of.

Dribbble Pros

If you want to be inspired, Dribbble is the place for you. There’s so much good work to browse through, comment on, and engage with. It’s a good mental distraction if you are working through a design problem of your own.

The community is huge and the company reports that the number of users nearly doubled last year. In 2018, designers uploaded 1.2 million shots, that got 35 million likes, and 1 million comments. Best estimates put the number of users at 4.5 million worldwide.

Everything about Dribbble has a community feel, for the time being, it’s very un-Facebook

Dribbble is more than just an online community. Dribbblers in different locations get together for meetups and design networking. They literally happen all over the world, or you can host one in your location. It makes the design-based peer network social IRL.

Everything about Dribbble has a community feel, for the time being, it’s very un-Facebook, even as it expands. It’s simple and authentic.

There’s something great about a design platform that is designed well. Every page is simple and stunning. Projects are easy to see, thanks to consistent previews. Usability is obvious. From the first login, everything about Dribbble is easy to understand, find, and explore.

You can get feedback from other designers. Feedback from your boss or clients or design team is great, but what if you want to know what a wider community thinks. This is the place to test out a design.

Dribbble has expanded to include job listings – real gigs from some reputable companies – and even mark your profile as available for hire. That allows others to seek you out. One the same note, you can sell designs and digital goods, which can be a nice supplemental income.

The theme of the site hasn’t changed since Day 1 and it’s cute and endearing. Basketball fans can appreciate it for sure.

Dribbble Cons

Dribbble can be a major distraction. There’s just so much to look at, and then there are the rebounds, which will have you asking if you really just spent 3 hours enhancing someone else’s original animation concept.

Uploads are somewhat limited. While Dribbble eliminated the 400-pixel by 300-pixel rule late last year (thank you!), the maximum size for uploads is 10 MB. You don’t have to use a specific aspect ratio, but will be asked to crop for the preview to maintain design consistency across the network. Plus, you can still upload downloadable versions if you like.

The invites. It seems like a cool idea and maybe it was in the beginning, but are invites really necessary 10 years later? If someone doesn’t play by the rules kick them out.

It can feel a little like a high-school popularity contest

It can feel a little like a high-school popularity contest. There are bloggers out there with tips for what time to share your shots to get the most likes. Seriously? No thanks.

Some days Dribbble seems bigger than the rookie designer just starting out. It’s totally cool that designers from Apple and Airbnb are posting, but it can also be intimidating. If you are new to the platform, or design in general, try not to compare. Do your thing, find your niche, and be you in the community.

Dribbble is not the best place to keep a portfolio, although it is getting better. You can, but it can be a little tough to explain and share. (Do you really want a potential employer to see all those comments or a project you were just experimenting with?) So, you’ll probably need Dribbble, plus another platform to host a portfolio.

There are little ads everywhere. Dribbble needs a revenue source to survive and thrive, but some people are turned off by it. (If you are one of those people, you can upgrade to a paid plan.)

If you really want all the features of the network, you have to pay. It can be worth it if you are using it to sell good or get work (or ads drive you crazy). Dribbble Pro is $12 per month or $60 annually.

I’m on Dribbble … Kind Of

My name is Carrie, and I am a Dribbble lurker.

I have been on Dribble almost since the beginning. And I haven’t posted anything. That doesn’t mean I don’t value it, I’ve been looking at other designer projects for years love to see what’s out there, but just don’t have time to do more.

For me, Dribbble is all about inspiration and anticipation. So many of the shots are glimpses into experiments in design and can even be a predictor of trends.

I have go-to designers that I like to peek in on, but mostly I like to browse

I have go-to designers that I like to peek in on, but mostly I like to browse. What’s been uploaded recently, what’s getting a lot of attention, is there a technique or aesthetic that’s starting to emerge frequently?

I’ll also admit to getting called out for my Dribbble lurker status. Can you be a “real designer” if you aren’t using the platform regularly? Am I washing an invitation by not creating new, and regular shots?

Whether you are on (and are a frequent contributor to) Dribbble or not has nothing to do with your status as a designer. It’s all about time, project needs, and whether that feedback is something you crave. It’s like almost any other social network. You get from it what you contribute.

So, if you have the time and want to be a Dribbbler, go for it. And if not, that’s OK, too. (Let’s not judge each other because of a peer network.)

Conclusion

There’s nothing wrong with trying to get that coveted Dribbble invite, although with so many designers on the platform, invites aren’t as hard to get as they once were.

If you have time and enjoy the interaction, Dribbble can be a good use of resources and effort. But it’s OK to lurk too.

Just play with it in moderation and don’t let comments or shots overwhelm you. When Dribbble stops being fun, you should probably move on to something else. If you haven’t joined yet, now might be the time to ask your favorite co-worker for an invite.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

It’s nearly 2020, and every eCommerce brand should be using key metrics to pinpoint advertising, boost sales and improve fulfillment. 

Emma Miller, Senior Editor at Bizzmark, calls metrics the “one thing that can make or break your online presence.” She goes on: “To succeed in the competitive online market, you need to set measurable goals, choose the right metrics to track, and analyze your online performance continuously.”

Making the Connection: Advertising Metrics

There are dozens of different advertising metrics you can track across many different channels and platforms. Some for search, others for social and still others for paid advertising. 

According to one guide from Klipfolio, setting up measurable marketing metrics can help you track digital marketing performance across SEO, social media growth and more: “With such a wide variety of channels being used, it’s important for marketing teams to actively track progress and performance in real-time with the right marketing metrics.” 

So which are the ‘right’ marketing metrics? These are the five we recommend eCommerce brands start with.  

  • Marketing Attribution: Identify where your traffic is coming from — organic search traffic or a paid ad? Are people browsing from a mobile or desktop device? 
  • Click-Through Rate: You’re getting your message out, but is it landing? Look at how often people click for emails, social campaigns, PCC, and more. 
  • Returning Visitors: Are you building a following or just getting people passing through? Returning visitors is a good indication that your marketing content is working — you’ll just need to make a few tweaks to boost actual conversion. 
  • Funnel Abandonment: Highlight where you can optimize based on where people are abandoning their journey. Was it on the second drip email? Once they reached the landing page?
Selling Your Brand: Storefront Metrics

Marketing and sales are more connected than ever before, so some of these sales metrics overlap with advertising metrics. Track these KPIs to see how well your storefront is doing once people land there.

  • Bounce Rate: How many people leave your site after just one page? If this number is high, you should rethink your website design and content to encourage visitors to stick around.
  • Customer Lifetime Value: Think of this as customer retention. Include: segmented revenue. The higher your purchase frequency and the larger your customer base, the more critical your LTV will be for your business to factor in future decisions.
  • Pageviews: Are you reaching the people you want to reach? Looking at pageviews relative to your other marketing metrics will give you an instant snapshot of effectiveness.
  • Cart Abandonment: You’ve reached your audience, brought them to your site, shown them your products, encouraged them to ‘add to cart’ — only for them to abandon before payment is processed. What went wrong? eCommerce brands often make the checkout process too difficult or tack on surprise shipping fees, causing customers to abandon ship. If your cart abandonment rate is high, it’s time to reassess your checkout and account creation process.
Bringing it Home: Shipping Metrics

Context: Your relationship with customers doesn’t end once you make a sale. How can you improve their experience through the last mile?

  • Inventory Accuracy: An ‘out of stock’ message is a good way to get customers to never come back to your store. Be sure that the stock you list online is reflective of your actual inventory.
  • On-time Delivery: Want great customer reviews? Fast and reliable delivery is on the top of everyone’s lists these days, so be sure to keep this number as high as possible. 
  • Return Rate: This one covers all of your bases, depending on the reason for the return. If the rate is high, dig into where these returns are coming from and how you can improve satisfaction from the jump.

As a bonus, look at Net Promoter Score as a good final indicator and relevant metric. NPS takes into account ad effectiveness, storefront engagement, and shipping satisfaction, bringing all three areas under one roof. 

Multichannel: Bringing Marketing, Storefront and Fulfillment Together 

With multichannel eCommerce, you can’t separate out marketing efforts from your sales or your inventory management from your sales. Your efficiency in marketing will affect the size of your sale, the size of your sale will affect your shipping costs, your shipping costs will affect your profitability, your profitability will affect your ad spend… you get the idea, right? 

They are all interconnected, and you should treat them as such. 

To keep things straight in multichannel eCommerce, you’ll need two things: a short list of critical KPIs for your eCommerce brand and a way to visualize how these metrics interplay, ultimately affecting your bottom line. You can use the metrics identified above as a starting point, and narrow them down based on what is most important to your brand. 

Changing your mindset to think of marketing, sales and fulfillment as part of the same entity is one thing. But actually bringing them under one roof is another.

Having the platforms separate doesn’t mean your metrics have to remain in a silo. You can use a profit analytics dashboard, for example, to bring together the most relevant metrics for advertising, sales and fulfillment. Monitoring your profit and marketing performance in eCommerce shouldn’t be hard — and a single dashboard for all your metrics makes it easier. 

Featured image via DepositPhotos.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

And now it’s July. I’d just like to tell my American and Canadian friends to hydrate properly, and the hangover should be gone by October, just in time for the sugar crash. While you recover, we’ve got more portfolios.

Lots of good, grid-based stuff this month. And lots of dark layouts. It’s like all the color got used up last month or something. Anyway, I hope you like minimalism! Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

White Elephant

White Elephant combines pastels, some asymmetrical design, some very grid-focused design, and a whole lot of absolutely gorgeous type to create a pleasant, pretty browsing experience. Also, there’s the occasional witty GIF used during page transitions, a sort of blink-and-you’ll miss it detail that amused me.

Platform: WordPress

Adam Brandon

Adam Brandon’s portfolio keeps things very minimalist. But then, when you have Netflix, Apple, Nike, and Ford in your portfolio, do you really want that much getting in the way of all those logos? No, in these situations, minimalism is definitely the way to go, and the sort of grid-based collage doesn’t hurt.

Platform: Squarespace

Planetary

Planetary’s agency site is pretty, modern, and I have to say that the designers sure know how to effectively use just the tiniest splashes of extra color for emphasis. It’s just that nice to look at. Plus, this site just introduced me to the typeface known as Neutrif pro, and I think I’m in love.

Platform: Gatsby

Werlen Meyer

Werlen Meyer keeps things fairly simple with a dark layout, simple sans-serif type, and quite a bit of background video. I have to hand it to whomever is optimizing this site. All of the video/animation loaded fast and smooth on my 5Mbs connection.

Platform: Custom CMS (I think. I never know for sure when Lua is listed as the programming language.)

Renaud Rohlinger

Renaud Rohlinger is a “French Creative Developer living in Japan (soon)”, and this is presumably why his site is a mix of Japanese and English. Not content with that, however, he threw in a whole lot of gorgeous WebGL animation that runs pretty smooth and fast, even on my old laptop with integrated graphics.

While there could be some improvements made layout-wise, and the body text could be a little bigger, the whole thing is a technical marvel.

Platform: Static Site

Tiago Majuelos

Tiago Majuelos’ one-page portfolio is colorful, wild, and full of… hieroglyphic-clipart graphics? I’m not sure how the heck else to describe his art style. You can browse the work by dragging/swiping horizontally, or you can scroll down to see the most organized collage I’ve ever seen. I’ve never seen anything quite like this, so it’s on the list.

Platform: WordPress

Josh Newton

Josh Newton’s portfolio has a beautifully simple dark layout, great condensed type, and body text that’s sadly way too small. That usability issue aside, it’s rather nice to look at. Another great grid-based layout.

Platform: Custom CMS (Probably)

Diogo Akio

Diogo Akio’s portfolio is more grid-based goodness, mixed with more horizontal scrolling goodness, and a heavy dose of modern minimalism. And for variety, it’s not a dark layout.

Platform: Static Site

Rise

When Rise was being designed someone clearly looked at a bunch of sites with asymmetry and overlapping elements, and said, “That. I want loads of that.” Then threw in some pretty decent typography, and they’ve managed to pull off using the color yellow, so they’ve earned their spot on this list.

Platform: ExpressionEngine (Haven’t seen that for a while.)

makespace.

Makespace. More dark layout. More collages. More grid stuff. Lots of periods going around. No but really, it’s a fantastic looking site, and you don’t see too many collages that are animated like a slideshow. Unfortunately, this site falls into the same small-text trap that many dark sites fall into in their quest to look elegant.

Elegant text is text I can read. Just saying.

Platform: Static Site

Diana Costa

At first glance, Diana Costa’s portfolio seems downright brutalist. Dig in a little, though, and you’ll see the monochromatic tones and monospaced text tempered with plenty of white space, and simple, smooth animation. It’s amazing how much white space can transform the feel of a website, almost on its own.

Though I don’t like sites that depend on JS to run at all, especially sites this simple, I have to respect the developers for putting in a warning message when you turn JS off.

Platform: Static Site

Firstborn

Like many minimalist sites, Firstborn uses animation to spice things up, decent type, and multicolumn body text. Well okay, multicolumn isn’t that common. No, they’re not relying on CSS to do that just yet, it’s being done with JS. Even so, I’m glad to see it out in the wild.

Platform: Contentful

Yuen Ye

Okay, you know that see-the-preview-on-project-title-hover thing? Well Yuen Ye’s portfolio has officially done it better than everything else. There are elements that are rather convincingly animated to look like cloth on the home page, and hovering over a project title changes the “pieces of cloth” into the preview for… go just got look at it.

Rarely am I actually impressed by these sorts of bells and whistles, but it’s beautifully executed here. The rest of the site is pretty solid, too.

Platform: WordPress

Onix Design

Onix Design improves on the ever-familiar modern/dark aesthetic by adding a fair amount of illustration, including some sort of semi-3D illustrations of faces that I found strangely compelling. The color scheme is a bit of a blast to the eyeballs, even with the mostly-dark layout, but it’s certainly a striking, and uncommon look.

Platform: Custom CMS? (It’s programmed in Go.)

Zef

Zef’s Website is decidedly new-looking, even as certain aspects of it (including the name) evoke a sort of Geocities-era nostalgia. I love everything: the curving text on the home page, the clashing colors, the careless-seeming typography that is actually quite effective. It’s amazing.

Platform: Static Site

thePXA Creative

thePXA Creative’s agency site is darned good-looking. Far more good-looking, perhaps, than usable. Even so, I found myself liking this highly PowerPoint-ish site for it’s sheer style, and commitment to a theme.

Platform: Static Site

Muax

Muax is another dark, grid-loving layout, sure. It’s also a showcase of just how absolutely gorgeous Russian typography can be. I have no idea what any of it says, but I could stare at it for a good ten minutes.

If this is what Dostoevsky’s work looked like in Russian, no wonder people read it to the end.

Platform: Custom CMS

Casper Fitzhue

Casper Fitzhue’s portfolio is one of those very white designs that could get boring if you don’t love that sort of simplicity as much as I do. But to keep things interesting, the background will change color depending on what you’re looking at/hovering over. Plus, I like how things like essays and other text-based works are included in the portfolio.

Platform: Static Site

Chris Cyran

Chris Cyran’s portfolio is maybe the only one I’ve seen that’s bold enough to just sort of… put a business card design right in the middle of the page, and leave it there no matter what else happens to be scrolling by.

Platform: WordPress

Locomotive

Locomotive looks like a site that should be minimalist, but they occasionally just sort of… don’t do minimalist things. It also leans hard into the animation, creating an experience that is at once familiar and outstanding.

Platform: Static Site

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

User Experience: Best Practices on Effective Visual Hierarchy

HTML Can do That?

Ikea Releases Free ‘Soffa Sans’ Font Made of Couches

Motion Icons

Designing To-Do Lists App

Microsoft is Teasing ‘All-new’ Windows 1.0 Launch… For Some Reason

Why Google Duplex Might Make my Design Job Redundant

Welcome to the Old Internet Again

Material Design Data Visualization Guidelines

Best React Open-source Projects

Tips for Rolling your own Lazy Loading

Approaching the Website Design Process from the Browser

Designers Discuss Imposter Syndrome

Track this – A New Kind of Incognito (by Firefox)

Introduction to SVG Filters

Apple is Reportedly Giving up on its Controversial MacBook Keyboard

How a Google Side Project Evolved into a $4B Company

How Google Pagespeed Works

Building a Design System - where to Start?

8 Tips for Writing Great Usability Tasks

Design is a (hard) Job.

How Successful Design Companies Market Themselves

What if all your Slack Chats were Leaked?

Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites

Designing for the Near Future

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

With Instagram, Snapchat and other “young” social media platforms taking over the internet, Twitter still remains one of the most popular marketing channels.

It has around 326 million active users per month which means that your target audience is likely using it. This is why you should at least consider using it as a marketing channel for your business. Having Twitter as one of the main marketing channels is not only going to help build awareness of your brand but can also drive traffic to your website and make your articles go viral.

How can this be achieved? Well, it’s a pretty straightforward tactic that some of the top bloggers are using. The idea is that within your blog post you have short pieces of content that are catchy and people like them. Those pieces of content can then be easily tweeted. (For example, it could be a quote from someone who is an authority in your niche, or a statistic that you feel is likely to be shared by your visitors.)

So, let me show you how you can have “click to tweet” buttons added automatically to every quote in your article.

Before we get started, let me say that this is a medium-advanced technique. If you’re using WordPress you can use a ready-to-go plugin that will serve the same purpose.

Creating “Click to Tweet” Buttons with JavaScript

Let’s assume that we want to turn from this article about conferences that says “According to webdesignerdepot.com …” into a tweetable block.

Given that we have the following html structure:

<article id="article">
<blockquote>  I only ever go to marketing conferences to meet new people and listen to their experiences. Those people never include the speakers, who are generally wrapped up in their own world and rarely give in the altruistic sense. </blockquote>
</article>

Here is how we would create a click to tweet button:

Step 1

We need to collect all the <quote> and <blockquote> elements from our article when the document loads:

document.addEventListener("DOMContentLoaded", function() {
  // Step 1. Get all quote elements inside the article
  const articleBody = document.getElementById('article');
  const quotes = [...articleBody.querySelectorAll('quote, blockquote')];
Step 2

Create additional variables to store the current page url, tweetable url and a ‘click to tweet’ button:

  let tweetableUrl = "";
  let clickToTweetBtn = null;
  const currentPageUrl = window.location.href;
Step 3

We need to iterate over all the quote elements that we want to make tweetable and append a “click to tweet button” for each of them:

  quotes.forEach(function (quote) {
    // Create a tweetable url
    tweetableUrl = makeTweetableUrl(
      quote.innerText, currentPageUrl
    );

    // Create a 'click to tweet' button with appropriate attributes
    clickToTweetBtn = document.createElement("a");
    clickToTweetBtn.innerText = "Click to Tweet";

    clickToTweetBtn.setAttribute("href", tweetableUrl);
    clickToTweetBtn.onclick = onClickToTweet;

    // Add button to every blockquote
    quote.appendChild(clickToTweetBtn);

  });  
});
Step 4

Add 2 missing functions: makeTweetableUrl, that will create a tweetable URL, and onClickToTweet that will act as our event listener and open a window for the tweet (once the button is clicked):

function makeTweetableUrl(text, pageUrl) {
  const tweetableText = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
  return tweetableText;
}

function onClickToTweet(e) {
  e.preventDefault();

  window.open(
    e.target.getAttribute("href"),
    "twitterwindow", 
    "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0,scrollbars=0"
  );

}

Here it is working on CodePen.

Creating “Click to Tweet” Buttons with jQuery

Now, let me show you a slightly different way to get the same result that you can implement if you’re using jQuery.
Here is the code:

$(document).ready(function() {

  // Get all quote elements inside the article
  const articleBody = $("#article");
  const quotes = articleBody.find("quote, blockquote");
  let tweetableUrl = "";
  let clickToTweetBtn = null;

  // Get a url of the current page 
  const currentPageUrl = window.location.href;

  quotes.each(function (index, quote) {
    const q = $(quote);
    // Create a tweetable url
    tweetableUrl = makeTweetableUrl(
      q.text(), currentPageUrl
    );

    // Create a 'click to tweet' button with appropriate attributes
    clickToTweetBtn = $("<a>");
    clickToTweetBtn.text("Click to Tweet");

    clickToTweetBtn.attr("href", tweetableUrl);
    clickToTweetBtn.on("click", onClickToTweet);

    // Add button to every blockquote
    q.append(clickToTweetBtn);

  });
});

function makeTweetableUrl(text, pageUrl) {
  const tweetableText = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + encodeURIComponent(text);
  return tweetableText;
}

function onClickToTweet(e) {
  e.preventDefault();
  window.open(
    e.target.getAttribute("href"),
    "twitterwindow", 
    "height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0"
  );
}

As you can see, the code is the same, except that it takes advantage of jQuery’s functions to simplify the code we have to write. Here’s the jQuery version working on CodePen.

Conclusion

As you can see, creating a “click to tweet” button doesn’t require much time but it can be a great way to encourage your visitors to share your content on Twitter.

I hope this tutorial was helpful and you learned something new. Feel free to use this piece of code and implement it on your website.

Featured image via DepositPhotos.

Source
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Back in April, jQuery 3.0 was released with all the pomp and ceremony of a British monarch on the 4th of July (happy Independence Day to all our American readers). There have been a flurry of minor releases since then, with the current version being 3.4.1.

We’ve had a few weeks to poke around, and check out the new features, and more importantly the now deprecated features. What we found was a modern library that defied a few of our expectations.

It’s Not Bloated

There are quite a few myths built up around jQuery, not least that it is bloated and slow. There’s some sense to this, containing as it does code that you probably won’t need. However this is true of all libraries, frameworks, and 3rd party scripts; unless you’re using something so niche that there is nothing superfluous wrapped up in the code, then there will always be a few bytes here and there that aren’t required.

drop a jpg and you’ll probably have room to spare

But let’s keep this in proportion: the raw, minified, production version of jQuery is 88kb, if you opt for the slim version without Ajax and the effects, then it’s just 71kb.

If you’re working to a strict size quota it’s relatively simple to squeeze 71kb out of a few images. Better yet, drop a jpg and you’ll probably have room to spare.

It’s (Probably) Not Cached

One of the greatest benefits of jQuery circa 2014, was that it was all but ubiquitous. Almost every site took advantage of this by linking directly to the jQuery CDN meaning that more often than not it was cached in the user’s browser – you could, in effect, use it for zero size cost.

jQuery usage has dipped in recent years, thanks in part to rival libraries, and thanks in part to the belief that vanilla JavaScript is superior. Fewer sites are linking to the CDN, fewer browsers have the file cached, and so it will probably need to be downloaded before it’s available.

The problem is compounded by the release for version 3, because although plenty of legacy sites are still loading jQuery from the CDN, by their nature they aren’t linking to the current version. The jQuery team have gone to great lengths to help you upgrade but project cycles and code adoption means that jQuery 3.n is probably at least several years away from comprehensive coverage.

You Don’t Need to Know Vanilla JavaScript

One of the most oft-repeated myths – or perhaps I should say ‘untruths’ in this case – is that you should learn vanilla JavaScript before you can use jQuery well.

View jQuery as a set of training wheels

I detest this view. I understand the logic; if you learn the underlying logic of the language, you’ll understand what’s happening behind the scenes and have a nuanced understanding of your code. People who perpetuate that view have forgotten what it feels like to be trawling Stack Overflow at three in the morning struggling to understand why document.getElementsByClassName needs a [0] on the end.

Yes, you do need to understand language basics, like variables, loops, conditionals, operators, and so forth; you’ll need to know those with or without jQuery. View jQuery as a set of training wheels, it does the hard stuff for you, so the easy stuff has a chance to become second nature.

I would argue that if you want to learn JavaScript, you should learn jQuery first. It will hold your hand through the tougher tasks (like Ajax) while you practice your fundamentals. And I say that as someone who spends a great deal of time coding vanilla JavaScript.

There’s No Longer a Rich Ecosystem

There was a time when jQuery developers were queuing up to deliver time-saving, feature-pushing, bolt-ons. That’s no longer the case.

The web has moved on, and the gun-for-hire developers are chasing more lucrative markets, like Shopify, or WordPress. Legacy jQuery plugins (should) still work, and in the case of version 2.n plugins – thanks to the jQuery team’s commitment to backwards compatibility – will (probably) not break using 3.n. (Do make sure to test with the development version of jQuery and check your console, if you’re going down this route.)

There will undoubtedly be some kind of market for jQuery 3.n plugins, and those developers who deem it financially worthwhile to update their code will do so. So for plugins, the release of jQuery 3.0 may actually prompt a long-overdue cull.

Should You be Using jQuery 3?

For many of us, jQuery is a tool we used years ago, and have since moved on. There are better tools for handling Ajax; jQuery still doesn’t play nice with SVG, making its use for DOM manipulation increasingly limited; there are copycat libraries that mimic the best aspects of jQuery, like the selectors, without packaging up everything else.

jQuery isn’t going to challenge Vue.js, or AngularJS. jQuery is no longer the must-befriend big kid on the block. What jQuery does is simplify JavaScript’s verbosity and enable inexperienced JavaScript coders to maximize their use of the language.

If you’re new to JavaScript, or if you’ve tinkered with it before without ever being able to do anything really cool, then jQuery is still exactly what you’re looking for.

Featured image partly via Unsplash.

Source

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview