Month: June 2015

Create Scary-Good Ghost Buttons Using These Resources

While the name connotes spookiness, ghost buttons as a design practice are anything but. This design trend that has been gaining stream since last year is a cool way to feature CTA buttons on the landing pages of your website.

Due to how web developers and designers gravitate toward minimalism as part of their design practice, ghost buttons easily fit the bill. We have featured before examples of how ghost buttons are best used on a web page that strike the balance between minimalist design and usability.

Now, let’s look into how this design technique is made by looking deeper into some of the best ghost button resources.

Trends 2014: The Rise of the Ghost Button

Simone Sala at SitePoint

‘Ghost buttons’ are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are generally bordered by a very thin line, while the internal section consists of plain text printed in a light, sans-serif font. (Click to Tweet This Quote!)

The article is a great primer for people who are not familiar with ghost buttons and wish to learn how this design practice works. It provides a brief background on the origins of ghost buttons and features real-life examples of how ghost buttons are best implemented on web pages.

More importantly, the piece details the pros and cons of this button design. Given that ghost buttons came to prominence as a current design trend, there might be a tendency of non-designer website owner to overuse ghost buttons on their web pages. By taking note of ghost buttons’ advantages and disadvantage, hopefully people will become more aware of its limitations and learn how and when this design element should be applied.

How to Create CSS Ghost Buttons

By Jacob Gube at Six Revisions

The ghost button design trend is currently quite popular. As you’ve seen, it’s easy to create ghost buttons using CSS. (Click Here to Tweet This Quote!)

This post pretty much covers the basics of designing your ghost buttons using CSS. It discusses the different variations of ghost buttons in the post:

  1. Basic ghost button
  2. Rounded corners
  3. Simple transition effect
  4. Thick border
  5. Semi-transparent fade
  6. Border color fade
  7. Full color fade
  8. Size transition effect

Referring to this post should give you all the things you need to do in order to design the best and most appropriate ghost button for your page.

Ghost Buttons – THE Minimalist Web Design Trend

Denis Potschien at

Ghost buttons can be really impressive if applied correctly. The examples show that a good background is vital and animation effects give them an individual note. The more basic the design is, the more concise it must be. This is the only way to stand out from the mass and not get drowned in the crowd. (Click Here to Tweet This Quote!)

Emphasizing on ghost button’s design qualities, this post helps you better understand how to create this button type. It identifies simple yet overlooked ideas on how to approach your ghost button design.

25 Awe-Inspiring Websites Using Ghost Buttons

by Nancy Young at Web Design Ledger

These kind of buttons are called ‘ghost’ due to their transparent nature. They’re transparent as ghosts, at the same time they grab users’ gaze at once and do not overload design. You may find ghost buttons on a wide variety of sites. The best ghost buttons look on websites with large-scale background, and flat, minimalist design. (Click Here to Tweet This Quote!)

We featured websites with well-designed ghost buttons at their CTA buttons in this post. To add to the ones in the post, this design inspiration post from Web Designer Ledger provides you better ideas on how you can design ghost buttons for specific pages in your site or blog.

Final thoughts: Ghost buttons add texture and dimension to your web design, especially if you apply flat and minimalist design to your website or blog. However, not all design trends are applicable to your site – ghost buttons included. It depends on a number of factors to determine the kinds of design elements that fit to your overall design.

Therefore, reading up the resources above will not only help you create the best ghost buttons possible, but they also will help you figure out whether your site should be using this design trend in the first place.

The post Create Scary-Good Ghost Buttons Using These Resources appeared first on SpyreStudios.


The Best Design and Development News of the Week 18th June – 24th June 2015

Webdesigner News is a submission site for design and development articles from around the internet. Readers can submit their own articles or those they have found to be of interest written by others. This makes the site’s content diverse and engrossing, as well as being time-saving for busy designers and developers. You will definitely find some of the below listed articles to be of interest, so it should make you hungry to subscribe so you never miss a story!

Articles of the Week

Code like a designer

This is a topic that seems to be an unending source of Internet arguments (just like the capitalization of the word Internet), should designers code?

Code like a designer

100 Brilliant Color Combinations: And How to Apply Them to Your Designs

Sometimes it can be hard to know where to start when choosing a color palette for your design project — so if you’re in need of some inspiration, you’ve come to the right place. Browse through the 100 color combinations below, which are inspired by photography from four categories: nature, food & drink, travel, and everyday items.

100 Brilliant Color Combinations

10 Responsive Design Problems and Fixes

As more corporations and online giants turn to responsive design, it’s beneficial to understand the limitations that come with it and how to work around them.

10  Responsive Design Problems and Fixes

How to Hook Users With Habit-Forming UX Design

Apple. Facebook. Twitter. Google. Pinterest. These companies all have one thing in common – they create habits among their users. People use these products habitually on a daily basis and they’re so compelling that many of us struggle to imagine life before they existed.

How to Hook Users With Habit-Forming UX Design

Google’s Guide To Designing With Empathy

According to the World Health Organization, more than 1 billion people worldwide have a disability. To Astrid Weber and Jen Devins, Google’s resident accessibility experts, that stat should be stamped on the back of every designer’s hand, because it means that one out of every seven people on the planet is potentially left behind by thoughtless design decisions….

Google's Guide To Designing With Empathy

New changes for designers revealed in iOS 9

Apple introduced their newest OS at WWDC 2015 in San Francisco and gave designers and developers just enough bait to get them excited and preparing for the actual release, rumoured to be heading our way in Autumn 2015.

New changes for designers revealed in iOS 9

The next design trend is one that eliminates all choices

In 2004, psychologist Barry Schwartz wrote The Paradox of Choice, a compelling manifesto that outlined the paralysis and dissatisfaction one feels when presented with too many choices. A decade later, Aaron Shapiro, the CEO of the global digital design agency Huge, has evolved Schwartz’s observations into a provocative scenario he calls “anticipatory design.”

The next design trend is one that eliminates all choices

Creating Advanced Animations In Photoshop

While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.

Creating Advanced Animations In Photoshop

Useful Flexbox Technique: Alignment Shifting Wrapping

