Getting Started with Responsvie Design

Hello everyone and thanks for your help in advance. I am a backend programmer/developer using VB.Net, SQL Server, and ASP.Net along with jQery and Javascript. However, I am increasingly in need of doing more front-end interface and need to get up to speed on creating responsive front end design but really know very little about it. Do I need to learn Bootstrap, AngularJs, or one of the other myriad of responsive frameworks. I’m really not sure where to begin. Simply posting this question had me reeling with all of the possibilities of responsive client-side code. Any help getting started would be greatly appreciated.

Short answer - no. (Although obviously you would if you’re working as part of a team which does.)

You might start by looking at a couple of articles, to get a better idea of what’s involved. There are any number of articles, books and courses out there that can help at all different levels, but these are good for a general overview and basic foundation.

Thanks so much for the response. The articles are great and very informative. One of the areas I am very confused is which framework to select (I have no one else on the project so it is up to me). The examples almost seem to imply you can do all of this with pure javascript and CSS, but I suspect given the numerous options, this is the least useful. So in selecting a framework, what do I look for? The site I am developing relies on HTML5 and numerous ajax calls, often populating some type of modal box or datagrid. Currently, I am using jQuery to accomplish all of this, but this does not appear to be the best solution for responsive, agile, and attractive page design. I’ve heard Bootstrap is easy to learn, but restricts you in the ability to make modifications. I’ve heard talk that AngularJs went through a wholesale framework change rendering older version obsolete. Unfortunately, I’m too new to this to know which to choose.

That’s the simplest way to do it if you want complete control of the page layout. The frameworks just automate the “responsiveness” by limiting how you can lay out the page to what the particular framework knows how to deal with.

In fact for most you only need CSS - using JavaScript for making a page responsive is rarely necessary and usually indicates that you are not using the right CSS for the job.


I don’t use any framework, as I work alone and work on small sites, so it’s entirely unnecessary.

[quote=“PaulOB, post:2, topic:189787”]
Why bother creating a load of rules you may never use? :smile: (Because that’s what most frameworks do). Frameworks have their place on large projects or in teams but for small sites they just get in the way and add bloat most of the time.

(I feel so much more confident in my choices when I know the great @PaulOB agrees with me. )

We have numerous topics on the forums about responsive design; this post gives a quick over-view and might be helpful: How to approach responsive design? - #3 by PaulOB

My advice would be to start playing about with a test site and media queries to get a feel for how things work. Post on the forums if you run into any problems, and we’ll help you out.

Thanks to all for their responses. It sounds like I might be best served by avoiding the frameworks, at least initially, in favor of a more basic approach until I get more experience in responsive design. I did not realize this could be done with CSS3 alone and have never used media queries. I’m left with a few questions:

  1. I need to have modal dialog boxes on my site. How do I accomplish this without the ugly canned widgets (like the jQuery dialog box)? I’m currently using jQuery rather than pure javascript, but I’m sensing this doesn’t really matter much.

  2. Related to my first question, on this site, when you mouse over the search icon, the search box elegantly appears. How is this effect accomplished (I have need to display and hide many functions).

Thaks to everyone for the insight.

1 Like

CSS is the key to responsive design and the first thing you should learn, after html. It is what determines the layout of a site. Js is really just for minor enhancements in RWD, like to show/hide menus, or re-order elements, though even these things can achieved today with modern css.
A framework like Bootstrap is I believe largely just ready-made css.
The thing to remember is that vanilla html, sans css is largely fluid by default. Block elements have auto width, in-line elements naturally wrap onto new lines when they run out of space. So you should try to keep this behaviour in your css by avoiding rigid rules like fixed widths and heights on major containers, where you may be tempted to say width: say max-width: instead and for the most part leave height at auto.[quote=“kmcnet, post:6, topic:223106”]
when you mouse over the search icon, the search box elegantly appears.

This kind of thing can be done with pseudo classes, such as :hover, though some may use js for it.

Thanks so much for the insight. As a back-end developer using ASP.Net which did not emphasize HTML, I need to reset my thought process in the new world of MVP and RWD. Even the SamA74’s last post speaking to block items versus inline items is not something considered in backend development. Regarding modal displays, how should those be handled? I have typically been using jQuery dialog widget, but styling that has been difficult at best. What are the alternatives without using some type of framework?

Thanks again.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.