253828489-Web-Design-Tips-Tricks-Fixes-Vol-3-2015.pdf

W E N

9 HOURS OF FREE VIDEO

Improve your websites with our expert advice

unlock the potential of web design HTML5  CSS3 RWD JavaScript  WordPress

Welcome to

,

The complexity of modern websites is a far cry from the early days of the Web. Current trends for interactivity, animation and responsive design have expanded the arsenal of skills needed to build exciting, cutting-edge sites. New frameworks and JavaScript libraries are springing up everywhere, and it can be challenging at times to keep pace with the industry. That’s where this book comes in. Throughout each section you’ll find guides on how best to harness modern tools, add excitement to pages, and enhance the efficiency of your workflow. For everything from designing for mobile devices to building your first online shop, read on.

,

Imagine Publishing Ltd Richmond House 33 Richmond Hill Bournemouth Dorset BH2 6EZ  +44 (0) 1202 586200 Website: www.imagine-publishing.co.uk Twitter: @Books_Imagine Facebook: www.facebook.com/ImagineBookazines

Publishing Director Aaron Asadi Head of Design Ross Andrews Edited by Dan Collins Senior Art Editor Greg Whitaker Designer Abbi Denney Printed by William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT Distributed in the UK, Eire & the Rest of the World by: Marketforce, Blue Fin Building, 110 Southwark Street, London, SE1 0SU Tel 0203 148 3300 www.marketforce.co.uk Distributed in Australia by: Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South Wales 2000, Australia Tel +61 2 8667 5288 Disclaimer The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this bookazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review. Although the bookazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This bookazine is fully independent and not affiliated in any way with the companies mentioned herein.

Web Design Tips, Tricks & Fixes Volume 3 Revised Edition © 2015 Imagine Publishing Ltd ISBN 978-1910439784

Part of the

bookazine series

Contents

8

Is your content king?

Tricks

Tips

64

Animate CSS

16

New adventures in responsive design

72

Build an online shop

24

Design and develop in the browser

78

Scroll horizontally using jInvertScroll

30

Code the web with open-source editor Brackets

82

Create a scroll-triggered animation

34

Build a responsive WordPress theme

86

Make an animated SVG header with Snap.svg

38

Build a responsive slider using bxSlider

90

Create an animated infographic with SVG

42

Code a stunning mobile app with Ionic

94

46

Create animated buttons with CSS3

Streamline your workflow with Bower and Grunt

50

Add angled page designs with CSS and jQuery

97

Manipulate the DOM with AngularJS

102

Create a scaling hover effect

104

Produce a 3D direction-aware hover effect

108

Create a shake effect using CSS3 animation

54

Make a responsive menu for a retina screen

58

Create data-driven interfaces with KnockoutJS

82 Scrolltriggered animation

34 Build a responsive theme

6 Web Design Tips, Tricks, & Fixes

110

Construct 3D customised cubes

112

Use overlay effects on background video

116

Build an HTML5 platform game

166

Automatically test your JavaScript with Jasmine

170

Automate development processes with Grunt.js

Fixes 122

Supercharge your CSS

128

The theory of text and type

134

Modernizr masterclass

138

Create sticky table headers using CSS and jQuery

142

Speed up responsive sites with Foundation

146

Build a custom Foundation template

150

Get faster, smarter code with RequireJS

154

Create responsive sites with intention.js

158

Make an eCommerce web element with CSS3

162

Customise a map with the Google Maps API

16 Responsive design GET IN TOUCH facebook.com/ImagineBookazines twitter.com/Books_Imagine

8 How to tailor your content

128 Learn about text and type

Web Design Tips, Tricks, & Fixes 7

Is your content king?

IS YOUR CONTENT KING? 10 MOVES TO PERFECT YOUR STRATEGY

8 Web Design Tips, Tricks, & Fixes

Is your content king?

CONTENT IS EVERYTHING A

n empty house can be strong in its foundations, and well maintained, but without furniture, fittings and family it is still only an empty house. Content makes it a home. Content is everything – as it is with a website. It is a fact of online life that a well-produced website with poor content will always fall behind a badly produced website with excellent content. Browsers are online for a reason, and that reason is content. Good content engages the audience. While delivering a message is paramount, it is just as important to consider the way in which that message is delivered. This can start with such basic considerations as grammar and spelling. If your site is designed to present you as an expert in your field, how much negative impact on your prowess do you think the spelling

mistakes and missed punctuation will have? Illiteracy is not a desirable skill and it doesn’t pay to underestimate your audience and assume they won’t pick up on it. Nor should your content outstay its welcome. In this age of diminished attention spans, nothing sends a user fleeing for the hills like a great wall of insurmountable text, with nothing to break it up. The user experience (UX) is essential to the success of your site. If you have a point to make, don’t waste time getting to it. This will only serve to test your audience’s patience. The web is constantly changing, and with it the way in which content should be prepared. This is the age of social media and sharing, and content which can be easily shared between users will always have the biggest impact. It is time to view content as something that can live beyond the confines of your site.

CREATE A PLAN When it comes to the creation of websites, there are endless tutorials that can be found online dedicated to designing and building the perfect site structure. Web design and web development practices are being constantly perfected, updated and refined. However, there is one area of web creation that too often remains illconsidered and badly planned – the content itself. Content is the driving force behind any website. It doesn’t matter how well-built and functional your site structure is, if the content it houses is sub-standard and fails to do the job for which it is intended, then you’ve wasted your time. Creation and analysis of web content should be as important a primary stage of the development of a website as determining the technology in which the site will be built, but quite often the content is treated as a secondary concern. When you think about it, this really makes no sense at all. The content is the reason that the site exists in the first place. People have come to your site for a reason, and it’s not to click those perfectly scripted button animations or simply sit and watch the expertly executed page transitions you spent time on. Your site only exists to deliver your content, so you have to question whether your content is the best it can be. For example, have you actually considered who your target audience is? This may well be one of the most overlooked and yet essential factors of content strategy. How can you design a site that will appeal to a group of

Find out why you should care about content and its place in the user’s experience of your site

QContent plays a big role in how a user experiences

your site – and whether they decide to come back

Planning your content strategy is essential – but it is worth considering certain factors before diving in

people if you don’t know which people you are trying to attract? While you may be hoping to appeal to everyone, this will only make for an ineffective content strategy. Even if you are going for a more broad appeal, there are still ways of narrowing it down to a more manageable group – consider age range, for example. Having identified the audience, you need to work out what would be the best way to communicate your message to them. Different audiences respond to different voices, ideas and media – and this can have a huge impact on the way your site eventually looks. Following on from how you address your site visitors, the next step is determining exactly what the core message is that you are trying to get across to them. When the audience leaves your site, what should they take away from the experience? With a strong message, you can make a real impact on people. Finally, you need to ensure that every item of content on your website has a defined purpose, otherwise there is no point in having it there. Every piece of content on your site should serve to reinforce your message and resonate with the target audience for maximum effect. These are the main principles of content strategy, a series of best practices for creation, publishing and maintenance of web content. In this overview, we’ll go over these basics in a little more detail and demonstrate how you can prepare your content. Not just for your site, but for the benefit of your site’s audience.

Your site exists only to deliver your content, so you have to question whether your content is the best it can be

WHAT QUESTIONS SHOULD YOUR STRATEGY ADDRESS? A basic content strategy plan s

%FUFSNJOF
ZPVS
BVEJFODF This is the most important starting point. Who is the content for? Who are you trying to attract to your site, service or product? s

'JOE
ZPVS
UIFNF
BOE
NFTTBHF What is the message that you want to communicate to site visitors? What do you want to tell or show to the audience you have identified? s

%FWFMPQ
UIF
BQQSPQSJBUF
WPJDF What tone of voice will best deliver the message and resonate with the chosen audience, to bridge the gap between need and solution? s


#F
VTFGVM Does your content serve the purpose for which it is intended? Is it actually useful to those for whom you have identified a need?
s

.BJOUBJO
DPOTJTUFODZ
Is your content consistent in tone of voice throughout the site? Does your site communicate with one voice?

Web Design Tips, Tricks, & Fixes 9

Is your content king?

WHO IS THIS CONTENT FOR, ANYWAY? Before you do anything else, it is vital that you understand who you are trying to reach Understanding your audience is so vital, and so obvious a need for any business, that it may seem strange to even mention it. And yet, it is often skipped over by those who would rather assume that the site is there for the good of everybody who visits. While this may be a pleasing ideal, almost every business has a majority demographic they should be targeting. The approach to identifying your key demographic depends a great deal on your business and available assets. If you already have a website and wish to improve on the content, then using Google Analytics and Webmaster Tools to track and measure your site’s visitors is an excellent way to build a profile. This can tell you where your site hits are coming from, and which parts of your site are proving the most popular.

However, those who are starting out on their first website will probably need a different approach. Customer surveys can be extremely useful for finding out data, if possible, either on the business premises or by an email campaign. Creating a social media presence for your business, such as on Facebook and Twitter, can give you access to your customer base, although this can take some time to build up. Larger businesses can go a step further and organise focus groups or engage the services of canvassing companies. The main aim is to build a profile of the target customer. Create a character with likes and dislikes, habits and traits, budgetary constraints and needs. The more detail you are able to fill in, the easier it is to tailor your content to fit them perfectly.

QFocus groups can help you find your target audience

