Devstars http://www.devstars.com London Web Development Agency Thu, 27 Aug 2015 11:04:11 +0000 en-US hourly 1 5 Ways to Write an Attention-Grabbing Headline http://www.devstars.com/blog/5-ways-to-write-an-attention-grabbing-headline/ http://www.devstars.com/blog/5-ways-to-write-an-attention-grabbing-headline/#comments Thu, 27 Aug 2015 11:04:11 +0000 http://www.devstars.com/?p=3304 From the moment we open a web browser or mobile app, we’re constantly bombarded with information in a digital sensory overload. Emails, social media posts and search results all vie for our attention, which means we have to be very selective about the links we click on, and the ones we ignore. That decision-making process […]

The post 5 Ways to Write an Attention-Grabbing Headline appeared first on Devstars.

]]>
From the moment we open a web browser or mobile app, we’re constantly bombarded with information in a digital sensory overload. Emails, social media posts and search results all vie for our attention, which means we have to be very selective about the links we click on, and the ones we ignore. That decision-making process boils down to one piece of content: the headline.
A headline sets the tone of an article or blog post. Its role is simple – to convince readers to read further. It’s the ultimate content sales tool, and it’s vital to get it right. Without a strong, attention-grabbing headline your words will likely go unnoticed, so here are 5 ways to get it right.

1. Allow your headline to stand alone
Your headline is rarely read in context to its story. That means it must stand-alone – explaining exactly why your article is worth a read and luring your audience in, without the need for a lead-in paragraph Your headline appears on its own merits as a link on social media, in search engine rankings and on blogs, so make sure it is clear and easy to understand, summing up your post while building intrigue.

2. Pique your reader’s interest
Great headlines tackle a question that is relevant to your audience. Use your headline to explore a subject, promising answers within the body of your content. Why should a user click through to your website? Offer something different in your title – whether that’s an interesting viewpoint, unique insights or new statistics.

3. Keep it short
Your headline should be brief and to-the-point, or risk losing the reader in reams of text. By removing unnecessary words, you’re not only holding the attention of your audience but reducing the risk of truncated text when the link appears on devices with small screens.

4. Be plain speaking
When writing your headline, choose your language wisely. Steer clear of jargon, and get straight to the point with clear, plain-talking words. Niche language will work if you’re appealing to a niche audience. But as a basic rule, only use a word if your entire reader base will understand it.

5. Add keywords
Put keywords at the front of your title to get straight to the point. Your audience spends milliseconds scanning headlines, so the meaning of your headline should be clear with a momentary glance.
Don’t fall short at the last hurdle…

There’s no point in writing a great blog post or article without a strong, attention-grabbing headline to lure readers in. So be concise. Address a relevant, interesting topic and make sure it stands alone. Your headline is the first piece of content your audience will read, so don’t make it the last.

Image sourced from http://www.100webhosting.com/6-tips-how-to-write-a-killer-headline/

The post 5 Ways to Write an Attention-Grabbing Headline appeared first on Devstars.

]]>
http://www.devstars.com/blog/5-ways-to-write-an-attention-grabbing-headline/feed/ 0
The 4 most important web design trends of 2015 http://www.devstars.com/blog/the-4-most-important-web-design-trends-of-2015/ http://www.devstars.com/blog/the-4-most-important-web-design-trends-of-2015/#comments Thu, 13 Aug 2015 12:30:55 +0000 http://www.devstars.com/?p=3291 We don’t need to convince you that the digital world evolves at a rate of knots. From animation to banner images, web design is continually meeting and exceeding its own creative expectations. But what about 2015? How has design stepped up to the mark, and which are the most notable trends of the year? 1. […]

The post The 4 most important web design trends of 2015 appeared first on Devstars.

]]>
We don’t need to convince you that the digital world evolves at a rate of knots. From animation to banner images, web design is continually meeting and exceeding its own creative expectations. But what about 2015? How has design stepped up to the mark, and which are the most notable trends of the year?

