Responsive websites are built on grids that can collapse, expand, and stack based on the environment they’re responding to. They do this with CSS media queries, flexible layouts, and design elements that can resize and scale on the fly. The result is a single website that can change instantly whether it’s being viewed on a desktop monitor, retina-ready iPad screen, or Android device.
With web use trending toward mobile first, responsive web design is seeing a surge in popularity, because if your site doesn't excel on mobile, you’re probably losing visitors, customers and sales.
Weebly sites are all mobile optimized, and our growing collection of responsive themes provide even greater control over the way your site displays across devices. But there's more to responsive design than just a responsive template. Here are some examples of responsive design done right that will help you do more with your website, blog or online store.
Star Cleaner looks fantastic on smaller screens because it effectively tells the whole story of its product on one responsive landing page. Viewed on a mobile screen, you can easily see what the company is selling, how it works, and the results they offer, with high resolution images that look crisp and clear in both portrait and landscape. The sticky mobile menu orients visitors if they get lost, and you can add a product to a cart and make a purchase directly from the homepage.
Takeaway: Use your responsive homepage as a landing or splash page that offers a comprehensive overview of your product or service.
Make your own splash page from Pages tab in the Editor.
PresenTense NYC Fellowship
PreTense NYC Fellowship embraces a bold, modern minimalist design to make mobile viewing a pleasure. Endless mobile scrolling is eliminated by keeping the content short, sweet, and to the point. Clever use of image headers anchor the individual pages, which are put together with economy and efficiency in mind, making full use of responsive design elements offered by the Squared theme.
Takeaway: You don’t need a complex design for your site to maximize impact. Try bold fonts with high contrast to laser-focus your message.
Experiment with fonts and colors in the Change Fonts area under the Design tab.
Cold River Soap Works
Cold River Soap Works makes it simple for web and mobile visitors to navigate and shop by using Superset's mobile style menus for both desktop and device viewing. By training your users to navigate your site through the mobile style menu on desktop, you can easily convert them on mobile devices.
Takeaway: Think outside the traditional site structure of header/menu/body. Trust your visitors to know how modern, mobile menus work and offer a consistent viewer experience.
See how a mobile menu would look styled on your store by choosing the responsive Stripes or Superset themes from the Design Options panel.
What responsive and mobile-friendly design trends do you think are the most important? What design trends would you like to see new themes address?