How do we please all of the people, all of the time? This section of the documentation delves deep into cross browser and device layouts for Open Web Apps, providing you with techniques and ideas to cover most situations.
Creating an effective layout for a modern web site or app is a challenge. In some ways, your job is easier - CSS generally has much more solid, consistent support across browsers and platforms than it used to, so you no longer have to rely on as many horrible hacks. But in other ways, it is harder; there are so many devices around these days that can access the Web, with different browsers, screen sizes, resolutions, processing power, and usage contexts (for example is the device portable, will it have a network connection?)
And on top of all this, we now have platforms like Firefox OS, on which you can install open web apps.
- Intro to Responsive Design
- One app, multiple screens. How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design and build UIs that change to fit your user's screen.
- The building blocks of responsive design
- This guide discusses the main technologies and techniques involved in creating responsive applications, along with a complete example.
- Responsive design versus adaptive design
- These two terms are often confused, so here we provide a no-nonsense guide to the differences between the two.
- Mobile first
- Mobile first is the practice of designing a web site so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. This guide looks at a few useful techniques inside the mobile first umbrella, such as mobile first media queries.
- Flexible boxes
- CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.
Tools for app developers
Technology reference documentation
Getting help from the community
If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!
- Consult the webapps forum:
- Ask your question on the Open Web Apps IRC channel: #openwebapps