A responsive website is one that you can view equally well on a mobile or desktop device. The font size and layout should be readable without zooming, panning, or scrolling horizontally.
Most of your visitors are using a mobile
More than 60% of visitors to your website will be viewing it on a mobile phone, so it is important to make sure that it looks great on a mobile device. That’s why most websites are “mobile-first”, that is, their designers prioritize mobile over desktop layout.
developed by Carnelian
Fortunately WordPress and other tools make it possible to create a website layout that works on mobile, tablet, and desktop.
You can also use media queries to display your content differently depending on the device that is consuming it. A media query is CSS that targets different screen resolutions.
Interactive elements
You may want to consider more interactive elements for the mobile version of your website, such as carousels, expandable elements like accordions, and cards that can be dismissed so that the viewer can jump to another section. These need to have clues that there is more content available, such as chevrons on either side, dots underneath, or a visual representation of a stack of cards.
A “hero” element is a useful way to display a featured product or important news item. This is usually a large eye-catching image or headline with a call to action (a button that links to a sales page).
Feeling overwhelmed by all the terminology and daunted by the technicalities? Then hire me to build your website, or spruce up your existing one.
- Carousel Usability: Designing an Effective UI for Websites with Content Overload – NNGroup
- 25+ Beautiful CSS Carousels (Free Code + Demos)
- 30 jaw-dropping hero section examples from real websites – Marketer Milk
- 20 Accordion UI Examples and Best Practices for Better UX – Eleken
- CSS Media Queries – W3Schools
Leave a Reply