The Beefcamp Bootcamp For Wimpy Websites

A website is either great or it’s not good enough for your business. There is no middle ground. There are the elements of a successful website that the brand, the customers, and the business needs. Then there are sites that lack those elements. So, what are the elements that your website is missing? That’s what we’re going to be looking at in the boot camp.


Picture sourced by Goumbik

Usability is number one

You would think that this is a no-brainer, but businesses consistency launch sites that are, in one way or another, broken. They have too many pages that could be condensed into one, or they’re missing the simple tricks of navigation like drop-down menus that allow them to unify several different pages under one category. Or they’re making one of the biggest mistakes in modern business and failing to make a responsive website that reads as well on mobile devices as it does on the PC. Make sure you have strangers testing your site on different devices and offer them objectives, like using certain services on the site. If they mention any barriers to those objectives, think about how you remove those barriers.


Picture sourced by geralt

Sites are more than just a text on background

A good brand needs a good brand image. This doesn’t just mean the colour and design of the formatting trims on the website. Instead, think about how you use images to communicate if they can deliver your message quicker than text. Go even further and use video marketing content on your pages to remove the effort from the user’s experience entirely. The best videos to use on sites are shorter ones. If it takes longer than thirty seconds, a significant portion of website users will simply ignore a video.


Picture sourced by 422737

Nothing works without visibility

If your website’s issue is the fact that no-one is browsing it, then you need to ask yourself why. For instance, if it doesn’t have high placement on search engines with the help of a search engine optimisation agency, then people simply might not be able to find it even when they’re looking for it. If you’re not using social media to highlight the different deals and pieces on content on the site, then people won’t think to check them out. Even the greatest designed sites won’t have much impact if they have no visibility.


Picture sourced by Pixelcreatures

If you have something to say, say it

Content can be one of the greatest weapons a site can offer your business or your brand. It is your opportunity to offer expertise in advice articles that solve problems for even average web users who weren’t looking for your business. It gives you the chance to show that the site is alive and the business is ever-working by keeping the site up-to-date. It can even be used as a place to show positive proof of the business’s success, highlighting awards, industry updates and testimonials. If you have something to say, say it on the site with well-written content.

If you see anything mentioned in the points above that your site just doesn’t have, then it’s time to consider why and if it’s worth adding it. The website is the online face of your business. You wouldn’t meet a client in a customer without dressing professionally. Why would you let your website go out in just as bad a condition?


The Benefits of a Beautiful Website


Image Source

Going onto a website is like knocking at someone’s front door, except without the real-life curb appeal – it’s just digital instead. When you arrive at someone’s house, you take in the surroundings, think about how you got there and generally expect it to be something pleasing to the eye. If not, you’re out of there or making excuses to leave as soon as you can. This is just the way that potential customers or viewers to your blog or website can see it, except they don’t need to make pleasantries … they’ll just click off and won’t return.


People want a clean, clear and accessible website. The average time for somebody to be landed on your page and make a decision about whether they want to stay on it or not is just 15 seconds – and it’s that quarter of a minute that you need to utilise to your advantage. If you haven’t got anything instantly appealing, engaging or informative on there, your customers will be off quicker than you can say “double-click”.


 How your website looks makes a massive difference to whether people want to stay for a while or click off. You need to be hitting your target demographic when you’re thinking about website design, so for example if it’s for children then bright colours will need to be used and you won’t go wrong to throw in some games on the site too. A good website design agency will be able to steer you towards what you want and will most likely be able to expand the ideas that you are able to give them for the creation of your website and add to it to generate something that will return the most traffic. Designers aren’t mind-readers; give them a concise overview of what you want and remember to include important things like colour palette, fonts, pictures and anything else that you definitely want included. An informative brief leads to an excellent website, and it shows when people have put a lot of thought into their online presence.


Keep everything on your website relevant to what it’s actually about. This includes the tab header, the content and even the links that you’ve got to other pages. If, for example, you’re on a page about televisions, you don’t want a to see something that will link you to a gardening page. Unless it’s related to what you are advertising or writing about, keep it away. Those who are visiting your website are doing it in good faith; they expect to land on a page that will give them exactly what they want, if not a little bit more. There is an element of surprise that people are looking for, but it’s one that lies in deals, promotions and offers for them – not spammy links to affiliated companies for your own personal profit. The more that your visitors realise that you are making money from them visiting, the less likely they are to return to you.