I just ran into a situation where I had a title that was split into two sections. The main title, big and bold, left-aligned like any regular title. But then a bit of a subtitle, right-aligned, sitting on the same line as the title. When there is room for that, it’s great. But of course text is always changing and the space you have available is variable. Let’s take a look.

Useful Flexbox Technique: Alignment Shifting Wrapping

This ’90s Guide to Using the Web is Delightful

I took a trip down memory lane recently when I stumbled on ‘You Can Surf The Net!’, an internet how-to guide from 1996, on the free table at a local book faire.

This 90s Guide to Using the Web is Delightful

5 things every web designer needs to know about CSS

Harry Roberts does a lot of speaking and a lot of teaching. He’s been working for himself for more than a year; before that he spent three years as a senior developer for Sky. But he’s best known as a CSS guru – he flies under the Twitter handle of @csswizardry. Here he shares five lessons he’s learned so far about the wonderful world of Cascading Style Sheets…

5 things every web designer needs to know about CSS

3 Essential Rules for Effective Navigation Design

Designing your website navigation is like laying the foundation for your house. Failure to plan your foundation properly could put your building at risk of collapse, regardless of how nice it looks. If you want to benefit from the best sales or conversions possible from your site, you need to spend time planning how your audience will interact with your content, and figure out the most intuitive way of organizing, and representing it.

3 Essential Rules for Effective Navigation Design


Typefaces for source code beautification<



Beautiful, free videos for your home page


Checklist of Skills and Tools Every Designer Should Learn

Diving into the pool of graphic/UI design can be stressful. At first your work isn’t gonna be great – in fact it’s going to take a long time to reach proficiency. But you can reduce this time by setting fixed goals and working towards achieving them.

Checklist of Skills and Tools Every Designer Should Learn

The Day After: 11 Things to Do After You Publish a Post

Creating great content is an extremely important part of any successful content marketing strategy. But it’s just one part. If all you do is hit “Publish” and then move on to the next article, your blog won’t grow as quickly as it should.

11 Things to Do After You Publish a Post

Advice From Great Designers

Advice From Great Designers

Introduction to CSS selectors

Whether you’re new to CSS or are a seasoned pro looking to refresh your knowledge, this guide to CSS selectors is for you.

Introduction to CSS selectors

How to make magically transforming Twitter images

How to make magically transforming Twitter images

Trendy Web Color Palettes and Material Design Color Schemes & Tools

Matt [DesLauriers] developed a tool which requests each page of the Awwwards winner gallery, then searches the HTML for all the available metadata like site name, author, date, URL, thumbnail, etc. The RGB pixels of each thumbnail are analyzed to get a rough color palette of the 3 primary colors.

Trendy Web Color Palettes and Material Design Color Schemes & Tools

What is a Full-Stack Designer and Should You Be One?

Being able to quickly and efficiently one-line our skills and the focus of our professional life has a lot of value. The title that we use can effectively tell others what we do, and where our career is heading. Despite this importance, titles are something many of us have trouble with.

What is a Full-Stack Designer and Should You Be One


As you can see from this list – which is a very small selection – there is a lot of news items to be found on the Webdesigner News site. If you really want to save yourself some time scouring the internet for items that interest you or are relevant to design and development, pop over there now and subscribe to get all the news into your inbox and keep your finger firmly on the pulse.

Onextrapixel – Web Design and Development Online Magazine

In praise of ibid.

The third guest post by graduating V&A/RCA History of Design students sees Joanne Pilcher put a fresh spin on the meaning of ‘ibid’.

JP fig 1

Photo: Zara Arshad, 2015

‘ibid.: In the same source (used to save space in textual references to a quoted work which has been mentioned in a previous reference). Abbreviation of Latin ibidem ‘in the same place’.’

Oxford English Dictionary

The term ‘ibid.’ appears extensively in the twenty-six 30,000-word long dissertations graduating students have written. When every word of the dissertation counts, this handy abbreviation saves precious words for formulating your own ideas. This year, in recognition of our collective debt, we’ve titled the V&A/RCA History of Design publication ibid.

With ‘networks’ the overarching theme for this year’s Show, Symposium and publication, the idea of ibid. accrued new meanings for us. Its Latin root-word, ibidem, means ‘in the same place’, interesting because the vast array of our dissertation topics originate from the ‘same place’.

In the first term of the first year of our MA, we were taught together. From here – learning the essentials of our discipline in one place – we have branched out in many different directions, while also remaining in dialogue with and inspiring each other to build on or question what we were taught in that first year.

To bring together our diverse projects, the publication picks up some of the themes used in our ShowRCA exhibition and Symposium: Time, Power, Anxiety and Exchange. Each graduating student was asked to respond to one of these key concepts (also the title of one of our core first-year modules), reframing their dissertations accordingly.

Rachel McCarthy-Yardley's double page spread

Rachel McCarthy-Yardley’s double page spread. Photo: Zara Arshad, 2015

What was most exciting about this process was the opportunity to rediscover both my own and other students’ work through fresh eyes. For some, it was an opportunity to revisit their dissertation from a new perspective; for others, it was simply a chance to reflect on a year’s work.

We were also keen to put our work in the much wider context of our discipline, approaching well-known names in the field to comment on the past, present and future of History of Design. Dr Christine Guth, acting Head of Programme for this year, wrote an introduction that encapsulates the Show team’s exhibition plans by discussing the mind map that was on display in one of the V&A’s seminar rooms. Our ‘centre-fold’ was Dr Charles Saumarez Smith, Chief Executive of the Royal Academy of Arts and one of the founders of the programme, who wrote a history of History of Design. Dr Sarah Teasley, Head of Programme at the RCA, has the last word with an essay that looks forward to History of Design’s future.

JP fig 3

Photo: Zara Arshad, 2015

Research and writing can be lonely, making the opportunity to work on a group project especially rewarding. This spirit of collective activity extended beyond History of Design to our collaboration with Ran Faigenboim, a first-year MA student in Visual Communication, who designed the publication.

Ran’s design stresses the interconnected content found in the publication, and in our Show and Symposium. This interrelation is apparent from the cover, where our four key words – Time, Power, Anxiety and Exchange – are mapped to show their occurrence in the texts within.

JP fig 4

Photo: Zara Arshad, 2015

The publication in all its orange glory arrived at the V&A last week, and is available to visitors to ShowRCA and our Symposium at the V&A.

