Search Over 25 Million Graphics

 by Shutterstock

10+ Examples of Getting a Responsive Website Right

How can you avoid creating a website that looks great on some browsers and devices, but is close to if not a total disaster on others?

These responsive web designs should give you a good idea as to how to go about it.

There’s no escaping the fact that there’s always been a host of design specifications and requirements you have to satisfy to avoid disappointment. That’s simply how web design has evolved.

Responsive web design requirements have made things even more complex.

A smart approach is to strictly follow a checklist as you create your design. Once everything has been checked off, you should be where you want to be – at least most of the time.

An even smarter approach is to use a WordPress theme like BeTheme that either makes it a piece of cake to check off the requirements and specifications as you go along or simply does it for you. There’s much less work involved, and eventual success is all but guaranteed.

With respect to responsive design, “guaranteed” should make you feel good because (1) the use of mobile devices now exceeds the use of desktops and will continue to do so, and (2) responsive websites are now looked upon with increasing favor by the search engines.

Responsive design is no longer an option. It’s a must.

Keep in mind however, that although responsive design has become a virtual necessity, you still have to keep desktop users happy.

Leaner Desktop Experiences – A Somewhat Unexpected, but Pleasing Result

The challenge of going from a desktop to a mobile viewing experience is that of displaying the same key information in a smaller space in a way where it is still every bit as effective.

In other words, it’s not a matter of “cramming”; as you will see.

Going in the other direction, mobile to desktop, has resulted in cleaner, leaner, and more open presentations of key information.

Take the example of designer/developer Rob Grabowski’s website.

First, how it appears on a mobile screen:

And then, on a desktop:

Nothing is lost (unless you’re a big cinder-block fan) when going from the desktop to the mobile version. The desktop version on the other hand remains pleasing to the eye.

That’s what consistency in design enables you to do.

Modularity as a responsive design option.

The beauty of a modular design approach is that it encourages designers to think of a web page in terms of sections, and the relationship of each section with the other sections. Sections can be rearranged and displayed in a fashion that allows users to review one decision-making option at a time.

The BeRepair pre-built site from BeTheme illustrates this approach:

Merely shrinking a desktop version would create a confusing jumble and an overload of information.

BeRestaurant is another example of how a modular approach works. Going from this, the desktop version:

To the mobile version, in which the core elements of the message are maintained.

A Second Responsive Design Option – Cutting Out the Excess

As rich in detail as a beautiful landscape painting may be, it usually has a central focus. If it’s a true masterpiece, you don’t really want to cut any of it out.

Raphael’s “School of Athens” has often been subjected to cropping, for whatever reason. The focus remains on the two key figures, Plato and Aristotle, but when the mural is allowed to be cropped, the story this famous work of art tells changes completely. There is really no “excess” to cut out.

Fortunately, we’re not often faced with a situation like this in responsive web design. More often than not there is quite a bit of content that can be trimmed away without creating any damage whatsoever.

With web design it’s a matter of knowing what can be looked upon as excess in a desktop display so it can be trimmed back enough to create the desired mobile experience – as BeTheme’s BeITService does with its desktop site.

This is a great looking homepage banner. You wouldn’t want to cut out any part of it unless you must. Unfortunately, to display this page on mobile, you have to.

As it turns out, the result is not as bad as you may have feared. The banner is still attractive, and you didn’t lose any key information.

Culturally Connected does something similar with its desktop display.

Converting this design to mobile by simply removing the image to go from a landscape to a portrait format wouldn’t work, however. For one thing, merely shrinking the text would definitely be a bad idea, so the web designer did the following instead:

If anything, the message comes across even more clearly on a mobile device.

Or, take BeTutor as another example:

In this case, the smaller textual content and much of the white space has been removed and the message has been relocated. Giving you this:

Leveraging Space is Yet Another Option

Although reducing content to accommodate small screen sizes is often sufficient, leveraging space by working with different ratios gives a web designer a workable option when simply shrinking content doesn’t work.

1987 Masters is an example of leveraging space.

In addition to cutting away unused space, the text message is not only altered but, arguably, improved in the case of the mobile presentation.

Instead of showing less content, leveraging takes existing content and reconfigures it to fit.

BeCosmetics is another example of the positive results leveraging can achieve.

First, the desktop view:

Followed by the mobile view where the extra vertical space available can be put to good advantage.

Through Careful Design, Superior Readability can be Achieved

When laying out text for a desktop website it can be easy to show a reader more content than can quickly and easily be absorbed. Too many words can turn a reader off. This could happen with a mobile site as well but is less likely since text tends to be used more sparingly in mobile design.

The desktop version of BeDanceSchool provides quite a lot of information without overdoing it.

It’s obvious that not everything will fit on mobile. For one thing, much of the text would with have to be impossibly small or the images would have to be too small to contribute to the message.

The solution.

The content the reader needs to see remains. The mobile version could conceivably be improved even more by making changes in the font.

Base Coat relies less on beautifully styled and more conventional font to get its message across.