Keeping Your Website Simple Is the Best Decision You Could Ever Make

Web design isn’t a complicated matter despite what many designers and freelancers would lead you to believe. People talk all the time about how to make your website more impressive or draw in a bigger audience, but the reality of it is simple: it doesn’t matter. This article is going to the best piece of advice you’ve ever read regarding business websites and hiring overpriced services.



Cut the nonsense

Let’s put it this way; does adding loads of images and flashy things to your website increase the overall customer experience? You’re probably thinking up reasons or situations where some flashy menus or buttons could increase the user’s experience, but let’s face it, it’s pointless and a waste of time. Not only are those extra effects costly because it takes time to create, it’s also going to break many browsers that simply don’t support those extra features. Even if you’re designing a website to show off your freelance art portfolio, adding smooth menu transitions and using some kind of flash-based gallery viewer does not enhance the user’s experience—it just invites the possibility of errors.

Simple hosting plans lead to simple websites

The simpler your web host, the faster you’re going to get your business or website up and running. Hosts such as make this their top priority; to get you started as soon as possible and with the lowest costs they can offer. A web host that offers far too many features isn’t going to be relevant to your interests. You shouldn’t be caring about all the plugins and modules they offer to make your website look flashy and trendy, you should be caring about costs, ease of use and how quickly you can get it running.



Information overload

When someone browses a website they want to get what they came for. Even if you’re a blog that covers just about everything, your users don’t want to fiddle about with navigating menus to reach the content they want. The fewer clicks it takes for your viewers to reach the information they need, the more likely they will come back and the less likely they will leave in frustration. If it takes more than three clicks from the front page of your website to access your contact details, then you’re doing something wrong. Stop overloading people with information and focus on the customer experience.


A good majority of web users access the internet on mobile devices such as tablets and smartphones. The simpler your website, the easier it is going to be to scale down your web pages to fit cleanly onto these smaller screens. Many web hosts offer basic scaling options, but at the end of the day, you’re probably going to have to redesign your entire website if you want to create a website that works well on both mobile devices and your desktop. This article at explains a couple of simple ways you can make your website more mobile friendly. It’s solid, no-nonsense advice that everyone should be following.

Great Habits Breed Great Web Design!

As I’m sure you know, if you want any hope of getting your brand seen these days, you’ll need a well-designed and functional website. However, like many entrepreneurs, you may feel like your web design is missing something. Good design is all about pushing your available technology as far as it will go, and finding creative ways around various challenges. If you’re looking to improve your website in the long term, here are some great habits to get into…

Kindle Emotional Connections 


Image: Max Pixel

If everyone behaved logically, and consumers flocked to the sites with the best functionality, it would make good web design so much easier. Unfortunately though, this isn’t the world we live in! It’s been proven time and time again that emotional connections in web design can be exceedingly powerful for giving any user the best possible experience. The aesthetic appeal of any website has a huge impact on how trustworthy and credible your site will appear, and the way the site makes your users feel will make your products or services appear more or less usable. Whether it’s through interactive features, simple aesthetics, or well-written content, go out of your way to make sure your web design fosters some kind of emotional connection.

Keep on Learning 


Image: Pixabay

Web design, just like any skill, is constantly evolving. If you’re not all that experienced, it will probably take some doing to get your web design skills up to the same level of the pros. Even if you have a length of web design experience under your belt, constantly looking to better yourself is an excellent habit to get into. There are all kinds of ways to develop your web design skills as an entrepreneur, such as working at a qualification through a distance-learning company, regularly reading blogs from companies like iPage, watching video tutorials and trying out new techniques on a separate testing site. Different learning styles will suit different people, and you may have to experiment with different methods to find a mix that’s right for you. However you want to do it, make sure you’re constantly learning and developing your skills. This will make you a more effective designer in the long run, and will help you keep on top of the rapidly changing standards.

Choose the Right Idea, Not the Best One 


Image: Pixabay