1. Fixed navigation
This year, fixed navigation has become a steadfast design feature of the modern website – important both for aesthetics and the practicalities of browsing. Instead of scrolling from the bottom to the top of a web page to find the navigation bar, a fixed navigation stays with the user making it easier to find their way around the site.
Not all web designers are sold on the merits of a fixed navigation, arguing that it uses up crucial screen space. But while this is a valid consideration, there are plenty of ways that design can work around these problems by shrinking header logos and condensing the navigation bar to make room for content beneath.

2. Ghost buttons
A ghost button is a minimal, unassuming button with a thin, flat-looking border. Going hand-in-hand with 2015’s tendency towards clean and minimal web design, ghost buttons are unintrusive while enhancing the user experience. On some websites, ghost buttons are more than a design feature, allowing some buttons to fade into the background while others are given more prominence.

3. Dynamic header images
2015 has seen a surge in the use of dynamic galleries and slideshows within a large header space. These full screen images serve many purposes, including reinforcing brand image, showcasing products, services and offers, and facilitating a seamless user experience around the site. This dynamic media is seamless and intuitive, and usually created using jQuery.

4. Feature icons
Minimalism is a key thread running through all design trends for 2015. Feature icons are no exception to the rule. By giving a visual depiction of products and services, feature icons reduce the need for reams of text. Instead, they are accompanied by a snippet of information.
Feature icons are usually used to depict specific features, but sometimes demonstrate buyer journeys, product usage or typical service timelines.

There’s more where these trends came from
Of course, there are many more design trends of 2015 – including parallax design, grid layouts and CSS3 animation – but these are 4 of our favourites. The general emphasis on intuitive and responsive user experience has become an huge consideration for web designers; an important lesson that will enable the entire industry to learn and grow in exciting ways.

To find out how your website can incorporate 2015’s design trends to improve user experience and boost conversions, get in touch with our team today. We’re ready to unleash our knowledge!

Image sourced from http://www.themestune.com/responsive-web-design-mean/

The post The 4 most important web design trends of 2015 appeared first on Devstars.

]]>
http://www.devstars.com/blog/the-4-most-important-web-design-trends-of-2015/feed/ 0
How to fix scrolling problems with CSS http://www.devstars.com/blog/how-to-fix-scrolling-problems-with-css/ http://www.devstars.com/blog/how-to-fix-scrolling-problems-with-css/#comments Wed, 05 Aug 2015 09:51:04 +0000 http://www.devstars.com/?p=3283 Did you know that a mere 1 second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from. The bottom line is that poor website performance – whether that’s slow load times, sluggish video or stilted scrolling […]

The post How to fix scrolling problems with CSS appeared first on Devstars.

]]>
Did you know that a mere 1 second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from. The bottom line is that poor website performance – whether that’s slow load times, sluggish video or stilted scrolling – can cause real damage to businesses.

Scrolling performance is a major issue for many websites. Often, the problem stems from ambitious design features which, although they look great, are often stilted in practice. Thankfully, CSS can bring out the best in both design and performance.
In this article, we’re tackling a specific scrolling problem created by a static viewport-sized background image. In other words, these are websites where the background image remains static, while the foreground moves as you scroll. If you’re familiar with this, you’ll know that executed in the right way, it’s a stunning design feature. But all too often, it’s far from perfect – producing a jolting scroll and poor performance. So how can CSS rectify these issues? How can the problem be fixed with CSS?

First, we want to point out that the role of CSS is not to completely change good design. Instead, it strives to fix issues that hamper the performance of a site, when these problems stem from visual elements. CSS can be used to rectify stilted scrolling, which can be an immediate source of frustration for web users. The first step is identifying what causes the problem, and then identifying a clever way to fix it.

So what causes this specific performance problem with static background images? The issue stems from the markup used to control this design feature – background-attachment: fixed – which requires a lot of background work. Every time a user scrolls, the webpage has to reposition content and repaint the image relative to this content, to create the illusion that it is static. This is known as ‘repainting’, and it can cause some serious performance flaws.

