A Week of Responsive Web Design and Mobile Cross-Browser Incompatibility
The past week has been an intense experience in several ways. By designing, developing and finally publishing my website, I not only learned a lot about the technologies I used but more importantly, I got a feeling for how messy it can be to simply show some text and images in a clean and consistent way across different browsers — if you use the wrong methods and tools.
One might think the design and development of a website is what takes time but in reality that’s only a small part…
I originally developed and tested the website on my desktop computer and came up with something I liked that also happened to work well. What was left to do at this point was basically to verify how the page worked on my phone before I could publish it — I thought…
When I started testing in actual mobile browsers, literally everything that was nice about my webpage was broken. In hindsight, the fixes turned out to be quite easy (only ~20 lines of CSS that had to be changed) but that was something I was unaware of at the moment.
I started searching for how I could fix the issues and tried solution after solution which often resulted in minor improvements. But whenever something was fixed in one mobile browser, something else broke in another phone’s browser. And like this it went on…
After a few days I got stuck. I would say I’m quite capable when it comes to learning things and handle problems on my own. But this time I really felt stuck. I knew about several issues I needed to fix to get my website working. The question was just where I should start…
So I asked in one of FCC’s chat rooms and just like my previous experiences with the community, there’s almost always someone just waiting to help you when you need it. I want to give a big thanks to Manuel and JD who guided me towards my goal and taught me a lot in the process!
Through this project, I’ve bit by bit understood how mobile browsers behave differently from regular ones and learned how small tweaks can mean huge differences in how the webpage works across different devices. For example, I can’t tell how many attempts it took before something seemingly simple as the full page background image finally started working in older browsers!
Some reflections:
- It’s easier to build websites for mobile by using the Mobile First-approach than the regular Desktop First — something I probably will do in the future.
- You can improve the performance of a webpage significantly by optimizing and minimizing your code (HTML, CSS, JS) as well as compressing images. I improved my initial data transfer for a new, uncached page load from 2.83 MB transferred over 2.2 seconds down to 1.3 MB and 1.53 seconds — And I know there’s still room for major improvements!
- It saves a lot of time to have a good development environment for testing websites on mobile devices. To have a local server and a build tool felt a bit overkill for this project but is definitely something I’ll look into in the future!
- HTML and CSS are pretty easy syntactically — the real challenge in front end development is to create something that is robust enough to work across an endless amount of devices and screen sizes yet simple and elegant to use.