Although it may be a creative practice, web design isn’t an art form. There’s a lot of ways you can approach a design task, but as long as the purpose it serves is something to do with business, it can never truly be art. Let’s say that a light bulb suddenly flickers on, and you come up with a ground-breaking vision for an ecommerce store design that will revolutionise the way people think about websites. If your research shows that a lot of users prefer the comfort of a classic navigation layout, then don’t chase them away by reinventing the wheel. You don’t need to smother all your creative ideas, just make sure that you’re designing for the end user, and not for the artist in you!

Casting the Net Wider: Reach More People Today

If your business has a core group of customers but struggles to reach people further afield, you have a clear problem. It’s impossible to grow and expand a business when it’s stuck in a very tight niche. You need to find ways of casting the net wider and reaching more people if you want to make your business bigger and better. When you do this, you mustn’t forget your core customers who provide the business with its base.

Broaden the Scope of Your Brand

The very first thing to do is broaden the overall scope of your brand. If people see your business as only being for a certain kind of consumer, they will be unlikely to even listen to what you have to say. That’s why you need to actively demonstrate how the business is changing and why this matters to your customers. Set up a marketing campaign that is directly aimed at people who have never used your business before. Confound their expectations and brand your business differently. On top of that, you will have to start selling things that have a broader appeal.

Be More Open and Communicative

Being open and communicative about your business is really important at times when you are trying to branch out and reach new people. If your business is closed off and not open to new people, it’s unlikely to do very well at all. So, to ensure your business doesn’t fall behind and lost traction, you should make sure your business has a presence in social media. And when you interact with people on these platforms, make sure you’re open and willing to be humorous. When you do that, more people will see the human side of your business.


Image Source

Improve Your Website and Make Sure Content is Optimized

You’ll need to build a new website for your company if you want to make sure that it has the online presence required of modern businesses. If you run a construction company, this is just as true as if you run a tech startup. People often forget that all kinds of businesses need this strong online presence. There are companies that offer general contractor website design services if you do run that kind of business. But no matter what type of business you run, make sure the website is modern, easy to find and easy to use. You should also post content on there that is fully optimized to improve your SEO ranking.

Build Trust Over Time

Trust is important when it comes to the relationships between customers and businesses. If people don’t trust your brand, they won’t trust what it says or what it offers. So, it’s really important that you aim to build trust over time and don’t take customers for granted. It will be a slow process, so don’t expect to see instant results overnight. It simply won’t happen like that. Be prepared to prove your business is changing and appealing to more people. Eventually, the change will happen and people will begin to recognize it as well.


Photo Source

The Vital Guide to #WebDesign Interviewing

The Challenge

Hiring web designers can be difficult. There are many disciplines under the common term ‘designer,’ and experts in one field may be novices in another, while others are a “Jack of all trades, master of none.” To make things worse, people commonly relate “design” with subjective decisions, personal preference and individual style.

All that makes the search for a great web designer seem like a daunting task. It doesn’t have to be like that; the goal of this guide is to help you find the perfect match for your team or project. This can be achieved by better understanding the different roles a web designer fills, and by having a good idea of the sort of strategic questions you can ask during the hiring process.

Web design disciplines and roles

The “web design” profession encompasses many skills, and sometimes, separate professions. A Web Designer nowadays has to wear many hats and may have varying levels of proficiency and experience in different fields.

A Web Designer nowadays has to wear many hats and may have varying levels of proficiency and experience in different fields.


