Responsive Design
Responsive design refers to building your website so that it adapts to screens of all sizes – allowing your website to seamlessly display your style and content across multiple platforms. This means that a visitor on a small tablet or smart phone will not need to zoom in to click things, or move the screen horizontally to see all content.
Most WordPress themes these days will natively support and handle the responsiveness of your website by using built in CSS Media Queries.
However, don’t make the mistake of thinking that using a “Responsive” theme will take care of everything for you.
Be conscious of the Mobile experience of your website. Don’t just design a website for a Large Screen and assume that the Responsive Theme will make it look good on a Mobile Device – Ensure that you build your website with one eye on a Large Screen and another eye on a Small Screen.
Things to consider are: The location and adaptiveness of the Menu, The Size of Typography and scalable images.
The Long Scroll
Some will display almost the entirety of the whole website on the homepage in one long vertical journey. Content is often sorted by most important, sensational and relevant at the top, and then down towards the related particulars.
At first this practice might seem counter-intuitive (Who likes to scroll and scroll to get information? Why not just have a menu that directs visitors to particular pages?) however this is actually a response to the current habits of a new generation of mobile users. In this fast-paced world, where so much information is available at our fingertips, visitors are very likely to land on a website, scroll, scroll, scroll – and then decide if they want to use the website.
Web designers have also found a way to cover all bases. There will often be a Menu, and when choosing a Menu item – the visitor will be auto-scrolled to an anchored location on the same page.
Long Scrolling sites typically only add value to particular services. Those that only have a few redeeming qualities that need to be immediately showcased.
The negatives: SEO takes a hit, websites with a single page allow only one set of meta information, one effective h1 tag, and one URL etc.
Paralax
The best way to explain Paralax is to show it in action. Notice how the image below this text moves at a different rate to the scroll. This gives the effect of increased depth and motion. This is only one form of website Paralax.
The word Paralax is being misused in web design – it originally referred to a displacement of objects along two plains of sight. It has become a widely used term which covers a whole range of web design effects that give the sensation of motion through visitor interaction.
Paralax appears to go against all of the subtleties of most modern web design – and is best handled with care and with poise.
A study done in 2013 by Purdue University found that: “… although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience.”
Sidebars
Sidebars are definitely becoming less popular – which is interesting for something that was born out of necessity. However, Web designers are sacrificing this element to allow for more visual impact.
Sidebars can cause unnecessary disorientation. Removing them offers the web designer a better opportunity to steer a visitor on a more focused and relaxed journey.
The current trend is to place the typical Sidebar material (Ads, Secondary Menus, Calls to Action etc.) in the Header and Footer.
Fixed Header
When your visitor scrolls down a page, you don’t want them to lose the Main Menu. Browsing fatigue and laziness these days will cause many to simply close a website rather than relocate a Menu.
Giving your visitor Menu availability at all times will also make their experience easier, which will contribute to the overall positive impression of your website.
Death of the Sliding Banner
The Slideshow at the top of a page, often referred to as a “Slider” is definitely on its way out. This is another one of those novelties that saw a sharp rise in use, and then a sharp fall.
When someone arrives at a page, they no longer sit and watch a slideshow, they scan for other more readily available information. This has been replaced by Large Imagery.
Large Imagery
Large, bold, and engaging full-screen photos are being used to invoke an emotional response from a website visitor. This is also a great way to immediately inform a visitor of what your brand represents.
These images are combined with overlaid words or buttons (Call to Actions) – which invites the viewer to delve deeper into a website.
When using full-screen images, ensure that they are of high resolution and quality – to maintain attractiveness across large screens.
Subtle Animations
Subtle on-load animations are growing in popularity – these are elements that slide, wiggle, or fade into view as you scroll down a page. This adds a little bit of eye candy to the minimalist flat design. Some fade in or zoom in animations are so discreet or fast, that you probably won’t notice them… but your brain does.
Justified Paragraphs
Setting the alignment of paragraph text to “Justified” will look a lot cleaner and visually pleasing (due to symmetry). Justified paragraphs will also appear more organised and is the best use of space on a Mobile Device. When text goes from side to side on a screen, it becomes much more readable.
Conclusion
Trends come and go. The style and design choices outlined in Part 1 and 2 of this guide are popular now. The only way to keep up with Web Design trends is to browse the internet – check out major brands (who pay millions of dollars to keep abreast of trends) – see what they are doing. Keep up with the design community and get amongst the discussion on various web design Blogs and Newsletters.
When your website design is complete, don’t be afraid to take a pair of shears to it – Less is More in modern website design.
Remember: Good design is not all about aesthetics. It is about the User Experience too.