CONTENT WITH A PURPOSE Your content is not an aimless idea, waiting to be noticed – it exists for a reason Now that you have a good idea who your target audience is, you can start to think about how you are going to communicate with them and what it is you want to communicate. Usually, there is a service or product that is being promoted by the site. Your message must exist in the gap between your service and the customer’s need. That is the bridge your content needs to build, and finding the correct ‘tone of voice’ is key to building it. Tone of voice is determined by the target customer profile. The key point to nail is that you communicate in a way that they understand. For example, does he/ she respond better to an informal, conversational approach? Or would a reserved, professorial persona be more appealing? Is there a target age group in your demographic? If so, does that have some bearing on your tone of voice? If you’re targeting a younger audience, can you make your content more bite-size without dumbing down? It is absolutely vital that you get this right, so you don’t alienate your site visitors. Once you have this tone of voice, it is important that you stick to it. Make sure that it is employed throughout the site – even down to the 404 Not Found page. This means that, if you have more than one or two people working on your content, there should be a style guide of some sort. Perhaps even a tone of voice persona, that matches well with the target audience. Think about the different types of content you can make available. Would your target audience be more inclined to watch videos than read text? If you have a lot of text, is it easily readable? Would interactive elements, such as a forum or review facility, be a major

10 Web Design Tips, Tricks, & Fixes

advantage to your demographic or be deemed a tedious distraction? Add share buttons for social media and encourage users to pass your content on by all means, but avoid cluttering the page. Above all, ensure that your content is useful. Better still, instructive. Every word, every image, every video, must be able to justify itself and contribute to the overall message. There’s absolutely no room for repetitive content, or useless content that is included by the business director for sentimental reasons.

QThe Innocent smoothie brand has perfected its

tone of voice, using an informal tone combined with bright colours to strengthen the core message

Once you have a tone of voice, make sure that it is employed throughout the site

EXPERT INSIGHT FROM THE INDUSTRY

RIK BARWICK Creativitea.co.uk

“The first engagement with a brand is through content, whether an ad, video or website. Taking the time to plan a good content strategy is imperative to brand success. When preparing your UX you must remember the target market and deliver excellent content. Content strategy can be the difference between lighter or heavier pages, depending on your audience’s location and wealth. Fast and focused sites may not be as enticing on their own, but can make a huge difference to your bounce rates and returning visitors stats. A pet-hate of mine is keyword-stuffed content, written for bots. Yes, content needs to be optimised for search engines, but it needs to engage humans too!”

Is your content king?

THE DIFFERENT APPROACHES TO CONTENT STRATEGY

Content strategies can be as varied as the websites and audiences that they are intended for

There is no such thing as a one-size-fits-all content strategy. Certain rules and procedures can be applied throughout, but a good content strategy must be tailored precisely to what the website it is focused on, be it a new site in production or an old site that is simply looking to refresh itself. Just as the Natural History Museum will prepare and display dinosaur bones and ancient mummies in completely different environments,

so too should your marketing strategy meet the needs of the content – and audience – it is dealing with. An eCommerce site selling bikes will target a vastly different audience to that of a showroom site for a prestigious auction house. Even if both sites are built using the same template or content management system, the end user, and therefore the digital marketing strategy, must be marked in its differences. This is

why understanding your audience is so vital. The outdoor-loving biker will respond to approaches and digital outlets that would not work with the avid antique collector – and each will seek different ideals from the sites they frequent. The content strategist, then, must understand what makes each site singular and tailor the method from there. Below we look at two examples of different content strategy approaches.

CASE STUDIES: THE GUARDIAN AND ADOBE These organisations both took different, but equally effective, approaches to their content strategies tobring success

www.theguardian.com

adobe.ly/19x04z8

WHO The Guardian WHAT Expanding news content and amalgamating several of their sites into one WHY To respond to the growing international user base

WHO Adobe WHAT Devising a content strategy using Marketing Cloud WHY To promote and demonstrate the effectiveness of the new software

News sites can be tricky. Naturally, they have the fastest turnover of content on the web, and reporting factual QThe Guardian is the ideal example of a events leaves you with the same successful news site content as your competitors. There is also the problem of generating revenue from sites which, for many, replace the need to purchase a newspaper. Many news sites have adopted a ‘paywall’ approach, charging consumers for premium content, while others rely on advertising revenue to keep content free, such as The Guardian. The Guardian website is a great example of well-presented and wellorganised news content. The initial landing page is tidy and user-friendly, handling the varied content with ease. The Guardian recently underwent a major shift in its content strategy – analysis of web traffic revealed it had a growing international user base. As a result, The Guardian took a number of steps to meet this opportunity, including a change of domain from .co. uk to .com; the expansion of news content on both the site and app to allow country-specific filtering; and the amalgamation of several sites into one. Since these changes, The Guardian website has continued to grow into a successful entity all on its own, catering to its own specific audience, rather than simply existing as a digital version of the print newspaper.

Media giant Adobe took a singular route to develop a content strategy for their new marketing tool, Adobe Marketing QAdobe created the perfect marketing Cloud. In essence, they spent a circle for their new product year using the product to devise a content strategy for itself. It seems obvious in retrospect, yet still has a ring of genius about it. Adobe also decided to promote the research and development process of the strategy as a public debate on the effectiveness of digital marketing. This proved to be an inspired move, resulting in good exposure for the new product on social media channels and print media. Adobe then ran a series of video campaigns which resulted in the highest return – as did a live debate, viewable through a Facebook app. However, the app’s return dwindled significantly once it was limited only to replays of the debates, but a followup targeted Twitter campaign boosted the app’s performance yet again. Adobe also discovered that organic traffic to the website had higher rates of engagement with the audience than paid traffic from ads and as a result decided to discontinue the paid traffic approach. In the end, the whole exercise not only provided Adobe with all the metrics they needed to target their content, but it did the job of successfully promoting their Marketing Cloud product. A definite win-win approach.

DIFFERENT DIRECTIONS, SAME OUTCOME The Guardian understood that knowing the audience is vital. Once they had become aware of the huge international interest in their site, they reacted immediately. Change can be a good thing; move with the times and keep up with the needs

of your audience. Simply changing the portal may seem passive, but it worked for the consumer. Adobe’s decision to make the creation of their content strategy a marketing tool of itself maximised all the elements at their disposal. Direct

engagement with their audience created more buzz, and led to more converted traffic, than simply buying ad space. By making the consumer part of the process, you can utilise the singular nature of the web, tailoring engagement directly to the user.

Web Design Tips, Tricks, & Fixes 11

Is your content king?

3 STEPS TO A KILLER HEADLINE

Follow these tips to really make sure your headline is selling your content

GET THE LENGTH RIGHT

UNLEASH ITS FULL POWER

INCLUDE A SUB-HEADLINE

Make your headline engaging for the audience and you’ll reap the rewards

Your headline isn’t just a title, but an introduction to you and your site

Your headline need not stand alone – add a little detail to entice your site visitors

There is some difference of opinion on the length of the perfect headline. A short headline can be catchy and to the point, but make it too short and you’re probably not revealing the right amount of information to draw your readers in. A longer headline will give enough information, and include some useful keywords for SEO purposes, but make it too long and you not only risk falling victim to that limited attention span of web surfers nowadays, but revealing so much that you render the content beneath it pointless. The best approach is to keep it as short as possible, but do not neglect the following points in doing so.

Too often the headline is put together as an afterthought to the content, but in many ways it is the most important part of all. If it doesn’t entice, the content will never be seen. Use your headline to its full potential. Don’t undersell your content. Describe what it is to come. It may even help to make it seem like the reader will be losing out if they don’t read on. For example, if your content is all about your range of kitchen utensils, then try ‘How our range of kitchen utensils can save you time’. Now readers know that there is an advantage to reading on. Don’t be afraid of using a little hyperbole – this can help grab the audience’s attention.

A useful practice is to give your headline a sub-headline, an H2 tag to your headline’s H1. This can be used to offer a little more information or enticement without having to extend the length of the main headline. It can take the form of a short sentence or even a brief, bulleted, rundown of major points from the content. For example, you can follow ‘How our range of kitchen utensils can save you time’’ with ‘And they last a lifetime’. Or perhaps something simple and appealing like: ‘quicker to clean’ or ‘fully guaranteed’. You’ve now provided more enticements for the reader to stick with your content rather than click off somewhere else.

SEO AND GOOD CONTENT ARE MORE LINKED THAN EVER

Refreshing your content and updating regularly could see you ranked much higher in Google’s search results

SEO has moved on quite considerably over the last few years. Google’s quick-fire updates, with their endearing animal names, have left many once-solid SEO techniques either dead in the water or at the very least far less buoyant than they used to be. Blog comments, paid links, directory listings and link exchanges have all been rendered useless by Google’s algorithm updates. While keywords and link-building still retain their importance, it is content that appears to be Google’s primary focus now. For this reason, it is absolutely imperative that your content is primed and prepared to appear relevant and informative in Google’s eyes. These days the search engines are emphasising quality over quantity. They are looking for wellproduced, useful content that adheres to the topics it claims to be catering for. This is why relevance is vital. Good spelling and grammar are also more important than ever – as is the variety of content types, such as images, video and infographics. Google also favours content that is updated or added to on a regular basis, which is why so many business sites have now started to incorporate blogs into their web presence. This can be an especially helpful tool

for those that struggle to update the core content of their website. Maintenance of a blog allows for regularly published content. Providing fresh content, combined with smart integration of keywords and social media networking, is one of the best SEO methods currently available to us. A Facebook, Twitter and Google+ extension of a brand is also invaluable. But it is ‘natural’ optimisation that seems to be the SEO route for the future. This new direction by Google may have made life more difficult for SEO agencies in the short term, but it does make it much easier for site owners to include good SEO techniques in their own websites, without the need for external services. Plus, raising the quality of all web content ensures that the end user gets what they are looking for (as opposed to irrelevant content stuffed full of keywords) and a good experience, while your content is protected from future algorithm updates. Well-written, relevant content that can be easily shared across social networks can get your site higher up the search rankings and seen by more prospective clients. It is well worth refreshing and regularly updating your site in order to finish higher up the search results.

Providing fresh content is one of the best SEO methods currently available to us

12 Web Design Tips, Tricks, & Fixes