It’s important for you to know some of the broader terms so you can better understand what kind of design professional is best suited for the role you are trying to fill. This will also help you clarify your project description and weed out some candidates before you proceed to the actual interview stage.

  • Visual Design– Skills used during the final stages of design, the visual design phase. Generally found in designers with a more artistic profile, not necessarily well versed in the technical side of web design (although many are). These, however, are nice additional skills you can look for in a web designer on top of their technical skills. Deliverables: visual design, mood boards, Illustrations, banners, photo manipulation and compositions
  • Branding and logo design– A profession on its own, branding and logo design are also skills that many web designers have at a rudimentary level. These are nice to have as extras, if that’s part of the project requirement or the job description of the open position you have. Deliverables: Style guides, brand books, color schemes
  • User-Experience Design (UX)– Going hand in hand with IA and IxD, UX is the broad discipline of ensuring digital products work, based upon users’ expectations, providing the fastest, most painless workflow, while achieving the goals of the product. Deliverables: User personas, workflow charts, low fidelity sketches, accessibility analysis, usability tests, wireframes
  • User-Interface Design (UI)– This is the practice of creating individual control elements and design of broader systems and visual language that makes the usage of a website or application nice and easy. If you are designing applications (mobile, web or otherwise), you will need someone with good UI skills in your team. Deliverables: High fidelity sketches, working prototypes, pattern libraries, UI kits
  • Information Architecture (IA)– The art and science of defining the optimal content structure and the clearest navigation methods. For larger websites and applications with a lot of content and different content types, or complex content structure, it’s important to have someone with experience in IA on the team. Deliverables: site maps, navigation lists, taxonomies, content audit, user journeys
  • Interaction Design (IxD)– Everything that deals with the interaction between human and machine generally falls into web design. With websites more and more having app-like diverse functionality, and with the myriad of interactive elements users have become used to, it’s nice to work with a web designer who is well versed in good and bad practices of IxD, who understands the well established conventions and knows when to break the rules to achieve a specific goal. Deliverables: interaction and functionality libraries, interactive prototypes, workflow charts, state maps
  • Front-End Development– This is the part of development that involves code employed to render the user-facing side of a website or application, and to handle interactions between user and machine on a technical level. The most technical of the design-related disciplines, and often considered a profession on its own, front-end development mainly involves good skills in HTML, CSS, and JavaScript. Good front-end developers also utilise various assistive tools such as CSS preprocessors (LESS and SASS), task runners (Gulp or Grunt), and others like npm, Bower, or Yeoman. Deliverables: Production level HTML, CSS and JavaScript code, tools for handling design changes and sometimes environment migration

Note that this distinction is sometimes artificial, and although there are highly specialised experts who excel at just one of these disciplines, it’s very important for them to have a good understanding of at least a few of the others. So, even if a designer’s only job is to provide the best possible wireframes for a website, s/he must also understand how that wireframes will be turned into a working, responsive set of HTML and CSS files, and how much JS will be needed to implement the intended interactions.

Many of the best freelance web designers have solid experience in a majority of design disciplines. They are used to being a one-person show (or rather, a one-person army), handling web design projects from the initial specification talks to the final production code and everything in between. Web professionals of this profile are great for small-sized and even some medium-sized projects with limited budget and tight deadlines. They are efficient and know how to achieve 80 percent of the results with 20 percent of the effort.

Larger projects benefit more from an in-depth look at each component of the design, and require a design team comprised of highly specialised experts in their own fields. Depending on the specifics and the complexity of the project, multiple roles could be filled by a single professional or by separate specialised teams for IA, IxD, visual design, and so on.

Web Design Workflow

Web design as a profession has evolved a lot over the last 10 years. Effective workflows and practices have emerged and have proved to be the de-facto industry standard. However, there are still certain practices, remnants of the early years of the web design, which should be avoided.

One such ineffective and outdated practice is the “three mockups” approach. In the past, companies that have needed web design services have asked designers to provide three (usually) Photoshop mockups (or other forms of high-fidelity comps) to choose from. These are usually based on a set of initial brief requirements or a couple of talks with the client. The final product of this approach is design-based on personal preferences and subjective choices. Chasing user needs and achieving business goals this way is like shooting in the dark. Working this way (and requesting it from a web designer) should be avoided.

A much better approach to web design is the iterative process introduced by Jesse James Garrett in The Elements of User Design. It involves five stages, each based on decisions made, and work done, in the previous step.


Strategy, Scope, Structure, Skeleton, Style: Meet the five stages of web design.

Included here we have a very condensed version of the work involved in each stage:

  • Strategy– Defining the key business goals of the product and balancing them with the user needs of the target audience (based on market research, focus groups, user personas, and the like). Deliverables: High level brief, design team requirements, project objectives
  • Scope– Documenting the required functionality and the needed content. Also involves deciding what is to be built, and what isn’t, as part of the current project. Deliverables: Detailed project specification
  • Structure– Information architecture and interaction design. At this stage, the structure of the website, and its pages, is decided via card-sorting and user-journey maps. For applications, workflow charts and state maps are created. Deliverables: site map, low fidelity prototypes or wireframes
  • Skeleton– UI design, information design and navigation. With the structure in place, objective decisions can be made about laying out content, what UI elements to use and how they would work. All navigation elements should be implemented at this point and content added to its proper places. Deliverables: fully functional prototype of the website or application
  • Style– Applying the visual treatment and the brand’s style guide to the working product. With a completely functional and properly laid out website, it’s much easier to apply corporate or product branding and make objective choices about its visual treatment.

