@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":60398,"date":"2019-09-13T12:57:43","date_gmt":"2019-09-13T16:57:43","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=60398"},"modified":"2019-09-13T13:00:05","modified_gmt":"2019-09-13T17:00:05","slug":"design-date-and-time-picker","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/","title":{"rendered":"6 Steps to Design the Right Date and Time Picker"},"content":{"rendered":"

Date and time pickers are often considered to be a foolproof element for date and time selection – consistent, generic, and predictable. Most people use them as their universally accepted guide for date and time input. However, there are situations where the date and time pickers are helpful, and then there are situations where they interfere with the site\u2019s user experience. So you should carefully consider whether your site requires a date and time picker or not. You should include it only if it will give inputs to your users quickly and easily. You should also place it in front of your interface, as it will encourage the visitors to use it. However, it is quite challenging to find a date picker that fits your interface. But if a date and time selector is required, it is quite tedious to specify one date and most often it produces zero-result pages or irrelevant results. A few minor changes would make designing much more manageable. So, here are six essential tips for creating the right date and time picker for your website.<\/p>\n

1. Add Numerical Values:<\/h2>\n

\"\"<\/p>\n

While designing a date and time picker, the first thing to consider is some sort of date and time input. You should use three separate numerical inputs for date and minimum of two numerical inputs for time input. These inputs should be separated by \u201c-\u201d or \u201c\/\u201d and you could also use a dropdown for the day, month, and year and even for hour and minutes. However, tapping and scrolling aren\u2019t the most seamless or fastest experience. You should make a date and time picking fast, probably within two taps (one to open the calendar or time setting<\/a> and others to choose a day or time). To solve this problem, you can design a format that will automatically change the month and year while the user starts typing the numerical value for determining the day. Also, we have to make sure numerical input is reliable enough to manage all edge cases. You should also use some sort of placeholder or label to indicate the format of date and time picker. You should make sure that when the users activate the input field, the date format suggestion appears.<\/p>\n

While designing a date picker, you should consider investing time for creating a proper numerical input. You could provide suggestions like \u201cnow,\u201d \u201cone year ago,\u201d \u201cyesterday,\u201d \u201ctoday,\u201d \u201c5 days to October,\u201d etc. Depending on the application you are designing, you can decide to provide a flexible date or predefined options. Of course, you need to communicate the input to your users prominently. While numerical input is an invaluable input for determining the date, you should always have some default dates within six weeks. This will help those confused customers who are trying to book a quick weekend trip but do not have exact dates. In such cases, the calendar would be a great option to display all the available options. Furthermore, it\u2019s good to consider the location of your customers while suggesting dates to avoid wrong bookings.<\/p>\n

2. Set Default Values:<\/h2>\n

\"\"<\/p>\n

If you look into the date and time picker input, you will come across small but essential decisions around its interaction design. Some designers often come across the choice of placing default values in the input field or leaving it blank or showing an example of correct input. Further on deciding the default values and visibility of the input values is quite challenging. Though it is not tested or any preference spotted, but setting random values for the users isn\u2019t the best option as it will force users to change the values from seemingly random to the ones they want to pick. However, if your users are likely to book last minute offers on your website (such as transportation or hotel), then a current day (\u201ctoday\u201d) or current time (\u201cnow\u201d) would be a good option, especially in time-sensitive content.<\/p>\n

Once the user has chosen dates or time slot but accidentally or deliberately refreshed the page, you can want to keep the selection or take it back to default values. If the visitor has unexpectedly refreshed the page, they won\u2019t be happy to see their input being lost and having to type it again. However, if they deliberated refreshed the page, they would see predefined dates. In both cases, they will not be happy to find their input being lost. Hence it is better to save the input and provide a noticeable \u201cNew Search\u201d or \u201cReset\u201d link next to the date and time input. Instead of deleting your user\u2019s input, they will have an option to delete previous input. This is also a mini-stepper that could be helpful, and hence dates might not change significantly. If you are sure that your users are likely to choose dates, then it is a good idea to set dates.<\/p>\n

3. Create a calendar overlay:<\/h2>\n

\"\"<\/p>\n