HARNESS THE POWER OF SOCIAL SEO Unlock the potential that social networks can offer you SEO is no longer about cramming several keywords into your site’s content and hoping to be found. Now, it’s about SMO – Social Media Optimisation. By making use of social networks such as Facebook and Twitter, you open up other channels that allow people surfing the web to find you. In doing so, you’re enabling them to interact directly with you as well as increasing the breadth of your presence online.

Is your content king?

CASE STUDY: VIRGIN.COM How Virgin streamlined their main site to better appeal to their customers WHO Virgin.com WHAT A major relaunch and content strategy for Virgin’s main website WHY To expand on the purpose of the parent site and unite all Virgin businesses Media, travel and banking giant Virgin brought in digital agency Beyond to overhaul their website and online brand strategy. Virgin.com had functioned as a portal site to the various branches. The goal was to boost the already successful business model by giving the parent site a content purpose, incorporating Virgin’s companies and values into one strategy and theme, aligning that strategy with current social trends, and increasing the amount of time users spend on the page. Working with Virgin’s digital manager Bob Fear, Beyond analysed metrics and analytics from Google, Hootsuite and social media channels to ascertain the digital marketing approaches yielding the best responses. They researched Virgin’s core audience, deciding which customers had the

QVirgin is keen to cater to its core audience by updating its main website

potential for increased growth, the importance of Richard Branson’s presence in brand marketing, and what people love about the brand. Beyond analysed social media conversations about Virgin to determine what matters to users, and where these conversations were happening. The content strategy Beyond and Fear formulated highlighted a number of tactics. Focus

USEFUL RESOURCES

on social media platforms, popular with Virgin’s core customer, scored high. Increasing content focus on travel and reducing it on fitness was important, since fitness discussions were too brief. Key topics should also target music, entrepreneurship and sustainability. This research allowed Virgin to fine-tune their activity to better suit their audience.

From content curation to scheduling your social media updates, this broad range of services will have you covered on all bases

SEO GADGET’S CONTENT IDEAS GENERATOR seogadget.com/tools/ content-strategy-generator Stuck for new content to put out there? SEO Gadget has produced a simple – but remarkably effective – tool for finding inspiration in your search for content ideas. Just open the generator as a Google doc, place your keyword of choice into the B3 field, hit return, and it will provide you with a list of up-to-date articles and posts on that topic from various sources around the web. Use these as a guide to what is currently trending, and you will have a valuable starting point for keeping your own content up-to-the-minute relevant. To use this service you will require a Google account.

GOOGLE TRENDS www.google.co.uk/trends Google provides a mighty armada of tools and resources that can help you tailor your content. Webmaster Tools and Analytics give you everything you could possibly need to monitor your site’s traffic, while Trends gives you up-todate information on the popularity of particular keywords and search terms, allowing you to fine-tune the keywords that you end up using in your content. You can also make use of Hot Searches to see which topics are currently trending and make sure you ride that wave with some focused content and social media links. Measure your service or product against a competitor’s and alter your marketing approach accordingly.

LISTLY

HOOTSUITE

list.ly

hootsuite.com

‘Content curation’ appears to have become the term of the moment in content strategy. Curation is the process of sharing meaningful third-party content with your brand followers on an ongoing basis, which in turn increases your presence as a brand expert. There is a range of tools emerging for improving your content curation, and among the best is Listly. Everyone loves compiling lists, and Listly allows you to build a variety of topicdriven lists, as well as sharing posts and articles on the lists of other users. There is also a handy export function to Excel.

Hootsuite was voted the best social media management tool of 2013 by industry experts, and it’s not difficult to see why. The vast array of features gives you full control of your social media presence in one place. Post across several social media accounts simultaneously, or at scheduled intervals. Monitor those social media sites for current trends and make use of Hootsuite’s own analytics options. There is also The HootLet, a Google Chrome plug-in that allows you to share content from any page on the web (as well as a few other monitoring features) through your Hootsuite account.

Web Design Tips, Tricks, & Fixes 13

Tips

Get to grips with tools, techniques and frameworks

16

New adventures in responsive design

24

Design and develop in the browser

30

Code the web with open-source editor Brackets

34

Build a responsive WordPress theme

38

Build a responsive slider using bxSlider

42

Code a stunning mobile app with Ionic

Discover the processes that go into building a successful responsive project

Prototype, test and optimise your site using browser development tools

Increase your design efficiency with these tips

Zurb’s Foundation is ideal for your latest WordPress project

Join the growing trend for responsive sliders by harnessing the bxSlider jQuery plug-in

Build feature-rich HTML or mobile apps using the Ionic framework

14 Web Design Tips, Tricks, & Fixes

46

Create animated buttons in CSS3

50

Add angled page designs with CSS and jQuery

54

Make a responsive menu for a retina screen

58

Create data-driven interfaces with KnockoutJS

Create some cool-looking 3D buttons that will add that extra polish to your site

Use angled backgrounds and add images

Work with custom fonts to build a responsive menu

Make a modular app with real-time UI updates

Rather than designing pages, we’re now designing complete systems

24

30

Design sites in your browser

Learn to code with Brackets

38

50

Build a responsive slider

Add angled page designs

16 Discover key RWD tips and tools

Web Design Tips, Tricks, & Fixes 15

Discover the process behind a successful responsive project, from creative conception and design, through to building and testing 16 Web Design Tips, Tricks, & Fixes

New adventures in responsive design

THE BIG IDEA! O

ver the past 12 months we have seen one the fastest and most significant developments in the web design industry. The influx of highly capable mobile devices with powerful processors, modern browsers and excellent displays, has opened the floodgates for much greater creativity in responsive web design. Where we were previously only concerned with screen widths, now we also find ourselves considering user interactions, device connection speeds and even the user’s location. Clients’ expectations have also increased, which means that careful consideration as well as effective communication is paramount in absolutely every aspect of a responsive design project. Before diving in, as with any project, a solid understanding of the brief is vital. Make sure there are no areas left open to interpretation between you and your client. It helps to ask the client for anything, both

visually and functionally, that has inspired them when creating the brief. From this you will have a good grasp of the clients’ expectations for the end product. Next, align these expectations with those of the end users, this can be achieved by asking users what they would expect from the product and make sure that these expectations are prioritised. Agree the devices and browsers to be supported. If you can access analytics data from an existing site, use this to help in deciding the testing approach. As a minimum you will need to be testing with an iPad and iPhone as well as an Android phone and tablet. Now that you have a sound idea of the scale and scope of the whole project, take a step back and consider any future developments. These could be low priority requirements or even just ideas that you have had through the process so far. Working your way through all of this should give you a clear idea of what you are aiming to achieve – and give you a much greater chance of doing so.

EXPERT INSIGHT Nearly every brief I see asks for ‘support for mobile’ and, with the proliferation of devices over recent years, this cannot be ignored. Responsive design takes focus away from which handset or what system, allowing teams to focus on crafting great experiences and how they can be enhanced by available technology. Damian Proctor Executive creative director Q Redweb

START PLANNING The standard next step in any website project would be to map out the IA, but with a responsive build it helps to take this a little further. Once the site structure is mapped out and key content elements defined, these content elements need to be prioritised. This will be really beneficial when you get to the build, as it helps define the markup structure and content flow for small screens. You can now start sketching out the page layouts; start with the global elements like the header, footer and site navigation and cover small, medium and