Get one before they’re all gone!

JP fig 5

ibid. on display at ShowRCA. Photo: Zara Arshad, 2015

Pick up your free copy of ibid. at ShowRCA Kensington. We are open 12–6pm daily from Thursday 25 June to Sunday 5 July, with late opening to 9pm Wednesday 1 July (closed Friday 3 July).

We’d also love to meet you if you’re considering studying History of Design. The V&A/RCA History of Design Programme holds a special Open Day on Wednesday 1 July, which begins in the Humanities Show space at 3pm, before moving to the Humanities Seminar Room. For more details about how to find us, see here.

Follow Joanne on Twitter.


Showcasing The World: Designer Portfolios – 20 Designs

While digital agencies undoubtedly have a vast potential are able to handle almost any task, the personal approach provided by standalone artists sometimes can be preferable. With the increasing popularity of portfolios (that by the way are claimed to be one of the biggest trends of this year) creative individuals come to the fore.

One of the greatest things is that thanks to this tendency, lots of freelance, newbie, and even professional artists step out of the shadows. Being inspired by culture and traditions of their motherland and slightly restrained within frames of the demands of society, they ‘prettify the Internet with bright colors’ as well as enrich it with unique features that are typical of their country. Although these 2 factors do not stop them from implementing the latest techniques and design trends to keep pace with the others.

Today we are going to uncover 20 talented designers from 20 beautiful countries. Some of them are struggling to provide users with modern websites packed with the latest solutions, others on the contrary, favor projects enriched with some characteristic traits that naturally single them out from others; nevertheless, all of them take users on a great experience.

Designer Portfolios

Hayden Dawkins

Hayden Dawkins is a USA-based WordPress designer that promises to put his heart and soul into your project. Although his personal portfolio is predominantly made in black and white, such a color palette brings a sense of sophistication and refinement to the general feeling as well as puts the content above everything.

Hayden Dawkins

Roman Kirichik

Roman Kirichik is an extremely talented web designer from Ukraine with an excellent eye for detail. His online portfolio simply breathes stylishness, modernity, and finess: a trendy 2-column layout, classy color scheme, subtle hamburger button and some accompanying effects make the website stand out from the crowd.

Roman Kirichik

Nathan Riley

Nathan Riley is a real professional designer, being an art director of a first-rate digital agency in UK. His website looks fantastic and exceptional. Charged with some tiny yet showy effects, the ‘Welcome’ section instantly reflects the enormous potential of the artist as well as demonstrating his sense of balance and love of trends.

Nathan Riley

Marcin Dmoch

Marcin Dmoch is a gifted designer from Poland who specializes in web and UI projects. Skillfully adapted fixed width centered layout (that is quite popular nowadays), the artist has managed to maintain the overall attention on the central part of the page, making access to vital information such as navbar and some other links quick and easy.

Marcin Dmoch

João Roma

João Roma, a skilled Brazilian designer, has charged his personal portfolio with emotions and positive energy. His minimal website is carefully executed and utilizes an interesting color combination that instantly strikes the eye.

Joao Roma

Cihad Turhan

Cihad Turhan is a Jack of all trades from Turkey. He is a master of design and development. So that it is not surprising that his personal portfolio, powered by some latest techniques, charms with its unique and visually interesting appearance. The 2-column layout vividly shows the potential of the artist through his work.

Cihad Turhan

Kanji Ki

At first glance, it becomes obvious that the artist to whom this project belongs is from ‘The Land of the Rising Sun’. Indeed, Kanji Ki is a talented designer with the extra skills of a developer from Japan, and his gallery of works serves as a sheer source of inspiration.

Kanji Ki

Daniel Spatzek

Daniel Spatzek is a qualified expert in design from Austria who can boast co-working with lots of national and international brands. Although his personal portfolio features 4 sections, the ideology of ‘Less is More’ is skillfully brought to life here.

Daniel Spatzek

Hayden Bleasel

Hayden Bleasel is a gifted product designer from Australia who is concurrently a full-stack developer. His personal portfolio has a powerful natural vibe and features elegant ultra-narrow typography and a subtle ghost button that go perfectly well with the backdrop, recreating a refined atmosphere.

Hayden Bleasel

Rob Voets

Rob Voets is a professional designer from The Netherlands, who currently lives in New York and has the invaluable experience of working with such industry goliaths as Nike, Samsung and Google. His online portfolio is filled with excellence and symbolism as well as being based on a robust and easily perceived stripe layout.

Rob Voets

Christian MacMillan

Christian MacMillan is a talented and enthusiastic designer from Spain who was born in Palma de Mallorca. As befits, his personal website includes only vital information such as about, portfolio and a blog. Color scheme and a magnificent self-portrait are indisputable eye catchers.

Christian MacMillan

Simon A. Lund

Simon A. Lund is a gifted freelance designer from Denmark. With his website, the artist tries to make the works speak on behalf of his persona. The landing page features nothing more than just a small biography and a series of portfolio pieces.

Simon A. Lund

Mike | Creative Mints

Mike | Creative Mints from The Czech Republic is a true master of his craft. Although his personal portfolio has quite an unremarkable design and does not amuse readers with splendid effects, his works presented on the page speak louder than words, showing the enormous potential of the artist.

Mike - Creative Mints

Joan Chong

Joan Chong from Singapore has a natural skill for design and illustrations. Her personal portfolio is marked by a huge personality. The website looks clean, neat and subtle. Open feeling and predominant light coloring add a unique charm.

Joan Chong


FLP L NY is a marvelous portfolio of an autodidact colorblind designer who lives in Montreal. Felipe Elioenay has a gift from God. His unique and exceptional personal website demonstrates this through a series of fantastic works.



Zulu is a creative designer and skillful coder based in Norway who adores bringing to life various UI projects and loves to experiment with technologies and typography. His truly minimal personal portfolio is aimed at drawing the whole attention to his works.


Deep Soni

Deep Soni is a skilled digital designer from The United Arab Emirates. He is known to be a true professional in developing minimal interfaces that meet current trends. His personal portfolio is clear proof of that. Using a stylish and pretty popular fixed width centered layout, several inner pages and a generous amount of white space, the artist has managed to recreate an appealing and modern design.

