Vyhledávání
- 5 Pillars of Responsive Webdesign
- Original Responsive webdesign article
- The State Of Responsive Web Design (may 2013)
Why responsive webdesign?
- one page for all devices - no need to make different versions, nevertheless on all devices will be accurate!
- minimalistic design is easy for human and search engine navigation
Menus and layout
Basic types (source article [saved]):
- Top Nav or “Do Nothing” Approach
- The Footer Anchor
- The Select Menu
- The Toggle
- The Left Nav Flyout
- The Footer-Only
- Filamentgroup.com - nice and complex example and tutorial [saved]
Responsive tables
There are some techniques to display wide tables on small screens (source):
- Hide less-importanat columns
- Rearrange table vertically - put attributes vertically and rows horizontally - so you will se the whole entity ("row" on widescreens) on the dsiplay, but you have to scroll horizontally to see other entites
- Leave tables and display entities ("rows") as boxes vertically, with its attributes ("cols") also vertically.
- Display entity name as fixed row and scroll other cols horizontally - can be simply integrated with JS - source
Common caveats
- inline-block spaces: all whitespaces in HTML source code between inline-block elements will be displayed in the result page! It is the feature of inline elements. Solutions (source):
- remove spaces in the source code
- ommit closing tag if it is possible (for example in <li> items)
- set the font size of elemets to zero