You don\u2019t need to be creative for designing a clear calendar overlay. Usually, the calendar overlay appears below the date input field, as a small panel on a desktop or as a full-screen view on narrow screens. The days are organized in rows, grouped as week along with a dropdown menu<\/a> to navigate months and years. A calendar overlay could contain various levels of navigation and detail such as when should the week row start or should it contain year input or not. All of this only depends on your audience and the application of your website. If you have a public transportation website, food service or a TV having a year input is pointless. Also, if you have a car rental website, there is no point in showing month input.<\/p>\n

Another complexity happens while displaying a day of the week if people want to book an appointment. Sometimes you would also want to display pricing or availability (like booking a flight). Also, you might want to add date range and exact time slot. In such cases, you need to include time-slot selection with date selection or indicate a connection between start and end date. So, it is worth investing time in adding details to your calendar to make it helpful for your users to select date and time quickly. If availability matter it\u2019s good to separate available and unavailable dates in a colour-coded way so that it is distinguishable easily. Additionally, if there are different prices for different dates, it is better to show them in the calendar. If your customers are more interested in weekends or public holiday, it is better to display those as well. Also, it is better to indicate and restrict the selection in the calendar itself so that customers get a hint right away.<\/p>\n

4. Include Date jumps:<\/h2>\n

\"\"<\/p>\n

If your customers are likely to look for a quite short range of date option, you can add quick \u201cnext\u201d and \u201cprevious\u201d navigation next to the date input. For example, while booking a weekend trip, a customer would either want to leave on late Thursday or early Friday, whichever is cheaper.\u00a0 So, instead of making your customers retype or select a date in the calendar, a single tap would provide an expected result. Google Flights use this feature to make their date picker efficient. To be able to jump between months and years could be helpful. Along with this, a mini-stepper is an excellent enhancement for date and time picker. However, it is not a replacement for calendar overlay as too much tapping can become tedious. In usability sessions, tapping for the 10th time could test the patience of your customers. Eventually, your customers would switch to numerical input altogether.<\/p>\n

So, you should first study the scope of date input range and purpose of the calendar. For example, if the booking date is in the future, it\u2019s better to provide a numerical input in the date picker.\u00a0 On the other hand, if the date input range is short, you can consider adding a mini-stepper for quick jumps. Ideally, you should provide all three (a calendar overlay, a mini-stepper and a numerical input) so that customers have reliable options. If there are a few options for displaying time, then you probably don\u2019t need a date picker. You should consider displaying predefined options such as buttons, links or a slider instead of using a calendar overlay. Also, your date picker will not appear unless in plain sight. So, date and time picker should be prompted by a tap or click on a date picker icon or an input field.<\/p>\n

5. Provide Flexibility:<\/h2>\n

\"\"<\/p>\n

If your customers are confused and don\u2019t have an exact date in mind, a date picker should be the method of last resort. More often, a couple of general and presets suggestions along with filters would work better than browsing years and months. In such a case, you could still offer your users a detailed calendar view, using color coding and displaying<\/a> all options at once, for example, to showcase the best prices. Google Flight uses this approach while displaying selected flexible dates. However, the option is dropped to narrow screens. On the other hand, Dohop uses flexible dates along with flexible locations as their main feature. They prominently highlight both features once their users start typing date or destination. Instead of the price, they have a calendar view that highlights the availability of indirect and direct flights, as well as displaying the flight days with no connections.<\/p>\n

To further make your date picker helpful for users, you can color-code the background while displaying the high and low prices using contrasting colors. In case of accessibility, it is useful to consider the color palette<\/a> while choosing colors for the background. This design is quite helpful for users to use a date picker.\u00a0 Additionally, you should describe the meaning of color at the bottom so that there is no confusion. If you are designing a date picker for transportation, it will be helpful to provide an option between \u201cone way\u201d and \u201cround trip\u201d on the top of the calendar overlay. Also, giving flexible dates for specific months isn\u2019t enough you could go a step further and include more general date ranges like spring, winter, summer and fall.<\/p>\n

6. Include a slider:<\/h2>\n

\"\"<\/p>\n

Just like any other input, date and time data can be navigated using the knob of a slider. The slider can either be used for a single value input or specify a date range. It is often featured in the interface in which the customer can set some predefined range of dates. But a slider also brings in the problem of selecting a precise input. The denser or, the wider the range selectable through the slider, the harder it will be to use. In a usability test, a slider makes the customers move the knob very slowly and carefully. Hence it is not user-friendly while picking date and time ranges on narrow screens.<\/p>\n

