Many responsive websites provide a horizontal navigation bar on large screens and drop-down navigation for smaller viewports. It’s a perfectly decent approach, but it’s not without its issues. Firstly, devices don’t just come in large and small; they come in every size imaginable. Secondly, the navigation might well change over time. Thirdly, the layout or font size might vary across screen sizes. Ryan DeBeasi is going to do things differently.
Responsive design has two main features. Firstly, the design must be fluid: its width scales with the width of the browser. Secondly, there are breakpoints, widths at which the design changes through use of CSS media queries. For example, you might decide that when the browser is no wider than 480 pixels, a sidebar will move below the content and and headings will become smaller. You can have as many or as few breakpoints as you’d like. So, how do Ryan DeBeasi goes about choosing breakpoints? One approach is to pick a few widths that match up with common device sizes. Twitter Bootstrap has several breakpoints, including a “smartphone” breakpoint that is triggered on viewports no wider than 480px. It also has a “portrait tablets” breakpoint that is triggered between 768px and 979px.
Comments
Be the first to write a comment
You must me logged in to write a comment.