With good planning and RS \WbW]\Wbya [cQVSOaWS` b]Q`SObS a][SbVW\U W[^`SaaWdS

large screens. Then you can move onto the main content layouts for each page, again covering a range of screen width – the order of the content elements on small screens can be taken from their priority in the architecture. This is a really good stage to get the client involved, running through your sketches or wireframes and iterating on them with the client. This helps the client to get involved and gain a sense of ownership of the solution. Next, identify all functional components throughout, these may be simple interactive elements like tabs and carousels or much more

complex functionality like data handling, filtering and rendering. As these elements will be relying on JavaScript, the flexibility required across all screen sizes may not be achievable through CSS alone. This means additional time and consideration may be required to ensure a rich user experience of these components across all devices.

TOOLS YOU CAN TRUST xMind

Balsamiq

Chalkmark

www.xmind.net A great application for mapping out site and content structure using a drag-and-drop interface, allowing quick and easy iteration.

balsamiq.com A rapid wireframing tool with a wide range of predefined common components to choose from. This makes it easy to lay out ideas as if you are sketching on paper.

www.optimalworkshop.com/chalkmark.htm An online tool that’s great for sharing your wireframes and setting up quick click testing and feedback for users.

Web Design Tips, Tricks, & Fixes 17

BUILD CONSIDERATIONS

Before designing the final site and getting into the code build, there are a few areas to make sure you have a clear idea on. If you are planning on using a responsive grid, either from a framework or your own, the design will have to fit within this. You need to know what devices the end users will be using to help define your build and testing strategy. You also need to have confidence that site you build will perform as the client and users expect.

From using the right responsive framework to ensuring ST QWS\b^OUS load times eWbVQ]\QWaS 8OdOAQ`W^b Q]RS

Page performance In terms of performance, today’s browsers are a far cry from the days of IE8 and below. It’s important to remember that, although a browser can run JavaScript and render complex designs efficiently, not all devices will have the best connection speeds. It is paramount that the page load times are kept as low as possible, there are a few simple things to consider that ensure your site build performs for all screens. Using CSS3 shapes instead of images It is standard practice to use image sprites to save on the number of images loaded within a page. For simple icons and shapes you can replace these images with CSS3 shapes. A great resource to check out is css-tricks.

18 Web Design Tips, Tricks, & Fixes

com/examples/ShapesOfCSS, by combining these techniques with :before and :after selectors you can really speed up your icon rendering. Compiling your CSS and JavaScript files Make sure that on the live server your CSS and JavaScript files are minified and compiled to as few http requests as possible. There are many resources available for this and many CMS platforms make this available out of the box. Be careful when making reference to DOM elements in JavaScript When manipulating DOM elements with JavaScript, especially if using jQuery, be sure to reference DOM elements as few times as possible – store them as variables and use them throughout your script. Also, consider how you target these elements, try to use IDs whenever possible. When targeting by an ID, JavaScript will stop looking for the element once it has been found, whereas if you’re using a class, every DOM element will be checked and all matched items returned.

Adapting functional components Run through your list of functional components, created during the planning phase, and ascertain what is possible for each screen size and/or device to be supported. Try not to restrict functionality for all users

just to cater for a small proportion. Have a good idea, not only of what different solutions will be built, but how you will transition between them technically.

Should You Use a Responsive Framework? There are a wealth of frameworks available to kick start a responsive build. They not only save time but also provide solutions to problems often encountered. This is much more than simply adjusting and reflowing page layouts, but can also include responsive navigation and interactive components. All these things have been well tested across devices which reduces the risk of timeconsuming bug fixing later in the project. Although using a framework may seem like the way to go, there are some instances when they may not be suitable. If the page layouts are simple or there are only a small range of layouts, you may be able to build these with much less CSS code using flexible widths and CSS media queries. Also if the site is at the other end of the scale and has a high level of complexity, such frameworks can be difficult to extend and adapt to provide the desired solution. So it is important to align any framework with the defined layouts and functionality, as well as the scale of the project. If you are working within a development team, it also makes sense to canvas opinion across the team, as everyone will have to understand and be able to work with any chosen framework.

New adventures in responsive design

WHICH FRAMEWORK TO USE?

BOOTSTRAP

FOUNDATION

SKELETON

getbootstrap.com Probably the most popular and longest-standing framework available, with extensive input from the open source community.

foundation.zurb.com A powerful and well-structured framework with some very impressive plug-ins.

www.getskeleton.com An easy and lightweight grid framework with simple styles to get working quickly.

PROS This framework is set up to allow easy

Very lightweight – it’s in the name! – as this is not bloated with any component types or functionality you just won’t use.

PROS Really easy to set up and get started with

PROS

a range of themes and functional extensions.

extension and adaptation with your own bespoke code, providing good flexibility for your project.

PROS There are lots of good examples

PROS The documentation for this is

and demonstrations as well as a large, active development community.

excellent, full of code examples covering most requirements you will need.

CONS

A steeper learning curve than Bootstrap and does require more customisation to implement functional elements.

CONS

Skeleton doesn’t include any functional plug-ins, so anything outside of the CSS framework will need to be created bespoke.

CONS

There isn’t a prevalent development community to ask for support, or very much in the way of available documentation.

Can be difficult to extend and adapt to suit more complex interfaces and functionality.

PROS

Its simple structure makes it easy to extend for any project and really make the framework your own.

CONS

CONS

The full code is large so will affect page performance, although you can choose which components you need when downloading the resources, which helps eradicate this issue.

Not as large a development community as Bootstrap but it is growing.

CONS

MOBILE OR DESKTOP FIRST? It is difficult to say that either mobile- or desktop-first approaches are the right way to go. Although the trends in mobile usage do suggest that users on mobile devices will far surpass those on desktop machines, if the key differentiator is screen size then we would have to take into account higher resolution devices as if they were desktop. Either approach has its benefits and restrictions.

;]PWZS `ab When taking this approach you can be sure that you will not be building complex page layouts that are difficult to adapt when the screen width is reduced. It also will ensure that the mark-up structure you write will follow the content prioritisation defined as part of the IA. As you will be primarily focused on touchscreen devices you will inevitably cater for touchscreen events from the outset, creating a more efficient and tailored solution for these devices. You may find, however, that when viewed on desktop or larger screens, the layouts seem very simple and not that creative or interesting.

You may also have discounted certain functionality that wasn’t feasible or was particularly difficult on smaller screens, therefore impacting on the experience for users with larger screens.

2SaYb]^4W`ab When catering for larger screens first you will not be restricted in terms of creative page layouts and functionality. You can be confident that those users with larger screens will have the best experience of your site as possible. It is easy, however, to not cater for touch interactions and have to code these in later, which is more difficult. It is also common to cause yourself problems when reducing the screen size as the mark-up may not be ordered by the correct prioritisation, which means a certain amount of DOM manipulation is required to cater for these particular sizes. Some of the functional components will not work on smaller screens and, if you haven’t accounted for these in your planning, this can severely increase the time the site takes to build.

BVS@WUVb /^^`]OQV

be aware of the dO`W]caPS\S ba and pitfalls in taking either approach and decide which works best for your project

The best way to approach any build is not restrict yourself to one or the other. As you can see, both have their merits and really, they can be used in conjunction to produce great results. You must order your mark-up by prioritisation to reduce the amount of DOM manipulation needed to cater for all screen sizes. You should have identified those functional components that may require alternative implementations for different screen sizes, that way you will not be delivering a lesser experience for one or the other. The capabilities of devices are used whenever possible, for example touch interactions and gestures or geolocation look-ups. The final thing to remember is the end user, if they are predominantly using an iPad to use the site you must consider medium screen sizes as the benchmark from the client’s perspective.

Web Design Tips, Tricks, & Fixes 19

THE ANATOMY OF RWD

Key elements that make up an W\bcWbWdSO\RST QWS\b`Sa^]\aWdSaWbS

Fullsize screens offer the option to add all the relevant navigation elements including search. Think how to include on the small screen

All interactions are bound using touch events to reduce perceived lag and provide a smooth interface

Images are loaded when needed to ensure page load speeds are maintained. The amount of images in each section of this gallery layout is adjusted for mobile devices

0]bVbVS ZbS` and navigation elements are toggled from view on smaller devices, allowing more room for the core site content but still providing clear site controls to the user

MAKING YOUR SITE LOOK GOOD When designing a responsive site you cannot rely on using a desktop screen. The use of devices in the project should start now; view static JPEGs of your designs on devices as you create them and run through them with clients in this way. By doing this you will find that it is much easier to get the proportions correct across the devices. When changing the layout for mobile screens it is not just a case of reflowing all of the content, you may want to make buttons and links larger so that they are easier to interact with, or adjust font sizes in order to cater for the fact that the user is holding the screen closer to them. You can’t cater for these aspects of design when looking at the layouts on a desktop screen. We are all used to designing for desktop but most of the problems occur when considering the smaller screens. It helps to take inspiration from the interfaces we all use on devices every day, and the Android and iOS interfaces have been developed over the years and give us a good indication of the behaviours of users. One of the biggest challenges is site navigation – fortunately, there are three clear solutions to this design challenge.

Collapsible menus

With responsive sites the design process can be daunting, but it doesn’t have to be

20 Web Design Tips, Tricks, & Fixes

For smaller screens, collapse the list of links into an open and close menu, this more often than not uses the ‘three bar’ icon to indicate the functionality to the user (taken from iOS and Android interfaces).

Slide-out menus This particular approach has been made popular by the Facebook application on many devices. The menu is displayed off the screen and with a swipe or button tap, it slides into view. This is really useful for nested links, as tapping a menu item can slide a list of child pages into view.

Anchor linking

There are various tricks that can be used to save space and look good while maintaining functionality

By rendering a second navigation block at the base of the page layout, you can set this only to display on smaller screens simply in CSS. Then, an anchor link can replace the navigation at the top of the page, taking the user to the menu at the bottom. This solution requires very little JavaScript and therefore performs very well across devices. You can make the experience much smoother by animating the scroll to the menu.

New adventures in responsive design

SETTING UP A FRAMEWORK

TOUCH

How to get the bootstrap framework up and running in simple steps – once set up, you can take advantage of the great tools on offer

CONSIDERATIONS

01

Get the resources

Download the compiled and minified files from getbootstrap.com/getting-started and add these to your project solution. Alternatively, you can access these files from a CDN as shown. Include the default theme provided, you can edit/replace or overrule this CSS file when implementing your design.

001 002 003 004 005 006 007

02

Set up your base HTML structure

Reference the resource files in your base HTML structure and add your own stylesheet to start to implement your styles. If you are planning on using any of Bootstrap’s functional plug-ins make sure you remember to include jQuery as well.

001 002 003 004 005 Getting Bootstrap up and running 006 007 008 009 010 011 012 013 014 015 016 The start of my site build! 017 018 019

03

Add core structure and navigation

This is an example of a simple horizontal navigation bar which switches to a collapsible list for small screens. We also have a primary large button with some intro text. The class ‘container’ can be used to wrap any section in a centred wrapper.

04

Now add some columns

Now we have added a row containing three columns. At medium screens the first column spans all 12 columns and the remaining two only 6. On small screens they all span 12 columns. This is implemented by wrapping the floated elements in a class ‘row’ and then using the column classes, for example ‘col-lg-4’ will make the element span 4 columns on large screens, whereas ‘col-md-6’ will make the element span 6 columns on medium screens.

05

get creating