This is an iterative process and each step can go through several cycles until it’s approved. During each step, it’s also possible to find flaws, or ways to improve the previous, and change the previous set of deliverables to reflect that. The main advantage of the ability to run usability tests at each step is avoiding large commitments of time and budget on ideas which later would prove to be fundamentally wrong or suboptimal.

Web designers well versed in modern practices and workflows should be acquainted with good tools for prototyping and wireframing such as UXpin, Balsamiq or Axure. While some may prefer creating the wireframes in Photoshop, Fireworks or InDesign, others implement them straight into popular CSS frameworks like Bootstrap or Foundation. The advantage of the latter is that these early prototypes later evolve into actual production templates. This eliminates dead-end deliverables and reduces production time.

Finally, the approach described here, as well as similar methodologies, lead to much better informed, researched and data-driven choices and use fewer subjective decisions throughout the whole design process. As such, you can easily identify designers who practice this by asking them about the reasoning behind different elements’ layout, position and style of a project they worked on. They should be able to give you swift and concise answers backup up by facts or research results.

Responsive Web Design Process

These days, with a large percentage of internet traffic coming from mobile devices of different capabilities, it’s crucial that any new website be usable on as many devices as possible. The process of designing and developing websites suited for myriad screens and devices is commonly referred to as “Responsive Web Design” or sometimes as “Adaptive Design” (which is also used to refer to a specific methodology in responsive design).

Today the question whether to have a responsive website is no longer relevant; the answer is a clear “Yes!” and even Google is placing websites not suited for mobile devices behind those that are. The real question is how to execute a successful and effective multi-device strategy without going over budget or missing the point of mobile user experience.

Any experienced web designer should be well versed in the techniques that make a website responsive. To help you find the best matches for your project, we have prepared a few questions and guidelines. There are some important considerations that must be addressed when designing and developing a responsive website.

Content Strategy Across Devices

Responsive design is not just about fitting all your content into any screen size; the designer has to take into consideration the context in which each device would be used along with its capabilities.


Thanks to the mobile revolution, web designers have to take into account numerous different software and hardware platforms.

Sometimes, it’s better to skip certain pieces of copy on a mobile device, use alternative copy or different image assets because the navigation of a website needs to change between different screens. Other times, specific pieces of content or functionality should be enabled only on mobile devices, such as a “click to call us” button, offer interactions based on a user’s location or show an “app download” button for the specific devices being used.

Q: Do we have to prepare different content or assets for different devices?

Sometimes, yes. Here are instances where such changes are required:

  • Most often images have to be cropped differently for a small portrait screen; a wide aspect ratio image is great for a desktop website banner but is almost unusable on an upright smartphone screen.
  • Where a large presentational video might be great on a computer screen, it could be replaced with an image and text on mobile devices, especially if you expect traffic from devices with slower mobile internet connection.
  • Some pieces of copy may have to be omitted (or rewritten) for small screen devices where the user likely won’t read it.
  • Certain call to action controls might be changed to better suit the device; for example, “Send a Message” on computers might be replaced by “Call Now” on mobile phones.
  • On small screens, complex graphs, charts and long tables are better left as linked stand-alone pages rather than have them in the content stream of the page. Another idea is to present the same data in a different way, or only show the most important parts.
  • Navigation should be rethought, or even designed separately, for different screen sizes. This is not necessarily about its visualisation, but often includes different structure, such as a flat list of links instead of dropdown/drill-down menus, or by showing less levels of depth in more complex menus on specific devices.

Layout Optimisation on Different Screens

While computers and larger tablets held sideways offer a lot of horizontal space to lay out the website’s content, the smaller the screen gets the less space you have for elements placed side by side. That’s why websites on smartphones are usually designed to have a single column of layout. This is one of the primary concerns when designing a responsive website: When and how should the page layout change.

Q: How do you make sure content layout looks good across different devices? What technology do you use to achieve that?

