Re: What is Responsive Web Design?

Adam7 · ‎03-26-2016

You’ve probably heard the phrase “responsive web design” floating around, but what does that mean and why should you care?

A responsive design is an interactive design that automatically adjusts to the size of the screen in a fluid, seamless way. You can actually watch this in action if you’re using one of our responsive designs on your site. Drag your browser window small and watch what happens to the navigation and content of your site.

You can see that not only does content rearrange to better fit in a small screen, the navigation also collapses into a menu that’s easy to use with your fingers.

So, aside from being a marvel of CSS and Javascript technological prowess, how does this benefit you? It’s simple: mobile traffic accounts for more than half of all website traffic. This is an incredible statistic; greater than half of the people viewing your site may be using a phone or tablet!

Google recognized this trend early on and began taking mobile-friendliness into account when ranking search results. So what’s the best way to make sure your site is both mobile friendly and desktop-friendly? You guessed it - a responsive design. And the best part is that Weebly has made it super-easy to have a great looking site no matter what device your visitors are using.

For a more in-depth read, I recommend taking a look at Wikipedia’s article on responsive web design.

jed · ‎03-27-2016

Thank you for this information. Helpful.

Adam7 · ‎03-27-2016

Thanks!

SusieO · ‎03-31-2016

@Adam Yes I had seen it mentioned and didn't know what it was... but now I do so thank you!

d7 · ‎04-19-2016

I tried to view my new website in mobile display, but the website did not populate in the 'mobile' display. I got an error saying my site was a "Responsive Theme" and could not be displayed for mobile. Is this right?

Adam7 · ‎04-19-2016

@d7 wrote:

I tried to view my new website in mobile display, but the website did not populate in the 'mobile' display. I got an error saying my site was a "Responsive Theme" and could not be displayed for mobile. Is this right?

You're talking about the mobile preview in the editor, right? If you're using a responsive theme it'll show appropriately on a mobile device (you can even just make your browser window really tiny on a desktop to see it); that wording just means it won't display the mobile preview in the editor because that was designed to work with older themes. Sorry for the confusion!

kschoenbeck · ‎06-16-2016

how do we know what theme is responsive or not? my theme says it is not responsive after I have spent countless hours building it on my laptop. what do i do? the headers look like crap on my iphone

Adam7 · ‎06-16-2016

@kschoenbeck wrote:

how do we know what theme is responsive or not? my theme says it is not responsive after I have spent countless hours building it on my laptop. what do i do? the headers look like crap on my iphone

If you want a responsive theme, go to the Themes tab and choose any of the themes listed (except those listed under the Older Themes option). Once you re-publish your live site will be responsive. You'll need to re-add your background/header images, though, since those don't transfer with themes.

A2NAcademy · ‎05-29-2021

Responsive Web design is the approach to design and development based on screen size, platform, and orientation that should respond to user behavior and environment.
The practice includes a mixture of flexible grids and layouts, images, and smart use of CSS media queries. The website automatically changes to accommodate the resolution, image size, and scripting capabilities when the user switches from their laptop to iPad. You may also have to consider the settings on your devices, for instance, the website should not block the access of the user to the page if you have a VPN for iOS on your iPad.
In other words, the website should have the technology to answer users' preferences automatically. This would eliminate the need for each new gadget on the market for a different design and development phase.

Responsive design is a front-end design process designed to mold the user device, whether they are a desktop, tablet, or mobile, into the website design and user experience. A cascade style sheet (CSS) is used to enable the web pages to reach the width of a browser, independently of the device type, which is essentially the format and layout for the web page. This behavior is also accompanied by the javascript and js libraries such as JQuery and Modernizr for resizing more dynamic objects such as masonry galleries and transforming mouse activities into activities.
CSS media queries are used to determine things like the width and orientation of the screen-browser device, so rather than to query the device with backend logic, the reactive design does not use device detection.

We are a web design training institute that teaches creating a responsive website with and without the bootstrap framework. To more about responsive web design, visit the website, A2N Academy.