Deep Soni

Dane Bowen

Dane Bowen from South Africa is a qualified and experienced specialist in design and high-end techniques. With his online portfolio, he goes for a minimal approach not only in terms of design, opting in favor of a spacious layout, restrained color scheme and clean solid canvases, but also in terms of content filling. As a result, the necessary information instantly strikes the eye.

Dane Bowen

Ying Wang

Ying Wang is a professional designer and illustrator from the world’s most populous country, China. His personal website has a subtle touch of his culture and a marvelous circular vibe. It naturally directs the whole attention towards the works by using clean backdrops and absence of lush decoration.

Ying Wang

Atulesh Kumar

Atulesh Kumar from a subcontinent of India is a true master who can handle any work starting from prototyping websites with user-centric interfaces and ending with complex print projects. With his vigilantly crafted portfolio enhanced by the human touch that leverages quite a simple structure, the artist has targeted a wide audience.

Atulesh Kumar


Indeed, the Internet erases boundaries: whether you are living in a country that located in the thick of things or at the other end of the World, you have an opportunity to keep up with the rest, participate in the mainstream, follow trends and implement the latest techniques in your projects thereby making the Web a better place.

Onextrapixel – Web Design and Development Online Magazine

Boost the Power of Your Resume by Developing a Creative Online Presence

What do YOU bring to the table? What makes YOU stand out? In an extremely competitive job market, you need to go the extra mile to ensure that you attract positive attention.

It has become the practice of recruiters and employers alike, to view a candidate’s on-line profile when they are compiling their final short-list. Use this to your advantage, by creating a visible web presence that that truly showcases your original design and development abilities.

There are several ways to create your own ‘branding’ and draw interest when it comes to your on-line presence.

Develop Your Online Presence

The Basics: Use a Striking Resume Template

First things first. You need to grab the employer’s attention with a resume that distinguishes you from the rest of the crowd.

With over 279 templates to choose from, Hloom is a great place to look for inspiring templates.

The following are template style examples that could work extremely well for the creative industry:

The Portfolio template could be the right pick for a designer or photographer that wants to showcase their visual accomplishments.

Portfolio Templates

The Newspaper template portrays your ability to think outside the box.

Newspaper Templates

The Creative template highlights your originality on a single page.

Creative Templates

Use your resume as the basis document to mention applicable links and highlight your online presence.

Create a Digital Portfolio

Be creative in making your portfolio pop, as this will enhance your chances of being considered for that desired position.

Use one of these platforms to create a striking web-portfolio:

Agencies and individuals use this platform to showcase material in fields such as graphic design, art direction, photography and illustration. Behance also has a tab for creative jobs, which could be just the place to find that dream job.


If there are specific creative projects that you have worked on, that you are particularly proud of and want to share, then look no further. Coroflot is a great place to get noticed by design-driven companies and they also offer a job board for job seekers.


Get inspired with the latest ‘awesome’ examples of portfolios that were created with Carbonmade. With a variety of themes to choose from, you can easily display your creative abilities with this online portfolio website.


As a creative guru, there is always the option of creating your own website. You have total freedom in deciding on the format, style, content and theme to reflect who you are.

Become a Superstar Blogger and Guest Writer

Share your thoughts, ideas and advice with the global community by writing interesting material. Here are some of the sites that you can consider:

If you are reading this article, then you have probably already discovered the valuable posts on OXP (onextrapixel), aimed at the creative community. Make use of the opportunity to share your industry know-how with fellow designers and developers as a guest writer.


As a platform focused on visual content, Tumblr is a great place to post your multimedia and creative micro-blogs. One of the perks of this site, is that you can also add your resume to your Tumblr dashboard by making use of a cloud based plugin.

Tumblr Resume Plugin

Described as the ‘front page of the internet’, Reddit allows you to become a “Redditor” by submitting content on an online bulletin board. Entries fall under categories, called “subreddits”, which also include image sharing sections.


Post on Sites that Showcase Your Creative Skills

The chances are, that if you enjoy photography, you already have an Instagram account. If you want to use Instagram as a job seeker: to display your digital skills and unique photos, then you might want to consider creating a second account for this purpose. The average ‘selfies’ or pictures of Mutt at the park, will not elevate your resume.

Also consider using your account to follow and tag the posts of noteworthy people in your industry.


For people working in the creative arena, posting a unique infographic e-resume on Pinterest, could really be to your benefit. Although this might not be the formal resume that you use to apply for positions, it is still a great opportunity to strut your creative stuff and get noticed.

Take into account that artistic and aesthetic profiles will likely get pinned more. This is a factor that head-hunters can base their candidate-search on.


If you have a knack for creating animations or short videos, then Vine is just the platform where you want to show-off your creative abilities. You might get inspired by following the Editor’s picks.


Make Social Media Work For You

The chances are, that you already have profiles on several social media websites. It might be a good idea to revisit them and look at them from the perspective of a future employer.

LinkedIn is probably one of the best recruitment tools that you can have in your job-hunting itinerary. These days, most resumes refer to a LinkedIn profile. With their expanding database, it is a top space for networking and attracting the attention of recruiters.

You can strengthen the appearance of your profile by posting on LinkedIn’s publishing platform.


Twitter also lends itself to connect with like-minded people in your industry. It is therefore good practice to get into the habit of regularly posting material on your profile. Make sure that what you are putting out there is current and interesting.


Don’t be surprised when you attend an interview and you realise that the interviewer had a look at your profile. You might want to consider changing your security settings or removing the photo that shows what a party animal you can be.



Take the time and make the effort to invest in an aesthetic and exciting online presence. This will not only boost the power of your resume, but it will also create an interest and attract attention with employers. Best of luck with that job-hunting!

Onextrapixel – Web Design and Development Online Magazine

How To Design Readable Comment Threads

Comment sections are built for user interaction. Websites are mostly about consumption and comments are a way for readers to share their thoughts with others. But not all comments are created equal, and certain techniques are more favorable than others.

In this post I’d like to cover some helpful tips for building readable comment threads. As a designer your focus should primarily be on the user experience of comments. The methods of handling responses and comment threading are varied but follow similar ideas.

Focus on the Content

