web design

Make Your Website More Awesome


  • Get a professional logo. It’s rare to find a website or a blog with a great logo. So it’s a good way to build instant credibility.
  • Upload a retina-ready favicon. Most sites have 16×16 pixel favicons. On retina screens, they’re blurry. Use X-Icon Editor to generate a 64×64 pixel favicon.
  • Always use retina-ready images. Simply make sure the image is twice as large as it’s container, then scale it down.
  • Use 2-3 colors max. You should have a background color, a call-to-action color, and an accent color.
  • When choosing a color palette, start with complementary or triad colors. Adjust from there. Good color combos give you a design that tells a story.
  • Never use true black (#000000). Pure black doesn’t exist so it looks out-of-place online. Black, in reality, is always a dark shade of another color.
  • Never use a neutral grey (e.g. #cccccc) if you want your design to have a personality. Add a tint of yellow to provide warmth, red to give energy, or blue to create trust.


  • Pick a premium font. Use a service like Typekit. It’s been said that 95% of the web is typography. Going with a premium font is the easiest and most inexpensive way to make a good impression.
  • Use 2-3 fonts max. More is messy and slows load time. Choose a heading font and a paragraph font. One more if you want a font for special cases.
  • Set a body font size at 16px minimum. Anything smaller is difficult to read on large displays. Scale down to 12px on mobile devices.
  • Choose a typographical scale like the augmented fourth, perfect fifth, or golden ratio. Use the scale to set font sizes for your paragraph text, H4, H3, H2, and H1. Base your line-heights and text margins on this scale.
  • Design other typographical elements like blockquotes, bulleted lists, numbered lists, captions, help text, alerts, highlighted text, code samples, abbreviations, and even addresses.
  • Install a custom icon font like Font Awesome instead of using images for common elements like social media logos, navigation buttons, and interactive graphics. An icon font loads faster, scales endlessly, and gives you the freedom to change it’s color as you wish.


  • Use the rule of thirds for a base layout. Divide your layout into thirds horizontally and vertically, then align key focus points where the lines intersect.
  • Maintain a vertical grid with a grid system. Break your interface into 8-, 12-, 16-column layouts with generous gutters between columns.
  • Keep a consistent vertical rhythm with a baseline grid. The space between lines of text is just as important as the space between content blocks. Every line of text should have a margin bottom that sits on the baseline.
  • White space is luxurious. It’s there to create breathing room and balance. Draw your readers’ eye to what’s most important.
  • Balance the visual elements of your site like the buttons, inputs, forms, headlines, etc. You should be able to blur your eyes and track the path that you want your users to take.

User Interface

  • Use big, bold call-to-action buttons. Every page should have one goal. It’s almost always to click a button. Make sure that button can’t be missed.
  • Add hover and active states to your links, buttons, inputs, and textareas. If you choose to lighten your buttons on hover, you should also lighten the links and the borders on your inputs.
  • Be consistent with form styling. All textareas and input fields should be styled the same. Same border colors, background colors, on hover, on active, placeholder text, active text, etc. And make sure the tabindex’s are set up correctly so you can tab through them in the right order.
  • Change the color of visited links, to let the user know that they’ve been to that page before.
  • Once you have your logo, colors, typography, layout, and image sizes, establish a style guide. Good user interfaces are built with consistent components that are always styled the same.

User Experience

  • Add microinteractions to buttons and other fields. For instance, an “Upload” button should change to “Uploading” or “Processing” after it’s clicked.
  • No scroll jacking! Never mess with the default behavior of the browser. You might think it’s nice to scroll twice as fast as normal, but it’s not.
  • Get rid of your homepage slider. They decrease conversions and there are better ways to display more information in a small space.
  • Never use a welcome gate. When visiting your homepage for the first time, the user expects to see your homepage.
  • Use headlines, subheadlines, lead paragraphs, lists and captions to make your content easily scannable. Most people who visit a webpage will scan it before they decide to read it.
  • Add descriptive placeholder text to all of your forms, inputs and dropdowns. If you want someone to fill out a field in a certain way, tell them. For dropdown or select fields, make the first option descriptive. “Select Year” is better than “2016”.
  • Add HTML5 validation on your forms to make it clear when there’s an error in the form after a user tries to submit it.
  • Make your websites accessible for the visually impaired by avoiding vague link names, reducing clutter, using punctuation, keeping a simple layout, adding alt text to images, using larger text and maintaining high contrast between text and background colors.
  • Check your site for broken links with Fix broken links so people don’t get mad when they click them.


  • Make sure your site is mobile-optimized to display responsively on any device. Properly mobile-optimized sites load faster, rank higher, and give your users a better experience.
  • Generate and display the optimal image size. If you upload a large image, like a blog post feature image, and you want to display it in other places across the site, like the sidebar, make sure you display the thumbnail version of the image instead of the full-size image.
  • Add alt and title tags to all images and links. If for some reason an image isn’t loading, your site will display the alt text in its place. Also, when you hover over links, the browser displays the title tag for that link.
  • Use <strong> and <em> instead of <b> and <i> to bold and italicize text. They have the same effect, but they have a fundamental difference. <b> is a style. <strong> is an indication of how something should be understood.
  • Fix sloppy HTML. When you copy paste content into a WYSIWYG editor (like the visual view in WordPress), it adds lots of unnecessary spans and inline styles. Overtime, your site will become un-readable.
  • Speaking of which, remove inline styles from your HTML. 99% of the time, your styling rules should go into a CSS file so you can update all instances of a component at the same time instead of page-by-page, line-by-line.
  • Use Sass variables, instead of CSS, to keep colors and other components consistent across your site. Want to change a color and every shade of that color? Update one line instead of hundreds.
  • Link to permalinks not URLs in case you switch domains. For example, when linking to a certain page, your HTML should read, <a href=“/slug-goes-here”> instead of <a href=“”>. Same for image sources and CSS backgrounds. If you don’t do this and put the site on a new domain, all of your sources will link to pages and files that no longer exist.
  • Develop a custom plugin or tool to provide unique functionality to your site. Custom software is difficult to maintain but will give you a competitive advantage over similar sites.
  • Test for cross-browser compatibility by making sure your site displays properly in Chrome, Firefox, Safari, Internet Explorer, and other browsers. Older versions of IE are notoriously bad at displaying websites. Use BrowserStack and check manually.
  • Use W3C’s Markup Validation Service to find glaring errors in your HTML. Keep in mind, most sites don’t have perfectly valid HTML. It’s not the top priority but will give you a good sense if there are any errors.
  • Set up a staging environment to make changes to your current website. Ideally you should have a production site, which everyone sees, and a staging site, where your developer makes changes. Once the changes are ready to go live, push the staging site to production.
  • Show current year in copyright footer. When you see a site with an old copyright, you assume that it’s no longer active. Use a PHP or similar script to display the current year instead of static text (e.g. © <established year> – <current year>).

Search Engine Optimization

  • Choose one keyword phrase per page that you want that page to rank for. Focus on optimizing every aspect of that page for that keyword.
  • Set keyword-rich title tags on every page. The title displays as the blue link in Google search results. Limit to 55-characters.
  • Include one and only one H1 tag per page. In most cases, this will be the same as your title tag.
  • Include plenty of H2’s, H3’s, and H4’s within the content of your page to create subheadlines and visual hierarchy.
  • Optimize your page for a specific keyword by including it in the title, H1, subheadlines and in the first 1/3 of the content.
  • Your meta description displays in search results as the description under the link. Make sure you include it on every page and include the keyword phrase.
  • Your permalink, which is the URL after the domain (i.e., should include the keyword phrase separated by dashes.
  • Google considers domain age in it’s algorithm because a domain that’s registered for many years is likely to be a high-quality resource. Register your domain for several years in advance.
  • On average, the first result on the SERP (search engine results page) for any given keyword leads to a page with more than 2000 words per page. When writing a blog post or creating a page that you want to rank well, try to hit at least 2000 words.
  • Always create a sitemap as a sitemap.xml file and put it in your root directory so it displays on It tells Google where all of your pages sit and should automatically update when you add new content. Submit it to Google through Webmaster Tools.
  • Add your website Google Webmaster Tools so you can see how Google indexes your site and stay updated if there are any critical issues.
  • To help your images rank, always rename your images and other files before uploading to your website (e.g. rank_for_this_keyword_phrase.png).
  • Include a robots.txt file on your site to tell web crawlers which pages they should and should not index.
  • Add a canonical redirect to point the non-www to the www version of your website, or vice versa.
  • Research and integrate LSI keywords (latent semantic indexing) on every page to help the page rank for the main keyword phrase. Find the LSI keywords by Googling your keyword phrase and searching for the “Searches related to…” links.
  • Make sure to actively interlink your content. Every page on your site should be accessible through three or fewer clicks from the homepage.
  • Add structured data on relevant pages to help Google properly index your content. Page types that need custom structured data include people, products, events, organizations, movies, books, and reviews. Use Schema Creator to generate structured data.
  • Check Google’s PageSpeed Insights to make sure you’ve fixed all of the common problems that slow down your page speed. The faster your site loads, the higher it’ll rank.

Page Speed

  • Keep page weight under 2MB. Use to check the page weight for your primary landing pages. Anything more than 2MB is too heavy.
  • Keep page requests under 50. Every file and image on any given page is a HTTP request. The fewer the number of requests, the faster it’ll load. The average webpage has 70 requests. Use GTmetrix to see your requests.
  • Design page elements with CSS instead of background images. Never use an image to show a button, form, or other common component on your site. CSS loads faster and is more flexible in responsive layouts.
  • Optimize images before uploading them to your site. Tools like TinyPNG can reduce your image file sizes by 80-95% without losing resolution or image quality.
  • Set up a Content Delivery Network to host your images and other larger files in several locations around the world. CDNs store and deliver your files from strategically located servers to maximize loading speed depending on your visitor’s physical location.
  • Minify JavaScript, HTML and CSS by using compiling and compression tools prior to uploading files to your website. For JavaScript, use Closure Compiler. For HTML, use HTML Minifier. For CSS, use YUI Compressor.
  • Move render-blocking JavaScript to the footer. The only scripts that should be placed in the header are the scripts that immediately affect the design of the page (e.g. custom fonts).
  • Avoid landing page redirects. Redirects trigger an additional HTTP request which delays page rendering.
  • Leverage browser caching by setting expiry dates for pages and page types that aren’t updated often. Browser caching instructs the browser to load previously downloaded pages from the local disk rather than through the network.
  • Enable gzip compression in your server configuration. Compression can reduce the transferred response time by 90% which improves the time to first render for your pages.
  • Enable Keep-Alive on your server settings to allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.
  • Upgrade to a dedicated server or premium hosting service to improve server response time. When you use a shared hosting environment, your site is typically one of hundreds on the same server. If any one of those hundred sites is experiencing a lot of traffic, it’ll slow down your page speed.

Graphic Design

  • Get a custom ebook cover for your opt-in bonus. They’re not difficult to create and can make a huge difference in your conversion rate.
  • Design a custom graphic or illustration for your homepage or sales pages. A nice illustration that’s done specifically for your site is an easy way to make your site more memorable.
  • Create a custom or series of custom blog post feature image designs. That’s the image that spreads on Facebook, Twitter, Pinterest, etc. When a user sees a certain type of image associated with a blog post, they should know that it was written by you.
  • Display custom avatar illustrations or caricatures for yourself and each member of your team. Custom caricatures can be less expensive than hiring a professional photographer each time you add someone to your team. Plus, it’s a nice gift to a new team member.
  • Custom infographics that display data and other content in a visual way tend to get more traffic than the blog post equivalent. People like to share infographics on sites like Pinterest or re-post them on their own sites with a backlink back to your site.
  • If you produce a video or series of videos, you should have a custom video intro and/or outro to give it a professional touch. Not to mention other video graphics or animations that’ll help your brand stick out.

Web Security

  • Install an SSL Certificate to allow a secure connection from a web server to a browser. Most checkout software requires an SSL Certificate if you’re accepting credit cards and Google has said that an SSL Certificate will improve your search rankings.
  • Keep your software and plugins updated. When WordPress and other CMS software releases a update, it’s typically to patch up a vulnerability. If you don’t, it’s only a matter of time before your site will be hacked.
  • Set up a double authentication login gate for your admin pages. Most hacks start with the login page.
  • Check for and remove malware. If your site has been hacked before, they likely added corrupt files that aren’t easy to find. If you don’t remove it promptly, your site might be blacklisted by Google which tanks your rankings and warns users to leave when they visit.
  • Never leave your admin username as “admin”. Delete the default admin account and create a new one with a different username.
  • Regularly back up your database and website files. Most backup software and plugins only back up your database, which includes the data and content. But if you lose your site, you’ll need to have a backup of the files to restore it.


  • Create a custom error 404 page that’ll display anytime a user tries to visit a page that doesn’t exist. Use the 404 page to direct them back to the homepage or help them find what they’re looking for.
  • Other than your homepage, your about page is likely the most visited page on your site. Make sure it represents you and your company well.
  • A contact page will help people contact you, but it’ll also build trust between you, your visitors, and even Google. When determining how to rank your site, the bots will find your contact page and look for an email, phone number, and address. Contact info tells Google that the site is slightly more trustworthy.
  • It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.
  • When someone subscribes to your list, make sure you send them to a confirmation page asking them to confirm their email. If they don’t confirm their email right away, they might forget about it and never come back.
  • After they click the confirmation link in the email, send them to a thank you page where they can see what’s next. It’s a page every subscriber will see and they’ll only see once, so it’s a perfect opportunity to give them a deal or encourage them to make a purchase.
  • Your website or theme should have a landing page template that you can use when you need your users to take a specific action.
  • If you sell something, make sure you have a nice-looking sales page. Start with a headline. Make room for your pitch. Maybe add a sales video. And direct people to purchase at the bottom of the page.

Social Media

  • Limit the number of social media buttons on your posts and pages because each button runs a script that adds extra load time to the page. Only include the 1-5 buttons, e.g. Facebook, Twitter, LinkedIn, Pinterest, Google+, etc. where your content most often gets shared.
  • Create social media graphics for your Facebook page, Twitter account, YouTube channel, etc. Custom graphics make an immediately positive impression that’ll encourage first-time visitors to like, follow, and subscribe to your page, profile, or channel.
  • Set up Facebook Open Graph META tags to make sure your content is shared correctly on Facebook. Use the Facebook Debugger to check your homepage, posts, and other pages to see how they display when someone shares that URL.
  • Set up Twitter Cards to automatically attach rich photos and videos to your tweets when a URL on your site is shared. Get started with Twitter Cards here.
  • Set up Google+ Snippets to customize what people see when your site is shared on Google+. Use the Snippet guide to generate the code. Even if your site doesn’t get a lot of Google+ love, Google will know if you add the meta data correctly and that should carry some weight.
  • Tuck away the social media icons that link back to your profiles by making them small or only showing them in the footer. The purpose of social media marketing is to get people back to your site, not the other way around.



SEO or acquiring leads long term

Higher ranked means more visitors. How to appear on Google search pages (SERPs) without paying for it. There are paid and organic, unpaid search results. Organic have 2/3 clicks on search results: PPC vs organic – organic wins.

SEOmoz ranking:

  1. trust/authority
  2. link popularity
  3. anchor text of external links
  4. page keyword usage
  5. registration and hosting data
  6. traffic and CTR data

Your site needs to be authority hub. Be the endpoint, many links to you, not much links from your site (be selfish). External links are leakage.

SEO planning

  • business requirements (business and marketing plan)
  • competitor analysis (HTML tags)
  • keyword analysis
  • optimise online customer funnels
  • focus on key website touch points

How to use Google Webmaster tools

  • add site
  • submit sitemap (
  • demote sitelinks (spam sites, inappropriate)
  • watch for improvements (crawl errors)

Onsite optimisations

  • optimise keywords (AdWords keyword search)
  • description tags (not affecting but shows in results page)
  • different tags for every page
  • title tags
  • header tags (most important keywords)
  • use CSS wisely
  • content is very important
  • keyword naming structure for pages, images and folders
  • avoid dynamic URLs
  • bold words count (weight)
  • keyword densities
  • internal linking
  • don’t use much bullets 🙂
  • don’t use imagemaps
  • don’t use Flash and frames
  • use more text, less images
  • use image alt tags
  • have a business address
  • W3C check/complaint

SEO and design

  • build for UX and optimise
  • know your consumer
  • consumers should determine the content
  • follow trends (white background, black text)
  • understand what’s desirable and why
  • know how these signals and adding content affects your site’s SEO profile

Have a reason and strategy for everything you do. Be visible, be useful. SEO is about building trust and authority online which generates more traffic and repeats circle. Content is king, have useful content. You want people to link to you. To be a useful site:

  • have a clear position and offering
  • try to be unique, add value, authority
  • search likes unique high profiled content
  • it’s time consuming and expensive
  • rewards are worth it

Keywords and keyword research

  • use the AdWords keywords planner tool
  • pick high volume keywords
  • look at Google trends
  • research Google suggestions
  • pick high value keywords
  • check the competition
  • put them in all your key tags
  • have 2-3 ranked phrases per page
  • repeat phrases in text content
  • don’t overdo it
  • pick 10-15 words in content

Offsite SEO

  • identify high profiled sites to be linked from
  • create link building strategy
  • blogs
  • online PR
  • onsite linkable features: tools, infographics, guides, walkthroughs…

Helpful tips

  • choose a keyword rich domain
  • don’t take shortcuts or expect magic
  • align keywords, landing pages
  • use Google places
  • use Webmaster tools
  • analyze with analytics
  • use domain in all internal links and posts
  • submit blogs to directories
  • provide quality content
  • mobilize social assets

Shaw Academy


SEO tips

  1. title tag je bitan zato što će se pojaviti kao naziv vaše stranice prilikom pretrage. Važno je uložiti napor i svakoj stranici koju kreirate dodeliti jedinstven naslov (title) dužine do 70 znakova.
  2. description tag je takođe bitan, to će u rezultatu pretrage pisati odmah ispod naslova. Opet je bitno za svaku stranicu napisati konkretan opis koji se odnosi baš na sadržaj te stranice.
  3. keywords tag nije više presudan ali neće da škodi ako ga ispravno popunite.
  4. header (h) tagovi treba da prate strukturu stranice. Koristiti alt tagove kod slika. Linkovi na sajtu ne treba da budu generički tipa “klikni ovde”.
  5. Struktura URL-ova mora biti jednostavna tipa što podrazumeva kreiranje jednostavne strukture direktorijuma i dokumenata unutar njih.
  6. Ako posetilac odluči da obriše “tema” iz gornjeg URL-a, trebalo bi da mu se otvori stranica sa kategorijama a ne, recimo, poruka “ovaj dokument ne postoji”.
  7. Prikazati posetiocu breadcrumb kako bi u svakom trenutku znao gde se na sajtu nalazi.
  8. Kod navigacije pre treba koristiti tekstualne linkove umesto slika, javascript-a, padajućih menija, flash-a itd.
  9. Stranica 404 (dokument nije nađen) treba da ima upotrebnu vrednost, na primer, da na sebi ima polje za pretragu, neku sugestiju ili mapu sajta
  10. Za svaki dokument/stranicu koji imate na sajtu potrebno je da postoji jedinstvena URL adresa, u protivnom saobraćaj će se deliti između njih i biće na neki način konkurentne jedna drugoj. Izvršiti i canonical URL check
  11. Vreme učitavanja stranica treba smanjiti na minimum.
  12. Postoji više mapa sajtova koje možete da obezbedite za vaš sajt. Najbitniji su sitemap.xml koji će koristiti botovi prilikom prolaska kroz vaš sajt i mapa sajta koju će koristiti vaši posetioci. Ako želite, možete napraviti i mapu slika kao i mapu stranica optimizovanih za mobilne telefone.
  13. Pomoću datoteke robots.txt možete sprečiti botove da indeksiraju određene delove sajta a pomoću “rel=nofollow” možete sprečiti bota da prati neki od linkova.
  14. Trend pokazuje da sve više ljudi koristi mobilne uređaje kako bi pristupalo sajtovima pa stoga treba razvijati sajtove koji se podjednako dobro vide i na punom HD monitoru i na mobilnom telefonu (responsive dizajn, na primer).

Majstor Kvariš


SEO 2013 & beyond

Knjiga SEO 2013 and beyond na jednostavan i praktičan način opisuje kako je Google nekada rangirao rezultate pretraživanja a kako to radi od 2012. godine, odnosno, od Penguin apdejta. Da sumiram to u par rečenica…

Pre Pingvina, za visok rejting među rezultatima pretrage je bilo potrebno:

  1. pronaći visoko tražene ključne reči za koje je konkurencija slaba
  2. optimizovati stranicu za te ključne reči
  3. generisati masu povratnih linkova koji u naslovu imaju ove ključne reči
  4. uživati u kratkotrajnom skoku popularnosti

Od sredine 2012. godine Google uvodi optimizaciju svog pretraživača a sve u cilju da smanji spam i nekvalitetne tekstove tako da nam je sada potrebno sledeće:

  1. Kvalitetan sadržaj za posetioce a ne sadržaj optimizovan za pretraživače. To podrazumeva da u tekstu “gustina” ključnih reči treba da bude prirodna a ne napumpana (tačka 2 iz vremena pre Pingvina). Dalje, tekst treba da izgleda kao da ga je napisao stručnjak odnosno neko ko zna o čemu priča, stručnjak prirodno u pisanju koristi termine koji se odnose na datu temu (niche vocabulary) što doprinosi relevantnosti teksta i njegovom boljem rangiranju i, jako važno, tekst treba da doda neku vrednost u odnosu na već postojeće tekstove (prvih 10 iz rezultata pretraživanja tzv. serps) na istu temu.
  2. Organizacija sajta u smislu da naziv domena ne utiče više na pozicioniranje (kupivijagru dot com više neće biti prvi na listi rezultata), da sadržaj treba grupisati po tematici ili kategorijama (tzv. silosi) kojima će se pristupati preko menija kako bi se korisnicima olakšala navigacija. Treba koristiti interno povezivanje/linkovanje sadržaja/stranica u okviru teksta kako bi korisnici na klik mogli da saznaju nešto više. Isto tako treba koristiti povezane sadržaje i, na kraju, treba koristiti tagove.
  3. Autoritet – sadržaji moraju da imaju status informacija ili saveta stručnjaka, povratni linkovi treba da dolaze sa kvalitetnih sajtova iz branše, odlazni linkovi takođe treba da vode na kvalitetne sajtove, poželjno je povezati se u društvenu mrežu (FaceBook, Twitter, YouTube…), pisati na tuđim relevantnim blogovima itd.
  4. Šta korisnik treba da dobije? Dobar dizajn, brzinu sajta, zaraznost sadržajem, interaktivnost (pitanja i komentari) i poverenje u informacije sa sajta.

Majstor Kvariš