To fix the issue, you’ll need to confirm the diagnosis. A quick peek into the timeline feature of Google Chrome’s DevTools reveals the problem – simply hit record and you’ll have a real-time insight into the fps (frames per second). At around 60fps, there will be a jitter in scrolling. From 30fps, there is a real cause for concern.
To resolve the performance issues, you’ll need the help of CSS. The background image requires its own element, which allows the image to move independently of other elements. To do this, you’ll need the will-change: transform property, which tells the browser to render the background element separately.
What next?

Any CSS change comes with a word of caution. Before you take the plunge, you’ll need a testing environment and an understanding of any potential knock-on effects, because a simple change could do more harm than good to your website’s performance. Do your research and, if you’re not a front-end developer, find an expert who can do the job on your behalf. Your website, and your customers, will thank you for it.

Image sourced from http://www.eyelight.com/assets/images/sized/assets/images/blog/scrolling-image-350×227.jpg

The post How to fix scrolling problems with CSS appeared first on Devstars.

]]>
http://www.devstars.com/blog/how-to-fix-scrolling-problems-with-css/feed/ 0
Does your homepage need resuscitating? http://www.devstars.com/blog/does-your-homepage-need-resuscitating/ http://www.devstars.com/blog/does-your-homepage-need-resuscitating/#comments Wed, 29 Jul 2015 11:21:06 +0000 http://www.devstars.com/?p=3269 Did you know that a mere 1 second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from. The bottom line is that poor website performance – whether that’s slow load times, sluggish video or stilted scrolling […]

The post Does your homepage need resuscitating? appeared first on Devstars.

]]>
Did you know that a mere 1 second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from. The bottom line is that poor website performance – whether that’s slow load times, sluggish video or stilted scrolling – can cause real damage to businesses.

Scrolling performance is a major issue for many websites. Often, the problem stems from ambitious design features which, although they look great, are often stilted in practice. Thankfully, CSS can bring out the best in both design and performance.

In this article, we’re tackling a specific scrolling problem created by a static viewport-sized background image. In other words, these are websites where the background image remains static, while the foreground moves as you scroll. If you’re familiar with this, you’ll know that executed in the right way, it’s a stunning design feature. But all too often, it’s far from perfect – producing a jolting scroll and poor performance. So how can CSS rectify these issues?

How can the problem be fixed with CSS?

 

First, we want to point out that the role of CSS is not to completely change good design. Instead, it strives to fix issues that hamper the performance of a site, when these problems stem from visual elements.

CSS can be used to rectify stilted scrolling, which can be an immediate source of frustration for web users. The first step is identifying what causes the problem, and then identifying a clever way to fix it.

So what causes this specific performance problem with static background images? The issue stems from the markup used to control this design feature – background-attachment: fixed – which requires a lot of background work. Every time a user scrolls, the webpage has to reposition content and repaint the image relative to this content, to create the illusion that it is static. This is known as ‘repainting’, and it can cause some serious performance flaws.

To fix the issue, you’ll need to confirm the diagnosis. A quick peek into the timeline feature of Google Chrome’s DevTools reveals the problem – simply hit record and you’ll have a real-time insight into the fps (frames per second). At around 60fps, there will be a jitter in scrolling. From 30fps, there is a real cause for concern.
To resolve the performance issues, you’ll need the help of CSS. The background image requires its own element, which allows the image to move independently of other elements. To do this, you’ll need the will-change: transform property, which tells the browser to render the background element separately.

What next?

 

Any CSS change comes with a word of caution. Before you take the plunge, you’ll need a testing environment and an understanding of any potential knock-on effects, because a simple change could do more harm than good to your website’s performance. Do your research and, if you’re not a front-end developer, find an expert who can do the job on your behalf. Your website, and your customers, will thank you for it.