A comment’s design should be about the comment’s content. Not the user, date/time, or relationship to others. While this extra information is important, it shouldn’t take center stage.

Visitors want to read comments in an expected layout style. Consumption should be quick and easy without a lot of runaround. Your job as a designer is to create interfaces that property reflect content. As such, you need to maintain consistency with comment sections and keep a uniform feeling throughout the page.

kotaku gawker comments ui

It’s certainly possible to include avatars and a link to the commenter’s profile. But it’s also a good idea to keep this stuff tucked away & off to the side. Don’t let metadata overpower the comment itself.

A good way to do this would be to separate the comment’s body from the header/metadata info. Create a colored bar that sits above the content with a timestamp and user information. This is a simple procedure but may require more time than you’re willing to give.

In this case Disqus can be a great free alternative. It’s easy to setup and even has plugins for common CMS engines like WordPress and Drupal.

cbs news website comments area

Since most visitors are familiar with Disqus they’ll already trust your comment section. A third party alternative is sometimes the best choice when you just need to launch a website quickly.

Another serious consideration is the commenting experience for mobile users. People browsing your site on their iPhone may or may not want to leave a comment – but they would more than likely want to browse the comments. Make sure your design pays attention to the needs of all users.

Collapsable Threads

Threaded comments are broken down into threads with individual replies. Some threads have their own permalink and lead to a unique page with further comments. These threads are designed with purpose to organize the conversation into bite-size chunks.

yahoo news collapsable comment threads

Take for example the Yahoo! News design. Their comments are built to auto-collapse threads. Comment replies need to be opened manually. Some visitors may not like this feature but it’s designed to keep the interface clean and simple.

Whether comment threads are opened or closed by default isn’t really a sticky topic. You just need to consider how comment threads should behave, or if your comment section even needs threads. Heavily trafficked websites that garner hundreds of comments will certainly benefit from threaded replies.

But if you run a simple blog it may be easier to just leave individual comments as they are. Disqus supports threads by default so the functionality is there if needed.

the verge comments collapsed

Another point to mention is that collapsing comments should feel natural. Comment interfaces aren’t meant to be confusing, and they shouldn’t be. Just follow your instincts to find the best methods for comment interaction.

Most visitors relate to the plus/minus icon as a toggleable item. You might also choose a small triangle icon that rotates for collapsed comments. Either way stick to something that’s ubiquitous and easy to recognize.

Ranking Comments by Votes

Social media has offered a proven mechanism for voting, sharing, and ranking our favorite content. The user really has more control than ever before.

If this can be done on Facebook and Twitter then why not your own comments? User votes are a good way to push up the most liked ideas toward the top while hiding offensive comments, unpopular opinions, or spam.

digg v3 2008 design comments

Voting isn’t always needed but it can offer more user interaction. For example, the voting on Digg v3 practically made their comment section what it was. Back in Digg’s heyday many users were fascinated by the unique comments and really got involved in the community.

However the problem with voting is that it can create an echo chamber. Comments voted below a certain threshold get auto-hidden from sight. Readers need to manually click and read these comments for themselves.

Auto-hiding spam is definitely a great idea. But it’s a problem if a comment is silenced just because it contains a divisive opinion on a certain topic. So think carefully before you implement a comment voting system.

aol redesign comments section

One possible choice is to use a voting method that doesn’t include downvotes. This way great comments are praised and others are just left alone. It’s a happy middle ground between no voting and strict point-based voting.

Sub-Comments & Quoting

When threading becomes a default feature you need to consider how replies are managed. Top-tier comments can have 2nd-tier replies, but what about further replies? How far down are you willing to go?

On websites like Reddit there is no limit. You can just keep replying further and further without restraint. The responses continually indent slightly to visibly convey a parent/child relationship. Once the comment thread gets too small for the page it breaks into a permalink with further comments hidden on a new page.

reddit threaded comments design

This is too extreme for most websites but it demonstrates that deep threading is possible. Most blogs or online magazines limit 3-5 sub-replies in any given thread.

Another alternative can be found on the 4chan imageboard. This method gives each comment a unique ID which can be quoted. Then somebody responds to the comment by quoting the ID which actually links back to the original.

4chan /gd/ comments design

Hovering over this link displays an inline view of the original comment. This method is less organized than Reddit but it’s also simpler. You don’t need to worry about threads or nesting. Plus 4chan comments don’t have any votes, so there is no user-voted hierarchy.

There are other means of handling quotes & responses but these two are unique and provide a structure for your own ideas. Take a look online at other communities to gather some different ideas.

Designing your own Comments

To craft your own readable comments you’ll want to follow in the footsteps of others. Learn from great websites and study how they design their comments. Work on your own ideas and learn how to merge concepts together. By studying other websites you’ll pick up on social traits and be well on your way to designing thrifty and usable threaded comments.

If you like these tips then you’ll love our other articles:

How and Why Design Impacts User Decisions

50 Inspirational Web 2.0 Websites and Social Networks

The post How To Design Readable Comment Threads appeared first on SpyreStudios.


The Debate Around “Do We Even Need CSS Anymore?”

This has become quite the hot topic lately. It’s been talked about at a number of conferences and meetups I’ve been at personally lately. I’ve seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh?

I thought we could have a little campfire here and talk about it as rationally as we can, covering all the relevant points.

We obviously still need to style things

Nobody is saying we don’t need styles. We still need to style things, what’s being talked about is how and where we do that. I was just on a panel at BrooklynJS and Jed Schmidt said:

The worst things about CSS are the “Cascading” and the “Sheets”

What does anyone have against CSS?

These are the main arguments against CSS:

  • Everything is global. Selectors are matched against everything in the DOM. You need naming strategies to combat against this and keep things efficient (which are hard to enforce and easy to break).
  • CSS grows over time. Smart people on great teams cede to the fact that they are afraid of their own CSS. You can’t just delete things as it’s so hard to know if it’s absolutely safe to do that. So, they don’t, they only add. I’ve seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company’s focus on performance.
  • You can be more dynamic with styles in a programming language. The argument goes something like “we’re already juicing up CSS with preprocessors anyway, might as well kick it up a notch.” You could for instance (if you really wanted to make this controversial) base styles off a User-Agent string or a module’s current width.

What is the alternative to CSS then?

