What is Responsive Design?
Generally this means:
- For the most part, images will scale to the page or the column width they are in - so make image at least width of largest size they will be fitting to.
- Maximum screen with is 1200px, and columns will often flow into 500px wide single column on smartphonesPhotos scale well as JPEG but any images that contain graphics or text scale much better as PNG
- Photos scale well as JPEG but any images that contain graphics or text scale much better as PNG
- Consider saving important graphics (except photos) at twice maximum width to display well on retina screens (e.g. logo)
As tables are, in general, not considered responsive, styling tweaks need to make these work on responsive sites. The most common method is to make all tables will now break up into one column for mobile devices. This is a method we have built in to Full Bhuna.
One thing to bear in mind that content is always left-right top-bottom, so a table like:
Will become on mobiles:
Also its now important you make widths % rather than px. If you create a 3-column table by default this will be 33% per column but just bear in mind to remove any pixel measurements you may have added in the past. You can make the table itself an actual width if you need and this will shrink to maximum page width if required.
There are issues: