patternhtmlMinor
Responsive web design using HTML5/PHP/Bootstrap3.3.4
Viewed 0 times
bootstrap3phpdesignresponsivehtml5usingweb
Problem
I am trying to understand the basics of responsive web design using bootstrap. So, is this a good way of structuring the layout of a responsive web page or are there any other/better alternatives?
Here's the Gist of the entire file(login page), just in case if you want to download and test.
HTML:
CSS:
```
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
.header-image img {
/ Avoid using !important as it breaks natural cascading of stylesheets. See: http://tinyurl.com/asn2mzo /
width: 100% !important;
}
.center-text {
text-align: center;
vertical-align: middle;
}
/ LOGIN-FORM /
section#loginBox {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(0, 0, 0, 0.2);
margin: 40px auto; /aligns center/
padding: 24px;
width: 350px;
}
form.minimal label {
display: block;
margin: 6px 0;
}
form.minimal input[type="text"], form.minimal input[type="email"], form.minimal input[type="number"], form.minimal input[type="search"], form.minimal input[type="password"], form.mini
Here's the Gist of the entire file(login page), just in case if you want to download and test.
HTML:
Login:
Username:
Password:
Sign in
Copyright © 2015 Sandeep Chatterjee.
CSS:
```
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
.header-image img {
/ Avoid using !important as it breaks natural cascading of stylesheets. See: http://tinyurl.com/asn2mzo /
width: 100% !important;
}
.center-text {
text-align: center;
vertical-align: middle;
}
/ LOGIN-FORM /
section#loginBox {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 4px rgba(0, 0, 0, 0.2);
margin: 40px auto; /aligns center/
padding: 24px;
width: 350px;
}
form.minimal label {
display: block;
margin: 6px 0;
}
form.minimal input[type="text"], form.minimal input[type="email"], form.minimal input[type="number"], form.minimal input[type="search"], form.minimal input[type="password"], form.mini
Solution
I think a good responsive design does not start with downloading 247,387 Bytes of jQuery and 67,546 Bytes of Bootstrap JS.
It only requires some simple CSS. Instead of trying to decipher what Bootstrap is doing with jQuery, take that learning curve and use that time to learn CSS.
Bootstrap is a band-aid. A band-aid that is not needed. And definitely a cure worse than the disease. When something is not working correctly how do you remedy the problem. It's a CSS problem. You didn't take the time to learn CSS but put on the Bootstrap Band-aid. Felt good at first. Now you have a problem. What to do? Is it a Bootstrap problem? A jQuery problem? A CSS problem? It's a CSS problem buried under 300+KB of Bootstrap and jQuery. Good luck with that.
The only reason I know Bootstrap exists, is because so many issues are posted on Stackoverflow. Basically you will at some point have to put yourself at the mercy of others to fix your problem. Will someone be there for you? No it's not that bad. You just have to give up on that creative genius idea that got you stuck.
Bootstrap, Mediocre at Best
If you are going to use 3rd party tools use something designed by those that know what they are doing. Not Bootstrap
Number One, I think a good design has no HTML or CSS errors. I have run bootstrap's pages through the W3C HTML, CSS and Mobile OK Validators. As I recall the page I ran had hundreds of CSS errors. I just now picked a page at random
Their pages also score 0% (zero) on W3C MobileOK. Mobile experts? I think not.
So when the CSS is not working correctly, what do you do? CSS can be difficult. Now add 300KB of JavaScript and you end up creating work arounds for Bootstrap and jQuery because they are too troublesome to figure out how they work.
I find many (e.g. Bootstrap) associate responsive with mobile, which is not the case. Non-Responsive is when the text goes off the right side of the screen and you have to scroll over to read. The horizontal scroll bar will never appear in a response design.
Whereas mobile is about font size and readability, viewport, and usability. If the buttons that need to be clicked are too close together and or too small, usability suffers. When on a mobile device have you ever had to zoom in on something to click it or read it? Ever need to zoom and the view port is set to not allow zoom? Why would anyone think they should take away zoom from the user? Keeping that answer to myself.
Another requirement is the Web Server be configured correctly.
Bootstrap has 9 JS files in their `
17:37:23.775 The connection to wss://qa.sockets.stackexchange.com/ was interrupted while the page was loading. full.en.js:1:0
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:24785
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:26520
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:13810
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jq
It only requires some simple CSS. Instead of trying to decipher what Bootstrap is doing with jQuery, take that learning curve and use that time to learn CSS.
Bootstrap is a band-aid. A band-aid that is not needed. And definitely a cure worse than the disease. When something is not working correctly how do you remedy the problem. It's a CSS problem. You didn't take the time to learn CSS but put on the Bootstrap Band-aid. Felt good at first. Now you have a problem. What to do? Is it a Bootstrap problem? A jQuery problem? A CSS problem? It's a CSS problem buried under 300+KB of Bootstrap and jQuery. Good luck with that.
The only reason I know Bootstrap exists, is because so many issues are posted on Stackoverflow. Basically you will at some point have to put yourself at the mercy of others to fix your problem. Will someone be there for you? No it's not that bad. You just have to give up on that creative genius idea that got you stuck.
Bootstrap, Mediocre at Best
If you are going to use 3rd party tools use something designed by those that know what they are doing. Not Bootstrap
Number One, I think a good design has no HTML or CSS errors. I have run bootstrap's pages through the W3C HTML, CSS and Mobile OK Validators. As I recall the page I ran had hundreds of CSS errors. I just now picked a page at random
http://getbootstrap.com/javascript/ and 44 CSS and 14 HTML Errors. Their pages also score 0% (zero) on W3C MobileOK. Mobile experts? I think not.
So when the CSS is not working correctly, what do you do? CSS can be difficult. Now add 300KB of JavaScript and you end up creating work arounds for Bootstrap and jQuery because they are too troublesome to figure out how they work.
I find many (e.g. Bootstrap) associate responsive with mobile, which is not the case. Non-Responsive is when the text goes off the right side of the screen and you have to scroll over to read. The horizontal scroll bar will never appear in a response design.
Whereas mobile is about font size and readability, viewport, and usability. If the buttons that need to be clicked are too close together and or too small, usability suffers. When on a mobile device have you ever had to zoom in on something to click it or read it? Ever need to zoom and the view port is set to not allow zoom? Why would anyone think they should take away zoom from the user? Keeping that answer to myself.
Another requirement is the Web Server be configured correctly.
Bootstrap has 9 JS files in their `
, these 6 are servered from their Server.
http://getbootstrap.com/dist/js/bootstrap.min.js
http://getbootstrap.com/assets/js/docs.min.js
http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js
http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js
http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js
These JS files are cached for 10 minutes, requiring the Browser to download them on every time you linger maore than 10 minutes. Also they should be combined into a single file to reduce HTTP Requests.
One other JS file: https://platform.twitter.com/widgets.js is cached for only 30 minutes.
The above are just a few things I found wrong spending about two minutes. There is no excuse for HTML or CSS errors or 0% MobileOK. MobileOK is tough, 20% is OK, 80% is very good. Zero is too typical.
These guys are supposed to be experts. Why can;t they get the simple stuff correct?
Too many dysfunctional sites.
The Web is a mess. Too many dysfunctional sites. jQuery is a factor. The problem being that a Web Designer will want some functionality and search for a solution. Many of these published "solutions" use jQuery. The Designer copies and pastes with no knowledge about what they are doing. The result is a hack job.
I assume Bootstrap is supposed to do responsive mobile. Responsive Design is one thing and mobile is another. I guess that why when they say
"Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web."
And their pages score a ZERO with the W3C.
jQuery
Lot's and lot's of sites use it. does that mean its great stuff? Not necessarily.
This site uses jQuery. I just right clicked this page and went to the console tab where javaScript is monitored. This is what I see.
``17:37:23.775 The connection to wss://qa.sockets.stackexchange.com/ was interrupted while the page was loading. full.en.js:1:0
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:24785
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:26520
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:13810
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jq
Code Snippets
http://getbootstrap.com/dist/js/bootstrap.min.js
http://getbootstrap.com/assets/js/docs.min.js
http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js
http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js
http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js17:37:23.775 The connection to wss://qa.sockets.stackexchange.com/ was interrupted while the page was loading. full.en.js:1:0
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:24785
17:37:24.341 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:2:26520
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:13810
17:37:24.342 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:15975
17:37:24.343 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:20231
17:37:24.343 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:20319
17:37:24.343 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:3:26137
17:37:24.345 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:4:11153
17:37:24.345 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:4:11206
17:37:24.345 SyntaxError: test for equality (==) mistyped as assignment (=)? jquery.min.js:4:12076
17:37:24.370 ReferenceError: reference to undefined property f.valHooks[this] jquery.min.js:2:31690
17:37:24.377 SyntaxError: test for equality (==) mistyped as assignment (=)? stub.en.js:2:137
17:37:24.379 ReferenceError: reference to undefined property parent.WebPlayer stub.en.js:1:41
17:37:25.178 SyntaxError: test for equality (==) mistyped as assignment (=)? MathJax.js:19:20446
17:37:25.186 ReferenceError: reference to undefined property args.execute MathJax.js:19:4657
17:37:25.187 ReferenceError: reference to undefined property this.head MathJax.js:19:12656
17:37:25.286 ReferenceError: reference to undefined property a[j] jquery.min.js:2:21397
17:37:25.298 ReferenceError: reference to undefined property a.selector jquery.min.js:2:7919
17:37:25.298 ReferenceError: reference to undefined property a.nodeType jquery.min.js:3:64
17:37:25.298 ReferenceError: reference to undefined property r.fullPostfix stub.en.js:1:7187
17:37:25.301 ReferenceError: reference to undefined property f.event.triggered jquery.min.js:3:1980
17:37:25.462 SyntaxError: mistyped ; after conditional? full.en.js:1:30118
17:37:25.462 TypeError: variable e redeclares argument full.en.js:3:8639
17:37:25.463 TypeError: variable e redeclares argument full.en.js:3:21906
17:37:25.464 ReferenceError: reference to undefined property a[A][o] stub.en.js:2:1136
17:37:25.468 ReferenceError: reference to undefined property h[j] jquery.min.js:4:4241
17:37:25.477 ReferenceError: reference to undefined property a[f.expando] jquery.min.js:2:21216
17:37:25.506 ReferenceError: reference to undefined property MathJax.OutputJax.NativeMML TeX-AMS_HTML-full.js:43:1
17:37:25.513 ReferenceError: reference to undefined property f.isCallback MathJax.js:19:3295
17:37:25.519 ReferenceError: reference to undefined property this.items[t].name[v] TeX-AMS_HTML-full.js:44:6182
17:37:25.523 ReferenceError: reference<body><div id="page">
</div></body><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=960, initial-scale=1.0" />Context
StackExchange Code Review Q#84864, answer score: 7
Revisions (0)
No revisions yet.