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 4 years ago.
Improve this question
At the outset let me clarify - please do not point me to links about responsive designs. I have done enough googling for a life time, yet am here. I am looking for specific tips, not tutorials.
I had a fixed width layout web design till yesterday when a Google search result of my site announced that my site is not mobile friendly! And I took the Google mobile friendly test as advised. Of course, my website was declared unfriendly to mobiles as it would mean horizontal scrolling for users. However when I tried to make all my fixed width including body, containers etc fluid by using percentage, it looked splendid on my laptop. But browser resizing and mobile screen resolutions now make my pages look like hurricane hit!
I am hating the fluid thing and more so ever the responsive design thing! So much work in trying to decide how to redesign and still not able to make things work. I have tried using viewport, #media screen only, a separate CSS for specific screen size etc. I'm just about to explode! I have a website with a couple of thousand pages. Though I have common header and footer, I can't change the html/CSS of the inner parts of all pages. I am not able to even make a decent home page.
So my question is, is it still possible to have fixed width layout and still become mobile friendly ? That way I don't have to tear my hair to please Google! Or is there actually some tips to easily change my CSS to a responsive CSS or some converter program or CSS checker and adviser, etc? I believe Stack Overflow is a fixed width design and they still don't seem to have any trouble.
The site is here.
To answer your question, yes you need to have fluid measurements in order to create a mobile friendly site. There are certain elements that can have fixed measurements (i.e.: height of nav bar), but most need to be fluid, so that it can properly be displayed in both desktop and mobile settings.
The main problem with your site is that your grid is not properly done. It is incredibly time-consuming to create your own grid with rows and columns. I would recommend learning Bootstrap, a common CSS/JavaScript framework. Just the grid system alone (built only on CSS), would immensely cut down the time it would take to build your site, and fix most of the problems that exist due to your containers/rows not being responsive.
You can download Bootstrap at http://getbootstrap.com/, and in addition learn the grid from W3Schools http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Related
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 2 years ago.
Improve this question
I have a problem whenever the website changes its size in any way, whether it be the size of the browser or if inspecting the code in the web browser, any change to the size of the page makes it look really really bad. I only started learning to code last week and I picked up the challenge "social proof section" on frontendmentor.io to practice my HTML and CSS. If anyone could take a look at it and tell me what is causing it I would be very grateful! also, its quite embarrassing posting this here as I'm a total nooby and with having only started learning a week ago, my code is obviously very very bad
website link: https://blakebutlin95.github.io/Social-Proof-Section-Challenge/
Github link: https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css
also sorry about one of the empty codes in the css file, I didnt even realise it existed until a minute ago
You are using absolute positioning ,it is positioned absolutely with reference to the closest parent that has a position relative value , If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
The problem isn't the resizing of the page. The problem is that you have used absolute sizes. That means when I open the page it looks even worse because I have a different screen size. You have to create different sections and the implement the objects in there.
This is how it would look on a smaller pc.
Here a sketch how to build it properly.
Try to use for horizontal sizing only % and for vertical sizing px.
Use for the boxes the <div> tag.
Sometimes you have to set it to display: inline-block; so that multiple div's will fit on one line.
It is also important to not set a height because it depends always on the device how much space the text will need. Try to use instead more padding.
Update:
A more modern approach would be with flex-box or grid.
It is cause you're using the absolute sizes, this will give problems for different screen sizes. Try looking up flex box and apply it here.
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 7 years ago.
Improve this question
I just learned about responsive design. My question is what steps does a HTML designer has to do to make a design responsive?
It appears that a responsive design is all about using #media queries and controlling the flow of elements on the page if it gets resized by setting max-width, min-width and manipulating floating, margins and padding depending on browser window's size.
Is there anything else besides #media query that needs to be done for responsive design?
Responsive Images (different images in HTML for different situations) is an important one.
Few important bits :
Use of srcset attribute for switching between different versions of the same image.
http://responsiveimages.org is a well of resources on this subject.
Use of automation tools for imaging - One of my favorites is Grunt and here is a nice read about it: http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/
It really makes a lot of difference when user on mobile opens a page with images that are sized for it, less data and well faster loads :)
Tools like Grunt may seem like they take some work to setup but once you start working with it its so easy and fast.
More reading material:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
http://blog.cloudfour.com/responsive-hero-images/
Absolutely. There are three main tenants of responsive web design from Ethan Marcotte's original book, Responsive Web Design (abookapart.com/products/responsive-web-design). They are:
1 - Fluid Grids - percentage based widths instead of pixels for your layout/grid. This is arguably even more important than the media query as it allows websites to be fluid and not fixed. So smart phones and tablets come in too many sizes to count, so having a fluid layout makes sure your design can fit nicely at different device widths.
2 - Flexible images - which are basically images that shrink when the browser get smaller. There are plenty of challenges around images in the context of responsive, which is why #Ivan86 smartly recommended using the srcset attribute on the image tag, which I also highly recommend but also maybe wait on that until you're comfortable with the basics. Since you're just starting out, let's keep it simple with 'flexible images' which are images that are set to max-width: 100% with a parent container around them that is % based. This allows the image to shrink as the parent container (div, figure, etc) gets smaller. However, if you do happen to be interested in srcset I posted two articles on this recently: www.richfinelli.com/srcset-part-1, http://www.richfinelli.com/srcset-part-2/ which explain how to use this new attribute.
3 - Media queries - as you said, are used in your css to change the layout based on available browser width.
As I think you're finding out, once you get in to responsive web design you realize there's multiple layers of challenges you can find yourself in. But I recommend buying Ethan Marcotte's book from abookapart.com to get a good jump on it. Very short and actually funny.
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 am new to web design, and am struggling to get my head around the design aspect.
Let me be more specific in my question...do most people make their websites look attractive, with 3d boxes, shadow effects, textured backgrounds etc with CSS entirely? Obviously photo editing would be done elsewhere but being new to CSS it is hard to see how it could be as powerful as using a piece of software.
For example - the website below...would the main nav bar at the top (with a different texture to the background), , the actual background and the box with Online 3d kit builder etc all be designed using CSS or do designers tend to create those types of objects elsewhere and just reference them as images in CSS code?
And referring to the images just below the main picture, would they have the link bar put on them with CSS or in another programme?
I realise all people do things differently, but I would really appreciate people's views/exeriences.
Link - http://www.mkksports.co.uk/
Thanks in advance
In this case, the backgrounds and logo are made elsewhere and referenced by the CSS. The buttons in the header (including their orange button look on hover) are pure css. The teaser images' ("UNI SHOP", "BESPOKE SERVICES, etc.) overlay text and formatting are pure css.
The idea: if you can do it in CSS, do. It makes it much easier to change the whole site at once, and keep it consistent. For example, you wouldn't need the same designer's original photoshop file to make a completely new teaser image. Just wrap the new image in the right class, copying the markup, and you've got a new identically-styled teaser with the exact same formatting effect.
You should always use CSS for styling whenever possible. CSS loads much faster and uses less bandwidth than loading a bunch of images. Any time you can use CSS to get the same effect as you could with a graphic design program, you should.
With CSS3 and HTML5 it's quite easy to accomplish a lot of the looks that used to require images.
That being said, the site you referenced is using background images for the navigation/page background, but they are using CSS for the hover effect on the links in the menu.
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 9 years ago.
Improve this question
There are 2 ways in which we can implement a fluid design (one that would adjust itself to the screen size on which it is viewed on);
Approach 1:
We can just use the available browser size (or viewport width/height) and accordingly define our CSS....
This is equivalent to using say a CSS #media max-width:320px
In this approach, even a desktop browser which is squeezed to a very small size would display the same design as on a mobile device
Approach 2:
We design our CSS based on the device which it is viewed on (desktop/mobile/tablet).
This is equivalent to using say a CSS #media min-device-width:768px
So if you see, there is a difference in how we are identifying which CSS to apply based on either "width" OR "device-width"
My question is NOT about media queries and HOW to apply them at all..
My question is which out of the 2 design approaches should be the preferred one, any PROS/CONS for either of them?
Should we design for a device OR should we design for the available browser area ?
I prefer the "design for available browser area" approach, because you shouldn't force the user to maximize his browser window to fully view your website even though there would be a CSS for smaller browser areas (but you don't use it because the user THEORETICALLY has more screen space).
This not only affects desktop users with widescreen monitors but also tablet users. E.g. Windows 8 will bring a convenient function to scale the browser to 2/3 of the screen width, which might be too small for your website to display properly.
I would always design for the available browser area. The mobiel device market and also hardware manufacturing ( higher screen resolutions and screen ratios) is constantly evolving and trust me designing for a device will put your website in a mess in a short period of time.
Let me know what your final decision will be as I am really interested in this subject.
I am leaning towards a mobile first approach or rather a minimal non device specific one. Small style sheet and the site built for mobile first then adding things in for the higher resolutions via media queries.
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 5 years ago.
Improve this question
What is technical difference between Fluid vs liquid vs elastic vs Flexible css layouts?
Are these all same or different technically?
Is fluid layout better for both mobiles and computer user?
I think there are only two properties to make fluid layout "em" and "%".
And we already use "em" for font even in fixed width layouts. What are other things we need to do to make site flexible? Which part should be flexible and which would be better as fixed? Or we should make whole thing flexible?
I suggest you to read some articles about this subject. Smashing magazine has a great post about it, to see which one is right for you. They have some definitions about these layouts and I believe they are very accurate:
Fixed:
A fixed website layout has a wrapper
that is a fixed width, and the
components inside it have either
percentage widths or fixed widths. The
important thing is that the container
(wrapper) element is set to not move.
No matter what screen resolution the
visitor has, he or she will see the
same width as other visitors.
Fluid:
In a fluid website layout, also
referred to as a liquid layout, the
majority of the components inside have
percentage widths, and thus adjust to
the user’s screen resolution.
Elastic:
There is a third option when working
with Web page layouts. An elastic
design is sometimes preferred by
designers because it mixes the two
other main layout types. It works by
sizing all elements with em’s. The
quote below explains exactly what an
em is and why it can be beneficial.
The pros and cons in the article are very concise too, with examples and further researching.
If you choose to use "fluidic" layouts, read their article about the subject as well.
They are all pretty much the same. If you want to get really picky, I guess you could say that elastic has a maximum width, whereas fluid might continue to increase in width as long as the window is widened. But generally, they are interchangeble.