You do have to be careful about use of the vertical length of the text. It might be quite easy to see where it will end on desktop, whereas it could continue and subsequently be cut off in mid-sentence on mobile.

Placing the Spotlight on Visual Content

Mobile screen displays are perhaps most effective when the focus is primarily on an image and to a lesser extent on text. You can have both, but images have a wonderful way of introducing or telling a story.

First, see what BeBand does on desktop.

Placing the text below the image for mobile gives the visitor the same information and at the same time effectively spotlights the image.

The benefits achieved in spotlighting a static image apply to videos as well. The Scott Resort invites its first-time visitors to view a video.

The video nicely conforms to the width of the screen. On desktop it looks like this:

And, on mobile it looks like this:

Responsive Design Aimed at Collecting More Leads

At the current state of the art in website design, desktop users are more apt to convert than mobile users; simply because it’s much easier for them to do so. There’s no design trend or technique out there yet that’s guaranteed to make your mobile site a superuser converter, but there are still some things you can do to capture more leads.

For starters, tale the BeClub pre-built site.

“Newsletter” stands out, and since only takes one field to sign up it stands a good chance of getting a ton of subscribers (which can of course create new leads).

On mobile, it looks like this:

It’s more compact as would be expected, but that can actually be a good thing since “Sign Up” is given greater emphasis in which case mobile could even outperform desktop!

What Makes a Winner? It’s Giving the Mobile Crowd What They’re Looking For

In other words, well-designed responsive websites. And, when WordPress users choose a theme to use, they base their decision of the following:

  • Features
  • Cost efficiency and effectiveness
  • Design quality, including ease of use
  • Flexibility and customizability

Most WordPress themes nowadays are responsive, or at least claim to be. Still, not every WordPress theme’s design takes the mobile user into account.

BeTheme does so with each of its more than 500 pre-built websites. They have mobile responsiveness baked in they are customizable, easy to work with, and genuine time-savers as well.

If you like what you’ve seen in the above examples, consider investing in BeTheme. You won’t be disappointed.

Sample news website on tablet computer
Blog authors writing articles. Freelance writers with laptops creating internet content. Vector illustration for online education, people of creative job, seo marketing concept
Set of outline icons related to  content creation, media. Linear icon collection. Editable stroke. Vector illustration
Blog Website Article Lifestyle Online Word
Online Shopping Website on Laptop. Easy E-commerce Website Shop by Smartphone, iPhone, iPad and Laptop. Close up Hands Using Smartphone Shopping Cart read Online Article, Blog. Digital Payment gateway
Reading news on mobile phone. Hand holding smartphone with newspaper, news website. Modern flat design graphic elements, thin line icons set for web banner, web site, infographics. Vector illustration
Corporate website links abstract concept vector illustration set. Follow us, blog articles, events, social media, subscribe for newsletter, publications, company page, notification abstract metaphor.
Landing page wireframe design for business. One page website layout template. Modern responsive design. Ux ui website: features, product, articles, statiscics, testimonials.
AI Rewriting, writing articles, SEO content generation using artificial intelligent and ai neural network models. AI generates new text by processing input using language model trained on vast corpus
Simple Set of Copywriting Related Vector Line Icons. 
Editable Stroke. 48x48 Pixel Perfect.
Articles, modern flat icon
Latest Article Webpage Advertising Announcement Concept
The concept of an isometric illustration of the development team is compiling a website and blogger article
Big infographics in flat style. Vector illustrations about digital projects, management, clients brief, design and communication. Use in website, corporate report, presentation, advertising, marketing
Abstract seamless pattern with chaotic layering of newspaper text, illustrations, headlines in a grunge style. Black and white vector background. Suitable for wallpaper, wrapping paper, fabric design
3D Isometric Flat Vector Conceptual Illustration of Digital Marketing.
Copywriter concept. Writing creative article in blog. Social media promotion. Freelance work. Flat vector illustration
Authors pen and typewriter to write articles, magnet to attract blog followers and feedback, new ideas for text thin black and red outline symbols, vector illustration. Copyright line icons set.
Colorful pencil with wings vector illustration. Design for creative writing and creation, storytelling, blogging, education, book cover, article and website content writing, copywriting
Concept News update. News webpage, information about events, activities, company information and announcements for web page. 3D Web Vector Illustrations.
Creative article writing, content creation and marketing or text editing service website concept. Tiny cartoon people around paper scroll on computer, vector illustration
3D Isometric Flat Vector Conceptual Illustration of Blog Content Creating, Effective Content Marketing Strategy for Business Blogging
Line icons set with flat design of website main elements and page features, web site mobile version, navigation pin, contact form and internet analytics. Modern vector pictogram collection concept.
Line icons with flat design elements of graphic design and web product development, UI and UX website making, A/B testing usability project. Modern infographic vector logo pictogram collection concept

Leave a Comment

Your email address will not be published. Required fields are marked *

Unlimited Access

68% Off