A few “break points” should be defined based on popular device sizes, types and context. These are predefined screen widths (and less frequently screen heights) where the page layout changes, for example, from three columns, to two and then to a single column. Currently, the most popular width breakpoints are:

  • 1920 and up: TV screens and large desktop monitors
  • 1280 to 1920: for the huge majority of laptops, many modern desktop monitors as well as large tablets (usually 10” and up) when held in landscape mode (held horizontally)
  • 800 to 1280: for smaller tablets in landscape mode as well as older or smaller monitors
  • 480 to 800: for tablets in portrait mode (held vertically) and smartphones in landscape mode
  • up to 480: smartphones in portrait mode

To use different styles based on screen size @media is used in CSS code, for instance, to change a paragraphs’ font size to 14 pixels only on devices with a screen width larger than 480 pixels but smaller than 800, the following rule is used:

css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }

Another important consideration is to place HTML code in the same order in which it needs to be displayed on mobile devices. In general, writing clean, well-structured and semantically correct HTML code goes a long way towards the smooth implementation of a responsive website.

Interaction with the user interface on different devices

Since devices differ not only in screen size but also in terms of input methods, make sure every UI element works as expected in the context of each device type. This means that dropdown menus should be acceptable for computer screens but on smartphones and tablets, users would expect navigation methods more akin to those on mobile apps.

Q: What do you do to make sure the UI works well and feels natural on different devices? Name a couple of interaction patterns which are not suited for specific devices.

Different devices come with different capabilities, and users expect websites on their device to function in similar fashion to the apps on their device.

The most important distinction between a desktop and a mobile UI is that desktops are usually controlled with a mouse or trackpad and a fast and easy to use keyboard, while mobile devices rely on a touch screen with no pointer and with an on-screen keyboard that’s often a hassle to use. Another consideration is that devices with no pointer also lack the hover state which is frequently used to trigger certain actions on web pages. The two input methods, pointer and touchscreen, also make different actions easier (more natural) or more difficult and slower. For example, moving items across the screen or dragging is easier on touch screens (therefore, dragging is avoided on desktops), while clicking on smaller controls is much easier with a mouse pointer (thus UI controls should be made larger on touch screens).

Asset Optimisation Based on Screen Size

Even when the same assets can be served to different devices it doesn’t mean the same image size or video quality will be optimal. To reduce load times, especially on mobile internet connection, web designers should be aware of the assets that they serve to different devices.

For example, a 1920 pixel wide background photo of 400 kilobytes, which is fine for desktop computers, will be overkill (quality wise) and slow to download (file size wise) on a smartphone. So, it’s good to have a smaller version of the image, which would be served if the user’s screen is small enough. And you don’t want the user to download both versions while s/he only sees one.

Q: Does it matter if you serve the same assets regardless of screen size? Is there any difference between images and backgrounds in this regard?

It’s important, at least for larger image files, to have separate versions for mobile devices and desktop screens. Smaller copies of the same image can be served to mobile users to reduce load times. Image size, however, shouldn’t be greatly reduced (if feasible) for mobile devices since they usually have screen density that’s much higher than desktop monitors. Decisions should be made on a case-by-case basis since some images can be reduced in size without much visual impact while for others it’s important to retain their details.

On a technical level, there’s a big difference between background images (which are defined in CSS) and content images (included as image files in HTML). Backgrounds can easily be set separately in different media queries in CSS, so each version is only served if the user screen matches a certain query; the others are not downloaded from the web server. For images in HTML, there is still no built-in, working and well-supported way to serve different files based on user screen size. Different techniques can be used to achieve that, such as by using polyfill scripts that simulate the behaviour of the upcoming <picture> elements, or other scripts that have conventions of their own, or using CSS background to show an image.

Generally, the CSS method, however, should be avoided because a CSS image background doesn’t have any semantic meaning and is considered decoration. Further, it’s lacking in accessibility as it can’t be described with the title and alt attributes that an <img> tag has.

SEO, semantics, content syndication and accessibility concerns

We’re now living in a highly connected digital world where your website content is not read only by people on screens but also by machines. Search engines crawl your website to find out what it’s all about and help users by showing them your content when they look for it; people use apps to aggregate content to read at their leisure; disabled users rely on machine assistance to access and interact with your content.

All of this is good both for your website and for its audience. To make sure all of the above is possible, and done correctly, your website should adhere to certain standards and conventions. The closest it sticks to them, the better chance you have for machines to interpret it correctly.

