What does Google consider as a paid link? 5 Mar 2014 12:20 AM (11 years ago)
Matt Cutts has released a video explaining what they use as the criteria when determining what their search spam team considers as a paid link.
Here’s the video:
What is considered as a paid link?
Explicit link sales
Buying or selling links for the purpose of passing PageRank has been against Google’s guidelines for a while now and Google has certainly handed out penalties based on this criteria.
A single link may go unnoticed but sites that buy or sell links tend to go overboard and patterns begin to emerge which are easy for Google to spot.
How close is the link to the value of money
In Matt’s video he uses the example of gift cards being given away in exchange for a link. Personally I don’t feel as though this criteria is any different to someone outright buying a link as it’s easy to determine what value the link was purchased for.
Gift vs Loan
Technology companies frequently send out their products for others to review. If the item is loaned, then Google sees that as perfectly acceptable. However, if the product is sent out as a gift in exchange for a review/link then Google also sees this as a paid link.
Intended audience
Not all products given away may be considered negatively by Google though. Matt gives the example of a Nexus 7 given away so that developers can write apps for the device. This would be acceptable as the purpose isn’t for the website to benefit from links. However, it would be considered manipulative if a Nexus 7 was given to a group of bloggers for the sole purpose that they would include links to the Nexus 7 website.
Would it be a surprise
Matt’s final point explains whether an action would be a surprise to the blogger or reporter. If free tickets were given to a movie critic in exchange for writing a review then that would be expected. However, if a laptop was given as a gift to the critic this would be considered unusual and should be penalised.
But How does Google determine what is a paid link?
Personally, I feel as though the criteria for what Google considers as a paid link is exactly the same despite the five points Matt has explained.
It basically boils down to whether or not the blogger/reporter has been bribed into posting a positive review or link on their website.
What is less clear to me is how Google actually determines whether someone has gifted or loaned someone a product? How does Google know if a business is bribing a blogger by giving them a laptop? How would Google know that any of these exchanges have taken place if they’ve happened offline?
Maybe this is the point and Google simply want to make SEO’s aware that this kind of activity isn’t acceptable? Or maybe they do have algorithmic ways of tracking these kinds of transactions as patterns emerge online?
I can’t imagine that if a website were to gift a product in exchange for a single link, that one transaction like that alone would cause a penalty. At the same time, that single transaction probably wouldn’t actually be all that beneficial to the website in question.
Where things do become a little bit more problematic for the website is if they’re doing things like this on a large scale. Patterns and trends may become easier for Google to track, competitors may hear about this activity and report it to Google who may then take action.
I’d be interested to hear if any websites have been penalised in the past for any of the criteria Matt has explained apart from outright buying/selling links?
Why opening external links in new tabs should no longer be standard behaviour 3 Mar 2014 4:30 AM (11 years ago)
Any web designer should be familiar with a client requesting that links to other websites should open in new windows/tabs and whilst it’s very easy to do, is it really the best solution for usability and accessibility? This article explores why this practice should no longer be standard behaviour.
One of the most common scenarios when building a website is for a client to request that a link pointing to an external website shouldn’t take the user away from their own site. The worry from a client’s perspective is that once a user leaves their website, they’ll lose that potential customer as they’ll no longer be on their website and therefore keeping the website in an inactive tab will remind the user of their previous intent.
This logic is sound but there are other factors that the client probably hasn’t considered.
New tabs aren’t accessible
Clients will be thinking of the user experience from their own perspective and don’t usually consider how other people may interact with a website. Some users may only use their keyboard to browse the web which means using new windows can be difficult to navigate. Other users may be using assistive technology such as screen readers and opening a new tab can be confusing as they may no longer be able to get back to the previous website they were using.
This means that rather than helping the user get back to your site, users are actually confused and presented with a much more difficult user experience than the one intended by opening windows in a new tab in the first place.
Confusing for novices
Web designers should consider themselves advanced users as we’re familiar with how tabs work and can instantly recognise when a link has opened in a new window but for people that aren’t as advanced, the experience can be disconcerting. It may be surprising but I’ve worked with certain users who don’t understand the concept of tabs at all and when they’ve finished browsing simply close the browser rather than going back to open tabs.
The back button won’t work
In my opinion, this is the major problem with opening links in new tabs and is related to the above two points. Anyone who doesn’t understand how tabs work or realise that a website has opened in a new tab will be disorientated as they won’t be able to use the back button to get back to where they previously were.
This actually gives the impression that the back button is broken and despite the initial intention that the new tab will help people get back to the previous website, this can actually have the reverse implication.
No control over new tab or new window
Some users may have their browser settings set to open external links in a new window rather than a new tab. This can lead to the new window hiding the original website with no obvious way for the user to get back to what they were previously viewing.
This will again cause the back button not to work but will also give the user no visible indication of where they had come from. Assuming that this scenario would be most common for novice users or people with accessibility issues, this escalates the problem further for them.
It doesn’t give advanced users a choice
I’d consider myself an advanced user and therefore if I’m browsing a website and spot a link that I’d like to read later then I’ll deliberately open it in a new tab. However, if I’ve finished browsing a website then I’ll simply click the link and want it to open in the same window. If a website forces a link to open in a new tab then I’ll usually simply close the previous tab anyway so the whole purpose of this opening in a new window is pointless if I didn’t want it to.
It also means that the website is attempting to make decisions on my behalf. If I want to open a new tab then I have the ability to do so, if I want to continue using the same tab then I’d like that choice, so a website shouldn’t try and second guess what the user wants to do without solid data or user experience testing to back it up.
New tabs aren’t mobile friendly
I personally find opening links in new tabs extremely frustrating on mobile devices as the tab experience isn’t as friendly compared to the desktop browser. Quite often after reading articles and clicking through to related websites from one website to another I’ll notice that multiple websites are open in the background and have to go through the time consuming task of closing all those tabs which are no longer relevant.
Summary
There are some scenarios where new tabs may be appropriate but in my opinion these should be the exception where a clear purpose has been considered and all the advantages and disadvantages above have been weighed up.
Users have a number of ways to save a website to come back to later if they wish including bookmarks, pocket and a whole range of social media tools so that they can share articles and content.
Feel free to comment below if you have had any similar experiences with clients or a difference of opinion.
How to use the :nth-child selector 27 Feb 2014 10:00 AM (11 years ago)
This tutorial explains how the :nth-child pseudo-selector can be used to style specific HTML elements depending on their position within your markup.
:nth child format
The format of the :nth-child selector is pretty straight forward and the only difference concerns what value is placed within the brackets.
ul li:nth-child(4n) { background: #ccc; }
In the above example, the “4n” is the value that determines which element is given the background colour.
Odd and even rows using CSS
The :nth-child selector accepts two keywords, odd and even. It’s pretty self explanatory as to what these do and they’d be used in the following format.
ul li:nth-child(odd) { background: red; }
ul li:nth-child(even) { background: blue; }
All odd numbered li’s would have a red background, whilst all even li’s would have a blue background.
:nth-child and numerical values
Using numbers can get a little more complicated. To select a single element you’d simply use a single number:
ul li:nth-child(3) { background: #ccc; }
The above example would simply select the 3rd element in your list.
However, the more common use for :nth-child is to select elements in a specific pattern. For example, you may want to select every fourth element.
In order to do this you’d need to do the following:
ul li:nth-child(4n) { background: #ccc; }
To see how this works you’ll need to do a little bit of algebra to understand what “n” represents. Essentially, “n” starts at zero and counts upwards until there are no more matches.
Therefore for the (4n) value we get the following:
(4 x 0) = 0 = no match
(4 x 1) = 4 = 4th Element
(4 x 2) = 8 = 8th Element
(4 x 3) = 12 = 12th Element
(4 x 4) = 16 = 16th Element… and so on.
Browser compatibility
All modern browsers support :nth-child including IE9 and upwards so we’re almost at the stage where you don’t even have to consider whether your target audience has support.
However, you may need to consider that IE8 has no support for nth-child. If you’re using it for odd/even row colours then I’d personally use :nth-child without hesitation, however if it’s for removing margin, border or padding from elements and the layout is heavily dependant on it then you may be better considering the jQuery method of applying :nth-child.
Further reading and tools
HTML5 Logo Tag 3 Jan 2014 7:17 AM (11 years ago)
I’ve been receiving a number of visitors to this site from people searching for information about an HTML5 logo tag. In short, <logo> doesn’t currently exist but there are a couple of options to markup your logo correctly.
Use the header element
Your logo should always sit within the header element of the page and will usually be consistent throughout the site so this should be your starting point.
<header>
put your logo here
</header>
You can include other elements within your header such as social media links, search functionality and site navigation if you wish.
Use an h1 tag and image replacement
I’ve written about CSS image replacement in a previous article so if you’d like to use this method feel free to use the technique in this article: CSS Image Replacement.
<header>
<h1>My company name</h1>
</header>
or just use an image
It’s been a long running discussion within the industry as to whether people prefer to use an h1 tag or just an image tag for the site logo. Personally I prefer to just use an image but that whole argument has been covered many times before.
<header>
<img src="/images/logo.png" alt="My company name" />
</header>
Conclusion
Personally, I don’t make it any more complicated than simply putting an image in the first header element of my websites, but either of the two options above are perfectly legitimate ways of including your logo within your page.
10 New Year Resolutions for a Web Designer 3 Jan 2014 12:04 AM (11 years ago)
It’s a new year so what better time to try and get organised and better ourselves within the web development industry. Here’s my list of 10 things to try and improve at during the new year.
Research and read more
Work often becomes the primary focus because that’s what pays the bills but if we focus too much on the work and don’t keep up with the latest trends then it’s very easy in this industry to fall behind and lose touch with the latest techniques and development.
A great new year resolution is to make an extra effort to spend a little time each week reading blog posts, articles and magazines to keep up to date with the industry.
Learn something new
As web designers we should always be looking at improving our skill-set as there’s always something new and exciting to learn. Whether that be something new within your own field such as responsive design or you want to try something new like JavaScript, PHP or WordPress development, there’s always something new and exciting to learn.
Start projects the right way
Designers can be guilty of jumping straight into Photoshop or code so one of my resolutions is to take a step back and make sure I’m organised first. This mainly involves making sure that folder structures are in place, a proper project workflow is consistent across projects and source control is in place.
Improve estimating and the quoting process
For large projects it’s very difficult to be accurate with quotes due to the amount of things that can vary as you get deeper into a project especially when design is concerned. Therefore it’s important to have a proper process in place and learn from any mistakes at the end of each project so that your next quote is more accurate.
Time management
This leads on from the last point so that you can improve your workflow from every project. A lot of designers provide a fixed quote and then don’t learn whether that quote was accurate or if it needs to be tweaked for future projects. By logging time and making a note of how much time each task took compared to the amount of time estimated, you can get a better understanding of where your time was spent and how your estimates can be improved in the future so you are properly billing for your time.
Start a side project
Project work for clients pays the bills but it’s very rare that we can experiment with new techniques or technologies that aren’t quite ready for the mainstream. This is where side projects can come in so that you can develop your skills and be ahead of the curve.
Alternatively why not build a site of your own that pays the bills where you’re in complete control and only have to answer to yourself rather than a client?
Improve social media presence
Most web designers are on Facebook and Twitter but how much do we interact with other people and really use these social media accounts to their fullest? By engaging with other users on social media we can not only help other people in the industry but also build our own reputation at the same time.
Update your portfolio
If you’re a busy web designer then you’ll have probably neglected your online portfolio a little and it’s more than likely still showing your work from last year like myself. The new year is a great opportunity to dig out all the work from the previous year and update your portfolio. While you’re at it though it’s probably also a good idea to factor this bit of work in at the end of every project so that your portfolio remains up to date all year round.
Write blog posts
Another one that gets neglected when you’re busy will most likely be your blog. Why not set aside 30 minutes or an hour each week to write a blog post so that your site remains fresh and relevant?
Stay healthy
It’s very easy with an office job to remain inactive for the majority of the day so maybe a resolution can be to go out for a quick walk at lunch rather than a ready meal at your desk? Join a gym, take up a sport etc. It may also be that you take on board all of the above resolutions and improve your project workflow and time management as a whole so that you have less time to spend at the office which improves your free time.
Summary
I appreciate that new year’s resolutions aren’t for everyone and quite often most have been forgotten by mid-January but if we start off the new year with ways to improve ourselves in our working environment then hopefully we’ll all have a successful 2014.
I’m personally taking on all the above advice myself and will expand on some of these points in their own blog post over the coming weeks.
Do you have any new year’s resolutions that aren’t listed here to help you improve over the coming year?
Beginners Guide to Responsive Design 11 Dec 2013 5:45 AM (11 years ago)
The web used to be relatively easy to design for. In a lot of cases you could simply pick the most common screen resolution, whether that be 640, 760 or 1024 and design for a fixed width. If you wanted to go a step further then you could use percentages so your layout adapted its width however with the variety of device sizes increasing all the time this is no longer an option.
Device sizes can range from around 320 pixels wide for smart phones with a huge variety of tablets, laptop, desktop monitors and smart TVs making up the rest of the devices to consider, so what’s the best practice for creating a responsive website?
Beginners Guide to Media Queries
You may have used media queries in the past without actually realising, for example the media=”screen” or media=”print” that is sometimes added to a stylesheet link is a media query. To use them for responsive design we’re just taking advantage of the width attributes.
Media queries in an external stylesheet
The first example allows us to specify different stylesheets like so:
<link rel="stylesheet" media='screen href="/css/style.css" />
<link rel="stylesheet" media='screen and (min-width: 480px) href="/css/xsmall.css" />
<link rel="stylesheet" media='screen and (min-width: 600px) href="/css/small.css" />
<link rel="stylesheet" media='screen and (min-width: 700px) href="/css/medium.css" />
<link rel="stylesheet" media='screen and (min-width: 980px) href="/css/large.css" />
<link rel="stylesheet" media='screen and (min-width: 1170px) href="/css/xlarge.css" />
Within this example, I’d include all my common styles within the style.css which would be for all devices at the smallest resolution (i.e. smart phones). I’d then build on that for each resolution as more screen becomes available.
However, this obviously leads to more HTTP requests and can also lead to jumps in presentation if you resize your browser so I prefer the following solution.
Media queries within a CSS file
By putting the media queries within a single CSS file you can reduce the amount of HTTP requests and I personally find it much easier to manage when you have the code that relates to the same element in a similar location within the CSS.
Here’s an example as to how this might look:
.wrapper { width: 100%; }
@media only screen and (min-width: 480px) { .wrapper { width: 440px; } }
@media only screen and (min-width: 600px) { .wrapper { width: 560px; } }
@media only screen and (min-width: 760px) { .wrapper { width: 720px; } }
@media only screen and (min-width: 980px) { .wrapper { width: 990px; } }
@media only screen and (min-width: 1170px) { .wrapper { width: 1130px; } }
Viewport width issue
Despite using media queries, some devices don’t initially render at the correct zoom level. Therefore it’s also important to include the following meta tag when using media queries to create a responsive layout.
<meta name="viewport" content="width=device-width, initial-scale=1">
Media query browser support
As is usually the case, the only browser that you really need to consider as a problem is Internet Explorer. IE8 and below do not support media queries so it’s a good idea to provide a fall back if you do need to support those browsers. For example, you could serve up a single stylesheet which incorporates all the stylesheets up to 990px.
An alternative is css3-mediaqueries-js which provides a JavaScript version.
Summary
With the growth of mobile devices accessing the internet set to eclipse that of desktop computers in the near future it’s important for us to provide a better experience for mobile users and responsive design is an excellent solution to add to our toolbox.
CSS Text shadow 23 Sep 2013 7:33 AM (11 years ago)
Applying css text shadow is very simple to apply using CSS3. Within this article are some sample code snippets to easily apply a text shadow to text in a webpage.
You can apply CSS text shadow to any text on a webpage using the following:
p { text-shadow: 1px 1px 1px #000; }
This will output the following style:
The first value is the horizontal distance and the second the vertical distance of the shadow. The third value is the radius of the blur and the final value is the colour of the shadow:
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
Multiple text-shadows
You can also specify multiple text shadows like so:
p { text-shadow: 1px 1px 1px #f00, 3px 3px 5px #00f; }
This will output the following style:
Text-shadows with transparency
You can also specify the colour using RGBA values to allow transparency within the shadow:
p { text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); }
This snippet will generate the following style with 80% transparency.
Browser support
All modern browsers support text-shadow, however IE9 and below sadly don’t. Personally I feel it’s fine to use this as progressive enhancement but if you do absolutely need text shadows in earlier versions of IE then you’ll probably be best using a conditional style which relies on a filter. You can find details of this here: text shadows for IE9 and below. You could also use javascript if you’d prefer a jQuery solution. jQuery text-shadow.
Custom jQuery and PHP Twitter Widget 13 Jun 2013 11:29 PM (11 years ago)
If you just want to use the standard Twitter widget that Twitter provide then that’s easy enough but what if you want a custom style that fits in with the style of your own website? This quick tutorial will show you how.
There used to be a ton of plugins available that were quick and easy to install but as of June 2013 this is no longer an option due to Twitter updating their API to v1.1. However, there is still a way of styling your own Twitter feed using the following method.
First, you’ll need to download the code from github: Download Tweet.js-mod
Next, upload the whole /twitter/ directory to the root of your website.
Then you’ll need to reference the jQuery file with the following in the head of your document (and also make sure you’re referencing the jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter/jquery.tweet.js"></script>
Now, create a div within your HTML page that you want to target with the twitter feed.
<div class="twitter-content"></div>
Next, you’ll need to add the following jQuery to the HTML page making sure that you change the username to the feed you want to display:
<script>
$(document).ready(function() {
$('.tweet-content').tweet({
username: "dave_woods",
modpath: '/twitter/',
count: 3,
loading_text: 'loading twitter feed...',
});
});
</script>
Prior to Twitter API v1.1, this would have been sufficient for the twitter feed to work. However, you now need to provide the code with OAuth credentials so you’ll need to visit https://dev.twitter.com/apps.
Once you’re there, login and create an app. After the app has been created, scroll to the bottom of the details tab and click the “Create my access token” button.
I then found that I had to go to the “Settings” tab and scroll to the Application Type section and change the “Acccess” setting to “Read, Write and Access direct messages“.
After you’ve updated this, click on the OAuth tab and you’ll see the Consumer key, Consumer secret, Access token and Access token secret which you’ll need to activate the code.
Within the Twitter folder that you’ve downloaded, open up the index.php file and you’ll see the four areas that you need to add these keys.
// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';
// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';
// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';
// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Once you’ve done this and uploaded all these files to your site, your Twitter feed should display in a similar way to the Twitter feed in the footer on this site. You’ll then just need to add a few bits of CSS to style it the way you like and you’re good to go.
CSS3 Buttons 22 May 2013 10:20 AM (11 years ago)
In years gone by, the only way to create nice looking buttons was to use an image but these were difficult to maintain without image editing software. However, with CSS3 we can apply nice looking gradients and and rounded corners very easily for modern browsers that support them.
These buttons degrade gracefully for browsers that don’t support gradients and rounded corners but for those that do we can give users a nicer experience.
CSS3 Buttons Demo
CSS3 Buttons HTML
The HTML for these buttons is very simple and you can clearly see how easy these are to update with different text within the button.
<p class="cta-style-a"><a href="#">This is a button</a></p>
Buttons CSS
The CSS for the buttons is relatively simple. First we set a font size and font family for the paragraph.
.cta-style-a {
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Next we target the anchor with the following. This applies a gradient using all the relevant browser prefixes and the border radius. We’re also include some text shadow, border, colour and a few other styles but you can play around with these as required.
.cta-style-a a {
display: inline-block;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
background-color: #64b414;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(#a1d749, #64b414); /* FF 3.6+ */
background-image: -ms-linear-gradient(#a1d749, #64b414); /* IE10 */
background-image: -webkit-linear-gradient(#a1d749, #64b414); /* Safari 5.1+, Chrome 10+ */
background-image: linear-gradient(#a1d749, #64b414); /* the standard */
text-decoration: none;
padding: 3px 12px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #91c34c;
}
I’ve also included display: inline-block; so that margin can be applied if required.
Finally, we apply the hover state for the button which simply applied a different coloured gradient and border colour:
.cta-style-a a:hover {
background-color: #808080;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(#505050, #808080); /* FF 3.6+ */
background-image: -ms-linear-gradient(#505050, #808080); /* IE10 */
background-image: -webkit-linear-gradient(#505050, #808080); /* Safari 5.1+, Chrome 10+ */
background-image: linear-gradient(#505050, #808080); /* the standard */
text-decoration: none;
border: 1px solid #333;
}
Summary
And that’s it. All aspects of the button are completely customisable so that you can change the font size, colour of the buttons, size etc without ever having to go into Photoshop.
I also use LESS along with Preboot.less so that the colours of buttons are even easier to change and update from project to project and will cover that in a future tutorial.
CSS Tabs 20 May 2013 12:10 AM (11 years ago)
I’ve written a couple of examples of CSS Tabs in the past but both are a little outdated now so I thought it was a good time to revisit these and rewrite them using CSS3 that degrades gracefully and works in all browsers.
CSS Tabs Demo
Here’s an example of what this HTML and CSS will generate:
This version of the CSS3 Tabs menu doesn’t use any images so it’s very easy to adapt and use different colours if required.
CSS Tabs HTML
Here’s the HTML you’ll need:
<div class="demo tabs">
<nav>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
It’s essentially, a simple unordered list within an HTML5 nav element, which should be familiar to anyone used to writing HTML5.
Tabs CSS
.demo.tabs {
font-family:helvetica,arial,sans-serif;
font-size:13px;
}
.demo.tabs a {
-moz-border-radius:5px 5px 0 0;
background-color:#ddd;
background-image:-moz-linear-gradient(#f0f0f0,#ddd);
background-image:-ms-linear-gradient(#f0f0f0,#ddd);
background-image:-webkit-linear-gradient(#f0f0f0,#ddd);
background-image:linear-gradient(#f0f0f0,#ddd);
background-repeat:repeat-x;
border:1px solid #555;
border-color:#eee #ccc #ccc #eee;
border-radius:5px 5px 0 0;
color:#333;
float:left;
padding:5px 15px;
text-decoration:none;
}
.demo.tabs a:hover {
background-color:#ddd;
background-image:-moz-linear-gradient(#e0e0e0,#ccc);
background-image:-ms-linear-gradient(#e0e0e0,#ccc);
background-image:-webkit-linear-gradient(#e0e0e0,#ccc);
background-image:linear-gradient(#e0e0e0,#ccc);
background-repeat:repeat-x;
}
.demo.tabs li {
bottom:-1px;
float:left;
margin:0 3px 0 0;
position:relative;
}
.demo.tabs li.current a {
background:#fff;
border-bottom:1px solid #fff;
}
.demo.tabs li.current a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.demo.tabs nav {
border-bottom:1px solid #ccc;
padding:0 0 0 10px;
zoom:1;
}
.demo.tabs nav:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.demo.tabs ul {
list-style:none;
margin:0;
padding:0;
}
We’re using CSS3 border radius on the anchor along with a background colour and borders, however we’re also using CSS3 gradients to colour the tabs.
The gradients and border radius won’t work in older browsers but they will still be completely functional albeit with a solid background colour and square borders.
Although this means that people with older browsers won’t get quite as nice an experience when viewing the page, it does mean that the loading time for the page will be much quicker due to the lack of images required to otherwise achieve this and it’s also much more flexible if the client decides they want to change the colour of these tabs, change the spacing or change the font for example.