Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I see HTML5 mentioned often in discussions of responsive web design. Although I'm not sure why someone would want to use HTML5 for a simple responsive web design.
Are either of these statements untrue?
HTML5 is not needed for responsive web design
CSS and media queries will do the job fine
If you have a text only website, what is the benefit to using HTML5 for your responsive web design? It can't replace media queries. CSS works fine for fluid grids and images.
Here's some of what I'm referring to:
http://www.amazon.com/Responsive-Web-Design-HTML5-CSS3/dp/1849693188/ref=sr_1_2?ie=UTF8&qid=1383016419&sr=8-2&keywords=responsive+web+design
http://www.amazon.com/HTML5-CSS3-Responsive-Design-Cookbook/dp/184969544X/ref=sr_1_7?ie=UTF8&qid=1383016419&sr=8-7&keywords=responsive+web+design
http://www.amazon.com/The-Modern-Web-Multi-Device-Development/dp/1593274874/ref=sr_1_12?ie=UTF8&qid=1383016419&sr=8-12&keywords=responsive+web+design
Media queries were added in CSS3. Browsers that support CSS3 tend to support reasonable parts of HTML5 so they tend to go together but they are not technically dependent on each other.
If you want to use media queries and then id and class attributes on all of the elements to determine how they resize (or disappear) you are free to however proper semantics in general make styling easier for most people. Also there other benefits besides just styling. Proper semantic markup can help screen readers.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am currently finishing up a project for my portfolio and I am wondering if I should use Bootstrap or media queries to make my webpage responsive. Do jobs prefer one over the other or does it not matter?
This is a difficult question to answer.
Bootstrap and media queries are not totally the same. For example, I have used Bootstrap for a project. The row and grid system of bootstrap is repsonsive. So it works perfectly on mobile devices, as Bootstrap offers predefinied classes and media queries for them.
However, you also may need media queries even if you are using Bootstrap, so did I. Media queries define the behaviour at different device sizes.
In conclusion, Bootstrap is a great tool which offers responsive elements. Bootstrap uses media queries, but you will always need media queries for custom changes or for own elements.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Here's the link to the page I made: https://thawing-savannah-89995.herokuapp.com/
This is my first webpage I've made without help using only a PSD.
Here's a SS of the area I'm having issues with and keeps breaking when I shrink the browser size. This layout was very difficult for me to think through and I don't think it should've been. How can I better design the html and CSS for that part?
I don't have enough rep at the time of this post to comment. Sorry, I would if I could.
I suggest using a thing in css called flexbox. It takes a little extra work instead of Bootstrap or 960 or something, but in combination with percentage units, and even maybe vh/vw if you want to be new age.
This guide explains it better than I could ever hope to; basically, it's a dynamic alignment system. Centering is made trivial, compared to the alternatives. Keep in mind, you might need some #media breakpoints, mostly to change the flex-direction.
It has recently gained almost (sorry IE) universal browser support. If you do care about IE, use a shim like flexibility.
If you do want to use bootstrap-like grid systems, there are better alternatives, if you want to look into them. Personally not a fan of bootstrap (anymore...) but whatever floats your boat I suppose.
The best lesson I learned with creating Responsive sites is to design how you want this to look on a mobile device and work your way up to the Desktop.
I can suggest that you use Twitter Bootstap or Foundation as well as downloading responsive templates. Read as many articles you can find about different techniques that you can find to help you best understand the concept of how do to this.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
So I'm requesting a solution to markup practices. I am working on an administrator back end design, now I am looking to not necessarily work with responsive design but have completely different behaviour.
Would it be better to use an entirely different site?
Should I include both desktop and mobile HTML and hide/show accordingly with media queries?
What is generally the best way to setup for this and what method to approach as I need the designs to be different in terms of HTML and CSS but I want to have good standards of practice.
As I understand it, you are looking for the best mobile optimization methods. There are a number of solutions to this problem. Peronally, most of what I design isn't meant to be used on mobile devices because of the nature of it, but I try and follow these habits:
1:Use percentages/ems for measurements (height, width, margin). These are adjustable, and will render at least decently on a mobile device. Build a website using only px measurements, and you're screwed.
2:make sure your code is compatible with chrome, firefox, and safari. these are the most common mobile browsers.
ALSO
Having separate sites is acceptable, but i wouldn't recommend it, because any updates you do to one site, you have to do to the other, which could get tedious. As I understand it, it would be better to use media queries(from what I know, there are multiple CSS and/or javascript libraries/frameworks for this) and based on whether it's a mobile device, apply different stylings.
It might be just me but if you're going to write a website, do it properly ONCE. There's a fundamental programming rule Don't Repeat Yourself (DRY) which I like to live by. The best way to achieve this is using media queries and percentage values. Media queries allow you to have completely different styles based on device size and moving forward with web design, something definitely worth investing your time in.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
First - I understand what "Mobile First" means when it comes to designing websites.
At the company I work for, some of the developers are claiming that "Mobile First" in development means to write the mobile styles at the top of a CSS file then having desktop CSS override it via media queries instead of the other way around.
They claim this is the way to do it AND it will cut down on loading times in a mobile environment.
Does anyone have a definition on Mobile First for Development? Can anyone prove that writing the mobile style sheet before the desktop stylesheet (with the intent to have desktop override mobile) will improve loading times?
This is exactly how it has been explained to me before. There is a huge downside with this method though: IE8 and down do not support media queries, making your site look horrible. I use this workaround for those cases. You would just put that JS file inside of an IE8 statement.
I personally do not think this method matters that much. I believe that mobile-first is correct for design though since it will help show what is the most important in its most basic state.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to create a responsive layout using html5 and css3. After reading a bit on the internet I got really confused as where to start. From what I've read there are frameworks that help develop responsive layouts:
Foundation
Twitter Bootstrap
This is where the confustion starts:
What is the benefit of using these frameworks?
Where can I find tutorials that would teach me to go from PSD => HTML5 Responsive layout => and I guess then use the framework.
Do I need to use these frameworks?
These frameworks have lots of classes generated to set up a grid system really quickly and easily. For example, Bootstrap has a bunch of classes that help set up a fluid grid with each <div> or container having a fluid width that could be different compared to its adjacent container.
To go from a PSD to a responsive layout to using a framework is tricky, and a lot of people like to work from mobile layouts and create PSD's for those smaller devices to help them figure out what is the most important content and put that in the top of the page for mobile and more towards the center or with more emphasis on desktop. To move to a responsive layout, it's really all about creating a PSD for pretty much every breakpoint you plan to have, that way you know where everything should go and it makes it a lot easier. Using the responsive layout framework is pretty much a part of the layout design process, because you use the framework for its abilities, so it's important to know what the framework can and can't do that way you don't design something that is impossible.
These frameworks just create lots of nice features that make responsive development a lot easier and simpler for beginners, you may want to just make a sample site with the framework, and then after you could move on to doing it yourself because lots of times you may not use everything the framework offers and taking it out and overriding its classes is a pain. Frameworks get you started and learning and you decide if you are comfortable using them.
Happy coding!
Some of the work is done for you already. (If they do things in a way you don't want, then that isn't a benefit, of course).
Questions asking for tutorial recommendations are off-topic for Stackoverflow
No.