Q: How do you make sure a website is well suited for SEO and the content is machine readable?

The first and most important step to making a website machine readable and SEO ready is to write semantically correct HTML markup code, using the new HTML5 elements to mark each piece of content properly.

Q: Are you concerned with accessibility and what do you do to improve a website in that regard?

Properly marked up, semantically correct content, alone, gives a huge boost to accessibility. Making the website accessible to the widest possible audience of users with disabilities is a valid concern in a project; there are additional steps that should be taken to improve on that regard:

  • Aria roles– in addition to the semantic HTML5 tags, aria roles can be assigned to the more important elements of content in order to show in greater detail each one’s purpose. This helps assistive tools understand the content, thus making it easier to use.
  • Color combination concerns– many users have different types and degrees of color blindness, so in UI design, it’s important to avoid combining certain colors. It’s good practice to not rely on colors alone as a distinction between two UI elements (e.g. unlabeled green and red buttons or indicators).
  • User control– The designer must also make sure the user has some degree of control over the way the website looks. Most importantly, the browser’s zoom function must not make the site unusable. Additionally, the content on a correctly marked up page is easily picked by reading apps and re-styled, as per the user’s preference (larger font sizes, a more contrasting color scheme, a more readable typeface, for example).

Q: What about content syndication? What steps should we take to make sure our content can be distributed over different channels and used by other apps?

There are several approaches that can be taken to assure the content can be interpreted outside the context of the website. Choosing the right format depends on the content itself, and the intended syndication channels, but there are a few common things to consider:

  • Semantic HTML5 markup is usually the most important and common way to make content redistributable. Make sure the <article>tag is used to mark up individual pieces of content, each one with its own heading. Article headers and footnotes can be marked up with the <header> and <footer> tags respectively, and related content can be marked up as <aside>. Dates should be properly marked as <time datetime=“yyyy-mm-dd hh:mm:ss”> and addresses as <address>, and so on.
  • If you need clearly defined pieces of content, with their unique characteristics specified, consider using to make sure everything is properly listed according to its widely accepted schemas.
  • On a technical level, some of the formats that can be used to define specific data structure are RDF, Microformats and Microdata. They use HTML compatible elements (classes or tag attributes) to simulate XML-like structured data.

Content Management Systems, Premium Themes, CSS Frameworks

As the web has matured, developers have created an abundance of well-made tools and apps to assist the job of a web designer, or developer, while adhering to well-established workflows and design patterns.

Content Management Systems (CMS) allow site owners and admin control over the website without requiring them to dabble in code, yet leaving freedom for the designers and developers who use them.

Q: In your opinion, what are the advantages and disadvantages of using a CMS? When do you think it’s good to use one, and what are the alternatives?

Although many web designers have strong preference over one CMS or another, they should be able to objectively decide whether to use one.

  • Advantages of CMS: ease of content management, built-in template engines for smoother development, adhering to best development practices, well documented code that can easily be handed to another developer, many available plugins that save hundreds of hours of development work and are well supported, to name a few.
  • Disadvantages of CMS: when used incorrectly, may lead to bloated code and slower load times, the tendency to use heavy plugins for small features easily implemented by a few lines of code, limitations for more complex data structures or interactions where the developer may have to “fight” the system to achieve goals.
  • It’s a good idea to use a popular CMS for almost any website project where the client needs to have full control over the content. Some larger sites, and especially web apps however, are too complex for conventional CMS, and will perform far better if implemented using a custom made system, tailored to specifics and needs. In many cases, a good CMS can handle these types of projects as well; however, that comes at the cost of heavy modifications, changing fundamental concepts, losing compatibility with plugins and the ability to update or receive support.

The so called “Premium Themes” for popular CMS are a common choice for projects with limited budget or tight deadlines. The built-in features and layout, however, come at a price. Good web designers understand that and can help you decide if this is the right approach for your project, can evaluate the usability of a theme and advise you about its pros and cons.

Q: What are some of the common issues that we face when using off-the-shelf “Premium” themes for a CMS?