The post Does your homepage need resuscitating? appeared first on Devstars.

]]>
http://www.devstars.com/blog/does-your-homepage-need-resuscitating/feed/ 0
4 Ways to Enhance Your Content for Mobile http://www.devstars.com/blog/4-ways-to-enhance-your-content-for-mobile/ http://www.devstars.com/blog/4-ways-to-enhance-your-content-for-mobile/#comments Wed, 29 Jul 2015 08:00:18 +0000 http://www.devstars.com/?p=3262 In 2014, internet browsing reached a significant tipping point when mobile usage overtook desktops Prior to this, mobile-friendly content seemed a low-priority nice-to-have. Today, businesses must put mobile users first, changing their approach to digital marketing and content in particular. To fully appreciate this shift, think about your own internet browsing habits. You check emails […]

The post 4 Ways to Enhance Your Content for Mobile appeared first on Devstars.

]]>
In 2014, internet browsing reached a significant tipping point when mobile usage overtook desktops

Prior to this, mobile-friendly content seemed a low-priority nice-to-have. Today, businesses must put mobile users first, changing their approach to digital marketing and content in particular.

To fully appreciate this shift, think about your own internet browsing habits. You check emails on your phone, use apps to socialise and scroll through web pages on your tablet. For businesses, this presents a new challenge. To get their message heard, content must be enhanced for the mobile experience – which is vastly different to desktop browsing. Here’s how to do it.
1. Be concise
You have 2 minutes… sitting on the tube, waiting for the kettle to boil, standing in a queue, most of us will steal a quick glance at our smartphones. In those few seconds, the sites we visit must capture our imagination or risk being skipped.

To stand out your content must be concise. Ditch rambling introductions and focus on relevant information with clear calls to action.

Use just a few short words to convince your audience that they need to listen – and act – on your content, whether that’s a snappy title, sharp ad copy or a laugh-a-minute video clip.
2. Understand the art of click-baiting
Click-baiting is often criticised as a shameless and sometimes deceptive bid for web traffic. In many cases, the criticism is earned. How often have you clicked on a link, only to be left feeling disappointed by broken promises of a ground-breaking reveal or exclusive article content?

But while true click baiting is only relevant to certain sectors, there is one important lesson to be applied to all businesses, and that is the power of a great heading. Your article should have a title that entices your readers, urging them to click. Keep it short – at somewhere between 8 and 12 words – and make it relevant above all else.

Why is your article worth reading? Your title should make that clear, while the body of your content should deliver on your promises.
3. Look beyond paragraphs
Text is a major component of content, but it’s not the be-all and end-all. Don’t stick to one well-trodden route for communication. Instead, embrace different ways to connect with would-be mobile customers by:

● Steering clear of lengthy paragraphs
● Writing attention-grabbing titles and subheadings
● Using different formats – including graphs, bullet points and tables
● Embracing visual communications, including images and video

Remember, your mobile audience are busy and often distracted. To get noticed, your content needs to be varied, engaging and relevant.
4. Be mobile-friendly
It’s all well and good creating incredible web content, but what happens when users land on your website? Is it mobile-friendly and ready to deliver a first-rate user experience?

Don’t let your effort go to waste by losing customers once they reach your website. Responsive web design will optimise your site according to an individual platform – taking into account screen size and operator quirks for the very best browsing experience.

Once your audience has landed on your web page, they’ll enter into a conversion funnel driven by key objectives and outcomes. Mobile-friendly design ensures you stand the best possible chance of a conversion.
A bonus tip
Once you’ve followed these 4 steps, your content will start performing on mobile platforms. But don’t make the assumption that this alone will benefit your ROI – use the likes of Google Analytics and Webmaster Tools to analyse real data from mobile users. Look at landing pages, bounce rates, and common exit points. Be proactive, and continue to enhance your content for mobile.

Have you been affected by any of the issues addressed in this story? Give us a call on 01784 458493 or drop us a line. we’re here to help.

Image sourced from http://www.personifycorp.com/association-technology-news/social-media-news/organizations-social-media-strategies-must-account-for-mobile-devices

The post 4 Ways to Enhance Your Content for Mobile appeared first on Devstars.

]]>
http://www.devstars.com/blog/4-ways-to-enhance-your-content-for-mobile/feed/ 0
Stuart’s trip to Minsk http://www.devstars.com/blog/stuarts-trip-to-minsk/ http://www.devstars.com/blog/stuarts-trip-to-minsk/#comments Thu, 02 Jul 2015 10:43:49 +0000 http://www.devstars.com/?p=3245 Just got back from 4 days visiting our Minsk team. Most of trips to visit the team in the past have taken place over the winter months so it was a nice change to visit a very sunny Belarus and have a change to explore the city of Minsk and surrounding areas as well as […]

