Hey Guys,
I am about to start work on a project, it’s a redesign for big web application. The direction is to take everything into account in regards to a responsive design when structuring the html and css for the project. First we will only do development for the desktop design, though everyone is aware that mobile first is the best way to go but because of time restrictions right now the focus is more on the desktop site and also there is a separate mobile website available so we are not losing that traffic.
So does anyone have any input regarding what things I should take into account so when the time comes to convert the website to responsive, it is not a pain?
I look forward to your responses.
That doesn’t matter. Build a fluid site in general and then for specific design quirks that don’t translate well into different screen sizes, then use media queries. I, along with other very talented members here, do desktop first.
Frameworks only do mobile first because it’s easier to cater to the masses.
Have a fully fluid website (no widths, heights. Only max-widths and percents maybe) from the getgo. That will minimize what responsive media query code you actually neeed to implement. Responsive design is just some big scary word. It’s really not difficult. The hard part is properly building your webpage structure to be fluid. The key word there is properly.
1- Use max-width or % instead of fixed width on the containers.
2- Margins and Paddings in %
I do not understand the 2nd response, width:100% makes sense so image takes up the width of it’s parent container but why max-width of 123px ? I believe the later applies to only mobile screens? which I should not worry about for now.
Max-width applies anywhere you want it to be applied to.
The advantages of max-width and no width is that the page will flow smoothly in all screen sizes (as best it can) while eventually capping out at a certain width as to not make the element too big.
Margins and paddigns in percent can also be used anywhere for any screen size, although I’d hesitate using percentage margins/paddings since I personally usually want a static amount of space (i.e. 5px) instead of 1% (which could be 5px, or perhaps 15) it just depends.
This all is very general advice and ultimately it depends on the page in question. There are many ways to do it; although generally only a FEW “good” and “correct” ways.
Just remember that the horizontal scrollbar is your enemy here. If you see it - kill it. Any time the viewport gets a horizontal scrollbar is the point at which some device will suffer badly.
It doesn’t take much extra work to build a basic responsive site at the same time as you build the desktop site because you can quickly tweak each element as you go. Doing it afterwards is not quite so easy because you may have built a structure that depends on what went before and means making changes all the way down the line. You can concentrate on the desktop version if you want and then without going overboard just keep an eye on the responsiveness which you can fine tune later.
Also keep an eye on the structure of the html because you may want a specific order when reduced to mobile and this may not be possible if you have used a lot of floats (floats must come first in the html). Eventually the smallest mobile view is effectively one column so always have that though in mind when building modules and think how they can be reduced to 300px (approx) so that they don;t create a scrollbar on the design. Devices hate scrolbars because they need to take that extra width into account and thus stretch odd parts of a layout.
As mentioned above avoid fixed widths and use max-width instead and set your images to scale with the container. Try not to create any fixed width modules over 300px unless they can scale with the window.
If using adverts then use responsive ads otherwise they will break the page.
When choosing sliders go for responsive sliders from the start (there are many around) and will save you changing it later.
Responsive design is mainly looking at your own design and tweaking it to fit any window size by using media queries at breakpoints of the designs choosing (and not at a device breakpoint as such (use device agnostic design)).
Any time the viewport gets a horizontal scrollbar is the point at which some device will suffer badly.