Lately we’ve been using Sencha Touch for an interesting project. We found a problem which something was working correctly while on develop mode but stopped working after the app was built for production.
Turned out the problem was becuase we added a custom attribute to an existing sencha component which we wanted to use.
Responsive Web Design is quite hot topic over the last few years. This post will give you a basic overview of the totally made-up break-fix approach.
The concepts of the approach are simple – having a non-responsive website you iteratively shrink the browser width, monitor when the site breaks (a horizontal scroll appears) and “fix” the website’s look and behaviour for the size. Check the image:
Requirements (Or what will make it easy for you)
Google Chrome Dev Tools (or FireBug) and basic knowledge how to use it (hind: use the magnifier tool)
Hacky CSS Knowledge (change widths, understand positioning, floating and similar stuff)
Benefits Of the ApPrOach
Good solution for existing non-responsive websites, also a quick one
Simple and not that much thinkin involved – just see what breaks the site and fix it
Agile – you do it step by step
1. Shrink the browser width
2. Find where the site breaks
*breaks – a horizontal line appears or anything else that doesn’t look nice
3. Find what makes it break
4. Fix it:
Add a breakpoint (using a media query) for the current width of the screen (hint: check the width of the html body element to know what is the current width)
Change the width to percents or something relevant