Responsive Website Design
Responsive Website Design provides an optimal viewing experience being easy to read and navigate. Essentially the website layout, images, text, and other elements re-adjust themselves on all devices, offering significant advantages.
Responsive Websites are fluid, meaning the images and content adapt freely across screen resolutions on all devices, whether it be a PC or mobile phone
2. User Experience
Responsive designs provide the same user experience irrespective of the device being used with no re-sizing or zooming required.
3. Cost Effective
With only a single website to edit as opposed to a mobile site and desktop site, cost savings can be significant
4. Highly Recommended by Google
Responsive websites are now considered industry standard. Google have stated that responsive website design is recommended for mobile configuration, and even goes as far as saying that responsive web design is considered the industries best practice, having a single address, regardless of device, it makes it easier for Google to crawl, index, and organize content.
All websites designed by Hua Hin Web Design are Responsive. Read More
Recently, we’ve seen a surge in popularity of responsive web design, as more and more sites join the drive to become ‘mobile ready’ which is now even more important in the wake of Google’s Mobile Friendly update.
1. The Proliferation of UI Patterns
One of the side effects of responsive design has meant that a lot of sites look similar. However, responsive design isn’t solely to blame. The rise of WordPress sites and the booming theme market also have a hand in it. And some folks, such as Matthew Monbre, have copped to being guilty of following everyone else’s look with his company’s site.
But having a similar look isn’t necessarily a bad thing. That’s because we’ve changed the way we consume the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there’s little in the way of innovation when it comes to UI patterns.
In other words, a checkout will still be a checkout and should function as such. Same with a login model. There’s no real reason to reinvent the wheel. UI patterns must guide users through a smooth experience.
Here’s a few patterns you should be familiar with:
- The hamburger menu: While some criticize this pattern’s use, there’s no doubt that it’s widespread use makes the function easily recognizable for users.
- Account registration: You’ll find this pattern whenever you try to register for a site. There might be a form to fill out or a button that’ll allow you to use a social account to sign up. Multi-step form wizards are also effective since they “chunk out” the required fields, reducing friction and encouraging users to flow through the process.
- Long scroll: Placing all your important elements above the fold is now a well-known myth. Furthermore, almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.
- Card Layouts: Pioneered by Pinterest, cards are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept. Since they act as “content containers”, their rectangular shape makes them easier to re-arrange for different device breakpoints.
- Hero images: Since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user’s attention. Thanks to advances in bandwidth and data compression, users won’t suffer from slow load times either. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.
- Loading animations These are used to entertain users and delight users during an otherwise tedious experience. Loading animations tend to be popular for flat design, minimalism, portfolios and one-page sites. Keep them simple and avoid adding sound. They should however match your site’s personality and color palette.
- Navigation and menus (nonscrolling) Hidden navigation menus have become increasingly popular, especially as they can be used to save screen space. As you can see in the example below created in the collaborative prototyping tool UXPin, these use animations to reveal a menu when clicking on a specific button and prevent a jarring transition (like a navigation drawer hidden behind a hamburger icon).
- Hover animations Hover effects give a more intuitive feel to a site as users mouse over content. Users unsure about a feature’s function tend to hover over them automatically for instant visual feedback.
- Galleries and slideshows Galleries and slideshows are an effective way to showcase multiple images without overburdening the users. These are great for photography sites, product showcases, and portfolios, as shown below
Additional Advice on Web Design Trends
Don’t follow trends just because they’re the “hip” thing to do at the moment. Trends represent popular techniques for good reason, but make sure it’s best for your users. For example, an e-commerce site certainly wouldn’t do well as a single-page infinite scrolling site.
Trends are nothing more than additional tools in your designer toolbox. Always pick the right ones for the job.