{"id":78382,"date":"2021-10-25T12:47:44","date_gmt":"2021-10-25T12:47:44","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=78382"},"modified":"2021-10-25T12:47:44","modified_gmt":"2021-10-25T12:47:44","slug":"how-osm-uses-additional-breakpoints-for-ux","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/","title":{"rendered":"How OSM Agency Uses Additional Breakpoints to Improve User Experience"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"78382\" class=\"elementor elementor-78382\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fb84920 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb84920\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a637541\" data-id=\"a637541\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8efb5da elementor-widget elementor-widget-text-editor\" data-id=\"8efb5da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to web design, no matter the trends, one thing is certain \u2014 today\u2019s Internet users are smart, time-starved, and have high expectations when it comes to addressing their requirements. Not only is a flawless user experience crucial for having a good website, but it can also be a matter of survival.\u00a0<\/p><p>There are many examples of companies that lost a significant amount of users (and money) due to the mistakes they\u2019ve made with their website\u2019s UX. Popular examples include the website redesign of Marks &amp; Spencer and CNN a while ago. Some sources claim that Marks &amp; Spencer experienced a \u00a355 million loss in sales at that time, and the CNN critics weren\u2019t encouraging either.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-957afd7 elementor-widget elementor-widget-image\" data-id=\"957afd7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"512\" height=\"119\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=512,h=119\/blog\/wp-content\/uploads\/2021\/10\/cnn-resdesign-comment.jpg\" class=\"attachment-large size-large wp-image-78388\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=512\/blog\/wp-content\/uploads\/2021\/10\/cnn-resdesign-comment.jpg 512w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/10\/cnn-resdesign-comment-300x70.jpg 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b90f294 elementor-widget elementor-widget-text-editor\" data-id=\"b90f294\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We at <a href=\"https:\/\/weareosm.com\/\" target=\"_blank\" rel=\"noopener\">OSM<\/a> have over a decade of experience fulfilling the needs of all sorts of clients that operate in various industries, geo-locations, etc. We\u2019ve learned that an ideal online user journey consists of a website that meets all the essential criteria of a responsive web design and provides exceptional navigation and reading experience across different devices.\u00a0<\/p><p>However, we are aware that a seamless user experience across a plethora of different platforms and viewport sizes can be challenging. This is why Elementor\u2019s new, <a href=\"https:\/\/elementor.com\/blog\/introducing-elementor-3-4\/\">additional breakpoints<\/a> are a feature we are really excited about.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d3d7de elementor-widget elementor-widget-heading\" data-id=\"9d3d7de\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">First Things First \u2014 The Desktop Version<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-756339c elementor-widget elementor-widget-text-editor\" data-id=\"756339c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Web designers love big screens, and the majority of them start their design process on a desktop screen version. The same goes for <a href=\"https:\/\/experts.elementor.com\/expert\/5e83c398d1d250001d067c2e\" target=\"_blank\" rel=\"noopener\">Jovan Lakic<\/a>, the magician behind the showcase page dedicated to our most recent project, <a href=\"https:\/\/weareosm.com\/kasparovchess\/\" target=\"_blank\" rel=\"noopener\">Kasparovchess<\/a>.<\/p><p>This was a project entrusted to us by the one and only <a href=\"https:\/\/en.wikipedia.org\/wiki\/Garry_Kasparov\" target=\"_blank\" rel=\"noopener\">Garry Kasparov<\/a>, the Russian chess grandmaster, and former World Chess Champion. The Kasparovchess platform itself has plenty to offer: games, videos, live streams, interviews, master classes, and much more. We wanted to present all these benefits on our dedicated page and showcase the hard work behind the OSM team, so our potential clients see what we could do for them.<\/p><p>Here\u2019s how he created the desktop version of the Kasparovchess\u2019 dedicated page on our website, with Elementor, of course:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14848cd elementor-widget elementor-widget-video\" data-id=\"14848cd\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/laptop-final.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a70681 elementor-widget elementor-widget-text-editor\" data-id=\"6a70681\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The landing page&#8217;s design needed to be compatible with the overall project&#8217;s design (check on <a href=\"https:\/\/kasparovchess.com\/home\" target=\"_blank\" rel=\"noopener\">kasparovchess.com<\/a>), and that meant a lot of black colors, a touch of purple, and a lot of grayscale visuals. Certainly, a tricky combo when it comes to <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7370\">responsive<\/a> design, you must agree.\u00a0<\/p><p>The desktop version has a video in the hero section and in various other interactive sections. Again, a challenging moment for smaller screens.<\/p><p>(<a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"4475\">CSS<\/a>) Breakpoints are useful when it comes to creating a responsive web design since they offer a good user experience on various screen sizes. When talking about responsive design, a breakpoint is a <em>point <\/em>at which a site&#8217;s design and the content will adjust to the best possible user experience for that specific screen.<\/p><p>Here&#8217;s how we&#8217;ve leveraged Elementor&#8217;s additional breakpoints to create a seamless user experience for our website visitors browsing on their laptops and mobile devices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96e317d elementor-widget elementor-widget-heading\" data-id=\"96e317d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Laptop Screen Adjustments\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f190e81 elementor-widget elementor-widget-text-editor\" data-id=\"f190e81\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We\u2019ve decided to start by optimizing the screen for laptops since, according to our statistics, most website visitors are browsing on their laptops. Of course, there are various laptop screen sizes, but Elementor\u2019s laptop breakpoint seems to cover them all!<\/p><p>The first thing we did was make adjustments to the size of the fonts, especially headings. The goal was to highlight the importance of a particular sentence but also make it adjustable to a smaller screen size.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d71b676 elementor-widget elementor-widget-video\" data-id=\"d71b676\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/laptop-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4100f0c elementor-widget elementor-widget-text-editor\" data-id=\"4100f0c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The second step was to fine-tune the text paddings and text box size.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ada7d52 elementor-widget elementor-widget-video\" data-id=\"ada7d52\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/laptop-2.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-738dbd4 elementor-widget elementor-widget-text-editor\" data-id=\"738dbd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>and voil\u00e0:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2bc501 elementor-widget elementor-widget-video\" data-id=\"d2bc501\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/laptop-final-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04b5d76 elementor-widget elementor-widget-heading\" data-id=\"04b5d76\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Mobile Phone Screen Refinements \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68bc01c elementor-widget elementor-widget-text-editor\" data-id=\"68bc01c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>According to Google Analytics, weareosm.com\u2019s visitors browse the website on their mobile phones quite a lot. To be more specific, our visitors seem to be iPhone lovers. That\u2019s why we\u2019ve decided to start customizing mobile screens based on the dimensions of the\u00a0<\/p><p>iPhone12MaxPro.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bbae9d elementor-widget elementor-widget-image\" data-id=\"7bbae9d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"367\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=367\/blog\/wp-content\/uploads\/2021\/10\/OSM-analytics-1024x470.png\" class=\"attachment-large size-large wp-image-78401\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/10\/OSM-analytics-1024x470.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/10\/OSM-analytics-300x138.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/10\/OSM-analytics-768x353.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1228\/blog\/wp-content\/uploads\/2021\/10\/OSM-analytics.png 1228w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-663fad7 elementor-widget elementor-widget-image\" data-id=\"663fad7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=418\/blog\/wp-content\/uploads\/2021\/10\/Mobile-devices.png\" class=\"attachment-large size-large wp-image-78402\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=930\/blog\/wp-content\/uploads\/2021\/10\/Mobile-devices.png 930w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/10\/Mobile-devices-300x157.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/10\/Mobile-devices-768x401.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bc5b5d elementor-widget elementor-widget-video\" data-id=\"0bc5b5d\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/mobile-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0af4fa elementor-widget elementor-widget-text-editor\" data-id=\"b0af4fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once again, the main headings needed to be adjusted to the smaller screen size, the text box size, and paddings. It is harder to read content on smaller screens, so it is crucial not to follow the desktop\/laptop settings but focus just on the mobile screens. Double-check if the icons and all visuals are in place and forget about the interactive stuff \u2014 mobile phone users want to find information at first glance\/tap.\u00a0<\/p><p>That\u2019s why we remind you about the <strong>Advanced<\/strong> section of the Image Editor, where you can find the <strong>Positioning<\/strong> option. Here\u2019s what we\u2019re talking about:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-749c3b9 elementor-widget elementor-widget-video\" data-id=\"749c3b9\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/mobile-image-editor.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6f2880 elementor-widget elementor-widget-text-editor\" data-id=\"c6f2880\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Okay, so after all the refinements, we hope that we\u2019ve done a good job when it comes to user experience for our mobile phone visitors:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf4e1ef elementor-widget elementor-widget-video\" data-id=\"cf4e1ef\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/10\/mobile-final.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-198a5cb elementor-widget elementor-widget-heading\" data-id=\"198a5cb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Final Thoughts\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b21867 elementor-widget elementor-widget-text-editor\" data-id=\"2b21867\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>&#8220;The amount of effort that goes into defining responsive breakpoints is directly proportional to the experience of the end-user,&#8221; as explained at <a href=\"https:\/\/www.browserstack.com\/guide\/responsive-design-breakpoints\" target=\"_blank\" rel=\"noopener\">Browserstack<\/a>.<\/p><p>Once again, users expect that a website is perfectly complementary with all devices they are using. For websites built with Elementor, the additional breakpoints feature is surely helpful, but it\u2019s up to you to polish every single website element.<\/p><p>Did we do a good job with the Kasparovchess dedicated page? Let us know.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Achieving seamless user experience across different devices and viewport sizes can be challenging. In this post, the designers of OSM agency demonstrate how they used the additional breakpoints to showcase a website they built for the chess grandmaster, Garry Kasparov.<\/p>\n","protected":false},"author":2024182,"featured_media":83262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,44,17,32],"tags":[79],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-78382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stories","category-elementor","category-inspiration","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How OSM Agency Uses Additional Breakpoints to Improve User Experience<\/title>\n<meta name=\"description\" content=\"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How OSM Agency Uses Additional Breakpoints to Improve User Experience\" \/>\n<meta property=\"og:description\" content=\"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-25T12:47:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/10\/13.10.21_OSM-case-study-additional-breakpoints_1200_628_text_2-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1339\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ana Kari\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ana Kari\u0107\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\"},\"author\":{\"name\":\"Ana Kari\u0107\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda\"},\"headline\":\"How OSM Agency Uses Additional Breakpoints to Improve User Experience\",\"datePublished\":\"2021-10-25T12:47:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\"},\"wordCount\":933,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg\",\"keywords\":[\"Build\"],\"articleSection\":[\"Case Studies\",\"Elementor\",\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\",\"url\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\",\"name\":\"How OSM Agency Uses Additional Breakpoints to Improve User Experience\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg\",\"datePublished\":\"2021-10-25T12:47:44+00:00\",\"description\":\"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Studies\",\"item\":\"https:\/\/elementor.com\/blog\/category\/stories\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How OSM Agency Uses Additional Breakpoints to Improve User Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda\",\"name\":\"Ana Kari\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g\",\"caption\":\"Ana Kari\u0107\"},\"description\":\"Ana Kari\u0107 is part of the OSM team, where she works as Head of Marketing. Her aim is to use proven Growth Marketing frameworks and strategies to help businesses scale. She tends to keep a holistic approach to her work, so exploring website crafting with Elementor was the logical step to take...and she is loving it!\",\"url\":\"https:\/\/elementor.com\/blog\/author\/anakaric\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How OSM Agency Uses Additional Breakpoints to Improve User Experience","description":"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/","og_locale":"en_US","og_type":"article","og_title":"How OSM Agency Uses Additional Breakpoints to Improve User Experience","og_description":"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.","og_url":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-10-25T12:47:44+00:00","og_image":[{"width":2560,"height":1339,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/10\/13.10.21_OSM-case-study-additional-breakpoints_1200_628_text_2-scaled.jpg","type":"image\/jpeg"}],"author":"Ana Kari\u0107","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ana Kari\u0107"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/"},"author":{"name":"Ana Kari\u0107","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda"},"headline":"How OSM Agency Uses Additional Breakpoints to Improve User Experience","datePublished":"2021-10-25T12:47:44+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/"},"wordCount":933,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg","keywords":["Build"],"articleSection":["Case Studies","Elementor","Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/","url":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/","name":"How OSM Agency Uses Additional Breakpoints to Improve User Experience","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg","datePublished":"2021-10-25T12:47:44+00:00","description":"In this post, OSM agency demonstrate how they used the additional breakpoints to showcase a project they built for the chess grandmaster, Garry Kasparov.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_-How-OSM-Agency-Uses-Additional-Breakpoints-to-Improve-User-Experience.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Studies","item":"https:\/\/elementor.com\/blog\/category\/stories\/"},{"@type":"ListItem","position":3,"name":"How OSM Agency Uses Additional Breakpoints to Improve User Experience"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/742f30681b76e2a39931a2a3cd49ecda","name":"Ana Kari\u0107","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/401431938b1241ae396567afeb4d2a8ad7160b8acbc689d4ab851cf651dfdeb5?s=96&d=mm&r=g","caption":"Ana Kari\u0107"},"description":"Ana Kari\u0107 is part of the OSM team, where she works as Head of Marketing. Her aim is to use proven Growth Marketing frameworks and strategies to help businesses scale. She tends to keep a holistic approach to her work, so exploring website crafting with Elementor was the logical step to take...and she is loving it!","url":"https:\/\/elementor.com\/blog\/author\/anakaric\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/78382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024182"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=78382"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/78382\/revisions"}],"predecessor-version":[{"id":93941,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/78382\/revisions\/93941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/83262"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=78382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=78382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=78382"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=78382"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=78382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}