CSS
Firefox and all Chromium browsers (Google Chrome, Edge, …) all have great tools to help you with that. First and foremost, both have a developer tools bar (activated by pressing either Ctrl+Shift+I, F12 or by going into the browser menu and under the section “More tools”) where you can highlight certain elements and further inspect them. You will see all the applied style rules on the right-hand side in the standard interface. This way you can check whether certain rules are active or not and where they come from.
Furthermore, these developer tools include a device toolbar or responsive design mode, activated by either clicking the small phone and tablet icon on the developer toolbar or by pressing Ctrl+Shift+M. When activated, your actual browser window is sectioned off from the rest of the browser and can be either set to some of the preset phone display sizes, which include some of the latest phone models, or be resized manually in the responsive mode like any normal window. The benefit from doing resizing this way is that the toolbar shows you how big the “display” is regarding pixel size, which helps immensely with implementing rules for different screen sizes.
If you want to test the look and feel on an actual device, you can have some your personal mobile phones or tablets connect to them via the local network. I assume you are already running some kind of local web server like XAMPP. Then you can easily figure out your local IP with some simple commands for the command line tools/terminals (e.g. ipconfig on Windows, nettop on MacOS, ifconfig on Linux).
How can I easily test responsive web design?
I am currently developing a web page and want to test and debug the site for responsive web design. For example, on smaller displays, I want to display items that are usually displayed side by side on the page to instead be displayed beneath each other. Are there any other ways to achieve this other than simply resizing the browser window?
Solution:
This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.
Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.
<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>
Taggings:
Responsive layout
Different devices have different screen space, on smartphones a vertical layout might be advantageous over a horizontal. How can we create a responsive layout that automatically determines the screen width and adapts content accordingly, without messing around with media queries and having to customize the layout for each browser?
Taggings:
While constant monitoring and optimizing of the code is always a good idea, there is also a process called “Minification” to do so. During a project for a university course I had to use the service minifier.org to reduce the file size of my js- and css-files. It reduces unnecessary text, like comments or whitespaces from those files and even optimizes Javascript code according to common programming optimization patterns.
Taggings:
Reducing load times and size of scripts and CSS-files
Web services that include a lot of scripts or costly style operations may be very slow, as a lot must be loaded in the background. Is there a way to make these pages load faster?
CSS Styling a button does not yield the desired outcome
When trying to incorporate a new page into an existing website with corporate styling, I came to a problem which was hard to detect (for me). A newly created button should have a slightly different position and edge rounding than all other styled buttons as it comes from a different context.
Whatever I've done, I never got the correct styling, like magically ignored by the browser. Learning about the developer console I digged deep into the css styling and found out that a <div> from a container forced its own styling on the button. Some changes work whereas some changes are ignored because they are overwritten by the super div.
A very hacky and in general practice bad way to solve this problem was to apply the `!important` tag which then really applied the changes. Reading through some articles, my use case was actually well suited for the `!important` tag because it really stands out in the context.
Taggings:
Speed up webpage testing time
Testing web pages can be really time consuming. Every CSS, HTML or image change needs a browser refresh. It would be way better if the reloads could be avoided.
Taggings:
Pages
