Edit post Follow this blog Administration + Create my blog

Applying Breakpoints in Web Development

June 26 2013 , Written by Spinx Inc. Published on #Web Development, #Breakpoints, #Web Development Company

Suppose you have selected three primary design guidelines from your thumbnails; just think about what your main breakpoints will look like? Try to come up with as little major breakpoints as possible. If a linear layout works for every display and is proper for your eccentric idea, then there is no need for diverse layout. In that scenario, just explain what will occur when the display gets bigger. Will everything usually remain the same, with changes only to typeface dimension and margins? For these modifications, create thumbnails first, discover some choices and then shift to bigger, more particular blueprints. Use your breakpoints chart as a detail and create blueprints according to the breakpoints you have approximated on your graph.

When you consider major breakpoints, make sure to think about device classes. If you are considering smartphones, smart devices like laptops, tablets, gaming consoles, you are going in the right way. If you are considering with reference to famous brand names and operating systems, then you are on the incorrect monitor. The concept is to think with regard to common device categories and device capabilities.

Rough blueprints of major breakpoints can help you determine:

  • Whether additional major breakpoints are needed or not.
  • Whether or not a fussy device class has been ignored or needs additional concern.
  • What technological innovations you will need to create the design responsively.

Consider Content while Sketching

While illustrating, you will be considering the manner in which aspects should look like. The more you illustrate this type the more you determine the structure of the components on the display. Consider content during the sketching process and think about what will occur to the content in diverse circumstances. When you are designing for responsive, you need to manage these essential elements:

  • Text
  • Navigation
  • Tables


While illustrating, there are lots of text related problems that you need to tackle like text size and width of column, both of which are appropriate to a percentage of the display size and other web page components.

It can be challenging to calculate how extensive a column will be with real text. In this scenario, illustrating on a device might give you a better idea of the real area you have to perform with. Or the other solution is to create a simple HTML page which contains only written text, and run that page into a device’s web browser. By seeing the text on the device screen you can get a better idea about what changes should be needed and after that you can modify the typeface size. Once it seems right, you will be able to create your blueprints a bit more genuine.

Don’t just consider the text size but also think about the space around them. These aspects play an important role in touchability and clickability of hyperlinks, large hyperlinks and control buttons are easier objectives; but small hyperlinks with a lot of space around them can perform just as well.

Website Navigation

Navigation is another important thing to consider while illustrating on real devices. The dimension problems are same as hyperlinks, but there happens to be a lot more considering doing it in terms of the navigation design for different devices. This indicates that navigation might modify considerably at every major breakpoints.

What to do if you have only plain HTML and CSS and no JavaScript. That indicates that you cannot have your menu flattened at the top of the screen display and have it drop down when somebody tapes it.

This is a questionable topic, with even availability experts in disagreement: JavaScript is currently regarded an “accessibility supported” technological innovation. But this is not actually about availability. It’s about considering what happens when a web browser does not have JavaScript assistance, or if the JavaScript available on the product is more diverse than what you would anticipate.

The best recommended design for navigation on the small screen is to keep it near the end of the screen display and put a link in that navigation near the top of the screen. When JavaScript is available and functioning as predicted, you can shift that navigation at the top and create the drop down menu on the fly.


Tables, an outdated fashion for web design! To display tables on the small device platform is very challenging. It’s good to think about these while you are illustrating.

Think about what kinds of tables you will be working with. Are they wide, narrow or textual? Once you have regarded these things, try to classify the kinds of tables you have into something like this:

Tables Work on Small Screen Devices: They are small enough and will perform better on small screen devices.

Blockable Tables: These can be modified with CSS so every table row features visually as a prevent item in a list.

Chartable Tables: These hold numerical information that can be modified into a graph, chart or other type of visualization which will occupy small space on small devices.

Tricky Tables: These are difficult enough to cope with and you will need to come up with a diversity plan for them.

With regard to progressive improvement, the base design should consist of the whole table which indicates that the customer will have to scroll horizontally to see the whole elements. Blockable and chartable tables can be obstructed with CSS and charted with JavaScript. A lot of web developers tried many diverse alternatives for tables, from developing the table itself scrollable to trading columns and rows.

What to do if you get lost

At a certain point every web developer gets trapped. Don’t worry about it. There are plenty of ways to deal with it. If your issue is that you are trapped creatively, there are many motivating guides and resources to get help. If your problem is that you are not sure how to deal with something in the perspective of responsive web design, there is no damage in exploring how others have fixed problems like yours. Just be sure to use your creativity and customize any concepts and you may discover your own situations. In spite of everything, you are a web designer!

For Best Web Development Services hire SPINX Inc. a Los Angeles based web design and development company located in Los Angeles who offers a wide range of Web Development Services.

Share this post
To be informed of the latest articles, subscribe:
Comment on this post