Advertising has been around for a very long time, from some of the earliest forms in the Roman empire displaying Caesar’s head on a coin to modern website banners. Adverts are all vying for our attention and to influence us, the more businesses that are being founded the need to make successful advertising is growing even greater. Knowing how the human psyche works give advert designers a little head start in creating something that stands a chance of convincing the viewer that they need the product or service in question. This is where AIDA comes in.
Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.
Jetpack Edit CSS
I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.
If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.
This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.
Stage 2: use embed code and div class to create responsive youtube videos
Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.
Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.
Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.
If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.
Another new twitter profile size?! Really!?? Once again, one of the top social media channels has changed the way it looks trying to improve the user interface and I must say, they have done quite a nice job of it.
I find it to be a much more minimalistic approach than with the interesting background and follows the same style of Google+ and Facebook with a large header and a small profile picture to one side which in turn makes it easier to design your branded images for and maintain consistency throughout. In this post I will discuss the new twitter profile size for 2014 and what to consider when creating yours.
What you will notice when you activate the new twitter profile is the header of your Twitter profile has now been made to expand the full width of the users screen. Although this a beautiful, simple idea if you have built and designed your Twitter profile in depth to exact measurements in the past it may result in your branded profile being blurred or pixelated…not good!
The new measurements of the Twitter header is at least 1500px x 500px and I recommend using a large ppi ( ppi is an abbreviation for pixels per inch. A pixel is a dot on the screen that makes up your image, the more of them the more clear your image will be ) as this will improve the clarity of your image especially if a user is using a very large screen such as a 2560px x 1600px retina display. Also, after uploading a jpeg i discovered Twitter seems to render png files better with less loss to the actual quality of the image, so yep, you guessed it, save it as PNG.
Twitter Profile Picture Size
The profile picture for 2014 size has increased in size on desktops too now displaying at approx 210px square. I still recommend adding an image that is fairly high in ppi, larger than the 210px but ensure that the profile picture remains square for best display.
Twitter Header peaks through
As you scroll through the Twitter news feed the header remains slightly in view by around 10px. I really like this feature as it add a decorative element to the new view. I’m really impressed with how nice the new interface feels on desktop, its so intuitive and pleasent to view, I get excited just looking at feeds on my laptop!! WOOP!
Avoid text with the new Twitter Header
I believe that avoiding text on your header is now compulsory. I would avoid it at all costs ( I know I have it at the moment ) as on smart phones it will not work well so try to be clever with images instead of having to include text. If people really want to find out more about you or your company they will visit your website and find out there.
Background still has a use
Twitter backgrounds still have their place and what I have found is that it still displays the background when you log in. It is no longer customer facing so design it for your own benefit. Maybe consider adding a message to remind yourself what you use Twitter for and when to use it. For example, maybe you could have the days of the week on one side and then each day suggest a topic that you want to discuss on that particular day or maybe simply just use the same image as the header, it is just for people that use your Twitter account so don’t worry about it too much.
Choosing your brand colour – Twitter Profile 2014
Again the colour selection remains and does have a great personalising effect on your profile so ensure that it is selected and not just the standard blue. Colour has a huge effect on a users psychology and recently, i spoke about the effect of colour in this blog post about branding here .
Responsive Twitter Profile Size 2014
Keep in mind that end users will, a lot of the time, be using the social media platform on their smart phones rather than the desktop display. When I looked at my new header design on mobile I noticed that my main marketing message ,my website url and my specialities, is slightly covered. To rectify this problem I would probably put my main skills to the very top of the header in order to avoid this happening, but for the time being, I’m quite happy with the way it looks.
Some 2014 Twitter Profile examples
Seeing how others are designing their new Twitter profile under the newly designed user interface can inspire you to design your own. I have put three of the ones I have spotted that I think are great designs, the first of which is Smashing Magazine, a web designer/developer magazine.
Smashing Magazine Twitter Header 2014
I particularly like the flat and fun cartoon illustrations of the editor showing that they have a sense of humour but also mentioning the url of their company. It makes me want to visit their site simply because i feel I will have a smile put on my face.
Thrive Twitter Header 2014
The next one is Thrive, a branding agency based in the North East of the UK. They have created a repeated image of their logo as a pattern for their new twitter header and it works really well. Their profile is all about branding so showing their brand colour and logo is a great way to show a professional design to their visitors on desktop computers, likewise, it will look great on smartphones as no text will overlap their account profile.
Design Boom Twitter Header 2014
Designboom are an excellent website all about design and they use their header to show some of the famous faces of design. I have always been a fan of their logo and I think their Twitter header compliments their brand message and content effectively.
Whether you are creating a new twitter account or updating your current site its important you reallt think through your graphics and whether the correct message is being portrayed. You may not think that a message is important when most people are focusing on what you tweet but any opportunity you have to either brand your business or self should not be missed and it shouldn’t be taken lightly and it would be wise to take at least some careful consideration of how you want to represent yourself to visitors of your Twitter account.
Do you have any other suggestions about the new Twitter Profile display? Would you like your profile included in the gallery? Please add a comment below with your twitter profile, I love to seeing the creativity of others. Happy 2014 tweeting folks!
Being close to the front of organic search results is really important to anyone who owns a website. It is seen as the holy grail of a good website but it isn’t always easy to reach the top as many a blog owner knows.
Semrush tool helps you discover who is ranking highest for particular keywords and in which country, you can discover which keywords are particularly expensive or alternatively cheap, if they are increasing in price to help you with your Adwords campaigns.
Discovering related keywords
Not only can you see how a particular keyword is performing and who is achieving the best result in search engines for it but you can also discover other keywords that relate to the keyword you are trying to target.
The benefit of discovering keywords is that when you start writing new blog posts or web pages around your product or service you can discover which keywords are less competitive and what seems to be trending to boost the likely traffic to your website.
So for example, in the below image you can see how many times ‘cardigan’ keyword has been searched for (49,500), how much it costs per click (CPC) and what I think is very beneficial, how competitive the keyword is to allow your content to be found and clicked on, the lower the number the less competitive the keyword.
There are many more options but I will let you explore the keyword discovery website for yourself. Just know that on the free version you can only search for a small amount of keywords and you don’t get as much results as you would on the paid version. Don’t let that put you off, go and check it out NOW!
Is the keyword still trending?
Lastly, to make sure you are targeting a keyword that may be increasing in popularity check out Google Trends. This tool helps you see if your particular topic is going to be worth the effort. Will it bring in a massive influx of new traffic and hopefully fans of your content or not?
If the keyword is not going to attract people to your website how else can you bring your services into your potential customers consciousness? Can you target another keyword, do you need to rethink your product and or service? Or do you need to reconsider how to reach out to the potential market you are targeting?
I hope you find these tools useful and if you have any other suggestions about creating great content to help improve organic search results and traffic then please feel free to comment in the box below.
There is a lotta lotta information out there about digital marketing and how to get your website seen and generate sales leads and by golly, don’t you just worry that you’ve missed something? Hubspot, probably one of the biggest, if not the biggest, digital marketing agencies offers a service to see if your website is meeting the online marketing ‘grade’. Take some to grade your websites digital marketing via how well it is performing.
Designing a Twitter profile seems really really easy, upload a picture as your profile image, a background image, set your colour for links and bobs your uncle it is done. But alas, that was a story from the same place Cinderella comes from, creating perfected branded Twitter profiles really needs a Graphic Designer familiar with digital design and marketing, preferably social media marketing. In this blog post I will discuss what you need to consider when designing a Twitter Profile to perfection and why it is more important than you think.
1. Designing a Twitter Profile with exact Twitter Profile Measurements
The exact measurements of the profile is really important, to the width of the timeline, to the width of the sidebar, to the header size and the profile picture. All these elements have an effect on designing your Twitter profile layout (This my Twitter Account). You then need to consider are you going to left align the background image, centre it or right align it. Once you have considered the layout of the design next you need to keep in mind that everyone will be viewing Twitter on different platforms.
2. Screen resolutions vary
Twitter is available to view on many different size screens from a small smart phone screen upwards to a very large Apple Desktop PC. Twitter is a responsive platform meaning that you need to consider how your background is going to look on screens with different resolutions. If you look at the above image you can see that the company has not considered that everyone will view their profile at larger screen sizes and forgot to set the default background colour as white to help fade in the image to its background. This is easy to change but important to get it right otherwise you will begin to look cheap and unprofessional.
3. Branding
So you have considered what to include in your layout when designing a Twitter profile and remembered that users will be viewing your profile with different size screens, next you need to consider your businesses brand.
Branding is really important and if you are not consistent with your business message your audience will become confused if your identity looks different on Twitter so try to keep it looking similar to your website, collateral and overall brand. If you have one ( and professional brand designers should provide you with one ) use your style guide and adhere to it as close as possible.
4. Communicate product or service when designing a Twitter Profile
Next you will want to take the opportunity to advertise the product or service you are selling. Consider the images you are using as your background and header and do they put across the right marketing message? Does it communicate a story and/or have a call to action such as ‘download our free ebook’ or ‘sign up to our newsletter to find out when our new product is released’ etc. Although your users won’t always see your main profile background it is a marketing opportunity you should exploit and if someone should visit your Twitter Profile it should communicate something appropriate.
5.Social Media Consistency
Do you have social media channels already? Make sure that they are consistent throughout. Another words, make sure they all look the same from the Twitter account, to Google+, to Facebook, they all need to have the same style. In this image above can you tell instantly that this account is connected to the Twitter account previously mentioned? Nope, I don’t think so either, to rectify their problem they simply need to use their logo and possibly more white in their cover photo design. They are also missing a marketing opportunity to communicate something with text not just pictures.
6. Contact details
Lastly, but not least, I think it is quite vital to place your contact details on the Twitter background. Consider putting your business telephone number, address and other urls that maybe point to your website, social media channels and anything else that you think is relevant.
All things considered you can’t be good at absolutely everything and although Twitter do make it fairly straightforward to create your own Twitter profile sometimes getting a professional designer to create your imagery is better so that you can focus on the important parts of running your business efficiently whilst a designer develops your profiles in the background. If you need help with your social media profile designs I can help you with it, simply contact me using the contact page here, alternatively if you are a fellow designer is there any other points you consider when creating social media profiles?
Creating a colour scheme for your brand should not be taken lightly, colour has a huge psychological power over its viewer than has been with us in nature from the beginning of time. It’s not simply saying ‘I want it to be yellow’, you need to consider what shade of yellow as a vivid bright yellow has a different feel, mood and meaning than a dark mustard yellow. Here is some basic information about the meaning of the main shades of colour.
If you look up emailmarketing online you’ll see lots of people talking about why it is so effective and why they use it. What you won’t see much of is people talking about the types of emails that they send and why they send them. When it comes to any type of marketing or advertising a lot of it will depend on your industry and who you are trying to target. Realistically you will need to monitor what you are doing and see what is actually working. It is all well and good reading and guide to see what works for other people, but your business is different so you need to check what you are doing is working for you.
So, what email sending strategies and topics should you be looking at sending?
1 – Educational
People want to buy from a company that they trust to be an authority figure. When you send out emails don’t always send them out as a way of generating sales, sometimes you need to just give people information. You want to give people a reason to read your emails so if you fill them with relevant and useful information they are more likely to want to open it and have a read – especially in the future. Of course by showing them that you know what you are talking about and are knowledgeable in this area you have a better chance of encouraging them to buy from you in the future because if they trust you then they are going to trust your products.
2 – Informational
If you have an event coming up or you have heard of something that might be useful and relevant to the people on your mailing list then send them an email with the details. This should be done in a way that simply tells them what is going on, rather than encourage them to buy – remember emailing marketing is about building up your reputation as well as sales! Of course sales are good, but if every email you send out is trying to get money out of your customer then the chances are that they will stop reading. Make sure that you send out informational emails too, so that they see you as a helpful figure not just someone who wants them to buy something!
3 – Promotional
Of course an element of email marketing as to be about generating sales and this should not be forgotten. One of the best things you can do is send out emails to your list to let them know about special offers and sales that you have happening. Remember these are users that have signed up to your email list so they are already interested in what you have to say – this means you have a good chance of turning this around and making it a sale. What a lot of companies do is opt to tell mailing list users about a sale first or give out exclusive mailing list voucher codes as this will also encourage people to stay on your mailing list long term which is always a good thing!
4 – Newsletter
Depending on the industry you are in or the nature of your business you could look at sending out email newsletters. Generally speaking you should look to do this no more than once a month. You can use this as a news roundup of what has been happening in your industry and at your business. You can even have fun sections such as introducing the team or running a competition. Try to keep the newsletter relevant as well as fun, because after all people have signed up to your mailing list for a reason and that is to receive news and information from you.
A big part of the emails you send will vary on what is happening with your business and even the time of year. Make sure you monitor the success of any emails you send so that you know what has worked well and what type of emails you could be looking to mimic and send again in the future.
My name is Nicola and I have a keen interest in social media, SEO and internet marketing.
If you ask any web designer then they will tell you that they are currently programming websites while keeping HTML5 and CSS3 in mind. It really is the way to go in this day and age. Just what are they though? Let’s take a closer look, shall we?
Now, every single website is constructed from HTML and CSS code. There may be a few more programming technologies behind the site (PHP for example), but it is only HTML and CSS which has the capability of displaying information in your browser. JavaScript can do this to an extent, but it will still need to be used in conjunction with one of the other technologies.
HTML is the technology behind the layout of the page. CSS is the technology behind the aesthetics. There is a degree of overlap which you will see if you learn the languages. However, if you are employing a Phoenix Web Designer to carry out the programming for you, you will not need to know about this in too much depth.
Now, just like any programming language, HTML and CSS are regularly updated. New pieces are added into the code to make it far easier for them to create certain features. HTML5 is the 5th incarnation and CSS3 is the third incarnation. The idea is that these are the new standard. If you want your website to display properly in modern browsers then you will need to use both of these technologies.
HTML5 and CSS3 are modern standards. They have been designed in such a way to be much cleaner code. This ensures that sites that utilize them are very fast to load. Some of the features found in these new technologies, HTML5 especially, replaces items on websites where you would normally need a special plugin to display them. Take Flash for example. With HTML5 this has pretty much been ruled old technology. You can do everything that you want to do in flash with HTML5, and it does it much more effectively without the need to install any plugins.
Amongst the many features, both HTML5 and CSS3 have made it far easier to create websites that look fantastic on mobile devices. In fact, if coded well, you will have responsive design built in as standard to your site design. As mentioned before, HTML5 and CSS3 have ensured that old technologies with needed installation of plugins are now defunct. As a result, almost every website that follows HTML5 and CSS3 protocols should look fantastic on mobile devices. You are going to most likely need to wait until the mobile browsers are fully updated though.
As you can see, this is a very brief guide to HTML5 and CSS3. Sadly it would take up a whole book to go into depth on these. However, I do hope that the information here is more than enough to give you a nudge in the right direction and start to understand why your web developer is going to utilize them in your site design.
Author Bio: Kory Chesier is a professional blog writer, writes for HireaWiz a leading Phoenix web design specializing in custom web design, PHP development, Pay Per Click Marketing and SEO services.
How to create gradients was always the domain of photo editing software and vector creating programs, but now with modern technology and css3 you can create gradients with some coding that is fairly easy to learn. This is a brief guide on what you need to know on how to create gradients in css.
Where might I use gradients?
Gradient code is most likely to be used in buttons and backgrounds of websites or navigational system but don’t restrict yourself to just the common places that they are found, if you have a good idea for use of a gradient then go ahead and try it out, there are no limits to experimenting with code and creativity, the only limits to design is your imagination and maybe a bit of technical understanding.
Selecting colours in the Hex code for your gradient
When creating gradients it is useful to know the hex codes of colours. A hex code is short for hexadecimal numbers which are as follows : –
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 being obsolete of colour ( or we know it as black ) and F is white. Combining a set of these numbers together in how monitors display colour ( RGB, Red , Green & Blue ) we can create over 16 million colours. I have shown below how numbers choose the intensity of each colour, it does help if you have a little understanding of how colours mix.
#ffff00
I have shown above that two numbers given in a 6 digit hex code make up a screen colour, so for instance the first two digits, ff equals maximum intensity red followed by two more ff’s which equates to maximum intensity green but I have finished this code with 00 in the blue which means there will be no blue displayed in this code.
Do you know what colour this makes? If you are a painter you will think brown but actually we are not mixing paints here, we are mixing light together so the colour returned is in fact yellow! Watch this video below of RGB to see how light mixes, it’s quite insightful.
If you want to select colour easily then w3schools have a colour picker on their website here or if you want to understand computer colour theory further please visit this informative link from htmlgoodies.com.
I’m more a visual person, I want to be able to see the gradient
The difference between coding a gradient and visually creating one via editing tools is great and sometimes a few numbers on a screen is a little hard to understand for the novice css coder or simply for the general human being, but there is a solution! Colorzilla.
Colorzilla this is how to create gradients in css
Colorzilla allows you to play with gradients till you are blue in the face, pardon the pun, till you find the perfect visual combination. Just like major photo/illustration editing tools you have oodles of options like adding more colour stops, selecting preset designs, the orientation of the gradient, opacity and other things you can find in major applications for editing visual elements.
What is even better about Colorzilla is that once you have created your gradient
the code is also generated so you can easily copy and paste the gradient code into your css style sheet for the relevant element of your site, it even applies webkits for browser compatibility! It’s a great tool but it is also important to understand the code rather than simply cutting and pasting. You can find many reasonable tutorial websites and I recommend spending at least an hour a day on advancing your skills, the thing with our profession is that it is ALWAYS evolving so it’s important that you don’t decay when new technology comes about.
To play with the gradient website please follow the link below and secondly, please leave a link in the comment box below on how you have used gradients in your designs. Happy digital colouring in!
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