Despite the seemingly easily customised components and styles, most of the themes they provide usually come at a cost (performance wise) and have significant limitations. A few common problems found in the popular themes are:

  • Loading and executing a lot more code and assets than needed. Theme developers strive to outclass one another by including more and more features and capabilities in their themes. That, combined with the fact that themes are made to be flexible without editing any programming code, leads to a bloated code base with too many scripts and the need to query and process more data than standard templates.
  • Themes’ looks and layouts are hard to modify beyond their intended customisation capabilities. Again, due to a code base significantly more complex compared to the standard CMS templates, heavy modifications take much longer and there’s always a chance those changes could break something else.
  • If the project requires the use of complex plugins, which add templates of their own, styling those to match the rest of the theme’s visual style is also much harder.
  • Finally, despite all their customisation options, themes tend to guide the website’s design direction, placing it on ‘rails’ and limiting the creative potential of the designer. This leads to a form over function approach, where content is made for the layout instead the other way around.

Another way to reduce development times and budget is by using CSS frameworks such as Twitter’s Bootstrap or ZURB’s Foundation. These frameworks come loaded with reusable pieces of code, markup conventions, commonly used javascript interactions and built-in best practices. They also use development tools such as CSS preprocessors (LESS or SASS), task runners (Gulp or Grunt), code linters and minifiers to improve the quality and size of the production code.

You can check our Web Designer Interview Questions article for a sample question about frameworks and front-end development tools.

Of course, all these questions and notes are barely scratch the surface of web design and development practices.

A good designer should be able to give you answers similar to those suggested here, but they may also have other ideas about how to turn your project into a success. Good communication is key. Exceptional web designers also have the ability to understand requirements along with the underlying reasoning behind them. That’s why they are able to come up with better ways to solve problems while also providing solutions for problems hidden beneath the surface. In the end, the skill which unifies all design disciplines is the ability to solve problems.

This article originally appeared on Toptal.

Solid Web Design is No Small Matter

websiteWondering what’s missing from your web strategy that’s causing your numbers to slump? It could be a lack of responsive web design.

When it comes to your company’s chances for success, never take your website for granted.

With a solid website, you enhance the chances of drawing more eyes to your brand and ultimately converting those eyes to sales.

According to the article, “Google Mobile: The Lowdown on Responsive Web Design,” webpages designed in this manner load quickly, render well on large and small screens, are easy to navigate and are optimized for mobile users.

Here are some more reasons why a solid responsive web design is no small matter:

Reduce User Frustrations

The main driving force of your company’s online presence must be to provide a great user experience. Customers who are frustrated with your website’s load time or with the online ordering process will quickly jump ship and swim to your competitors.

A responsive web design will reduce user frustrations by ensuring that the site works properly regardless of the platform on which it’s being viewed.

First-time customers will easily be able to navigate through the site and repeat customers will take comfort in knowing where to access information on your site whether using a desktop computer, tablet or mobile phone.

Lower Company Costs

Business owners dream of finding ways to reduce company costs. Utilizing responsive web design is one of those ways.

Rather than hiring or contracting a designer to create multiple versions of your site for several platforms, responsive web design kills all those birds with one stone.

And the reduction in costs isn’t just seen at the start of utilizing responsive web design. Rather, it will also save you time and money in the future when working on site updates.

Streamline Work Processes

Coordinating a website’s initial design and updates is time consuming, especially when multiple versions of the site are required. Responsive web design cuts the workload and streamlines processes.

While nailing your responsive site’s design out of the park will still require strategy, time and negotiation, the workload should be greatly reduced.

Improve SEO Rankings

Google now rewards sites for being mobile friendly. But, with the constant changes in the mobile landscape, how can you be sure that your site is truly mobile friendly? Why, with responsive web design, of course.

By ensuring your site works well on various mobile platforms, the responsive design can help improve SEO rankings.

And we all know that those increased rankings equal more visitors and higher profits.

Stay Competitive

Staying competitive is more difficult than ever in this digital era when it seems that anyone can start an online business. But, while nearly anyone can start a business online, only a small number are doing it right.

Responsive web design allows you to stay one step ahead of competitors in many ways, but primarily by maintaining a great user experience.

Most business owners understand the importance of having an online presence. But not every executive recognizes the importance of responsive web design.

Get your site up to date and prep it for the future by implementing a responsive design.

About the Author: Shayla Ebsen is a freelance writer and editor with more than 10 years of professional writing experience both in the corporate and freelance settings.