The alternative is inline styles. So instead of:

<div class="module">

We’re talking:

<div style="padding: 20px; background: #eee; margin: 0 0 20px 0;">

I haven’t heard anyone yet argue you should apply these styles directly to HTML you author. The idea is you apply styles to elements through JavaScript.

React is driving a lot of these thoughts

React is a JavaScript library that helps with view concerns in websites. It’s developed mainly by Facebook, extremely popular, and gaining momentum. It’s had it’s own conference and is even growing into a framework for building native apps.

One of it’s core concepts is the “Virtual DOM”. You build the HTML you intend to use right in the JavaScript. Seemingly quite weird at first, but this coupling between HTML and JavaScript is always there and it appeals to people to just write it together from the get-go. I quoted Keith J Grant recently, and I will again:

This coupling is real, and it is unavoidable. We must bind event listeners to elements on the page. We must update elements on the page from our JavaScript. Our code must interact bidirectionally and in real-time with the elements of the DOM.

… the mantra of React is to stop pretending the DOM and the JavaScript that controls it are separate concerns.

React has the ability to manage inline styles built right in. They call them what they are: inline styles. Here’s a basic example:

See the Pen Inline Styles with React by Chris Coyier (@chriscoyier) on CodePen.

The virtual DOM thing that React does is also important because of its speed. DOM manipulation stuff is generally regarded as slow in JavaScript, and thus managing styles through DOM manipulation would also be slow. But React has the magic dust that makes manipulation fast, so people don’t worry about the slowness issues when working with React.

Here’s another example by Chris Nager.

The style authoring is still abstracted

CSS is the abstraction of style away from anything else. Literally files you open and work on to manage styles. You likely aren’t giving that up when moving to a JavaScript-based inline-style setup. You’d just have, probably, `style.js` instead of `style.css`. You’d still be writing key/value pairs and smooshing files together in a build process.

It will be different, but the authoring abstraction is still there.

What do you get out of inlining styles?


The scary “global” nature of CSS is neutered. The cascade, tapered. I don’t think you could say the cascade is entirely gone, because some styles are inherited so styles can still be passed down to child elements and that’s one definition of cascade. But the module-ish nature of this style of development likely leads to less overlapping style concerns. A module over here is styled like this, a module over there is styled like that – probably no conflicts in sight.

All JavaScript

One sense I get is that some people just like and prefer working in all JavaScript. You could certainly attribute some of the success of Node.js to that fact.

Dynamic Styles

“State” is largely a JavaScript concern. If you want/need style to change based on dynamic conditions (states) on your site, it may make sense to handle the styling related to the state change along with everything else.

In a recent talk at CSS Conf (slides), Colin Megill used the example of the Twitter new tweet input textarea as a dynamic place that changes the state of other elements.

Who’s actually doing this?

I heard Colin Megill say they are shipping literally zero CSS on “big stuff” and not seeing performance problems. I’ll update this with URL’s if I get them. I hear one big project will be live within a month.

I know Jed Schmidt works on the mobile version of UNIQLO, and you can see the inline styles at work there:

Update from Jed: This version of the site is all Sass and the inline styles you see there are from JavaScript animations.

Christopher Chedeau has been talking about this and is literally a Facebook engineer, so maybe Facebook a little?

Can this concept be combined with, you know, CSS?

Even if you bought into the concept of inline styles, can it live in harmony with some (do I have to say it) regular CSS? Is page layout appropriate as inline styles? Doesn’t base typography still make sense to do globally? I’m not sure if we’re far along enough in this world to see a best practice emerge.

In the example above, they are shipping a 57k CSS file as well, and you can see evidence of state-based class in the DOM as well (e.g. “is-open”).

A lot of people really don’t like this

Surprise! There are more arguments against this kind of thing than for it. As I was collecting opinions about this, I told Lea Verou “Some people really like this idea!” to which she told me:

You can find people in the world who like eating excrement it doesn’t mean it’s a good idea.

Let’s run through other arguments:

Styling is what CSS is for

This is the “religious” angle that probably isn’t going to take us very far.

The separation of concerns is inherent to CSS

Separation of concerns is a very useful concept when building things as complex as websites are. You get seperation of concerns automatically when writing CSS: it’s a file just for styling.

Inline styles are at the top of the specificity spectrum

Keeping specificity low in CSS means that when you do need to rely on specificity to win a styling war, you have it available as a tool. When you’re already at the top, you don’t have that wiggle room luxury.

The !important declaration can still win a specific property/value styling war over an inline style, but that’s a slightly different concept and an even grosser war to fight.

Some simple states are much easier in CSS

How do you do :hover/:focus/:active in inline styles? You don’t. You fake it. And what about media queries?

Adding/removing classes is a perfect tool for state changes already

JavaScript is really good at adding/removing/changing classes on elements. And classes are a perfect way to handle state in CSS.

.is-open {   display: block; }

Plus you can change state on parent elements (by changing a class) to affect the state of lots of elements within:

.tweet-too-long {   .tweet-button {     opacity: 0.5;   }   .warning-message {     display: inline-block;   } }

Browsers aren’t made to deal with styling in this way

For instance, inline styles are literally data kept in an attribute right on the DOM element. DOM weight is a thing (it can cause browsers to be slow or crash). That styling information isn’t only just kept in the style attribute though, it’s also represented in the DOM in the element’s style properties. Is that the same thing, or is this kinda double-weighted styling?

Are there speed differences between…

var thing = document.getElementById("thing"); = "100px"; = "100px"; = "red";  var thing2 = document.getElementById("thing-2"); thing2.setAttribute("style", "width: 100px; height: 100px; background-color: red;");

Has that been figured out to discover what’s best cross-browser? If this stuff takes off, will browsers need to evolve to handle things in a different way?

The browser has this whole concept of the CSSOM. Can we use that somehow more intelligently through JavaScript rather than inline styles?

CSS is successful because of it’s simplicity

CSS is a fairly easy to jump into. A lot of people know it. You can hire for it. It’s portable.

Some of these “dynamic” styling concerns can be solved with regular CSS

  • There are demos that include measuring widths and subtracting fixed values from them. CSS can do that with calc().
  • There are demos that include setting font-size or line-height that depends on the browser width or height. CSS can do that with viewport units. Using JavaScript for this kind of thing is overtooling.
  • There are demos that dynamically change colors on many different elements. CSS will be able to do that with native variables.

