Ways to Make Your Website Slick

Get Slick 2017-09-25T11:42:06+00:00

Moving Forward

“They had a really slick website…”

To overcome the Perception Hurdle, you need to show prospects you’re investing in the business. A website with the latest innovations, proves you’re moving forward. The opposite is equally true.

Slick Innovations

Tabs

tabs

Save space by displaying related content in same place.

  • Hides low priority info.
  • Reduces scrolling. Moves elements up the page.
Tab 1 displayed by default
Tab 2 content shows area expands based on content length of the content.

  • Hide ‘secondary’ content only
  • Ensure tabs clearly signpost content

Toggles

Toggles

Binary switches, eg open or closed, on or off.

  • Accordions toggles save space: hides content when unselected.
  • Great for FAQs or complex side navs.

This is an accordion toggle. A button, that switches from either displaying or hiding additional content.

Live Chat

live-chat

Customer support channel with proven track record in increasing sales.

  • Avoids switchboard purgatory.
  • Instant reply unlike forms or email.
  • Only works if staffed(not AI robots!).

Sticky Headers

Navigation fixes to top, whilst page scrolls.

  • Navigation bar signposts always displayed.
  • Encourages page flow.
  • Whilst scrolling, can also reduce nav. bar height, to maximize content display.

Masonry Grids

masonry

jQuery calcs scale content, to fill an area(aka ‘card layouts’).

  • Popularised by Pinterest
  • Tessellates content in varying dimensions.
  • Text mis-aligns. So just for image led content.

CSS3 Animation

css-transitions

Bandwidth-light animation to enhance User Experience.

  • On hover, scroll or page load, elements zoom, bounce or slide in.
  • Must be fast and subtle to avoid annoyance!

Parallax Scrolling

parallax

Borrowed from animation (e.g. home page header).

  • Content moves slower than foreground, to give illusion of depth.
  • Novelty. Use sparingly. Can slow page loads.

Flat UI

Adding clarity by removing excessive ornamentation.

  • Style response to rise in small screen devices.
  • No unnecessary garnish: drop shadows, ribbons…
  • No shiny/ faux textures.

Articles about Innovations

Ditching the Twitterfeed

Got a Twitterfeed? Why? Every 6 months a “me-too” panic sweeps web design. Right now it’s “clean and lean”. Taken to the extreme […]

Infographics: Here to Stay?

“Teach the Boys & Girls nothing but Facts. Facts alone are wanted in life.” Charles Dickens opening lines to Hard Times. In 2014 Infographics [...]

  • Clarity - Less is Flawed

Less is Flawed

Returning to Minimalism The 1930s maxim, ‘Less is More’ was popularised by architect & designer Mies van der Rohe. Now reinvented, for web […]

  • Clarity - Hamburger

What’s the Hamburger for?

Are Icons a New Thing? Hardly. Ancient Egyptians used them to communicate all the time! However, since 2014 icons have grown in popularity […]