Sliders work the best when the range is not defined but flexible, or you don\u2019t have many options to choose from. Unfortunately, a date picker does not function this way as customers have to adjust and refine quite frequently.\u00a0 So, numerical input would be much faster than sliding to select a number for date and time. Only in some cases, they appear to be helpful.<\/p>\n

Hence the first step to designing a date and time picker will be to determine if you need one for the application of your website. Once that is decided, you can select the designs that help your users pick date and time faster<\/a>. These tips could help you create a date and time picker that matches your interface and enhances your website\u2019s usability. To further make your date and time picker useful, you could include more relevant details, such as pricing or availability. Also, the input field depends on what the customers prefer, so be sure to include the one that makes the selection quicker.<\/p>\n","protected":false},"excerpt":{"rendered":"

Date and time pickers are often considered to be a foolproof element for date and time selection – consistent, generic, and predictable. Most people use them as their … Continue \u2192<\/a><\/p>\n","protected":false},"author":46,"featured_media":60402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n6 Steps to Design the Right Date and Time Picker<\/title>\n<meta name=\"description\" content=\"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Steps to Design the Right Date and Time Picker\" \/>\n<meta property=\"og:description\" content=\"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-13T16:57:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-13T17:00:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"570\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Harsh Raval\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Harsh Raval\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\"},\"author\":{\"name\":\"Harsh Raval\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/f6d711ac68debd92ed529ee660bfb2e2\"},\"headline\":\"6 Steps to Design the Right Date and Time Picker\",\"datePublished\":\"2019-09-13T16:57:43+00:00\",\"dateModified\":\"2019-09-13T17:00:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\"},\"wordCount\":1994,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\",\"url\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\",\"name\":\"6 Steps to Design the Right Date and Time Picker\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg\",\"datePublished\":\"2019-09-13T16:57:43+00:00\",\"dateModified\":\"2019-09-13T17:00:05+00:00\",\"description\":\"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg\",\"width\":1000,\"height\":570},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"6 Steps to Design the Right Date and Time Picker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/twitter.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/f6d711ac68debd92ed529ee660bfb2e2\",\"name\":\"Harsh Raval\",\"description\":\"HR is a skilled web developer, graphic designer, digital marketing consultant, and content creator. With more than 10 years of experience in content creation, HR has contributed engaging, thorough, and well-researched graphic and web design content for several years here at WebDesignDev.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"6 Steps to Design the Right Date and Time Picker","description":"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.","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:\/\/webdesigndev.com\/design-date-and-time-picker\/","og_locale":"en_US","og_type":"article","og_title":"6 Steps to Design the Right Date and Time Picker","og_description":"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.","og_url":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_published_time":"2019-09-13T16:57:43+00:00","article_modified_time":"2019-09-13T17:00:05+00:00","og_image":[{"width":1000,"height":570,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg","type":"image\/jpeg"}],"author":"Harsh Raval","twitter_card":"summary_large_image","twitter_creator":"@WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Harsh Raval","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/"},"author":{"name":"Harsh Raval","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/f6d711ac68debd92ed529ee660bfb2e2"},"headline":"6 Steps to Design the Right Date and Time Picker","datePublished":"2019-09-13T16:57:43+00:00","dateModified":"2019-09-13T17:00:05+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/"},"wordCount":1994,"commentCount":0,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/design-date-and-time-picker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/","url":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/","name":"6 Steps to Design the Right Date and Time Picker","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg","datePublished":"2019-09-13T16:57:43+00:00","dateModified":"2019-09-13T17:00:05+00:00","description":"6 Steps to Design the Right Date and Time Picker on WebDesignDev.com. Read about 6 Steps to Design the Right Date and Time Picker.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/design-date-and-time-picker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2019\/09\/header-image.jpg","width":1000,"height":570},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/design-date-and-time-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"6 Steps to Design the Right Date and Time Picker"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/twitter.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/f6d711ac68debd92ed529ee660bfb2e2","name":"Harsh Raval","description":"HR is a skilled web developer, graphic designer, digital marketing consultant, and content creator. With more than 10 years of experience in content creation, HR has contributed engaging, thorough, and well-researched graphic and web design content for several years here at WebDesignDev."}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/60398"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=60398"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/60398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/60402"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=60398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=60398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=60398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}