The post Stuart’s trip to Minsk appeared first on Devstars.

]]>
Just got back from 4 days visiting our Minsk team. Most of trips to visit the team in the past have taken place over the winter months so it was a nice change to visit a very sunny Belarus and have a change to explore the city of Minsk and surrounding areas as well as visiting our office and spending time with the team.

To keep interruption to ongoing projects down to a minimum I headed out on a Friday afternoon and had a chance to spend most of Saturday catching up with business partner Dmitry while cycling around Minsk’s beautiful river and lakes.

Sunday started off with a trip to the Minsk Velodrome where I introduced Dmitry to the joys of banked track cycling while the Belorussian national sprint team cooled down from their earlier session. Earlier in the year we had taken some clients to the London Olympic Velodrome so it was a privilege to experience another world class track in the same year.

On Monday we spent the day in the office meeting some new faces and working face to face on projects for SlimFast and Saliena before heading out to a traditional Belorussian restaurant and some beers with the office.

On Tuesday we drove up north through the county crossing the border on a small forestry road where the boarder guards spent an unnerving amount of time checking my passport, visas reasons for being in the country etc before finally allowing us to exit. I guess they are not that used to seeing Brits fleeing the country by this route.

A big, big thanks to my fantastic business partner Dmitry, his family and team for making it a great trip. Looking forward to seeing everyone again soon.

The post Stuart’s trip to Minsk appeared first on Devstars.

]]>
http://www.devstars.com/blog/stuarts-trip-to-minsk/feed/ 0
Magna Carta Picnic http://www.devstars.com/blog/magna-carta-picnic/ http://www.devstars.com/blog/magna-carta-picnic/#comments Wed, 17 Jun 2015 13:42:53 +0000 http://www.devstars.com/?p=3218 As the Magna Carta had just celebrated its 800th anniversary and due to it being the ‘Love To Ride’ London Cycle Challenge. We got out the bikes and went on a lunch trip down to Runnymede for a sunny staff picnic. After a nice little ride along the river, we visited the Queen in the […]

The post Magna Carta Picnic appeared first on Devstars.

]]>
As the Magna Carta had just celebrated its 800th anniversary and due to it being the ‘Love To Ride’ London Cycle Challenge. We got out the bikes and went on a lunch trip down to Runnymede for a sunny staff picnic.

After a nice little ride along the river, we visited the Queen in the Pleasure Grounds. The new bronze sculpture had just been unveiled at the weekend Magna Carta celebrations.

the Queen and devstars

We then ventured on over, along with many other visitors, to see the Magna Carta monument and John F. Kennedy’s memorial, stopping for a relaxing picnic in the sun on the way.

IMG_2246

Not only did our trip celebrate the Magna Carta, it also got all the staff experiencing the joys of cycling. Devstars are all now competing in the London Cycle Challenge, logging miles from our outings to bring us further up the leader board.

The post Magna Carta Picnic appeared first on Devstars.

]]>
http://www.devstars.com/blog/magna-carta-picnic/feed/ 0
“Ask The Expert” Wins An Award http://www.devstars.com/blog/ask-the-expert-wins-best-customer-experience-award/ http://www.devstars.com/blog/ask-the-expert-wins-best-customer-experience-award/#comments Mon, 15 Jun 2015 00:00:46 +0000 http://www.devstars.com/?p=3177 Our “Ask The Expert” web app has won an award for ‘Best Customer Experience’ at the Tech&Ecomm Awards 2015! Produced for the World Duty Free Group via our partners Blackjack, the app allows its customers and staff to easily contact the experts through Facetime. Experts within each field are able to directly help users, providing answers to […]

The post “Ask The Expert” Wins An Award appeared first on Devstars.

]]>
iPad GUI PSD Version 2