From this point on, you should be able to quickly create the page layouts you need and then start delving into the range of CSS options that Bootstrap has to offer. The documentation for the CSS and JavaScript plugins are well Full code detailed and found on available from the website webdesignermag.co.uk/ getbootstrap.com. bcb]`WOZ ZSa Enjoy creating!

Getting used to touch events is vital to the user experience of a site on devices If we use a click event across all devices it will create a slight lag effect that can be really frustrating for users. This is due to how touchscreen devices handle the click event – it in fact triggers a range of events as follows; Touchstart, Touchmove (an event for every pixel move), Touchend and finally Click. The amount of time between the Touchend and Click events can be up to 0.5 a second. This delay makes the interaction feel sluggish but is not long enough for it to seem broken. The solution for this is to bind all click events with a Touchend or Touchstart and fallback to click when necessary. All of this is handled out of the box by both Bootstrap and Foundation Responsive frameworks.

ADAPTIVE JAVASCRIPT Use Matchmedia and window. onresize events to adjust your JavaScript functionality Inevitably you will need to change either some markup based on the screen size – eg, you may have a sliding carousel of images and on smaller screens not want it to slide automatically. You could achieve this by checking the window width on page load and then setting up the functionality to match. This, however, won’t run again when the window is resized, so will only implement the functionality based on the initial window size. To achieve this you’ll have to update the functionality on either a window.onresize or Matchmedia event. The window.onresize event is triggered for every pixel change in window size, so it’ll be intensive to run checks every time it fires. This makes the Matchmedia event a more efficient solution. These events are only triggered when the window is resized to the matching rules set, the same event that CSS media queries listen to. This technique gives the added benefit of matching your CSS media queries, so aligning JavaScript adaptations with your layout changes is easy to manage. If you use window. innerWidth the value returned doesn’t match the value that triggers the CSS media queries.

Web Design Tips, Tricks, & Fixes 21

TIME TO TEST How to be Q]\ RS\b that your PcWZReWZZ work across RSdWQSa without costing too much time

The sheer range of devices in use today means that it is increasingly difficult to test across a wide enough range and to still be confident in the final product. If it takes an hour to run through a test on one device, it will take the same amount of time for each device thereafter. This means that to stop increasing our time and cost in testing we need to find some smarter ways to do it.

Use the browser Both Chrome and Firefox have excellent tools and extensions for testing responsive sites. As you build, check all screen widths

in the browser from 320px and up. If you just catered for the screen widths of specific devices, the final solution will not be future-proof. Devices with new screen widths are coming out all the time, so we can’t assume that the most popular devices now will remain so. In these browsers you can also emulate touch events, but this doesn’t really give you the tangible feedback that using a touchscreen does.

Test as you go This is a simple approach, just as relevant for desktop browsers, you test each layout and component on a tablet and phone as you create them. Make sure that with both devices you are covering the Android and iOS platforms – this way when you get to the end of the build you shouldn’t have any bugs that affect all devices or are linked to a specific platform.

Use four core devices When you have finished the build and come to formal testing, use – at least – a tablet and phone each, for both Android and iOS. If you do not have access to four devices you can use emulators, but you will find discrepancies in behaviour when comparing to the actual devices. To speed up this process you can use a tool to synchronise the interactions on a site across multiple devices. Both Adobe Edge Inspect (html.adobe.com/ edge/inspect) and GhostLab (vanamco.com/ghostlab) not only provide this flexibility but also include a host of helpful debugging tools. These give you DOM, CSS and Console access to the devices that you have connected. It’s easy enough finding bugs when testing, but to figure out exactly what is happening these debug tools really are indispensable.

Rapid wide range testing Once you have completed testing with actual devices and fixed any issues that you stumbled upon, you can use emulators to check across a wider range of devices.

EM ULATORS VS DEVICES There is a host of emulators OdOWZOPZST]` testing, but can they be `SZWSRc^]\-

emulators

PROS

CONS

You cannot be certain as to exactly how accurate the emulators are, unless you decide to spot check your builds on actual devices.

CONS

PROS You can do it all from your desktop when working on a local environment, no need to connect a range of devices to the same network

22 Web Design Tips, Tricks, & Fixes

With the right tools `Sa^]\aWdSbSabW\UQO\ PS[cQVSOaWS`O\RUWdS g]cQ]\ RS\QSW\bVS \OZa]ZcbW]\

Adobe Edge Inspect html.adobe.com/edge/inspect If you already use Adobe software you will probably have a license for this application. It allows you to connect multiple devices to your Chrome browser and then synchronise page loads across them from your desktop. A range of debugging tools are provided, giving you access to the DOM, CSS and Console for each device.

Ghost Lab vanamco.com/ghostlab This application was initially only available on Mac OS, but is now available for Windows users too. It not only synchronises page loads, but also page interactions. This tool also provides some really useful debugging tools, making the process of fixing your bugs that much quicker.

devices

Both Chrome, Firefox and IE11 have some level of device emulation available now. In addition, there is a wide range of more sophisticated emulator apps and sites available, including Mobile Phone Emulator (www.mobilephoneemulator. com), Screenfly (quirktools.com/screenfly) and Blackberry Ripple Emulator (bit.ly/1tUY3DZ) to name a few. Some simply demonstrate layout changes for devices, while others have Geolocation and Accelerometer overrides to test more complex functionality.

You can test a wide variety of devices relatively quickly without the cost of purchasing each device yourself just to be able to test. Your clients can also use the same tools.

TOOLS TO TEST

It is difficult to test touch interactions and gestures using a desktop screen. A device is held in the hand so emulators are not a true representation of the full user experience.

It’s really satisfying to see something you are building running seamlessly across a range of devices. Whether you have a range on hand to build with or use devices from an open device lab, you can be confident that users will have a great experience when visiting a site you have built.

PROS You can be confident that

CONS

no issue will be left undiscovered across the range of devices you test with. You will find all bugs – even those that stem from hardware or operating systems.

It can be costly to purchase enough devices to cover your testing strategy and, worse still, they tend to go out of date very quickly. The average user will upgrade their device once a year.

PROS

CONS

Being able to actually use the touch interactions as intended ensures a smooth user experience. You can also test multiple browsers on the same device – it is common for Android users to use Chrome as well as the native browser.

It is a much more timeconsuming process to test on actual devices. They all need to be connected to the correct network and set up or integrated with a separate application in order to allow debugging.

New adventures in responsive design

CASE STUDY

RESOURCES Useful tools that will make the RWD process easier

Survs

FARROW & BALL

This was a fully `Sa^]\aWdSRSdWQS `ab application build that was designed to provide inspiration and curation for a large customer base

inspiration.farrow-ball.com Farrow & Ball creates unparalleled paints and handcrafted wallpapers, distributing them around the world. Known for the quality of its products Farrow & Ball has a large and varied customer base, from the home decorator to interior design and corporate clients.

WHO

Farrow & Ball wanted to provide an inspirational site for its customers to explore ideas for their decorating projects, curate and share images within the platform and in turn drive business across all sectors.

WHAT

The products available from Farrow & Ball speak for themselves, but generating a social environment for sharing and exploring creative ideas for their customers was something completely new.

WHY

Due to the majority of customers visiting the Farrow & Ball website from iPads, this site was actually designed and built with medium-sized tablets at the forefront. It works seamlessly across screen sizes from 320px wide and up, as well as using touch events to provide a smooth interface throughout. The site also uses KnockoutJS, an MVVM JavaScript framework for binding complex data to DOM elements. The end product has met the client’s expectations from the outset and has had huge take up from their customer base since launch.

THE FUTURE OF RESPONSIVE DESIGN Responsive and adaptive websites are now expected as standard by clients and the tools that we use are always developing and making things quicker and easier. This trend is bound to continue as there are a lot of areas, such as testing, that are not really efficient enough just yet. Perhaps we can expect the differences between native device applications and responsive sites to disappear as the browsers gain access to more and more device-specific functionality. It will also not be long before responsive not only covers differing screen sizes but also screen shape – from circular watch interfaces to real-world overlays on glasses or contact lenses. Connection speeds for devices are also bound

The industry is always changing what can we expect from the future of RWD?

to increase, meaning the scale and complexity of the platforms we design and build are all set to increase. The way we interact with the internet is always changing, and the rate of technology development is not looking like it will slow down. It is imperative, as web designers and developers, that we keep up to speed with new possibilities and always take time out to think a little differently. There is so much more on the horizon for us to consider – currently we are only concerned about what is happening in the browser. What if we think bigger? We could adjust the contrast in dimly lit surroundings, change layout when the user is further away and even adjust functionality and content depending on other nearby devices. It is down to us to share experiences and approaches in order to help the exciting ideas become the standard expectations of both clients and end users alike.

www.survs.com Provides the ability to create online surveys and add them to a client’s existing site. You can then gather vital information from their current users, without the cost and time of holding focus groups with users.

PlaceIt placeit.net Upload your site designs or scrape straight from an existing URL and then have your image placed within a range of screens and devices. Excellent for visualising the final product to clients.

Window Resizer for Chrome chrome.google.com/webstore/detail/ window-resizer Test your CSS layouts quickly with this simple, but very useful, free extension for Google Chrome. There is a range of quick links to resize the browser to specific device sizes and also the ability to extend with your own sizes.

JS Console jsconsole.com Not the most exciting-looking tool but one of the most useful. This gives you access to the JavaScript console of a device with a simple script injection. There are straightforward instructions and demonstrative videos on how to use it included on the site.

Web Design Tips, Tricks, & Fixes 23

Discover the web browser development tools that will help you to prototype, test and optimise your website to perfection

S

hortly after Mozilla introduced Firefox, a powerful in-browser diagnostics and monitoring tool was released as an extension. This marked the beginning of a shift in how web designers and developers approach the problem of prototyping, optimising and designing in the browser. More recently, the wide-spread adoption of a responsive design workflow has meant that the oldfashioned concept of a fixed-width window has been replaced with an understanding that the only way to fully test a website is in the browser itself, pushing and pulling the window into different proportions to check and adapt the way content reflows.

24 Web Design Tips, Tricks, & Fixes

Designing and developing within the browser required a shift in the way we approach problems. Rather than designing pages, we’re now designing complete systems that automatically respond to different conditions, generating more of a style guide than a single page layout. While the shift was led by Firebug, which we’ll look at shortly, this is no longer the only option available to designers and developers. In fact, all the major browsers now have either built-in developer tools, or a rich set of extensions available to help users test, optimise and even develop directly within the browser. Even Internet Explorer is a real option, as it has a useful set

of debugging and inspection tools built right into the browser, which may come as quite a surprise to some. Over the next few pages we take a look at each of the main browsers, and reveal the must-use development tools that can help you work smarter and faster without ever having to leave the browser environment. No matter what your own browser preference is, you’ll find a useful set of tools that can help you design and develop directly in the browser, making the process of testing and optimising smoother and less strenuous. While these tools won’t do the work for you, they provide such an integral part of the process that you’ll soon consider them an essential part of your toolkit.

Design and develop in the browser

START DEVELOPING IN FIREFOX WITH FIREBUG

The browser extension that started it all, Firebug has a lot to offer in today’s developer-rich toolset

TOP TOOLS

Qgetfirebug.com The Firebug extension allows you to inspect HTML elements directly within the DOM, including procedurally generated nodes.

FireFTP

Q

mzl.la/1cArbIa A simple debugging tool is built in, allowing you to create JavaScript breakpoints and check what’s going on as your code executes.

The DOM tab allows you to quickly and easily reposition and restyle elements within the DOM, without ever having to leave your browser.

Firebug is a must-have extension for Firefox if you’re a designer or developer. It allows you to quickly target any element within a page and view the underlying markup, CSS properties, layout and Document Object Model (DOM) instantly – even where some of this is generated procedurally. On top of that, it also allows you to directly edit any of these elements and instantly preview the resulting change directly inside Firefox, making it a superb way to quickly prototype changes to an existing design within your browser. Once you move beyond the basic features, you can also use Firebug to create breakpoints in your JavaScript code, analyse network access and loading times, and query collections within. Of course, you’re not purely limited to your own pages and apps. Firebug doesn’t save changes to the server, instead editing your locally downloaded copy of a page and its assets,

so you can also use it to inspect and CONDITIONAL learn from other BREAKPOINTS website designs. If you’d like to stop your JavaScript running when a All this makes certain condition is met, right Firebug (and the click on the line number of other similar tools your script within Firebug’s you’ll see) an Script panel, and type in a essential tool both condition such as x=10. The for new designers script will now pause when and developers, and and if that condition is met. seasoned pros alike. Quite simply, once you start developing using Firebug, you’ll never want to go back to the old-fashioned approach of edit, refresh, test!

FireFTP turns your installation of Firefox into a fully functional File Transfer Protocol (FTP) client for uploading and downloading files to and from remote servers. It also includes advanced functionality such as directory analysis and comparison, automatic syncing of files and folders, support for secure FTP (sFTP), SSL, remote editing and much more. Perhaps most importantly, FireFTP allows you to create and manage multiple sites, so it’s easy to work across different servers without having to manually remember and rekey your login credentials each time you access.

Fireshot

Q

mzl.la/1hM6cWU

GET TO GRIPS WITH FIREBUG

01

Inspect the DOM

Open any website you’d like to inspect using Firefox. Make sure you have FireBug installed, and right-click on any element within the page. From the resulting pop-up menu, select the Inspect Element with Firebug option.

02

Firebug may be the grandfather of modern in-browser development tools, but it certainly still packs a punch

Edit HTML

The main window displays the HTML markup, while the right column allows you to tweak styles. When you inspect an element, you’ll get the HTML tab in the main window so you can edit the HTML. Double-click it to edit.

03

Edit the CSS

Once you’ve found a style to add to, double-click beneath one of the existing rules and type your new rule into Firebug. Rules will take effect immediately, so you can quickly prototype different styles interactively in the browser!

FireShot is am extension that performs one task well. It’s a screen capture tool that records the visible output of a webpage as a screenshot from Firefox, but rather than being limited to the visible area, FireShot grabs the entire rendered page. The extension will save in PDF, PNG, JPEG, GIF or even BMP format, and captures can be annotated within FireShot, making it a great choice for highlighting features in a page, developing user manuals, or helping to identify areas in a page that need attention. Great if you’re working as part of a team.

Web Design Tips, Tricks, & Fixes 25

EXPERIMENT WITH GOOGLE CHROME Chrome ships with an extensive set of developer tools as part of the package for users to get started with Qbit.ly/IENotW Like Firebug, Chrome’s developer tools provide a range of different options including a DOM inspector, JavaScript console and Resources view.

The styles tab offers a handy layout diagram that illustrates the box model being applied to the selected element.

EASILY EDIT A PAGE IN CHROME Editing HTML markup and styles is straightforward in Chrome using the built-in developer tools provided

01

Open Developer Tools panel

HTML is editable via Chrome’s developer tools. Right-click on the page you want to edit, and choose Inspect Element. This will open the Developer Tools panel. Now double-click on any element in the Elements tab to edit it, as the browser updates in real-time.

The DOM and HTML source code can be directly edited, making it easy to adapt an existing page to incorporate new elements.

Taking its cue from Firebug, Chrome offers a suite of tools that largely mirrors the functionality found in the Firefox extension. You’ll find a handy Elements/DOM viewer, which also incorporates some nice features such as pop-up previews of embedded media elements. In addition, the Resources tab shows all of the individual elements that are downloaded as part of the page request, including any JavaScript, CSS, favicon, image, video, font and Flash files. The standout features of Chrome’s developer tools are the Timeline, Profiles and Audits tabs. The Timeline tab simply shows how long each individual resource takes to load and render in the browser. This feature allows you to quickly identify any bottlenecks that are caused either by the server, your files sizes, or complex rendering code. The Profiles tab allows you to perform unit testing of your JavaScript, analysing the extent to which each individual

TOP TOOLS

call puts stress on the processor. This can be particularly useful when you’re looking to squeeze every last ounce of performance out of your webpage or app. Finally, the Audits tab offers a handy set of actions to help ensure that your page is (largely) standards SAVE YOUR compliant. It’s not CHANGES limited to picking When you’ve been working you up on missing inside Chrome’s developer alt tags and invalid tools, creating new markup nesting though – also or styles, you can quickly available are handy save a copy of the revised page by right-clicking and hints and tips on choosing Save As… from the how to optimise your pop-up menu. code for even better performance.

Pendule

Q

02

Style it up

03

Delete elements

Just as with Firefox’s Firebug extension, Google Chrome’s Developer Tools allow you to make on-the-fly stylesheet updates to your page. Select an element on the page as per the previous step, then use the Style tab to insert a new style declaration within an existing rule.

bit.ly/1f6nXMu

MeasureIt!

Q

bit.ly/1bvfNZv When you’re converting a mockup from a static Photoshop comp into a working HTML page or deconstructing a design, it can be tricky to get everything perfect. MeasureIt! simplifies this with a measuring ruler. The process is simple: draw out a ruler across the browser window, and MeasureIt! will feed back the width and height of any elements on the page. By using this in combination with the built-in developer tools, you can quickly resize and reposition elements to achieve a perfect representation of the mockup. It’s also handy for getting an at-a-glance reading on the dimensions of a particular element within the page.

26 Web Design Tips, Tricks, & Fixes

Pendule extends the built-in developer tools within Chrome to offer advanced functionality. A handy set of features includes being able to automatically beautify CSS and quickly disable all styles; inline styles only, or embedded styles only. As well as the prettifying of source code (making it easier to see what’s happening in a page), you can override any built-in form restrictions and alter a form’s method. One of the best features available is the ability to view generated source with changes highlighted, which is particularly useful when you’re loading content using AJAX, or updating the DOM by inserting nodes at runtime using JavaScript.

You can delete elements from your HTML source code using Chrome’s developer tools. Select the element you’d like to remove using the Elements tab, and hit Delete on your keyboard. This doesn’t remove the markup from the server, just from the current render of the page. If you’d like to save your changes, right-click and choose Save.

Design and develop in the browser

SHAPE YOUR SITE WITH SAFARI Safari has a complete set of developer tools at its disposal – but you need to enable them first!

LEARN THE SHORTCUTS

Qbit.ly/1d7Livt

To make the most of Safari’s Web Developer tools, it’s worth learning the keyboard shortcuts to save time switching between different tabs. You can find a complete list of these in the online documentation at developer.apple.com.

Like Firebug, Safari’s developer tools offer a range of ways to interrogate the page’s DOM, styles and resources.

The built-in console allows you to query objects and collections directly from the Web Developer panel.

As both Chrome and Safari share their roots in the open source WebKit project, you might expect to find a similar set of developer tools in both browsers. If that is the case, you shouldn’t be disappointed! Safari boasts largely the same excellent toolset that Chrome offers, albeit with only a few minor differences in functionality or finesse. Just as with the other tools we’ve looked at in this feature, Safari’s developer tools allow you to inspect and edit HTML elements directly, viewing the updated page rendering as it changes in response to your edits. You can also access and alter the styles, and use the JavaScript console to test variables,

MAKE ALTERATIONS IN SAFARI

Inspect an element

Safari allows you to right-click on an element and inspect it using the developer tools. You do, however, need to enable the Developer menu before this will work. Choose Safari>Preferences, select the Advanced tab and ensure Show Develop in the menu bar is checked.

Inspect devices

Q

bit.ly/1d7LSJK

The Resources view provides access to all the individual elements that make up the page, including cookies, local storage and any extension scripts.

01

TOP TOOLS

02

methods and actions. Naturally, you can also set breakpoints for your code to help you debug, and there’s a useful timeline mode that allows you to track the way a page is loaded and rendered within the browser window. The debugger facility makes it significantly easier for designers and developers to find problem code and identify the precise issue, whether that’s an unescaped string or an unnecessarily resource-hungry loop. Other nice features include the ability to switch between different colour models when editing CSS, making it easy to use a combination of different approaches (such as hex and rgba).

Safari’s web developer tools are extremely capable and very easy to learn. Here we show you the basics

Edit HTML and CSS

Once enabled, you can edit the HTML and CSS of a page just as with all the other tools we’ve featured. Highlight the content you’d like to alter, right-click and choose Inspect element, then make changes in the Developer Tools window. Changes are rendered in real-time.

03

Use the console

The console allows you to interact with scripts that are already included on your page, as well as create new scripts. This can be especially useful when it comes to debugging, but there is no real limitation with what you can run in the console. Try a simple alert(); method to see this in action.

One of the major benefits of Safari’s built-in developer toolset; by enabling the option on your iPhone or iPad, you can access the entire toolset on your desktop while referring to a page loaded on your mobile device. This is a powerful capability that makes it much easier to conduct on-device testing of your pages, and is especially useful when optimising JavaScript or CSS3 code to work well on these less powerful devices. You can find full instructions on how to set up your iOS devices to use the Safari developer tools at developer.apple.com.

ySlow

Q

yhoo.it/1kyCH7W The ySlow extension, developed by Yahoo!, is available for all the common browsers, so you’re not limited to using Safari. ySlow allows you to inspect a page’s performance, marking it against a series of tests and making recommendations to improve page performance. There are a core 20-plus rules to ensuring the best performance of your page, and each time the extension runs it checks the page against these criteria. These are techniques that many developers employ, but if you’ve overlooked one or more, ySlow will alert you.

Web Design Tips, Tricks, & Fixes 27

REDISCOVER INTERNET EXPLORER In the past Internet Explorer was the worst option for in-browser development, but with the introduction of IE11 this has changed

TOP TOOLS

Qbit.ly/IENotW Just as with all the other tools available, the newly refreshed Internet Explorer F12 developer tools offers a full web inspector and console.

UI Responsiveness

Q

Styles applicable to the currently selected element are pulled out into this area, allowing you to edit and preview the results in real-time.

bit.ly/1golD73

A range of profiling tools are also provided under the Profiler tab, which enable you to analyse and test JavaScript and page performance.

If you’re a web developer with more than a few years experience behind you, you’ll probably be quite familiar with the limitations of the Internet Explorer debugging environment. In Internet Explorer 6, meaningless pop-up script error alerts would tell you something was wrong, but the facility to analyse and actually decipher what was causing the issues was unfortunately beyond the majority of designers. Thankfully this has all changed with the more recent versions of Microsoft’s browser, and Internet Explorer 11 sees the arrival of a completely re-architected set of developer tools known as F12 Developer Tools, given its name since the keyboard shortcut to launch the suite is F12.

Present and correct are a DOM/HTML node editor and inspector, JavaScript console, profiling suite and network analysis tool. The same core features we’ve seen across all the other browsers are all present and correct here, so if you’re either limiting yourself to using Internet Explorer, or simply want to analyse performance in this browser, you now have the complete toolset to allow you to do so. There is still the odd cryptic error message that pops up, but with quick reference to the developer tools documentation at bit.ly/1gZ1v92 you can decipher these with relative ease. It’s difficult to overestimate the importance of having these tools available, so web designers across the globe should rejoice!

EDIT AND IMPROVE YOUR SITE WITH F12

Editing in-browser is now perfectly viable with IE’s improvements

Thanks to Microsoft’s own efforts, there are a number of additional tools available within the F12 suite. One example is the excellent UI Responsiveness testing tool. This testing suite graphically represents the loading and animation performance of individual elements within the page, allowing you to analyse where bottlenecks are causing your page to respond sluggishly. You can access the UI Responsiveness tool from the F12 toolset you’ve already seen – just click on the Speedo icon to open the suite and get started.

Emulation tools

Q

bit.ly/18lF9P4

01

Open the tool

Opening the Developer Tools within Internet Explorer is really easy: simply press the F12 key on your keyboard. If you’re using a tablet such as the Microsoft Surface, or your keyboard doesn’t have a set of function keys, you can also access it under the Tools menu.

28 Web Design Tips, Tricks, & Fixes

02

Edit a node

You can quickly and easily update the DOM by selecting a node directly inside the F12 Developer Tools window, or right-clicking on a page element and choosing Inspect Element from the popup menu. Once selected, you can edit and delete nodes by double-clicking or pressing the Delete key as appropriate.

03

Update the styles

This follows a similar user interface pattern to the other developer tools; to edit a style, first select the DOM node you’d like to interact with. F12 Tools will show you all the applicable styles for that node. Double-click inside an existing rule to add an additional style, or create an entirely new one.

Now you can emulate different browsers using Internet Explorer 11. Found within the main F12 window, as with the other tools featured here, the Emulation options are underneath the icon that looks like a monitor and mobile phone. This area allows you to simulate different rendering models and screen sizes, so you can pretend that you’re viewing a website with a Windows Phone instead. You can also make IE pretend to be elsewhere on the globe, which is handy if you’re serving location-aware content.

Design and develop in the browser

DESIGN AND CREATE IN OPERA Opera is one of the oldest browsers still available today, but how does it compare to the market leaders when it comes to developing in the browser? Qwww.opera.com/developer

USE OPERA’S DRAGONFLY TOOLS Use our quick-start guide to get going with Opera

Opera ships with a complete set of developer tools – Dragonfly – that allow you to interact with and query a page with ease. The console allows you to interact with the scripting engine on the page, querying elements and loading content as necessary.

01

Inspect an element

Opening up Dragonfly, Opera’s developer tools suite, is really easy. Simply press Ctrl+Shift+I on a PC, or Cmd+Opt+I on a Mac. Or, you can select a single part of a page, right-click on it and choose Inspect Element from the pop-up menu to launch Dragonfly.

Styles can be updated directly using the built-in styles browser, which also works in combination with the HTML DOM viewer to report on active styles for the selected element.

Opera has always threatened to be a USE CHROME powerful force on the EXTENSIONS desktop, but has never Because Opera now shares really achieved the the same rendering engine market share it perhaps as Google Chrome, you’ll find that many of the extensions deserves. Away from the available for Chrome will also desktop, however, it has now work on Opera! significant support. This is reflected in the team behind Opera’s decision to move away from the Presto engine to use Chromium instead. Immediately following this move, Opera was temporarily left without a set of developer tools. This caused developers to cry

shame, as Opera’s solution – Dragonfly – was a well-realised set of developer tools that offered an excellent cross-platform solution to developing not just for the desktop, but also for devices unsupported by other browsers. Thankfully, things have changed and the developer tools are back and as good as ever in the latest version of Opera. So once again designers and developers have full access to a suite of tools that allow them to inspect and interrogate pages, as well as develop directly within the browser. As is similar to the other tools we’ve already covered in this feature, Opera’s Dragonfly allows you to edit, insert and delete HTML directly within the DOM. You can also edit the CSS and scripts used on a page. And, as you might expect, there’s a full set of analysis tools available here too!

TOP TOOLS

Chromiumbased extensions

Q

QCross-platform development

www.opera.com/dragonfly Opera is a big player in the mobile world. If you’re targeting devices outside desktop, it makes a lot of sense to test and develop your site using Opera. Happily, Dragonfly works across all devices, so you can use the same toolset to inspect and query your page whether you’re testing against a tablet, smartphone, or desktop. This is especially useful when it comes to older phones or embedded devices such as TV set-top boxes. The former are especially prevalent across the developing world, where the latest versions of Android or iOS aren’t nearly as relevant or universal as they are in the UK.

02

Edit the CSS

03

Use the console

Just like with Chrome’s Developer Tools, Dragonfly allows you to interactively update the CSS of individual elements on your page. This makes it a fantastic option for iteratively designing directly within the browser. Simply target the element you’d like to add styles to, and add/ remove styles using the Styles tab.

bit.ly/1bHfcbG Since Opera dropped its Presto rendering engine and moved to the Chromium engine, which also powers Google Chrome, Opera is now compatible with a range of plug-ins for the Chrome browser. This means any extensions you’re already using and familiar with on Chrome will likely work in Opera too. Similarly, any specific-to-Opera extensions that have been converted to use the Chromium engine will work in Chrome. An example of such a tool is the Accessibility Developer tools, provided by Google Accessiblity. This adds an accessibility audit to the developer toolset, and an additional accessibility sidebar in the Elements tab inside Chrome’s developer tools, or Opera’s Dragonfly.

You’ll find a console that allows you to query existing collections, objects and variables, and insert breakpoints for code analysis. Open the console tab, and type in alert(“hello world”); to see it in action. If you have a library included in your page, you can access any of the methods exposed by the script – use the same syntax as normal.

Web Design Tips, Tricks, & Fixes 29

Code the web with opensource editor Brackets Get to know some of the features and tools that can make your development life that little bit easier

01 Download Brackets

Let’s download the latest copy of Brackets from the website. Head over to download.brackets.io to get a copy of the editor for your operating system. As of writing, the current version is Sprint 34, but new versions are released on an approximate cycle of every three weeks, so your version may differ.

Source files available s
IUUQXXX ŢJMFTJMPDPVL bks-594

tools | tech | trends Brackets

a s
Brackets is a great option for developers who want an easier time – and who wouldn’t?

code editor, as every developer knows, is an incredibly personal choice. We spend a good majority of our time sat at the controls of an IDE or editor and as a result it has to satisfy a number of specific requirements, namely performance, comfort and suitability for the tasks in hand. If we can choose something that can handle pretty much whatever we need from it and can be extended and personalised to suit us 100 per cent, then we can certainly be happy with using it. Since it is so important to make a good choice, it is only right that you consider all of your options. Enter Brackets, the free open-source code editor from Adobe. Developed using web standards and HTML, JavaScript and CSS, Brackets was actually built using Brackets and is a superb choice for developers everywhere who need something that makes their life much easier. In this tutorial we will walk through the installation process as well as covering JavaScript linting and extending with plug-ins – so let’s get going!

An editor has to satisfy a number of requirements, namely performance, comfort and suitability for the tasks in hand 30 Web Design Tips, Tricks, & Fixes

02 Install and power up

The Brackets installation is easy and straightforward. Once complete open the application, at which point you will be greeted with an incredibly simple and clean layout. One of the benefits of using this tool is the lack of distraction from extra navigation and menu items or IDE panels that clutter the software’s workspace.

03 Instant help

When you initially launch the editor, Brackets will load a default ‘project’ which serves two purposes. The first is to show you how it organises and manages files within the workspace environment; a single-click selection will load the file to edit. The second is that the HTML file is the basic ‘Getting started’ guide for the release.

Code the web with open-source editor Brackets

04 Image management

To assist with focusing on your design and development processes within the editor, Brackets is packed full of useful hidden gems and features. One of these lets you hover your cursor over an image tag src attribute value and a thumbnail version of the image will be displayed within a pop-over bubble. This works with data URI values too.

05 Live Preview

The top-right of the editor has a lightning bolt icon. With an HTML or CSS file active in the editor, selecting this will enable Live preview on the closest or selected HTML file. This will launch a debug-enabled version of Chrome connected to the editor. Any changes that are made in Brackets will be instantly updated and visible in the browser.

06 Live HTML selections

When running Live Preview, any tags selected in the editor will be highlighted in the browser for quicker visual identification, much in the same way Chrome Dev Tools displays selected elements. This can really assist you during development and debugging phases as you can instantly see the element you are working on. HTML updates will also be changed instantly.

Useful extensions

01 _____________Markdown Preview This adds a new menu icon visible when editing Markdown fi les. A panel will display the rendered output of your .md fi le contents directly within the editor.

07 Quick Edit CSS

Brackets has long-provided the ability to edit CSS rules directly within the editor from an HTML page. With your cursor over an HTML element, press Cmd/ Ctrl+E to enable the Quick Edit command. This will scan the ‘.css’ files and find the relevant rules that match the selected element, which you can then edit without having to switch files.

08 Add CSS Rules

The very same technique can be used to add a new CSS rule to an element. Using the Quick Edit process once more, the inline display will open and you should be able to see a button element that will allow you to create a new rule, which will be applied to the nearest space in the ‘.css’ file, once again allowing you to remain focused in the editor.

09

Highly extensible

Clicking the building block icon below the Live Preview lightning bolt will open up the Extension Manager modal window. There is an ever-growing number of free communitycreated extensions available to download completely free. There is no install process with the exception of clicking the ‘Install’ button. That’s all it takes! You can enhance the editor with plug-ins that suit your specific needs.

02_____________PageSuck Ever needed to copy source code from a live site? This extension will draw in the contents of a provided URL and create a new fi le for you to work with.

03_____________Git Control There are a number of extensions that manage Git processes and resources. Brackets Git adds Git control directly into the editor for a cleaner workflow solution.

Web Design Tips, Tricks, & Fixes 31

10 Theseus debugging

For anyone writing a web app using JavaScript or a Node.js application, the Theseus extension is crucial. Written by Adobe and MIT, Theseus allows you to perform retroactive inspection of JavaScript code, an asynchronous call tree and real-time code coverage as you develop using Live Preview. Check out the open-source project on GitHub at github.com/adobe-research/theseus

11 Theseus in action

With the extension installed and Live Preview running, lets start to add some jQuery code to the document and place a $(document).ready() function call. As soon as it is saved and automatically reloaded you will see updates in the left margin of the editor to represent the live callback from the code.

12 Multiple functions

If we continue to add JavaScript functionality within the script block we will start to see how Theseus works in a little more detail. Here we have added a click handler to a button element. Once saved, the callback count will update with every click of the button, and the initial .ready function stays at 1 as expected.

Developing extensions Creating your own extensions for Brackets is incredibly easy. It is essentially based upon a single JavaScript file that manages the event handlers and callbacks, and taps into the core API components available. These include file system integration, menu management to apply extension menu items to the editor itself and document manipulation –and that is

13 Inspect callbacks

The retroactive inspection feature really helps to dig deeper into the JavaScript methods in place. By clicking on any of the callback counts in the left margin, a new panel will open to display the processed code and any objects that were passed into each function call.

naming only a few. The best way to develop an extension for Brackets is to actually build it within Brackets. While creating and testing an extension in the same editor instance is possible, it could potentially cause memory issues. To bypass this, you can open multiple Brackets windows. Use the first one to build and write the extension, and the second window to test the loaded local extension. There are some amazing resources available to help you, check out this overview for a start: monkeh.me/asjpv.

32 Web Design Tips, Tricks, & Fixes

14 Asynchronous calls

Let’s now add a JSON request to the click handler. This will be fired after the event, but the response won’t be immediate. Theseus is able to handle this and will successfully stack any asynchronous callbacks within the log inspector panel beneath the function that initiated the request.

Code the web with open-source editor Brackets

15 Enable Theseus

Should you ever want or need to, Theseus can be disabled and re-enabled easily through the File menu. As well as serving files from the local disk, it can also proxy to a proxy localhost running on port 3000. It’s an incredibly powerful tool and you can expect it to be improving continuously.

16 JavaScript code hinting

Helpfully, Brackets has been specifically engineered to assist with all areas of development, which includes providing code hinting and assistance where possible. For example, when implementing a call to a JavaScript function, the editor will highlight the code and function name as well as any parameters and their type, if applicable.

17 CSS hinting

Code and syntax assistance is also available for HTML and CSS files. This includes help with code completion and attribute or rule definitions. Simply start typing the value and Brackets will provide you with a list of possible matches to select from. While seemingly obvious for an editor, this really helps speed up development and save time.

19 JavaScript linting

18 Quick Edit colours CSS rules can also be altered using the Quick Edit function. Hover the cursor over a colour reference and receive a pop-over with the colour block. Cmd/Ctrl+E will open up the Edit feature to select a new colour from a dynamic selection tool or manual input in various formats.

Brackets comes with a built-in JavaScript linting tool, JSLint. By default, all JavaScript files are run through the lint process as soon as they are saved. This process helps to locate any typing errors or issues with closing off functions or variables, and the editor will display a panel showing the errors and line numbers to help you fix them.

Object inspection Theseus allows you to dig deeper into the returned objects and arguments within your JavaScript code directly within the Brackets editor to help identify and manage data.

20 Alter base URL

By default the Live Preview function will start a Node web server on a specific port to communicate between the Chrome browser and the editor. The base URL can be customised if you have another port or domain to use, and this can be managed from the File>Project Settings menu option.

21 Customise it

The Brackets Extension APIs have been heavily refactored in the later releases to give developers more power to interact with the file system and the option to harness the full power of the Node services. Build your own extensions quickly and easily and follow the detailed documentation available from github.com/adobe/brackets/wiki/How-to-Write-Extensions.

Web Design Tips, Tricks, & Fixes 33

Build a responsive WordPress theme

01 Download FoundationPress

To begin, make sure you have the latest version of WordPress installed and set up. Head over to the FoundationPress starter theme GitHub page: github.com/ olefredrik/foundationpress and download this theme. Once you’ve downloaded it, extract it and upload it to your theme’s directory in WordPress and activate it.

02 Custom stylesheet

Start by opening up the ‘header.php’ file in your text editor. You’ll want to add in your own custom stylesheet so that when it comes to upgrading FoundationPress it won’t override any custom work. You may use Sass with Foundation, but to allow beginners to follow along this tutorial, we’ll be using pure CSS.

001

005 006 007

05 Style the header

With our header implemented we’ll now need to style it. Open up ‘style.css’ in the FoundationPress starter theme, start by giving the main header a gradient background, using CSS3 gradient. Position the main h1 above the header. Let’s make all characters upper-case and give it a text shadow to stand out from the light backdrop.

001 .main-head { 002 margin-bottom: 2em; 003 padding: 1.2em; 004 background: #00b3d3; 005 background: -moz-radial-gradient(center, ellipse cover, #00b3d3 0%, #007295 100%);

Build a responsive WordPress theme

< Above> s
We used Foundation’s grid system on the search form, which will auto scale down for mobile and tablet devices < Top> s
In WordPress, activate FoundationPress starter theme. This theme includes all the Foundation framework library

006

007

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00b3d3), color-stop (100%,#007295)); background: -webkit-radial-gradient (center, ellipse cover, #00b3d3 0%, #007295 100%);

008 } 009 .main-head h1 { 010 text-align: center; 011 font-weight: 900; 012 text-transform: uppercase; 013 letter-spacing: 10px; 014 text-shadow: 1px 1px 2px rgba 015 016 017 }

(50, 50, 50, 0.59); font-size: 2.5rem; color: #fff;

06 Add a search

Currently in our widgets list, the search form is located in the sidebar. In WordPress Widgets we can disable the search widget. Now inside our ‘head.php’ at the very bottom, paste in the following function, which will print out the search form. We’re going to place our search form just below the header of our website.

001

07 Customise search

< Left> s
Enabling navigation to appear on mobile devices can be controlled all through the Menus panel in WordPress

< Bottom> s
FoundationPress allows you to order menus to be on the left or right side of the menu and enable for mobiles

With the get search form function added in our ‘header.php’ we can now structure this search form by editing the ‘searchform.php’. Directly below the form tag

Update Foundation with Bower

we have applied a row and changed the default grid layout to use the large grid system as well as setting some custom classes to be referenced in our CSS.

Make sure that you have Node.js, Grunt and Bower installed locally so you can perform an update to the Foundation framework directly just by running this in the command line: $ foundation update

001 002 just above the ‘get_footer’ function.

001 002

09 Blog post

With the homepage structure completed, we’ll want to structure each blog post in a grid column of four rows; this will lay out three blog posts organised next to each other on a large monitor. Using the grid system will force our layout to be responsive. Remove the original code all the way down to the tag in ‘content.php’.

001 002 dataequalizer-watch>