We tried this in 1996 and it was a bad idea then

Get off my lawn.

CSS is cacheable

The network is still the bottleneck. CSS files can be cached so the network doesn’t even come into play and that is smoking fast.

You can still use React

React is pretty awesome. Here’s an article by David Khourshid on Styling React Components in Sass. Mark Dalgleish doesn’t like the global nature of CSS, and has working concepts to localize selectors. Glen Maddern expounds upon this in Interoperable CSS.

Doesn’t anyone care about progressive enhancement anymore?

This is a wider conversation is perhaps out-of-scope here. Because sites (including React based sites using inline styles) can be rendered entirely server-side, it means they can be done with progressive enhancement in mind. Although “can be” and “what it actually encourages” are different things.

The Debate Around “Do We Even Need CSS Anymore?” is a post from CSS-Tricks


WordPress Theme Giveaway: 4 Copies of Responsive WordPress Business Theme Pro

If you have been searching for a great responsive theme with easily customizable features for your business, then the Responsive WordPress Business Theme might just be for you. Today, our friends from ThemeAlley have decided to reward our readers by giving out free copies of their Pro version theme.

About Responsive WordPress Business Theme

The Responsive WordPress Business Theme has seven beautiful ready to use skins with which you can use the WordPress theme customizer to customize them and create a unique design for yourself. Other features include:

  • 7 sliders/Headers,
  • 9 Homepage Layouts,
  • 4 Portfolio Layouts,
  • 6 Footer Layouts,
  • Color customization,
  • Font Customization.

Slit Slider
Slit Slider

Black/Gray Theme with Header One
Black/Gray Theme with Header One

Footer One
Footer One

The Prizes

4 copies of Responsive WordPress Business Theme Pro version valued at $ 55 each.

How to Win?

To enter this giveaway and have a chance to win, just do the following:

  • Comment below and tell us how would you use the theme and how it might help you.
  • Share this giveaway on the social network of your choice.

It is extremely important that you leave a valid email address, so that we can reach you when you are a winner! The winners will be selected randomly and announced shortly in the widget of this article.

This giveaway ends on 2nd July 2015.

Good luck, everyone!

a Rafflecopter giveaway

Onextrapixel – Web Design and Development Online Magazine

Dealing With Selector Specificity – The What and How Of It

Irrespective of whether you are working on a small-sized, medium-size or a large project, coding issues tend to creep up if they aren’t addressed properly. Selector Specificity is one such issue that haunts developers, especially the ones working on large-size websites. As your website becomes bigger in size, it is important that the CSS selectors must become shorter. If not, this could result in making the specificity higher, which causes self-induced specificity issues.

In order to overcome such issues, you need to make the selectors more specific. Here you’ll learn about how you can identify conflicting declarations, and will understand the basic way to calculate the specificity of each selector. Additionally, you’ll find some useful hacks to increase the specificity, thereby providing valuable insight that helps improve your stylesheets.

Dealing With CSS Specificity

Let’s Get Started

Many front coders avoid CSS specificity, as it seems a complicated topic to them. However, to help make the process easy to comprehend for beginners the community has been continuously contributing many useful resources. For instance, you can find guides, teaching about CSS specificity with analogies such as plankton, fish and sharks or using any other terminology. Besides this, you can even find a CSS Specificity Calculator available over the web that help in calculating the “CSS specificity of stylesheet” and so on. But, you may hardly find these guides comprehensible.

So, to help you understand CSS Specificity in a simplified manner, we’ll be discussing a few common hacks to deal with specificity (which you may have heard about or read online). The hacks best suit the need of the projects having complicated architecture, making it difficult for you to find a simple fix to overcome the CSS specificity problem. But, before diving in-depth about the various hacks to maintain CSS specificity, let’s first have a brief insight on what we mean by CSS Specificity and its key aspects.

CSS Specificity: An Insight

  • Specificity plays an important role in CSS (Cascading Style Sheets) in identifying which rule will be applied to an element.
  • CSS Specificity helps determine which CSS rule will be applied to a selector by the browsers.
  • In essence, Selector Specificity is a process that identifies which CSS rule takes precedence when multiple rules are being applied by two or more declarations to a similar element in the HTML markup.
  • If two selectors are being applied to the same element, then one having a higher specificity will emerge as the winner.
  • The specificity level of a selector in CSS can be calculated using 4 different categories – that we’ll be covering in the next section.

The Basic algorithm to Calculate CSS Specificity

Let’s now proceed and learn about the basic algorithm that can be used for calculating specificity of a selector – to figure out conflicting declarations.

Any simple CSS selector falls into any one of the following four types:

  1. Type a: Count 1 for an inline style or otherwise count 0
  2. Type b: ID attributes
  3. Type c: class selectors + attribute selectors + pseudo-classes
  4. Type d: element names + psuedo-elements

Selector Specificity

For example: Look at the following code snippet of a simple selector, to calculate CSS specificity (i.e. occurrences of the above discussed types):

 p.message {   color: red;   } div.warning p {   color: black; } body#home div p {   color: white; } 

Let’s break down each selector to calculate the specificity:

color: red;

  • it doesn’t contain an inline style (type a = 0);
  • it has 0 ID selectors (type b = 0);
  • it contains one class selector, i.e. .message (type c = 1);
  • and contains only one element (type d = 1)

Result: Specificity for the selector is 0,0,1,1

#warning p {
color: gray;

  • it has no inline style (type a = 0);
  • it contains 1 ID selector, i.e. #warning (type b = 1);
  • it has no class selectors, attribute selectors or pseudo-class (type c = 0);
  • and contains one element, i.e. p (type d = 1)

Result: Specificity for the selector is 0,1,0,1

body#home>div#warning p.message {
color: black;

  • it doesn’t contain an inline style (type a = 0);
  • it has 2 ID selectors, i.e. #home and #warning (type b = 2);
  • it contains one class selector, i.e. .message (type c = 1);
  • and contains only three elements, i.e. body, div and p (type d = 3)

Result: Specificity for the selector is 0,2,1,3

