While developing front-end modules, try to play out different scenarios for each and every module. Try to think two steps ahead and communicate with your team members what might happen when the module comes alive on a website.
Here’s what you might want to keep in mind:
- Interactivity — If you’ve got a design which is missing some parts, do your best to prepare the missing styles. For instance, if your UI designer gave you a static mock up a navigation without the hover and active states, style them anyway. Another thing to keep in mind during development are the links — do they have large enough tap areas for mobile browsing? The size of the link area needs to be bigger for mobile users. Test the tap areas in different scenarios and in different environments. When you notice the UI is broken, fix it.
- Viewport issues — When developing a module, keep in mind to test and style for various resolutions. A module is almost never the same for smartphone, tablet and desktop resolutions (and everything in between). On a desktop resolution, it might not need a bottom margin, while on a smartphone, it might. Test out as many resolutions as you can. Once the module breaks, fix it.
- Content issues — If you create a module with a small amount of text (imagine a navigation, or a list of some kind, or a title), test it with different content and try to break it with a large amount of text to see what happens. When it breaks, fix it.
Remember, always try to keep things flexible and make each module bulletproof.