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.
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 6 years ago.
Improve this question
This is just a basic question, in what events do you use a jumbotron? Do you always need to include a jumbotron when writing in the Bootstrap Framework? Examples of when to use the jumbotron is appreciated.
No, jumbotron is just a component, like a big banner usually on the top of your home page. Think of it like a big hoarding a visitor would see when they visit your site. When you are using bootstrap, I think the components that you might need 99% of the times is the grid. Rest depends on your website's requirements.
The grid is useful for making a row/column style layout of your webpage that's responsive (flows depending on the size of the device).
In the page below, you can get rid of the grey box (Jumbotron heading container) if you don't need it.
Jumbotron is simply a styled element. Bootstrap has some default properties applied to that element, making it a very good 'eye catcher'.
You don't need to include it, but you can if you like it. I'd use it to display the main business concepts, to display commercial items or discounts.
A nice example of use-cases is to look at commercial websites. here you can see how they used a slideshow for promotion, inside a jumbotron-like element for the eye catcher.
Using it is simply a matter of personal preference.
Jumbotron is one of Bootstrap helpers utility when developing sites. It is not necessary to have it in your project, it all depends how your design is structured. Basically with this component you can optionally increase the size of headings and add a lot of margin for landing page content. Another definition from w3 would say that jumbotron indicates a big box for calling extra attention to some special content or information. With this said it is place where you want to point out something, maybe some title, company quote of some nice graphics.
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 months ago.
Improve this question
I am looking for a tool with which I can make the html page I created responsive. Are there any tools in which I can just paste the page code and give me a responsive variant? I searched using Google, but no luck finding one for now. If you know any can you please share that information with me and everyone interested? Thank you!
If you want to do it without a lot of work use Twitter Bootstrap, it's very simple to use and have a good documentation full with examples.
You can also define your css margin, width, height, etc with % instead of pixels, but this don't always fit good.
You can use media queries for all resolutions you need, but if you want you're website to be full responsive it will give you a lot of work.
So the best choice is give a try on Twitter Bootsrap, and if you have any doubt, ask for help.
EDIT: It's not just paste the code and you get the resposnive design, you need to use the grid system but it's easy !
you can use bootstrap , it is responsive ready
You could try using Restive Plugin. It won't make your HTML code responsive automatically [i.e. you have to install and configure it], but it enables you to add these Responsive features quite easily. Have a look at this blog post as well: http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin
Full Disclosure: I developed the plugin
Instead of using width in px, you need to define them in %.
This is the best answer i can give you based on your information that you have given.
You can look into Bootstraps responsive code if you want a look inside a responsive grid.
http://getbootstrap.com/
Have you tried a Google search on Responsive webpages? There are some good tutorials out there.
As far as I know there are no tools for you to just paste your code and it turns it into a responsive page.
Here are some good tools to help you create a responsive page
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.
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've been using pixel defined width and height dimensions for my HTML elements so far. This works out pretty fine except when you're faced with bigger screens.
What are the pros and cons of using percentages as your standard?
P.S.Also how do you handle the size of fonts?
Good article to read on this topic.
Fixed Vs Fluid Vs Elastic layouts
Pros
It is the easiest way to the same height.
It avoids using float or position:absolute for purposes for which they were not intended.
It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.
Cons
It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
To create a colspan or rowspan effect requires nesting one table inside another.
It encourages people to build grid layouts rather than taking a more flexible approach.
If you've defined maximum and minimum heights, there aren't many disadvantages other than the constant worry that if your new posted content will look good on every resolution. And there is still the problem of percentage rounding and overlapping margins... Stubbornella is known to find solutions to the most of the problems that come with flexible layouts (see the demo page) and also there is this The Perfect 3 Column Liquid Layout by Matthew James Taylor.