Since this part of the code contains the highest specificity, the color of element “p” will be black.

Now, if you’ll compare all of the above three styles, you’ll notice that the selector p.message contains a lower specificity compared to other two selectors. But, considering the fact that p.message has low specificity than #warning p can make the beginners rack their brains – who believes that a class selector is sufficient to match an element.

So, let us now talk about the several hacks that beginners can consider to overcome the selector specificity problem.

Hack 1 – Using the BEM Methodology

One of the easiest ways to tackle the selector specificity is to make use of the BEM (also referred to as Block Element Modifier) hack. It serves as an excellent front-end toolkit that helps make CSS more structured and less confusing to understand.

The BEM method doesn’t require you to reflect a block containing the nested DOM structure. And, the best part is that specificity remains the same for every selector. BEM helps write classes rather than IDs in HTML, so as to keep specificity low. In simple words, since you’ll be using only classes for your CSS, every selector will contain a specificity of 0,1,0.

BEM has proved an effective hack for front-end developers who work mainly using HTML, but it isn’t a good solution for developers who create CMS. That’s because, the CMS code editors don’t require HTML coding skills to create basic content. So, you cannot always use BEM for all of the projects. But, you can use CSS preprocessors (like LESS, SASS, etc.) as an alternative to the BEM hack.

Hack 2 – Make Some Existing Selector Heavy

In case you come across a specificity problem, you can resolve it by making a selector heavier than others, by prepending it with an ID, attribute selector, class, etc. This helps increase the specificity a little.

What’s more, many front end coders ignore IE when writing CSS code. However, this feature has been mainly created to address this issue, and targets IE with the help of a conditional HTML tag. But, there’s a lot more that this feature can provide, you can look forward to utilize.

You can prepend a selector using the “parent reference selector” (&) when using CSS preprocessors, as follows:

 .class {   body & {     foo: bar;   } } 

When the above code is compiled, it will produce the following result:

 body .class {   foo: bar; } 

You can even prepend the first block of the code using the html or body tag. But, it would be better to use something more specific that can be reflected on all your pages like .page, , and many more. For instance, Sass lets you prepend with a selector within a variable, so that you can easily make changes to it in the future. In addition, for large-sized projects, you can choose to create a set of prepending selectors having different weights:

	 $  prepend1: "html &"; $  prepend2: "#wrapper &";   .selector {   #{$  prepend1} {     background: #cacaca;   }   #{$  prepend2} {     background: #fefefe;   } } 

The result of the above code will be:

 html .selector {   background: #cacaca; } #wrapper .selector {   background: #fefefe; } 

So, if you’ll prepend an existing selector with, let’s suppose, a type selector then the specificity will be 0,1,1. And prepending the selector with an ID will result in a specificity: 1,1,0.

But there is a disadvantage of using this hack: in the case of prepending something with an already heaviest selector (e.g. #wrapper), you won’t be able to override it and rather will have to create a new heavier selector. But, this may not always be possible.

Hack 3 – Self-chained selectors

Although, the above hack that suggested prepending a selector with something is useful, but it isn’t an expandable solution – you may feel restricted when finding ways to target a parent. Plus, prepending over one selector, i.e. the heaviest one in your code will limit your options needed to overcome a specificity problem in the future.

Thankfully, the front-end community has once again made a worthy contribution by introducing the feature that requires self-chaining a (child) selector to bump up specificity.

Both prepending a selector feature and self-chained selectors work with ids, classes, and attribute selectors. The difference between the two is that the latter doesn’t work with type selectors. In fact, the self-chained selectors feature perfectly suits the CSS codebase that mostly use classes to style the contents of the CSS, as it provides a scalable way to override any type of selector.

Furthermore, the same selector can be chained to itself several times using the parent reference selector, as shown in the code below:

	 .selector {   &#{&} {     background: #cacaca;   }   &#{&}#{&} {     background: #fefefe;   } }  .selector.selector {   background: #cacaca; } .selector.selector.selector {   background: #fefefe; } 

This code can be a bit difficult to grasp in the beginning, and so, you can use a mixin instead to bump each selector specificity iteratively:

	 @mixin specificity($  num: 1) {   $  selector: &;   @if $  num > 1 {     @for $  i from 1 to $  num {       $  selector: $  selector + &;     }     @at-root #{$  selector} {       @content;     }   }   @else {     @content;   } }   .selector {   @include specificity(2) {     background: #cacaca;   }   @include specificity(3) {     background: #fefefe;   } } 

Resulting in the following CSS:

	 .selector.selector {   background: #cacaca; } .selector.selector.selector {   background: #fefefe; } 

Self-chaining the selectors (using classes) will increment their specificity from 0,1,0 to 0,2,0 to 0,3,0 to 0,4,0 and so on.


Have you been battling with selector specificity issues when working on CSS? Then, hopefully this post will prove a handy guide for you.

In essence, using the hacks as discussed above to increase the specificity will make the selectors more specific and easier to understand. In fact, they’ll prove more useful compared to using any dev tools to check whether the styles in your CSS have been overridden by any other style, because of some unknown reason.

Onextrapixel – Web Design and Development Online Magazine

V&A and Proud

The sun is shining and the V&A’s rainbow flag is up and flying for the weekend ahead!

The sun is shining and the V&A’s rainbow flag is up and flying for the weekend ahead!

I’ve just got back to my desk having thoroughly enjoyed one of today’s LGBTQ Gallery Tours. These were additional tours specially organised in recognition of tomorrow’s Pride in London parade.

It was really great to see so many people there. As we first gathered, I counted about 100 of us somewhat taking over the Main Entrance, so it was a good job that our guides Dan, Tony and Glynn were able to divide us into three groups to navigate the many galleries as we explored a range of LGBTQ-related objects on display. Given the incredible weather outside and the tempting, cooling waters in the Madejski Garden, I was particularly pleased to see so many people opting to instead join us indoors!

One of the objects we looked at in Tony’s group was the rather magnificent cast of Michelangelo’s David (and his fig leaf!). This was particularly apt as for this weekend the V&A are currently sporting this android avatar as part of the #andproud campaign.




For those of you in London tomorrow, do remember that the LGBTQ Gallery Tours will also be taking place again at 4pm.

Happy Pride!