Our “Ask The Expert” web app has won an award for ‘Best Customer Experience’ at the Tech&Ecomm Awards 2015!

Produced for the World Duty Free Group via our partners Blackjack, the app allows its customers and staff to easily contact the experts through Facetime. Experts within each field are able to directly help users, providing answers to their queries in multiple languages.

At the start of each shift, the experts are required to sign in to the app making them available to Facetime. When users require the experts assistance they look on the app to view their availabilities. If experts are available then the Facetime call can simply be made, however if no experts are signed in then the option of contacting them is greyed out.

blackjacklogo

Providing easy, direct Facetime contact to the experts, we are delighted that “Ask The Expert” has won the ‘Best Customer Experience’ award 2015!

The post “Ask The Expert” Wins An Award appeared first on Devstars.

]]>
http://www.devstars.com/blog/ask-the-expert-wins-best-customer-experience-award/feed/ 0
Nana Nice Cream http://www.devstars.com/blog/nana-nice-cream/ http://www.devstars.com/blog/nana-nice-cream/#comments Thu, 23 Apr 2015 11:14:51 +0000 http://www.devstars.com/?p=3076 Nana produce 100% dairy free ice cream made with (you guessed it) bananas. Their new website is our latest collaboration with Mystery and is a fully mobile ready responsive built using the Yii framework. As you’d expect from Mystery the design is bold, stunning, visually rich and captures the brand essence perfectly. Sites like this aren’t always […]

The post Nana Nice Cream appeared first on Devstars.

]]>
Nana produce 100% dairy free ice cream made with (you guessed it) bananas.

Their new website is our latest collaboration with Mystery and is a fully mobile ready responsive built using the Yii framework.

As you’d expect from Mystery the design is bold, stunning, visually rich and captures the brand essence perfectly.

Sites like this aren’t always the easiest to code and optimise especially when dealing with everything from large desktop screens to mobile and everything in between. The site requires lots of cross platform testing and fine tuning to ensure usability is as good as the experience.

For optimisation we use a number of tools like Gtmetrix to see where improvements can be made, as you can see here getting an 98% A grade for page speed.

If you’d like to find out more about how we put stand out sites together click here.

To visit the new Nana site click below :-)

nananicecream.com

The post Nana Nice Cream appeared first on Devstars.

]]>
http://www.devstars.com/blog/nana-nice-cream/feed/ 0
Building a New Site for the Royal Academy of Music http://www.devstars.com/blog/building-a-new-site-for-the-royal-academy-of-music/ http://www.devstars.com/blog/building-a-new-site-for-the-royal-academy-of-music/#comments Tue, 14 Apr 2015 08:22:01 +0000 http://www.devstars.com/?p=3003 Developing a modern website for a 200 year old internationally renowned institution takes some planning. Our design partners Mystery had already done some extensive brand development with the Academy which helped lay the foundations for our initial discussions regarding the sites focus, key functions and primary goals. From the planning meetings wireframes, site outlines and mood boards were developed […]

The post Building a New Site for the Royal Academy of Music appeared first on Devstars.

]]>
Developing a modern website for a 200 year old internationally renowned institution takes some planning. Our design partners Mystery had already done some extensive brand development with the Academy which helped lay the foundations for our initial discussions regarding the sites focus, key functions and primary goals.

From the planning meetings wireframes, site outlines and mood boards were developed and all presented to the academy’s board at key points.

A very detailed technical spec accompanied by an interactive wireframe (created with Balsamic) was completed and we were ready to begin production.

One of the great things about this much planning is that when the production process begins the client and all the team have a very clear idea about what is happening and when.

The site was designed by Mystery and built by us to the agreed schedule and launched early 2015.

Since the launch we have extended the sites reach including new interfaces that pull from the database and present upcoming events via TV screens in the foyer.

Click here to visit the site

 

The post Building a New Site for the Royal Academy of Music appeared first on Devstars.

]]>
http://www.devstars.com/blog/building-a-new-site-for-the-royal-academy-of-music/feed/ 0