webdesign.tutsplus.com
Open in
urlscan Pro
104.16.167.76
Public Scan
Submitted URL: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
Effective URL: https://webdesign.tutsplus.com/creating-a-future-proof-responsive-email-without-media-queries--cms-23919t
Submission: On October 11 via manual from IN — Scanned from DE
Effective URL: https://webdesign.tutsplus.com/creating-a-future-proof-responsive-email-without-media-queries--cms-23919t
Submission: On October 11 via manual from IN — Scanned from DE
Form analysis
2 forms found in the DOMGET https://webdesign.tutsplus.com/t/tutorials/search
<form class="global-nav__search-form mobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8"
method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="global-nav__search-terms"><button name="button" type="submit" class="global-nav__search-button"
aria-label="Search"><i class="fa fa-search"></i></button></form>
GET https://webdesign.tutsplus.com/t/tutorials/search
<form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8"
method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials..." class="global-nav__search-terms search-terms-nonmobile"><button name="button" type="submit" class="global-nav__search-button"
aria-label="Search"><i class="fa fa-search"></i></button></form>
Text Content
YOUR PRIVACY MATTERS Cookies and similar technologies are used on our sites to personalise content and ads, provide and improve product features and to analyse traffic on our sites by Envato, our business partners and authors. You can find further details and change your personal settings below. By clicking OK, or by clicking any content on our sites, you agree to the use of these cookies and similar technologies. Do not sell or share my personal information Use necessary cookies only OKSettings OK Use necessary cookies only Allow selection Allow all cookies Strictly Necessary Preferences Statistics Marketing Settings Cookie declaration [#IABV2SETTINGS#] About Strictly Necessary (209) Preferences (421) Statistics (172) Marketing (192) Unclassified (23) Strictly necessary cookies help make a website usable by enabling basic functions like page navigation, website security and access to information that requires authentication. NameProviderPurposeExpiryTypegoogle_auto_fc_cmp_setting [x2]Envato GoogleStores the user's cookie consent state for the current domainPersistentHTMLtnsAppEnvatoThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTML_fd_session [x7]3docean.net Envato photodune.netPending400 daysHTTP_market_storefront_session [x7]3docean.net Envato photodune.net assets.market-storefront.envato-static.comPending1 yearHTTPclientside-cookie [x8]3docean.net Envato photodune.netUsed by the Kount Client SDK for fraud detection1 yearHTTPclientside-local [x8]3docean.net Envato photodune.netUsed by the Kount Client SDK for fraud detectionPersistentHTMLCookieConsent [x37]Cookiebot EnvatoStores the user's cookie consent state for the current domain1 yearHTTPintercom-id-# [x8]3docean.net Envato photodune.net IntercomAllows the website to recoqnise the visitor, in order to optimize the chat-box functionality. 7 daysHTTPreferring_user [x7]3docean.net Envato assets.market-storefront.envato-static.com photodune.netPending3 monthsHTTPSHOW_EXPERIMENTS_GUI [x8]3docean.net Envato photodune.netPending1 yearHTTPss [x8]3docean.net Envato photodune.netUsed by the Kount Client SDK for fraud detectionPersistentHTMLstorefront_routing_v2 [x8]3docean.net Envato codecanyon.neta photodune.netUsed for routing requests to storefront or shopfront. Necessary for consistent page navigation and functionality. Not used for experiment tracking.1 yearHTTPstorefront_routing_v3 [x7]3docean.net Envato photodune.netPending1 yearHTTPstorefront_routing_v4 [x8]3docean.net Envato photodune.netPending1 yearHTTPauth_contextEnvatoCapture customer authentication intention to replay if necessary1 dayHTTPenvatosessionEnvatoPending6 monthsHTTPexperiment_sso_GTg7fN6pRgCm28zSLUZeUgEnvatoPending1 yearHTTPexperiment_sso_We66KzusSk2Bj1m-qP-W_AEnvatoPending1 yearHTTPreferring_clientEnvatoPendingSessionHTTPobject(quot;#-#-#T#:#:#.#Zquot;)assets.mixkit.coHolds the users timezone.PersistentHTMLt3Dassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtADeassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtADuassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtAEassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtCassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtMQassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtPLassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtTDeassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtTDuassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtTEassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTMLtTfassets.mixkit.coThis cookie is part of a bundle of cookies which serve the purpose of content delivery and presentation. The cookies keep the correct state of font, blog/picture sliders, color themes and other website settings.PersistentHTML__cf_bm [x10]Envato Codepen MediaFire Pexels ReportURI VimeoThis cookie is used to distinguish between humans and bots. This is beneficial for the website, in order to make valid reports on the use of their website.1 dayHTTP__cfduid [x2]EnvatoExternal cookie from Typeform for Author Feedback Pilot30 daysHTTP_loading_bay_backendEnvatoPendingSessionHTTPAWSALB [x2]EnvatoRegisters which server-cluster is serving the visitor. This is used in context with load balancing, in order to optimize user experience. 7 daysHTTPAWSALBCORS [x2]EnvatoRegisters which server-cluster is serving the visitor. This is used in context with load balancing, in order to optimize user experience. 7 daysHTTPBT_AA_DETECTIONcdn.fuseplatform.netUsed to determine if the visitor should be presented to popup-advertisement content on the website. This also allows the website to detect if an adblocker is present in the visitor’s browser. PersistentHTMLBT_sidcdn.fuseplatform.netUsed to determine if the visitor should be presented to popup-advertisement content on the website. This also allows the website to detect if an adblocker is present in the visitor’s browser. SessionHTMLamp-story-statecdn.ampproject.orgThis cookie is used in conjunction with visual content. The cookie is necessary for the full-screen function; remembers whether the user has chosen the full-screen view. PersistentHTMLakacd_#cdn.fuseplatform.netUsed in connection with phased release which allows the website owner to assign a certain number of users to a specific version of the website.30 daysHTTP__cfruid [x5]Codepen Envato ZendeskThis cookie is a part of the services provided by Cloudflare - Including load-balancing, deliverance of website content and serving DNS connection for website operators. SessionHTTPcf_chl_1 [x2]Envato photodune.netThis cookie is a part of the services provided by Cloudflare - Including load-balancing, deliverance of website content and serving DNS connection for website operators. 1 dayHTTPcf_chl_rc_mEnvatoThis cookie is a part of the services provided by Cloudflare - Including load-balancing, deliverance of website content and serving DNS connection for website operators. 1 dayHTTPcf_clearanceCodepenThis cookie is used to distinguish between humans and bots. 1 yearHTTPoptoutcdn.fuseplatform.netIdentifies if the visitor has deselected any cookies, trackers or other audience targeting tools.SessionHTTPcidCrimtanThis cookie is necessary for making credit card transactions on the website. The service is provided by Stripe.com which allows online transactions without storing any credit card information.1 yearHTTPtest_cookieGoogleUsed to check if the user's browser supports cookies.1 dayHTTP__cfwaitingroomEnvatoCloudflare Waiting Room cookie https://developers.cloudflare.com/waiting-room/reference/waiting-room-cookie/1 dayHTTP_elements_session_4 [x2]EnvatoPending14 daysHTTPcdn.envato.600350.ka.ckEnvatoUsed by the Kount Client SDK for fraud detection1 yearHTTPcouponCodeEnvatoCoupons of different types. Part of Elements' core functionality.1 dayHTTPelementor [x2]EnvatoUsed in context with the website's WordPress theme. The cookie allows the website owner to implement or change the website's content in real-time.PersistentHTMLelements.session.5EnvatoPending14 daysHTTPenvato_client_idEnvatoPer-browser identifier for reliably identifying our users1 yearHTTPGO_EXP_STOREFRONT [x2]EnvatoPending1 yearHTTPreferralCodeEnvatoUsed to apply a referral code discount to the user when subscribing1 dayHTTPskipSubscribedTutsLandingPageEnvatoskipSubscribedTutsLandingPagePersistantHTML_csrfEnvatoEnsures visitor browsing-security by preventing cross-site request forgery. This cookie is essential for the security of the website and visitor. SessionHTTP_elements_session_2EnvatoPending14 daysHTTP_ce.cch [x2]CrazyeggStores the user's cookie consent state for the current domainSessionHTTP_csrf_3EnvatoCross-site request forgery protection.1 yearHTTPrc::ecdn.fuseplatform.netThis cookie is used to distinguish between humans and bots. SessionHTMLrc::aGoogleThis cookie is used to distinguish between humans and bots. This is beneficial for the website, in order to make valid reports on the use of their website.PersistentHTMLrc::cGoogleThis cookie is used to distinguish between humans and bots. SessionHTMLcsrftokenJsfiddle.netHelps prevent Cross-Site Request Forgery (CSRF) attacks.SessionHTTPli_gcLinkedInStores the user's cookie consent state for the current domain180 daysHTTP-test-amp-cookie-tmpcdn.ampproject.orgImproves website speed and implements content through a Content Delivery Network (CDN). SessionHTTP_session_idEnvatoEncrypted session cookie used for storing session information about the signed in user.SessionHTTPJSESSIONID [x2]New Relic LinkedInPreserves users states across page requests.SessionHTTPcf_chl_rc_niphotodune.netThis cookie is a part of the services provided by Cloudflare - Including load-balancing, deliverance of website content and serving DNS connection for website operators. 1 dayHTTPis_eu [x2]Envato PinterestDetermines whether the user is located within the EU and therefore is subject to EU's data privacy regulations. SessionHTMLce_successful_csp_checkEnvatoDetects whether user behaviour tracking should be active on the website. PersistentHTMLsc_anonymous_idwidget.sndcdn.comUsed in context with the 3D-view-function on the website.10 yearsHTTPkssl.kaptcha.comUsed by the Kount Client SDK for fraud detection3 monthsHTTPbscookieLinkedInPending1 yearHTTPCONSENTYouTubeUsed to detect if the visitor has accepted the marketing category in the cookie banner. This cookie is necessary for GDPR-compliance of the website. 2 yearsHTTP These cookies enable storage of information that changes the way a website behaves or looks, like settings for your region. NameProviderPurposeExpiryTypeintercom.intercom-state [x2]Envato IntercomStores a unique ID string for each chat-box session. This allows the website-support to see previous issues and reconnect with the previous supporter. PersistentHTMLloglevelEnvatoMaintains settings and outputs when using the Developer Tools Console on current session.PersistentHTMLwistia-video-progress-#EnvatoContains a timestamp for the website’s video-content. This allows the user to resume watching without having to start over, if the user leaves the video or website. PersistentHTML_gaexp [x9]3docean.net Envato photodune.netThis cookie is used by Google Analytics to determine if the visitor is involved in their marketing experiments.3 monthsHTTPexperiment_sso_checkout_QGTPYplFSNKDWPaRK0AOvw [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_ 2uQbUpixSB6HaVirs1080w [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_1X7vcdkATjqR60bYrm8Xsw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_2M3oM6GyShW2TmELAaDKdA [x8]3docean.net Envato photodune.netUsed with GA to track enrolment in the shopfront/storefront AB experiment for CodeCanyon. Not set at any point if preferences consent denied.1 yearHTTPmarket_experiment_38IZ2heHTeyVuJ9OGcqDnA [x7]3docean.net Envato photodune.netHeader text experiment1 yearHTTPmarket_experiment_44zEXpiVShq0pa6a_HMiVw [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_5DJcaJ-6QP2bUJ285_HCTw [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_8Fu4552AS8S1IpdMaxRr-A [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_9Irjwd__Qwa_N_dELWaGWA [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_AP3oIpP7TnCgJexMe43gVg [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_B6viUdYvSfS2gz5PUIKZiQ [x7]3docean.net Envato photodune.netUsed with GA to track enrolment in the shopfront/storefront AB experiment for AudioJungle. Not set at any point if preferences consent denied.1 yearHTTPmarket_experiment_b7f0mb3aT9SdyT6MdtRdJg [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_BywMU63lQI-pjhgnfw3zyw [x7]3docean.net Envato photodune.netHeader images experiment1 yearHTTPmarket_experiment_CFc_-ZX6SLafi8mKCFq0tw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_dyIFoouwRqWNUpsk-1AWLw [x5]3docean.net EnvatoPending1 yearHTTPmarket_experiment_fc6Qpq5nTHSPiz5qybAm7A [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_gKIzsB-zQ_CEXG-jI-AyGQ [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_ha2WWrPVRYOHNm6-HvDILg [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_HO9IAF5eT6qIBX5yj5Rctw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_i9KnqrjeTAC7wAu0Af8mUw [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_Kqvn1nNfSJy7-Zn_kp7cRA [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_kTo_3UzPQOCyiNTuzEkYSA [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_m02PoCmSQomAwvwMCPZkgQ [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_MAQHi6cdSBO4n4x5qBV8Zg [x6]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_mu3j-0RiRnaEjeh0_ldH4w [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_n2Thp-xEQhqTfWmMazX7ag [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_NPGcpullQtWWrbR0RhFz3w [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_nvLSKFZ4R-Gxwbwjn6pSYw [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_Pcah_VyEQMSbvSNpflFw3Q [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_PTee2bbJRyWJerGEspYR6Q [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_Q4KMAh3BQ4qNUNsdMXdprg [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_TvPPm25WRqO8mCbR18jDkw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_UNQrZ-LRRISw-Fnpc0xG9A [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_uo9J0ilESF2CQmAci_acRQ [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_Vv3kpgVASu-X4xA3ZHeZcw [x8]3docean.net Envato photodune.netUsed with GA to track enrolment in the shopfront/storefront AB experiment for ThemeForest. Not set at any point if preferences consent denied.1 yearHTTPmarket_experiment_W95nQqPDS_SDt8R4WNHTSw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_w9XbskG0TTyfmOLUwwnhFQ [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_Wkp3qNpZQ1axe18WVz9REw [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_X2TCRi_8QkWQn0IOKLJYUw [x8]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_XG-yGCFBT7GfsMNCiSaLRA [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiment_xpUgFxF1T3C-LTGkoYd3zQ [x7]3docean.net Envato photodune.netPending1 yearHTTPmarket_experiment_ZxxtjOzCTy2PfJXMQFaJxQ [x7]3docean.net Envato photodune.netPending3 monthsHTTPmarket_experiments [x8]3docean.net Envato photodune.netPending1 yearHTTPmk_ex [x8]3docean.net Envato photodune.net assets.market-storefront.envato-static.comPending1 yearHTTPCookieConsentBulkSetting-# [x3]CookiebotEnables cookie consent across multiple websites1 yearHTMLfeedback_survey_complete [x5]EnvatoIndicates feedback survey has been completed1 yearHTTPmarket_experiment_csat_survey [x5]EnvatoExperiment to enrol into CSAT survey1 yearHTTPmarket_experiment_kKmVKGGGR4iNXSkvMQyY1QEnvatoPending3 monthsHTTPmarket_experiment_PSyailxsRRm-sLeR-OFg3A [x2]EnvatoPending3 monthsHTTPmarket_experiment_StsxY9gOS2KNGFztmIxtuA [x5]EnvatoPending3 monthsHTTPmarket_experiment_TgTNWsiYTvGLI0COC-6iqQEnvatoPending3 monthsHTTPmarket_experiment_XOixeHxES7qQUc7zSKYc_w [x7]Envato photodune.netPending1 yearHTTPmarket_experiment_ygcGsJeWRjeNBiLhQb1VQA [x5]EnvatoCategory page cart button colour test3 monthsHTTPpage_view_count [x5]Envato assets.market-storefront.envato-static.comNumber of pages viewed on marketplace1 yearHTTPbtUserCountrycdn.fuseplatform.netThis cookie is used to determine what country the visitor comes from - This allows the website to set the language accordingly, if possible. The information can be determined through the visitor’s IP-address. PersistentHTMLmarket_experiment_5p9h_BDAROmGAQYmmamDewEnvatoPending3 monthsHTTPmarket_experiment_Dsf-v35pQFKNq1DNy6nywwEnvatoPending3 monthsHTTPmarket_experiment_eCQGElkrSVqkXjHjD14dBg [x3]EnvatoPending1 yearHTTPassisted-search-notificationEnvatoStores if a user has seen and dismissed the assisted search notificationPersistantHTMLassisted-search-surveyEnvatoStores the if the user has dismissed the survey notification.PersistantHTMLassisted-search-view-countEnvatoStores the number of times a user has done a search with Assisted search.PersistantHTMLcoupon-notificationEnvatoCoupon notificationPersistantHTMLdavinci-resolve-notificationEnvatoDaVinci Resolve toast notificationPersistantHTMLg_stateEnvatoStores the users preference for hiding the "Google One Tap" prompt and ensuring it doesn't show up again6 monthsHTTPmarketing-permissions-banner-notificationEnvato Stores if the user has previously dismissed the Marketing Permissions Banner Notification in Elements.PersistantHTMLnew-feature-tooltip-similar-itemsEnvatoStores if a user has seen a new feature on elements in the new features tooltip.PersistantHTMLpost-download-modalEnvatoStores how many times the users has been displayed the modal. After 3 times, the modal will no longer showPersistantHTMLsimilar-items-modal-dismissalEnvatoStores if a user wishes to never see the post download cross-category similar item recommendations modal.PersistantHTMLsurvey-exposure-rateEnvatoStores the exposure rate of user for surveys. This rate will be compared with the required exposure rate to decide whether to show surveys to the user.PersistantHTMLuniversal-survey-notificationEnvatoStores if the user has previously dismissed any survey modal in elements3 monthsHTTPintercom-device-id-#IntercomSets a specific ID for the user which ensures the integrity of the website’s chat function. 270 daysHTTPintercom-session-#IntercomSets a specific ID for the user which ensures the integrity of the website’s chat function. 7 daysHTTPpreferredLanguageExpEnvatoLanguage preference for the 'Language redirect and notification experiment'10 yearsHTTPpreferredLanguageExp2EnvatoLanguage preference for the 'Language redirect and notification experiment - take 3'10 yearsHTTPpreferredLanguageNotificationExpEnvatoTracks dismissal of PreferredLanguageNotification for 'Language redirect and notification experiment'PersistantHTMLpreferredLanguageNotificationExp2EnvatoTracks dismissal of PreferredLanguageNotification for 'Language redirect and notification experiment - take 3'PersistantHTMLmarket_experiment_goEF7M94S12cAEcozNNhdgEnvatoPending3 monthsHTTPmarket_experiment_IUzmtORZSpuIN_OtC6n4VgEnvatoPending3 monthsHTTPmarket_experiment_-nbomKMpRo-o422kNe1jpgEnvatoPending3 monthsHTTPmarket_experiment_R1YcrvqFQkG55nxVj6cBcAEnvatoPending3 monthsHTTPassets.tutsplus.com/images/hub/avatar_default.pngWordpressPendingSessionPixellangLinkedInNecessary for maintaining language-settings across subpages on the website.SessionHTTPlidcLinkedInRegisters which server-cluster is serving the visitor. This is used in context with load balancing, in order to optimize user experience. 1 dayHTTPmarket_experiment_3OCY0fMhTFeSAabXBLxsxgEnvatoPending1 yearHTTPmarket_experiment_koBLGCg_Sl2MqWHFOmoEjAEnvatoPending1 yearHTTPmarket_experiment_ocgmjb_bSeWrsHqjW6KPYAEnvatoPending1 yearHTTPbrowser_supportSketchfabUsed in context with the 3D-view-function on the website. Collects data on user interaction with the service for statistical purposes. PersistentHTMLsb_csrftokenSketchfabEnsures visitor browsing-security by preventing cross-site request forgery. This cookie is essential for the security of the website and visitor. 1 yearHTTPuserEventsSketchfabPendingPersistentHTMLmarket_experiment_0gpMpN7mQiaiGrxe0BiMEgEnvatoPending1 yearHTTPmarket_experiment_BkkvtMQPQP2alGvi8MQrDAEnvatoPending3 monthsHTTPmarket_experiment_GjGUxbSFRrCPOvQ9sQUSfwEnvatoPending3 monthsHTTPmarket_experiment_kT4ZPZugQPSUM-qZH6fqhwEnvatoPending3 monthsHTTPmarket_experiment_tDmLiaB-RACY6uDAIrm2aQEnvatoPending3 monthsHTTPmarket_experiment_W19Qql2yS0-11u9fOpSAQwEnvatoPending3 monthsHTTPmarket_experiment_9gin9gdXT760e-DSzajNPQEnvatoPending3 monthsHTTPmarket_experiment_neL6UBl6QM-075iakKCxUAEnvatoPending3 monthsHTTPmarket_experiment_ofiarUu8RbqYFuRwmfb7zQEnvatoPending3 monthsHTTPmarket_experiment_whz7LWAXRE2MLh7mYT-aZwEnvatoPending3 monthsHTTPli_alertsLinkedInUsed to determine when and where certain pop-ups on the website should be presented for the user and remember whether the user has closed these, to keep them from showing multiple times.1 yearHTTP Statistics cookies help us to understand how visitors interact with our websites by collecting and reporting information. NameProviderPurposeExpiryTypewistiaEnvatoUsed by the website to track the visitor's use of video-content - The cookie roots from Wistia, which provides video-software to websites.PersistentHTML_clck [x3]3docean.net MicrosoftCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.1 yearHTTP_clsk [x3]3docean.net MicrosoftRegisters statistical data on users' behaviour on the website. Used for internal analytics by the website operator. 1 yearHTTP_dd_s [x9]assets.market-storefront.envato-static.com Envato www.datadoghq-browser-agent.comRegisters the website's speed and performance. This function can be used in context with statistics and load-balancing.1 dayHTTP_ga [x11]GoogleRegisters a unique ID that is used to generate statistical data on how the visitor uses the website.2 yearsHTTP_ga_# [x10]GoogleUsed by Google Analytics to collect data on the number of times a user has visited the website as well as dates for the first and most recent visit. 2 yearsHTTP_gat [x11]GoogleUsed by Google Analytics to throttle request rate1 dayHTTP_gid [x11]GoogleRegisters a unique ID that is used to generate statistical data on how the visitor uses the website.1 dayHTTPANONCHK [x2]3docean.net MicrosoftRegisters data on visitors from multiple visits and on multiple websites. This information is used to measure the efficiency of advertisement on websites. 1 yearHTTPCLID [x2]3docean.net MicrosoftCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.1 yearHTTPdd_cookie_test_# [x9]assets.market-storefront.envato-static.com Envato www.datadoghq-browser-agent.comRegisters data on visitors' website-behaviour. This is used for internal analysis and website optimization. 1 dayHTTPga:clientId [x10]3docean.net Envato photodune.net public-assets.envato-static.com GoogleRegisters statistical data on users' behaviour on the website. Used for internal analytics by the website operator. PersistentHTMLMR [x3]3docean.net MicrosoftPending1 yearHTTPMUID [x3]3docean.net MicrosoftUsed widely by Microsoft as a unique user ID. The cookie enables user tracking by synchronising the ID across many Microsoft domains.1 yearHTTPSM [x2]3docean.net MicrosoftRegisters a unique ID that identifies the user's device during return visits across websites that use the same ad network. The ID is used to allow targeted ads.1 yearHTTPthreedocean-search-page-views3docean.netPendingPersistentHTMLsigned_out [x2]EnvatoTo let the Cloudflare worker know if a user is signed out for our caching experiment.1 yearHTTPpx.gifcdn.fuseplatform.netThis cookie is used to determine if the visitor has any adblocker software in their browser – this information can be used to make website content inaccessible to visitors if the website is financed with third-party advertisement.SessionPixelaj-category-survey-banner-visibilityEnvatoPendingPersistentHTMLaudiojungle-category-page-viewsEnvatoPendingPersistentHTMLaudiojungle-search-page-viewsEnvatoPendingPersistentHTMLc.gifMicrosoftCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.SessionPixelcc-category-survey-banner-visibilityEnvatoPendingPersistentHTMLcodecanyon-category-page-viewsEnvatoPendingPersistentHTMLcodecanyon-search-page-viewsEnvatoPendingPersistentHTMLga_#CrimtanRegisters a unique ID that is used to generate statistical data on how the visitor uses the website.1 yearHTTPcacheEnvatoCookie is part of the Cloudflare cache key for our caching experiment.1 yearHTTPdpuid [x2]EnvatoPending14 daysHTTPgetFeedback-1dVvcfp3EnvatoGetFeedback survey notification.PersistantHTMLGO_EXP [x2]EnvatoStores all experiment enrolments1 yearHTTPGO_EXP_ Yz4GeY0aQ06OwQXEUJAoZgEnvatoSets play button in loading state if player is not ready to play an audio1 yearHTTPGO_EXP_# [x2]EnvatoPending1 yearHTTPGO_EXP_1c9eH2OaQuq4hnt_ecpRxEnvatoCross promoting similar items on Elements Shopfront1 yearHTTPGO_EXP_76liOvyQC-VRfAGRGlTKwEnvatoCoupon notification experiment1 yearHTTPGO_EXP_pgSplitEnvatopaid growth google ads experiment1 yearHTTPoriginal_landing_page_url [x2]EnvatoPending1 yearHTTPsearch_survey_M2oE8KuYEnvatoElements Storefront search survey popupPersistantHTMLsearch_view_count [x2]EnvatoElements Storefront search view countPersistantHTMLsegmentation_survey_SV_cxaJsu0tQ6LgRpkEnvatoPendingPersistantHTMLvariablePricingExpEnvatoVariable pricing experiment1 yearHTTPwirewax-player-impressionsWirewaxCollects data on visitor interaction with the website's video-content. This data is used to make the website's video-content more relevant towards the visitor. PersistentHTML_ce.clock_data [x2]CrazyeggCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.1 dayHTTP_ce.clock_event [x2]CrazyeggCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.1 dayHTTP_ce.s [x2]CrazyeggCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.1 yearHTTPajs_anonymous_idEnvatoSegment cookie for 2019 CDP trial1 yearHTTPajs_group_idEnvatoSegment cookie for 2019 CDP trial1 yearHTTPajs_user_idEnvatoSegment cookie for 2019 CDP trial1 yearHTTPcebs [x2]CrazyeggTracks the individual sessions on the website, allowing the website to compile statistical data from multiple visits. This data can also be used to create leads for marketing purposes.SessionHTTPcebsp_ [x2]CrazyeggCollects data on the user’s navigation and behavior on the website. This is used to compile statistical reports and heatmaps for the website owner.SessionHTTPGO_EXP_controlEnvatoPending1 yearHTTPGO_EXP_removeoptimizeEnvatoA test experiment to determine whether we can run experiments on Elements without Google Optimize1 yearHTTPsearchExperimentsEnvatoPrevious search count for search experiments survey1 yearHTTPapc_local_idAppcuesUsed in context with the VR-content on website. Collects data on who, what and when the content has been viewed for statistical purposes. PersistentHTMLapc_userAppcuesUsed in context with the VR-content on website. Collects data on who, what and when the content has been viewed for statistical purposes. SessionHTML__utm.gifGoogleGoogle Analytics Tracking Code that logs details about the visitor's browser and computer.SessionPixelcollectGoogleUsed to send data to Google Analytics about the visitor's device and behavior. Tracks the visitor across devices and marketing channels.SessionPixelgraphicriver-category-page-viewsEnvatoPendingPersistentHTMLgraphicriver-search-page-viewsEnvatoPendingPersistentHTMLgr-category-survey-banner-visibilityEnvatoPendingPersistentHTML_ga_GTM-W2K8MM8mixkit.coPending1 yearHTTP_ga_GTM-WVRS4FRmixkit.coPending1 yearHTTPalgolia-clicksmixkit.coStores which items the user clicks on in search results.PersistantHTMLalgolia-user-idmixkit.coStores the user token for search analytics and personalisation6 monthsHTTPalgolia-user-tokenmixkit.coStores the user token for search analytics and personalisation6 monthsHTTPphotodune-search-page-viewsphotodune.netPendingPersistentHTMLdQuantcastCollects anonymous data on the user's visits to the website, such as the number of visits, average time spent on the website and what pages have been loaded with the purpose of generating reports for optimising the website content.3 monthsHTTPcetabidEnvatoSets a unique ID for the session. This allows the website to obtain data on visitor behaviour for statistical purposes.SessionHTMLbrowser_idLinkedinUsed to recognise the visitor's browser upon reentry on the website.5 yearsHTTP_ce.gtld [x2]CrazyeggHolds which URL should be presented to the visitor when visiting the site. SessionHTTPtf-category-survey-banner-visibilityEnvatoPendingPersistentHTMLthemeforest-category-page-viewsEnvatoPendingPersistentHTMLthemeforest-search-page-viewsEnvatoPendingPersistentHTML_hjAbsoluteSessionInProgressHotjarThis cookie is used to count how many times a website has been visited by different visitors - this is done by assigning the visitor an ID, so the visitor does not get registered twice.1 dayHTTP_hjFirstSeenHotjarThis cookie is used to determine if the visitor has visited the website before, or if it is a new visitor on the website.1 dayHTTP_hjIncludedInSessionSample_#HotjarCollects statistics on the visitor's visits to the website, such as the number of visits, average time spent on the website and what pages have been read.1 dayHTTP_hjSession_#HotjarCollects statistics on the visitor's visits to the website, such as the number of visits, average time spent on the website and what pages have been read.1 dayHTTP_hjSessionUser_#HotjarCollects statistics on the visitor's visits to the website, such as the number of visits, average time spent on the website and what pages have been read.1 yearHTTP_hjTLDTestHotjarRegisters statistical data on users' behaviour on the website. Used for internal analytics by the website operator. SessionHTTPlotame_domain_checkLotameContains an visitor ID. This is used to identify the visitor upon re-entry to the website.1 dayHTTPvh-category-survey-banner-visibilityEnvatoPendingPersistentHTMLvideohive-category-page-viewsEnvatoPendingPersistentHTMLvideohive-search-page-viewsEnvatoPendingPersistentHTMLvuidVimeoCollects data on the user's visits to the website, such as which pages have been read.2 yearsHTTP_cltkMicrosoftRegisters statistical data on users' behaviour on the website. Used for internal analytics by the website operator. SessionHTMLtdGoogleRegisters statistical data on users' behaviour on the website. Used for internal analytics by the website operator. SessionPixel Marketing cookies are used for tracking browsing activity and to customise and display ads that are relevant and engaging. NameProviderPurposeExpiryTypeyt.innertube::nextId [x2]Envato YouTubeRegisters a unique ID to keep statistics of what videos from YouTube the user has seen.PersistentHTMLyt.innertube::requests [x2]Envato YouTubeRegisters a unique ID to keep statistics of what videos from YouTube the user has seen.PersistentHTML_gcl_au [x9]GoogleUsed by Google AdSense for experimenting with advertisement efficiency across websites using their services. 3 monthsHTTP_pin_unauth [x8]PinterestUsed by Pinterest to track the usage of services.1 yearHTTP_uetsid [x8]MicrosoftCollects data on visitor behaviour from multiple websites, in order to present more relevant advertisement - This also allows the website to limit the number of times that they are shown the same advertisement. 1 dayHTTP_uetvid [x8]MicrosoftUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. 1 yearHTTPmarketplace_banners [x7]3docean.net Envato photodune.net assets.market-storefront.envato-static.comPending2 monthsHTTPtluidTripleliftThis cookie is used to identify the visitor and optimize ad-relevance by collecting visitor data from multiple websites – this exchange of visitor data is normally provided by a third-party data-center or ad-exchange.3 monthsHTTPCAdformUsed to check if the user's browser supports cookies.1 monthHTTPuid [x3]Adform Criteo AmobeeRegisters a unique user ID that recognises the user's browser when visiting websites that use the same ad network. The purpose is to optimise display of ads based on the user's movements and various ad providers' bids for displaying user ads.2 monthsHTTPUserID1Adition TechnologiesThis cookie is used to collect information on a visitor. This information will become an ID string with information on a specific visitor – ID information strings can be used to target groups with similar preferences, or can be used by third-party domains or ad-exchanges.3 monthsHTTP_tracker [x2]Travel AudienceSets a unique ID for the visitor, that allows third party advertisers to target the visitor with relevant advertisement. This pairing service is provided by third party advertisement hubs, which facilitates real-time bidding for advertisers.13 monthsHTTPrp.gifEnvatoNecessary for the implementation of the Reddit.com's share-button function.SessionPixeltt_appInfoEnvatoUsed by the social networking service, TikTok, for tracking the use of embedded services.SessionHTMLtt_pixel_session_indexEnvatoUsed by the social networking service, TikTok, for tracking the use of embedded services.SessionHTMLtt_sessionIdEnvatoUsed by the social networking service, TikTok, for tracking the use of embedded services.SessionHTMLpageViewsEnvatoImplements pop-up advertisement on the website. SessionHTMLubvtEnvatoExternal cookie from Typeform for Author Feedback Pilot3 daysHTTP_uetsid [x2]Envato MicrosoftUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. PersistentHTML_uetsid_exp [x2]Envato MicrosoftContains the expiry-date for the cookie with corresponding name. PersistentHTML_uetvid [x2]Envato MicrosoftUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. PersistentHTML_uetvid_exp [x2]Envato MicrosoftContains the expiry-date for the cookie with corresponding name. PersistentHTMLSRM_BMicrosoftTracks the user’s interaction with the website’s search-bar-function. This data can be used to present the user with relevant products or services. 1 yearHTTPbBlismedia.comCollects statistical data related to the user's website visits, such as the number of visits, average time spent on the website and what pages have been loaded. The purpose is to segment the website's users according to factors such as demographics and geographical location, in order to enable media and marketing agencies to structure and understand their target groups to enable customised online advertising.1 yearHTTPcto_pub_test_tld [x11]CriteoUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. SessionHTTPcto_writeable [x11]CriteoThis cookie is set by the audience manager of a website in order to determine if any additional third-party cookies can be set in the visitor’s browser – third-party cookies are used to gather information or track visitor behavior on multiple websites. Third-party cookies are set by a third-party website or company.SessionHTTPGoogleAdServingTest [x11]GoogleUsed to register what ads have been displayed to the user.SessionHTTPmsToken [x2]byteoversea.com TiktokCollects information on user behaviour on multiple websites. This information is used in order to optimize the relevance of advertisement on the website.10 daysHTTPCMIDCasale MediaCollects visitor data related to the user's visits to the website, such as the number of visits, average time spent on the website and what pages have been loaded, with the purpose of displaying targeted ads.1 yearHTTPCMPROCasale MediaCollects data on visitor behaviour from multiple websites, in order to present more relevant advertisement - This also allows the website to limit the number of times that they are shown the same advertisement. 3 monthsHTTPCMPSCasale MediaCollects visitor data related to the user's visits to the website, such as the number of visits, average time spent on the website and what pages have been loaded, with the purpose of displaying targeted ads.3 monthsHTTPcp_sessionCodepenRegisters user behaviour and navigation on the website, and any interaction with active campaigns. This is used for optimizing advertisement and for efficient retargeting. 30 daysHTTPcid_#CrimtanCollects unidentifiable data that is sent to an unidentifiable source. The source's identity is kept secret by the company, Whois Privacy Protection Service, Inc.1 yearHTTP_GESPSK-crwdcntrl.netcdn.fuseplatform.netThis cookie registers data on the visitor. The information is used to optimize advertisement relevance. PersistentHTML_GESPSK-esp.criteo.comcdn.fuseplatform.netCollects data on user behaviour and interaction in order to optimize the website and make advertisement on the website more relevant. PersistentHTMLAPCGooglePending180 daysHTTPDSIDGoogleUsed by Google DoubleClick for re-targeting, optimisation, reporting and attribution of online adverts.1 dayHTTPIDEGoogleUsed by Google DoubleClick to register and report the website user's actions after viewing or clicking one of the advertiser's ads with the purpose of measuring the efficacy of an ad and to present targeted ads to the user.1 yearHTTPpagead/landing [x2]GoogleCollects data on visitor behaviour from multiple websites, in order to present more relevant advertisement - This also allows the website to limit the number of times that they are shown the same advertisement. SessionPixelpcs/viewcdn.fuseplatform.netUsed by DoubleClick to determine whether website advertisement has been properly displayed - This is done to make their marketing efforts more efficient. SessionPixelperformed-survey-criteria-actionEnvatoElements Storefront guest user survey popupPersistantHTMLsite-entered-atEnvatoElements Storefront guest user survey popupPersistantHTMLuser-has-seen-guest-surveyEnvatoElements Storefront guest user survey popupPersistantHTMLwirewax-userWirewaxUsed by Vimeo to track usage of their embedded video player.PersistentHTML_fbp [x2] Meta Platforms, Inc.Used by Facebook to deliver a series of advertisement products such as real time bidding from third party advertisers.3 monthsHTTP_rdt_uuidRedditUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. 3 monthsHTTPfree_account_first_visit_dashboardEnvatoTracks if a free user has seen the dashboard before1 yearHTTPads/ga-audiencesGoogleUsed by Google AdWords to re-engage visitors that are likely to convert to customers based on the visitor's online behaviour across websites.SessionPixelpagead/1p-user-list/#GoogleTracks if the user has shown interest in specific products or events across multiple websites and detects how the user navigates between sites. This is used for measurement of advertisement efforts and facilitates payment of referral-fees between websites.SessionPixelrc::hcdn.fuseplatform.netPendingPersistentHTMLar_debug [x2]Google PinterestPending3 monthsHTTPpagead/gen_204cdn.fuseplatform.netCollects data on visitor behaviour from multiple websites, in order to present more relevant advertisement - This also allows the website to limit the number of times that they are shown the same advertisement. SessionPixelpcs/activeviewGoogleUsed by DoubleClick to determine whether website advertisement has been properly displayed - This is done to make their marketing efforts more efficient. SessionPixelljt_readerSovrnCollects data related to reader interests, context, demographics and other information on behalf of the Lijit platform with the purpose of finding interested users on websites with related content.1 yearHTTPbcookieLinkedInUsed by the social networking service, LinkedIn, for tracking the use of embedded services.1 yearHTTPviewer_tokenLoopMeUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. 3 monthsHTTPelements-toast-banner-dismissalmixkit.coPendingPersistantHTMLresearch-interview-oct-2022-dismissedmixkit.coPendingPersistantHTMLresearch-interview-oct-2022-historymixkit.coPendingPersistantHTMLsegmentation-survey-toast-banner-dismissalmixkit.coPendingPersistantHTML_pinterest_ct_uaPinterestUsed by Pinterest to track the usage of services.1 yearHTTPv3PinterestUsed by Pinterest to track the usage of services.SessionPixelv3/PinterestUsed by Pinterest to track the usage of services.SessionPixelKADUSERCOOKIEPubMaticRegisters a unique ID that identifies the user's device during return visits across websites that use the same ad network. The ID is used to allow targeted ads.1 yearHTTPKTPCACOOKIEPubMaticRegisters a unique ID that identifies the user's device during return visits across websites that use the same ad network. The ID is used to allow targeted ads.1 dayHTTPmcQuantcastCollects data on the user's visits to the website, such as what pages have been loaded. The registered data is used for targeted ads.13 monthsHTTP__tea_cache_first_#sf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTML__tea_cache_tokens_#sf16-website-login.neutral.ttwstatic.comPendingPersistentHTML__tea_sdk_ab_version_#sf16-website-login.neutral.ttwstatic.comCollects data on visitors' preferences and behaviour on the website - This information is used make content and advertisement more relevant to the specific visitor. PersistentHTML__tea_session_id_#sf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.SessionHTMLHYBRID_SLARDAR_WEBtiktok_pns_web_runtimesf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTMLPUMBAA_FREQsf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTMLSLARDARtiktok_web_embedsf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTMLSLARDARwebmssdk [x2]sf16-website-login.neutral.ttwstatic.com EnvatoUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTMLxmsisf16-website-login.neutral.ttwstatic.comUsed by the social networking service, TikTok, for tracking the use of embedded services.PersistentHTMLsuidSimpli.fiCollects information on user preferences and/or interaction with web-campaign content - This is used on CRM-campaign-platform used by website owners for promoting events or products.1 yearHTTPcto_bundlecdn.fuseplatform.netPresents the user with relevant content and advertisement. The service is provided by third-party advertisement hubs, which facilitate real-time bidding for advertisers.PersistentHTML_ttpTiktokUsed by the social networking service, TikTok, for tracking the use of embedded services.1 yearHTTPttwidTiktokUsed by the social networking service, TikTok, for tracking the use of embedded services.1 yearHTTPANON_IDExponentialCollects data on user visits to the website, such as what pages have been accessed. The registered data is used to categorise the user's interest and demographic profiles in terms of resales for targeted marketing.3 monthsHTTP__gadsGoogleUsed to register what ads have been displayed to the user.1 yearHTTP__gpiGoogleCollects information on user behaviour on multiple websites. This information is used in order to optimize the relevance of advertisement on the website.1 yearHTTP__tld__SegmentUsed to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences. SessionHTTPcto_bundleCriteoPresents the user with relevant content and advertisement. The service is provided by third-party advertisement hubs, which facilitate real-time bidding for advertisers.1 yearHTTPi/jot/embedsTwitter Inc.Sets a unique ID for the visitor, that allows third party advertisers to target the visitor with relevant advertisement. This pairing service is provided by third party advertisement hubs, which facilitates real-time bidding for advertisers.SessionPixelaws:cognito-identity-ids#IdentityIdsWirewaxPendingPersistentIDBmatchgoogleDataxuRegulates synchronisation of user identification and exchange of user data between various ad services.30 daysHTTPwfivefivecDataxuCollects data on the user's visits to the website, such as what pages have been loaded. The registered data is used for targeted ads.13 monthsHTTPWIDGET::local::assignmentswidget.sndcdn.comUsed by audio-platform SoundCloud to implement, measure and improve their embedded content/service on the website - The collection of data also includes visitors’ interaction with embedded content/service. This can be used for statistics or marketing purposes. PersistentHTML_w_sessionWistiaPending14 daysHTTPauthenticity_tokenWistiaPendingSessionHTTP__tt_embed__mountingTiktokRegisters data on the performance of the website’s embedded video-content. SessionHTML__tt_embed__storage_testTiktokRegisters data on the performance of the website’s embedded video-content. SessionHTMLA3YahooCollects information on user behaviour on multiple websites. This information is used in order to optimize the relevance of advertisement on the website.1 yearHTTPLAST_RESULT_ENTRY_KEYYouTubeUsed to track user’s interaction with embedded content.SessionHTTPLogsDatabaseV2:V#||LogsRequestsStoreYouTubePendingPersistentIDBnextIdYouTubeUsed to track user’s interaction with embedded content.SessionHTTPremote_sidYouTubeNecessary for the implementation and functionality of YouTube video-content on the website. SessionHTTPrequestsYouTubeUsed to track user’s interaction with embedded content.SessionHTTPServiceWorkerLogsDatabase#SWHealthLogYouTubeNecessary for the implementation and functionality of YouTube video-content on the website. PersistentIDBTESTCOOKIESENABLEDYouTubeUsed to track user’s interaction with embedded content.1 dayHTTPVISITOR_INFO1_LIVEYouTubeTries to estimate the users' bandwidth on pages with integrated YouTube videos.180 daysHTTPVISITOR_PRIVACY_METADATAYouTubePending180 daysHTTPYSCYouTubeRegisters a unique ID to keep statistics of what videos from YouTube the user has seen.SessionHTTPytidb::LAST_RESULT_ENTRY_KEYYouTubeUsed to track user’s interaction with embedded content.PersistentHTMLYtIdbMeta#databasesYouTubeUsed to track user’s interaction with embedded content.PersistentIDByt-remote-cast-availableYouTubeStores the user's video player preferences using embedded YouTube videoSessionHTMLyt-remote-cast-installedYouTubeStores the user's video player preferences using embedded YouTube videoSessionHTMLyt-remote-connected-devicesYouTubeStores the user's video player preferences using embedded YouTube videoPersistentHTMLyt-remote-device-idYouTubeStores the user's video player preferences using embedded YouTube videoPersistentHTMLyt-remote-fast-check-periodYouTubeStores the user's video player preferences using embedded YouTube videoSessionHTMLyt-remote-session-appYouTubeStores the user's video player preferences using embedded YouTube videoSessionHTMLyt-remote-session-nameYouTubeStores the user's video player preferences using embedded YouTube videoSessionHTML Unclassified cookies are cookies that we are in the process of classifying, together with the providers of individual cookies. NameProviderPurposeExpiryTypemarket_experiment_%202uQbUpixSB6HaVirs1080w [x7]public-assets.envato-static.comPendingSessionHTTP$MMS_fontWidthMapMicrosoftPendingPersistentHTMLrecent_items_viewedEnvatoPendingPersistentHTMLredirectOnAuthEnvatoPendingSessionHTMLsearch_correlation_idEnvatoPendingSessionHTMLsearch_queryEnvatoPendingSessionHTMLx-csrf-tokenEnvatoPendingPersistentHTMLx-csrf-token-2EnvatoPendingPersistentHTMLdesktopFiltersPanelStateassets.market-storefront.envato-static.comPendingSessionHTMLamp-store:https://#.#cdn.ampproject.orgPendingPersistentHTMLitem_viewedCodepenPending1 dayHTTP@@History/@@scroll|/EnvatoPendingSessionHTMLcs_siftsessionEnvatoPendingSessionHTTP_jsfiddle_sessionJsfiddle.netPendingSessionHTTPukeyMediaFirePending20 yearsHTTP_tuts_sessionEnvatoPending14 daysHTTPnumber(#)widget.sndcdn.comPendingSessionHTML [#IABV2_LABEL_PURPOSES#] [#IABV2_LABEL_FEATURES#] [#IABV2_LABEL_PARTNERS#] [#IABV2_BODY_PURPOSES#] [#IABV2_BODY_FEATURES#] [#IABV2_BODY_PARTNERS#] Cookies, clear gifs and similar technologies (cookies) are used on our sites to personalise content and ads, provide and improve product features and to analyse our traffic on our sites by Envato, our business partners and authors. As a part of our commitment to upholding a high standard of transparency with our users, we’ve created this guide to explain the tracking technologies we use on our sites. What are cookies, clear gifs and similar technologies? Cookies are a small data file sent to your web browser or mobile device that is stored on your browser cache. Clear gifs and pixel trackers are tiny graphics with a unique identifier and are similar in function to cookies, and are used to track the movements of web users between pages and websites. They are embedded invisibly on web pages and are about the size of a single pixel. First party cookies are set by us when you’re visiting one of our sites, and third party cookies are set by a party other than the website you’re visiting. Cookies and similar technologies are used for the following purposes on the Envato sites Strictly Necessary: Strictly necessary cookies help make a website usable by enabling basic functions like page navigation, website security and access to information that requires authentication. Preferences: These cookies enable storage of information that changes the way a website behaves or looks, like settings for your region. Statistics: Statistics cookies help us to understand how visitors interact with our websites by collecting and reporting information. Marketing: Marketing cookies are used for tracking browsing activity and to customise and display ads that are relevant and engaging. Third Parties: Our business partners and authors use cookies for the purposes described above. How to manage your preferences and settings Please keep in mind that your experience may not be as we intended if you change the standard settings. Visitors located in the European Union can select their preferences with the preferences panel, and can change their preferences by clearing their cookies, refreshing the page, and selecting their preferences again. Any interested visitor can learn how to opt out of third party cookies by consulting this page, or learn how to change your browser settings: Firefox Chrome Safari Contact, questions and changes We may make changes to the Cookie Policy from time to time and we will take reasonable steps to let our users know about these changes. You can keep track of changes made by referring to the date below. If you have any questions about our privacy practices, or about how to change your cookie preferences, please contact our privacy champion at privacy.champion@envato.com. You can also write to us at PO Box 16122 Collins Street West Victoria 8007 Australia. Updated 14 June 2019. Your consent applies to the following domains: webdesign.tutsplus.com, photography.tutsplus.com, music.tutsplus.com, gamedevelopment.tutsplus.com, email.tutsplus.com, design.tutsplus.com, crafts.tutsplus.com, computers.tutsplus.com, code.tutsplus.com, cgi.tutsplus.com, business.tutsplus.com, tutsplus.com, secure.elements.envato.com, mixkit.co, beta.author.envato.com, webuild.envato.com, community.envato.com, studio-client.envato.com, studio.envato.com, extensions.envato.com, account.elements.envato.com, elements.envato.com, marketplace.envato.com, videohive.net, themeforest.net, photodune.net, graphicriver.net, codecanyon.net, audiojungle.net, 3docean.net, account.envato.com, mydata.envato.com, quality.market.envato.com, elements-contributors.envato.com, author.envato.com, sites.envato.com Cookie declaration last updated on 05.10.23 by Cookiebot Skip to content * Design Design View all Design Start Learning * Software Software * Adobe Photoshop * Adobe Illustrator * Affinity Designer * Affinity Photo * Affinity Publisher * Adobe InDesign * Procreate * PaintTool SAI * Pixelmator * CorelDRAW * Inkscape * Sketch * Design Space * Drawing/Illustration Drawing/Illustration View all Drawing/Illustration Learn Illustration * Vectors * Digital Painting * Character Design * Pixel Art Learn Drawing * Animals * Drawing Theory * Human Anatomy * Cartoons & Comics popular software in Drawing/Illustration * Adobe Illustrator * Procreate * Graphic Design Graphic Design View all Graphic Design * Techniques & Workflow * Photo Manipulation * Infographics * 3D Design * Print Design * Apparel Design * Logo Design * Icon Design * Packaging Design * Book Design * Branding popular software in Graphic Design * Adobe Photoshop * Adobe Illustrator * Adobe InDesign * Affinity Designer * Typography Typography View all Typography * Fonts * Hand Lettering * Web Typography * Add-Ons Add-Ons View all Add-Ons * Photoshop Actions * Photoshop Brushes * Illustrator Brushes * Layer Styles * Procreate Add-Ons * Overlays & Textures * Photo Effects * Patterns * Text Effects * Graphic Templates Graphic Templates View all Graphic Templates * Album Cover * Book * Brochure * Card & Invite * Business Card * Flyer * Magazine * Menu * Newsletter * Packaging * Poster * Resume & CV * Social Media * Stationery * Theory Theory View all Theory * Art History * Global Influences * Design Trends * Color Theory * Mockups Mockups View all Mockups * Apparel * Banners & Ads * Book * Brochure * Flyer * Devices * Logo * Magazine * Mug * Packaging * Poster * Digital Crafting Digital Crafting View all Digital Crafting * Cricut * Digital Scrapbooking popular software in Design * Adobe Photoshop * Adobe Illustrator * Affinity Designer * Business Business View all Business Start Learning * Software Software * Microsoft PowerPoint * Keynote * Google Slides * Microsoft Word * Microsoft Excel * Microsoft Outlook * Google Docs * Google Sheets * Gmail * Presentations Presentations View all Presentations * Presentation Techniques * Pitch Decks * Public Speaking popular software in Presentations * Microsoft PowerPoint * Keynote * Google Slides * Templates Templates View all Templates * Proposal * Report * Invoice * Resume & CV * Business Card * Brochure * Flyer * Marketing Marketing View all Marketing * Sales * Email Newsletters * Creativity * eCommerce * Social Media * Infographic Templates * Writing * Branding * Finance Finance View all Finance * Funding * Financial Statements * Invoicing popular software in Finance * Microsoft Word * Microsoft Excel * Google Docs * Google Sheets * Management Management View all Management * Productivity * Strategy * Communication * Diversity & Ethics * Startups Startups View all Startups * Entrepreneurship * Business Plans * Microbusiness * Careers Careers View all Careers * Finding a Job * Freelancing * Time Management * Networking * Promotion * Education popular software in Business * Microsoft PowerPoint * Keynote * Google Slides * Photo Photo View all Photo Start Learning * Software Software * Lightroom * Adobe Camera Raw * Capture One * Gemstone * Affinity Photo * Adobe Photoshop * Pixelmator * Photo Mechanic * Equipment Equipment View all Equipment * Cameras & Lenses * Smartphones * Lighting * Tripods & Supports * Filters & Accessories * Photographing Photographing View all Photographing * Exposure * Composition * Light * Types of Photography Types of Photography View all Types of Photography * Social Media * Studio * Portrait * Event * Landscape & Nature * Still Life * Street * Editing & Post-Processing Editing & Post-Processing View all Editing & Post-Processing * Photo Editing * Workflow * Image Correction * Colour * Black & White * Portrait Retouching * Compositing * Printing * Portfolios * Theory Theory View all Theory * History of Photography * Running a Photography Business * Add Ons Add Ons View all Add Ons * Lightroom Presets * LUTs & Filters * Slideshow Templates * Photoshop Actions popular software in Photo * Lightroom * Adobe Camera Raw * Capture One * Video Video View all Video Start Learning * Software Software * Adobe After Effects * Adobe Premiere Pro * Davinci Resolve * Cinema 4D * Blender * Final Cut Pro * Apple Motion * OBS * Camtasia * Screenflow * Kapwing * Runway * Adobe Rush * Equipment Equipment View all Equipment * Cameras & Lenses * Tripods & Supports * Drones & Rigs * Filters & Accessories * Smartphones * Lighting * Audio Equipment * Production & Recording Production & Recording View all Production & Recording * Lighting * Audio * Composition * Screen Recording * Livestreaming * Post-Production Post-Production View all Post-Production * Video Editing * Color Grading * Motion Graphics * Audio * Workflow * Templates & Presets Templates & Presets View all Templates & Presets * Intros & Openers * Titles * Transitions * LUTs & Profiles * Text Effects * Particle Effects * Logo Animations * Slideshows * Presets * Scripts & Plug-ins * Types of Video Types of Video View all Types of Video * Instructional * Documentary * Stock Footage * Animation * YouTube * Social Videos * Music Videos popular software in Video * Adobe After Effects * Adobe Premiere Pro * Davinci Resolve * Web Design Web Design View all Web Design Start Learning * Software Software * Sketch * Figma * Adobe XD * Sublime Text * Visual Studio Code * MailChimp * Webflow * Campaign Monitor * WordPress WordPress View all WordPress * WordPress CMS * WordPress Themes * WordPress Plugins * WordPress Hosting * Elementor * HTML/CSS HTML/CSS View all HTML/CSS * HTML * CSS * JavaScript for Designers * Bootstrap * Animation * HTML Templates * Landing Pages * SVG * Email Email View all Email * Email Design * Email Templates * Email Marketing popular software in Email * Campaign Monitor * MailChimp * UX/UI UX/UI View all UX/UI Learn UI Design * Forms * Icon Design * Navigation * Prototyping * Wireframing * Web Typography * Material Design * Design Theory * Design Systems Learn UX Design * User Research * User Testing * Responsive Design * Usability * Accessibility popular software in UX/UI * Sketch * Figma * Adobe XD * Webflow * SEO SEO View all SEO * Content Strategy * Conversion * Performance * eCommerce eCommerce View all eCommerce * Shopify * WooCommerce * BigCommerce * Magento popular software in Web Design * Sketch * Figma * Adobe XD * Code Code View all Code Start Learning * WordPress WordPress View all WordPress * Plugin Development * Theme Development * HTML/CSS HTML/CSS View all HTML/CSS * HTML * CSS * JavaScript for Designers * Bootstrap * Animation * HTML Templates * Landing Pages * SVG * Mobile Development Mobile Development View all Mobile Development * iOS Development * iOS Templates * Android Development * Android Templates * React Native Development * React Native Templates * Ionic Development * Ionic Templates * Corona * Firebase * Kotlin * JavaScript JavaScript View all JavaScript * React * Vue.js * Node * jQuery * Angular * Web APIs * PHP PHP View all PHP * Laravel * PHP Scripts * CodeIgniter * Yii * Coding Fundamentals Coding Fundamentals View all Coding Fundamentals * OOP * Functional Programming * Databases & SQL * Security * Testing * Workflow * Design Patterns * Rest API * Machine Learning * Authentication * Version Control & Git * Performance * XML * AJAX * Regular Expressions * Tools * Game Development * Terminal and CLI * Python Python View all Python * Django * Ruby Ruby View all Ruby * Ruby on Rails * Cloud & Hosting Cloud & Hosting View all Cloud & Hosting * AWS * Web Servers * Hosting * Scaling * Databases & SQL * Music Music View all Music Start Learning * Software Software * Audacity * Audition * Reaper * Pro Tools * Fairlight * Premiere Pro * Ableton Live * Cubase * Garageband * Logic Pro * Reason * Equipment Equipment View all Equipment * Microphones * Audio Recording Audio Recording View all Audio Recording * Voice Recording * Audio Production Audio Production View all Audio Production * Audio Editing * Podcasting * Sound Design * Music Production * Royalty Free Music * Sound Effects * Music Theory * Instruments Instruments View all Instruments * Guitar * Drums popular software in Music * Audacity * Audition * Reaper -------------------------------------------------------------------------------- * Sign In * Tuts+ YouTube * Envato Elements * Envato Elements * | * Tuts+ YouTube * | * Sign In * * Design * Business * Photo * Video * Web Design * Software * Start Learning * Sketch * Figma * Adobe XD * Sublime Text * Visual Studio Code * MailChimp * Webflow * Campaign Monitor * WordPress * Start Learning * WordPress CMS * WordPress Themes * WordPress Plugins * WordPress Hosting * Elementor All WordPress * HTML/CSS * Start Learning * HTML * CSS * JavaScript for Designers * Bootstrap * Animation * HTML Templates * Landing Pages * SVG All HTML/CSS * Email * Start Learning * Email Design * Email Templates * Email Marketing All Email * popular software * Campaign Monitor * MailChimp * UX/UI * Learn UI Design * Forms * Icon Design * Navigation * Prototyping * Wireframing * Web Typography * Material Design * Design Theory * Design Systems * All UI Design * Learn UX Design * User Research * User Testing * Responsive Design * Usability * Accessibility * All UX Design * popular software * Sketch * Figma * Adobe XD * Webflow * SEO * Start Learning * Content Strategy * Conversion * Performance All SEO * eCommerce * Start Learning * Shopify * WooCommerce * BigCommerce * Magento All eCommerce * Code * Music Advertisement 1. 2. Home 3. Web Design 4. Email 5. Email Design CREATING A FUTURE-PROOF RESPONSIVE EMAIL WITHOUT MEDIA QUERIES Scroll to top Nicole Merlin Last updated Oct 21, 2021 26 likes Read Time: 36 min বাংলা English Español Bahasa Indonesia Italiano Pусский Email Email Design Email Templates What You'll Be Creating Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the <head>, so that even in the worst case scenario of email rendering, your layout will remain intact. IS DEVELOPING HTML EMAIL STILL HARD? HTML email has come a long way in the past ten years (yes, it used to even worse!) but there are still a surprising number of things that can go wrong when coding responsive emails for the inbox. These days, most email apps do a pretty good job of adhering to the latest HTML and CSS standards, but security or other restrictions sometimes mean that services will adjust or strip out key portions of your email’s code, like the all-important <head>, which often contains crucial CSS and media queries. It’s difficult to keep track of every instance where this type of thing occurs, let alone what you need to do to mitigate the effects in each scenario. But what if you could build an email template that was responsive, even in environments with no support for modern CSS like media queries, or scenarios where only the <body> of your email is delivered? What if, every time you heard about some new email app that everyone’s trying, instead of shaking with fear, you could feel safe and secure in the knowledge that your responsive emails probably look fine? This tutorial is all about creating a great experience in email clients which have no nested CSS or media query support whatsoever, using the the fluid hybrid method of HTML email development. The fluid part refers to the fact that we use lots of percentages and elements that can move and expand to fit the space they are given. The hybrid part is because we also use max-width to constrain these free-flowing elements, and restrict the overall size of our email on larger screen sizes. All in all, it’s a lightweight, fully responsive email without media queries that comes in at a tidy 17kb. POPULAR HTML EMAIL TEMPLATES ON ENVATO MARKET If you’re looking for a ready-made, professional solution, grab one of our best-selling HTML email templates on Envato Market. We have hundreds of responsive options from as little as $5, with easy to customize features to get you started. Best-selling HTML email templates on Envato Market Not what you’re looking for? No problem, this tutorial will teach you how to build your own. Advertisement THE EMAIL TEMPLATE WE’RE GOING TO BUILD Here’s a demo on CodePen to show you the responsive HTML email we’ll be building. Feel free to fork it and use it in your own projects! All the graphic elements in the template are part of the Flat People Characters collection by alexdndz available on Envato Elements. 5 MAJOR PROBLEMS WE’RE AIMING TO SOLVE Advertisement 1. GMAIL’S APP STILL DOESN’T SUPPORT THE <STYLE> TAG FOR NON-GMAIL ACCOUNTS This is the big one. The Gmail app is massively popular on iOS and Android, it can be set as users’ default mail app on any smartphone, and it supports all non-Gmail accounts. But viewed in the Gmail app, emails for non-Gmail accounts don’t support <style> tags, so media queries, which we can usually rely on to optimise our emails for small screens, aren’t supported. This tutorial will show you how to make emails that are responsive, even in this scenario. 2. IT’S REALLY HARD TO KEEP ON TOP OF EMAIL SERVICES AND THEIR LEVEL OF CSS SUPPORT New email providers and apps appear all the time. Some of them have great CSS and media query support, but some of them focus more on email workflows and don’t support <style> tags or media queries at all. Some of them differ across platforms – for example, the Yahoo mail app for iOS supports <style> in the head, whereas on Android it doesn’t, unless you include your entire <head> twice, which isn’t possible from every sending platform. This tutorial will show you how to make an email that is always responsive, even in a worst-case scenario where CSS support is nonexistent, so you don’t have to worry about how your emails render in all those unknown use cases. 3. USING TRADITIONAL METHODS LIKE FLOAT OR ALIGN TO CREATE COLUMNS RESULTS IN UNSIGHTLY STACKING ON MOBILE APPS WITHOUT MEDIA QUERY SUPPORT The method in this tutorial uses a different approach which ensures that your columns all stack in the centre on mobile, no matter what. (You can also easily set them to align to the left or right if you prefer.) Tables aligned to the left or right remain in their positions in mobile apps that don’t support media queries. You can’t adjust them using mobile-specific CSS This tutorial will show you how to have your columns stack in the center, even in apps that don’t support media queries Advertisement Advertisement 4. WHEN YOU USE FLOAT OR ALIGN TO CREATE COLUMNS, YOU LOSE THE ABILITY TO VERTICALLY ALIGN THEM This tutorial will also show you how to vertically align multiple columns to the top, middle, or bottom. This tutorial will teach you the ’fluid hybrid’ method, which allows you to vertically align your columns to the top, middle or bottom 5. WHEN YOU USE FLOAT OR ALIGN TO CREATE COLUMNS, YOU HAVE TO PLACE THEM IN SEPARATE DIVS OR TABLE ROWS, SO THEY CAN’T FLOW AND STACK NATURALLY AT DIFFERENT SCREEN SIZES This tutorial will also show you how to have content blocks that stack and flow as you would expect them, with total control over their horizontal and vertical alignment. Using this method, your content blocks flow naturally based on the available space. 1. GETTING STARTED Start with a blank file and save it as index.html, then copy and paste the following code into it: 1 <!DOCTYPE html> 2 <html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta name="x-apple-disable-message-reformatting"> 7 <!--[if !mso]><!--> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 9 <!--<![endif]--> 10 <title></title> 11 <!--[if mso]> 12 <style type="text/css"> 13 table {border-collapse:collapse;border:0;border-spacing:0;margin:0;} 14 div, td {padding:0;} 15 div {margin:0 !important;} 16 </style> 17 <noscript> 18 <xml> 19 <o:OfficeDocumentSettings> 20 <o:PixelsPerInch>96</o:PixelsPerInch> 21 </o:OfficeDocumentSettings> 22 </xml> 23 </noscript> 24 <![endif]--> 25 </head> 26 <body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;"> 27 <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"> 28 <table role="presentation" style="width:100%;border:0;border-spacing:0;"> 29 <tr> 30 <td align="center"> 31 [content goes here] 32 </td> 33 </tr> 34 </table> 35 </div> 36 </body> 37 </html> Let’s run through all the elements above in more detail. Advertisement DOCTYPE <!DOCTYPE html> signals that we intend to use HTML5. Some email clients impose a different doctype and some may remove it, but in most cases you end up with the HTML5 doctype one way or another. (Note that not all HTML5 elements are supported when it comes to email, so always check support levels first at the fantastic resource caniemail.com.) HTML TAG <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> starts our HTML document and defines the XML and OOXML (Office Open XML) namespaces which we need for Outlook on Windows, as we’ll see below. CHARSET META TAG <meta charset="utf-8"> defines Unicode character encoding for our email, which generally covers most characters for most languages, however you may need to change this if you need to use any characters that aren’t included in the UTF-8 character set. VIEWPORT META TAG <meta name="viewport" content="width=device-width,initial-scale=1"> allows us to specify that the viewing area for our email should be width of the device screen, and that the initial zoom should be 100%. APPLE SCALING META TAG <meta name="x-apple-disable-message-reformatting"> prevents Apple from doing any unwanted scaling or zooming out of your email on iOS devices. IE9 META TAG <meta http-equiv="X-UA-Compatible" content="IE=edge" /> is used to improve rendering in Internet Explorer 9 or lower, which is getting less and less common, so you could use your discretion with this one. In the past it was also used to improve rendering on Windows Phones. It is placed between <!--[if !mso]><!--> and <!--<![endif]--> so that it’s hidden from Windows Live Mail, which otherwise won’t display images if this tag is used. (Big thanks go to Don Braithwaite for that fix.) TITLE TAGS We’ll include <title></title> although I find that it’s best to leave it empty. Sometimes you’ll come across an app or email sending platform that displays this title immediately after the Subject Line of the email in the inbox preview, which is not ideal. IF MSO Next, between <!--[if mso]> and <![endif]--> we have some styles that will only apply in Microsoft Outlook. We’ll prevent gaps and cellpadding on our tables using border-spacing:0; (the CSS equivalent of using cellspacing="0" on table elements). We then zero margins on all div elements and use !important because otherwise Outlook adds a lot of extra, unpredictable and unwanted space to our layout. XML TAG Then we have our XML tag, and inside we have our OOXML element <o:OfficeDocumentSettings> with some settings that tell Microsoft Outlook we’re operating on a base resolution of 96dpi. This setting ensures that Microsoft Outlook always accurately transforms everything in our email to adapt to the screen zoom percentage configured in Windows settings for high-DPI displays (which is most displays these days). This is all inside a <noscript> tag so T-Online doesn’t display the "96" (thanks to Mark Robbins for this fix.) INLINE CSS You’ll notice there’s no <style> tag here. We’ll do all our CSS inline, which is still best practice for email until non-Gmail accounts in the Gmail app stop stripping the <head> of your emails. We’ll come back at the end to add some media queries as an enhancement for those clients that do support them. BODY TAG WITH BASIC STYLES <body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;"> sets some basic styles on the body tag. Most important is word-spacing:normal, another life-saving fix from Mark Robbins, because otherwise Gmail sets word-spacing to 1px on the body, which adds a 1px gap between our columns and causes them to stack. WRAPPER DIV <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"> is our outer wrapper, also based it on Mark’s example. It contains our main content, sets some CSS to ensure correct sizing of text, and sets our language, here to English. It also contains some settings to make our email accessible by defining the primary email area’s role as an article, and being slighty more specific with aria-roledescription="email". This is so that screen readers will announce that it’s an email, or at least that it’s an article, which defines it as a primary piece of content and will assist with navigation. And while this layout will be using divs rather than tables where possible, we do include one big wrapper <table> here to help us center the main body of the email inside it. This is needed in particular for Comcast webmail (USA) and Libero webmail (Italy) which both fail to center our content without it. We should always set the role of any table used purely for layout to presentation so that screen readers won’t announce the presence and structure of the rows and columns (which is helpful for actual tabular data) but will instead only announce the content inside. 2. CREATING THE STRUCTURAL OUTER CONTAINER First up, we need to add an outer container, which is actually two containers, since we need to cater separately for Outlook on Windows on the one hand, and all other email clients on the other. This is because the bulk of our email will be created using <div>s that use max-width in CSS to set their dimensions and display:inline-block; in CSS to place multiple columns side-by-side. Unfortunately, Microsoft Outlook on Windows doesn’t properly support any of that, so we need to use some old-fashioned tables to keep it happy. We only want these restrictive table layouts to apply to Outlook though, so we nest the code inside conditional [if mso] comments which hide it from other email clients. Any table set up for Outlook like this is known as a ghost table. * Developing HTML Emails Using Divs and “Ghost Tables” Paul Airy 29 Mar 2019 We need ghost tables for Outlook on Windows because it will ignore div widths and positioning. So first up we’re going to add a ghost table and a div that together comprise a wrapper at our desired width for this email, 660px. Our ghost table for Outlook is used because Outlook doesn’t support the max-width property Replace the [content goes here] marker in your file with the following code: 1 <!--[if mso]> 2 <table role="presentation" align="center" style="width:660px;"> 3 <tr> 4 <td style="padding:20px 0;"> 5 <![endif]--> 6 <div class="outer" style="width:96%;max-width:660px;margin:20px auto;"> 7 [content goes here] 8 </div> 9 <!--[if mso]> 10 </td> 11 </tr> 12 </table> 13 <![endif]--> Here you can see our ghost table is 660px wide, and the div inside is 96% wide, up to a maximum of 660px. This will mean that on smaller screens we have a small 2% buffer on either side, as a little bit of padding. Our table is set to be 96% wide until it reaches a maximum of 600px This div also has a top and bottom margin of 20px, to give it some vertical breathing room, and because that won’t render in Outlook, we’ve added top and bottom padding to the ghost table’s td as well. 3. ADDING A SINGLE COLUMN LAYOUT WITH A FULL-WIDTH BANNER IMAGE Now we have our outer structure, it’s time to start adding some content. If you are following along step by step, stop now to download the tutorial files and move the /images directory so that it’s in the same folder as your index.html file. You can grab the source files in the following ways: * Visit the Github repository to fork it * Download the .zip directly from Github * Visit the demo on CodePen to fork it As mentioned, we’ll generally be favouring divs over tables, but for single-column layouts it uses less markup to just use one table for everybody, rather than a div with a ghost table. So let’s replace [content goes here] with this code: 1 <table role="presentation" style="width:100%;border:0;border-spacing:0;"> 2 <tr> 3 <td style="padding:10px 10px 20px 10px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;"> 4 <img src="images/header.png" width="640" alt="" style="width:100%;height:auto;" /> 5 </td> 6 </tr> 7 <tr> 8 <td style="padding:10px;text-align:left;"> 9 <h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:26px;line-height:32px;font-weight:bold;">Creating responsive email magic</h1> 10 <p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!</p> 11 </td> 12 </tr> 13 </table> 14 15 <div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div> In our first row we have a cell with 10px padding on the sides, a little extra on the bottom. Inside this cell is our header banner image its own row so that there’s plenty of space for any ALT text in a nice large font size. (In my case, this image is purely decorative, so it doesn’t need any.) We set the image width="640" in the HTML for Outlook, and then in the CSS we set style="width:100%;height:auto;" so that the image will be 100% wide in other clients, and always in proportion. In the second row, we apply the same 10px padding to the sides, as well as text-align:left; to stop the text from being centered in some clients who would inherit it from the td align="center" above it. For our text we can use <h1> and <p> tags since margin is supported on these tags across the board (padding, not so much). We do apply all our styling inline to these elements though, because some webmail clients have font styling that will be forced onto them unless you explicitly override it at the element level. At the very bottom, you can see we’re using a spacer div to create some padding between this layout and the next. I prefer to use these between blocks because Outlook can be quite unpredictable with margins on block-level elements, and I find it much easier when building modular layouts to keep the spacing as discrete pieces of code. However if you prefer, you can apply padding inside your elements to create vertical space. When you do want to create spacers like this, you can just set a line-height, a height, and set mso-line-height-rule:exactly; which is a Microsoft Office property that prevents it from treating your line-height as a minimum. Also note that it’s very important to apply the same padding on the left and right of all your columns, so that they will be uniform when they stack on top of each other. Always have the same amount of padding on the left and right sides of your elements so that padding is uniform on mobile in clients with no media query support Now you should have your single-column layout ready to go, so let’s move on to multiple columns. 4. ADDING A TWO-COLUMN LAYOUT WHICH WILL BE CENTERED ON MOBILE We are going to create a two-column layout on desktop that stacks to a single, centered column on mobile Directly underneath the closing </div> tag from the spacer above, paste the following: 1 <div class="two-col"> 2 <!--[if mso]> 3 <table role="presentation" width="100%"> 4 <tr> 5 <td style="width:50%;"> 6 <![endif]--> 7 <div class="column"> 8 [content goes here] 9 </div> 10 <!--[if mso]> 11 </td> 12 <td style="width:50%;"> 13 <![endif]--> 14 <div class="column"> 15 [content goes here] 16 </div> 17 <!--[if mso]> 18 </td> 19 </tr> 20 </table> 21 <![endif]--> 22 </div> This gives us a very basic layout of a parent div with two columns inside which are scaffolded by a ghost table for Outlook with two cells, each 50% wide. First we want to ensure the font-size is set to zero on our container, because our columns need to sit snugly side by side, and without this you can end up with extra spacing that causes them to stack. We also need to add a text-align property which will control the alignment of the columns inside. So change the opening div tag to the following: 1 <div class="two-col" style="text-align:center;font-size:0;"> To get the columns within to float side by side on desktop, but stack in the centre on mobile, we combine this use of text-align: center on the container with display: inline-block on the columns. All inline-block elements obey the text-align property on their parent, so we can simply set left, center or right on the container to specify where the columns should sit when they are stacked. The text-align set on the container will determine the placement of the columns inside GETTING MULTIPLE COLUMNS TO WORK So let’s add the display setting to each column, and specify their widths. We want them to be 100% wide on smaller screens, up to a maximum of 330px wide on desktop. Change each div.column tag so that they both look like this: 1 <div class="column" style="width:100%;max-width:330px;display:inline-block;"> Now everything is set up to work as multiple columns. Next we want to set the vertical alignment for our columns, and you can choose between top, center and bottom. When you have a multi-row layout, which we’ll cover in Step 6, your choice will also set the vertical alignment on a row-by-row basis, even when your columns stack down onto new lines. It’s pretty nifty! Columns will vertically-align to their neighbours, even when they stack onto new lines We need to add some code in two places for this one. On our column divs, add vertical-align:middle; to the CSS, so they look like this: 1 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;"> And for Outlook, we add the HTML valign attribute to each cell too. This always has to match whatever you’ve set on the corresponding column div, so if you change the columns to vertical-align:top; you must also set all your ghost table cells to valign="top" too. Edit the ghost table cells to look like this: 1 <td style="width:50%;" valign="middle"> And finally we’ll add some padding. For Outlook, we can simply add this to the ghost table cells: 1 <td style="width:50%;padding:10px;" valign="middle"> For our columns, I actually like to nest an extra div inside with the padding. I do this because the box model in CSS means that any padding added to an element gets applied to the outside, increasing its total width (e.g. a 330px column with 10px padding on either side becomes 350px wide). Normally in HTML you can use box-sizing: border-box; so that any padding is included in the width, but it’s not well supported across email clients. So to save myself the hassle of doing lots of calculations of column widths minus padding, I prefer to nest. So inside each div.column, replace [content goes here] with this: 1 <div style="padding:10px;"> 2 [content goes here] 3 </div> Now we’re all set up, and our structure is complete! The layout and ghost table work together to give us our two-column layout. Visualising how our two-column structure works CONFIGURING FLUID HYBRID IMAGES Inside the first column we’ll add an image which I’ve wrapped in a paragraph tag (so that you can easily add some margins if you need them, and so any ALT text will be nicely styled). Replace the first [content goes here] with this: 1 <p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;"> 2 <img src="images/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" /> 3 </p> Let’s break down the img tag above. We have 310px of space available in this case (330px column minus 10px padding on both sides), so our image is going to be 310px wide. First we must set width="310" on the img tag for Outlook on Windows, otherwise it will display the image at its physical size. Next, in the CSS, we set display:block; to prevent a gap underneath the image in Gmail and Google Workspace. Then, to ensure the image is always a maximum of 100% of the column width across all other mobile and desktop clients, we set max-width:100%;. We also add height:auto; to ensure our image never ends up stretched. For full-width images you could stop there, but I have also added a width:310px; in case you have a narrower image. If so, change the 310px value to the width of your image, and make sure you also adjust the width="310" for Outlook. (You may also notice that on images we’re setting a pixel width and a percentage max-width, which is the opposite to what we’ve done on our columns: they have a percentage width and a pixel max-width. I’ve made this adjustment because around mid-2021, the Outlook apps for iOS and Android stopped supporting pixel max-widths on img tags.) When your image is narrower, you’ll probably need to horizontally align it too, and there are two options here depending on your layout. If you don’t mind gaps undeneath the images in Gmail and Google Workplace, remove display:block; from the CSS of the image. Then, in the CSS of the <p> tag wrapped around it, simply set text-align to whatever you like. The image will inherit the alignment from there. Alternatively, if you can’t have any gaps underneath the images in Gmail and Google Workspace, you must retain the display:block; and you will need to use a combination of margins and alignment: * To left-align a display:block image, add margin-left:0;margin-right:auto; to the image tag CSS, and add align="left" to its parent ghost table cell * To center a display:block image, add margin-left:auto;margin-right:auto; to the image tag CSS, and add align="center" to its parent ghost table cell * To right-align a display:block image, add margin-left:auto;margin-right:0; to the image tag CSS, and add align="right" to its parent ghost table cell Note that Outlook will apply the align setting to everything in the cell, so if that doesn’t suit your layout you will need to adjust the text-align setting on your text paragraphs. NOW WE JUST NEED TO ADD OUR TEXT In the second column replace the [content goes here] with this code, which includes a few paragraphs of text, and a link button using Mark Robbins’ method: 1 <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p> 2 <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p> 3 <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> The second div is now displaying invisible, centered text, because it’s inheriting the zeroed font size and centered text-alignment from the container. So we’ll add some font-sizing and text-alignment to the div tag so it now looks like this all together: 1 <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;"> 2 <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p> 3 <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p> 4 <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> 5 </div> All combined your entire section should look like this, and we’ll add a spacer at the bottom too: 1 <div class="two-col" style="text-align:center;font-size:0;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%"> 4 <tr> 5 <td style="width:50%;padding:10px;" valign="middle"> 6 <![endif]--> 7 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;"> 8 <div style="padding:10px;"> 9 <p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;"> 10 <img src="images/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" /> 11 </p> 12 </div> 13 </div> 14 <!--[if mso]> 15 </td> 16 <td style="width:50%;padding:10px;" valign="middle"> 17 <![endif]--> 18 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;"> 19 <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;"> 20 <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p> 21 <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p> 22 <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> 23 </div> 24 </div> 25 <!--[if mso]> 26 </td> 27 </tr> 28 </table> 29 <![endif]--> 30 </div> 31 32 <div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div> There we have it! Now you should have a two-column layout which stacks vertically when you resize your browser and shrinks as appropriate when you make the viewport narrower than 330px. 5. ADDING A TWO-COLUMN LAYOUT THAT WILL REVERSE WHEN STACKED ON MOBILE Now we’re going to duplicate the layout above, but flip it so that the image is on the right and the text is on the left when viewed on desktop, while ensuring that the image still comes first when viewed on mobile. When stacking, the item that comes first in the code will always end up on top. So we can still code our layout with the image first and content second, but then make use of the dir="rtl" attribute in HTML and the corresponding direction:rtl; property in CSS to ensure that the columns are laid out right-to-left when they appear side by side. Our elements will stack in the opposite order if dir="rtl" (HTML) or direction:rtl (CSS) is set on their container Traditionally this property is for denoting a language with text that runs right-to-left, for example Arabic. When applied to layout elements, it will tell each email client to render our elements in the opposite order. We always use the CSS version for our div content because GMX & Web.de don’t support the HTML dir attribute but they do support direction in CSS. So underneath the spacer added above, you could copy and paste the entire div.two-col again, or paste the code below, which has the same structure but slightly different content: 1 <div class="two-col" style="text-align:center;font-size:0;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%"> 4 <tr> 5 <td style="width:50%;padding:10px;" valign="middle"> 6 <![endif]--> 7 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;"> 8 <div style="padding:10px;font-size:14px;line-height:18px;"> 9 <p style="margin:0;font-family:Arial,sans-serif;"> 10 <img src="images/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" /> 11 </p> 12 </div> 13 </div> 14 <!--[if mso]> 15 </td> 16 <td style="width:50%;padding:10px;" valign="middle"> 17 <![endif]--> 18 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;"> 19 <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;"> 20 <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p> 21 <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p> 22 <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Lock it in</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> 23 </div> 24 </div> 25 <!--[if mso]> 26 </td> 27 </tr> 28 </table> 29 <![endif]--> 30 </div> Now all we need to do is tell the ghost table and the parent div to lay out their contents in a right-to-left direction, so add direction:rtl; to the container div’s CSS so it now reads: 1 <div class="two-col" style="text-align:center;font-size:0;direction:rtl;"> And add dir="rtl" to the ghost table: 1 <table role="presentation" width="100%" dir="rtl"> If you save it now and take a look, you’ll see the columns have switched sides, but the text is looking weird. That’s because the text is also inheriting the direction property, so we need to reset it on our divs and ghost table cells. Firstly, add direction:ltr; to each column div, so they now look like this: 1 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;"> And then dir="ltr" to each ghost table cell: 1 <td style="width:50%;padding:10px;" valign="middle" dir="ltr"> Now our English text runs from left to right as it should. So to recap, our entire row should now look like this, and we’ll also add another spacer at the bottom, like so: 1 <div class="two-col" style="text-align:center;font-size:0;direction:rtl;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%" dir="rtl"> 4 <tr> 5 <td style="width:50%;padding:10px;" valign="middle" dir="ltr"> 6 <![endif]--> 7 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;"> 8 <div style="padding:10px;font-size:14px;line-height:18px;"> 9 <p style="margin:0;font-family:Arial,sans-serif;"> 10 <img src="images/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" /> 11 </p> 12 </div> 13 </div> 14 <!--[if mso]> 15 </td> 16 <td style="width:50%;padding:10px;" valign="middle" dir="ltr"> 17 <![endif]--> 18 <div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;"> 19 <div style="padding:10px;font-size:14px;line-height:18px;text-align:left;"> 20 <p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p> 21 <p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p> 22 <p style="margin:0;font-family:Arial,sans-serif;"><a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Lock it in</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a></p> 23 </div> 24 </div> 25 <!--[if mso]> 26 </td> 27 </tr> 28 </table> 29 <![endif]--> 30 </div> 31 32 <div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div> And that’s all there is to it! You’ve now created a flipped column layout that will reverse when stacked. 6. ADDING A THREE-COLUMN LAYOUT WITH MULTIPLE ROWS As with our two-column layout, here we are going to create columns that stack in the center on mobile by using the combination of text-align: center on the container and display: inline-block on the columns inside. To achieve multiple rows and columns, you can add as many inline-block elements to a single container as you like. This way, when the viewport becomes too narrow to fit all of the columns, they reflow to fit the space available. This means you are able to achieve (for example) a 3x2 column layout that stacks down to 2x3 columns and finally 1x6 columns on mobile: Our free-flowing blocks can stack from 3x2 to 2x3 and down to 1x6 Firstly, our section here also has a single-column heading and intro, so we’ll add that first. As at Step 3, we will just use a table because it uses less code than creating a div and a ghost table. So underneath the spacer from above, paste the following 1 <table role="presentation" style="width:100%;border:0;border-spacing:0;"> 2 <tr> 3 <td style="padding:10px;text-align:center;"> 4 <h1 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">Praesent laoreet malesuada cursus</h1> 5 <p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!</p> 6 </td> 7 </tr> 8 </table> Underneath this, we’ll add our three column container, with our text alignment setting: 1 <div class="three-col" style="font-size:0;text-align:center;"> 2 [content goes here] 3 </div> Next, replace [content goes here] with the following ghost table: 1 <!--[if mso]> 2 <table role="presentation" width="100%" style="text-align:center;"> 3 <tr> 4 <td> 5 <![endif]--> 6 <div class="column"></div> 7 <!--[if mso]> 8 </td> 9 <td> 10 <![endif]--> 11 <div class="column"></div> 12 <!--[if mso]> 13 </td> 14 <td> 15 <![endif]--> 16 <div class="column"></div> 17 <!--[if mso]> 18 </td> 19 </tr> 20 <tr> 21 <td> 22 <![endif]--> 23 <div class="column"></div> 24 <!--[if mso]> 25 </td> 26 <td> 27 <![endif]--> 28 <div class="column"></div> 29 <!--[if mso]> 30 </td> 31 <td> 32 <![endif]--> 33 <div class="column"></div> 34 <!--[if mso]> 35 </td> 36 </tr> 37 </table> 38 <![endif]--> The main thing to observe in the code above is that in the middle of the ghost table, we end the table row and start a new one, with </td></tr><tr><td>. You don’t need to separate the rows of divs, however you do need to add additional <tr>s to your ghost table for Outlook for every ’row’ of columns that you are going to end up with. This achieves a layout like this: This is how our ghost table works in Outlook to keep our rows and columns separate For the rest of this layout, the process is almost identical to what we saw in Step 3. The only difference is that we have three columns, so they are all set to be a third of the width of our email, 220px wide. And rather than setting the ghost table cells to be a percentage, since it would need to be 33% for Outlook which is slightly imprecise, we’ll set it to be the pixel width on each cell. Replace each td in the ghost table with this markup: 1 <td style="width:220px;padding:10px;" valign="top"> Note that it’s always a good idea to set pixel cell widths in ghost tables by using CSS rather than HTML because Outlook treats these accurately when adjusting for Windows’ DPI scaling. If you set your cell widths in HTML like width="220" you can end up with unpredictable results in Outlook on Windows. We’ll match the ghost table cell formatting for each of our columns, so adjust each column div tag so they all look like this: 1 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> And once that’s applied to each, we simply need to add our inner padding div, some content, our text styling, and throw in a spacer underneath. With that added, it all comes together like this: 1 <div class="three-col" style="font-size:0;text-align:center;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%" style="text-align:center;"> 4 <tr> 5 <td style="width:220px;padding:10px;" valign="top"> 6 <![endif]--> 7 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 8 <div style="padding:10px;font-size:14px;line-height:18px;"> 9 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-01.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 10 <p style="margin:0;font-family:Arial,sans-serif;">Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p> 11 </div> 12 </div> 13 <!--[if mso]> 14 </td> 15 <td style="width:220px;padding:10px;" valign="top"> 16 <![endif]--> 17 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 18 <div style="padding:10px;font-size:14px;line-height:18px;"> 19 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-02.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 20 <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p> 21 </div> 22 </div> 23 <!--[if mso]> 24 </td> 25 <td style="width:220px;padding:10px;" valign="top"> 26 <![endif]--> 27 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 28 <div style="padding:10px;font-size:14px;line-height:18px;"> 29 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-03.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 30 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p> 31 </div> 32 </div> 33 <!--[if mso]> 34 </td> 35 </tr> 36 <tr> 37 <td style="width:220px;padding:10px;" valign="top"> 38 <![endif]--> 39 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 40 <div style="padding:10px;font-size:14px;line-height:18px;"> 41 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-04.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 42 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p> 43 </div> 44 </div> 45 <!--[if mso]> 46 </td> 47 <td style="width:220px;padding:10px;" valign="top"> 48 <![endif]--> 49 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 50 <div style="padding:10px;font-size:14px;line-height:18px;"> 51 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-05.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 52 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p> 53 </div> 54 </div> 55 <!--[if mso]> 56 </td> 57 <td style="width:220px;padding:10px;" valign="top"> 58 <![endif]--> 59 <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;"> 60 <div style="padding:10px;font-size:14px;line-height:18px;"> 61 <p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="images/three-column-06.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p> 62 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p> 63 </div> 64 </div> 65 <!--[if mso]> 66 </td> 67 </tr> 68 </table> 69 <![endif]--> 70 </div> 71 72 <div class="spacer" style="line-height:50px;height:50px;mso-line-height-rule:exactly;"> </div> And that’s it! Now you should have a three-column layout that collapses down to two columns and finally to one on the smallest screens. 7. ADDING A TWO-COLUMN “SIDEBAR” LAYOUT Now we’ll create a layout with one wide column plus a narrower sidebar that contains an icon. We want these to stack in the center so we’ll set up our container div with that text alignment. Paste the following code underneath the last spacer: 1 <div class="sidebar" style="font-size:0;text-align:center;"> 2 [content goes here] 3 </div> Now, replace [content goes here] with our ghost table and column divs. Once column is 100px wide, and the other is 560px. 1 <!--[if mso]> 2 <table role="presentation" width="100%"> 3 <tr> 4 <td style="width:100px;"> 5 <![endif]--> 6 <div class="small" style="width:100%;max-width:100px;display:inline-block;"> 7 [content goes here] 8 </div> 9 <!--[if mso]> 10 </td> 11 <td style="width:560px;"> 12 <![endif]--> 13 <div class="large" style="width:100%;max-width:560px;display:inline-block;"> 14 [content goes here] 15 </div> 16 <!--[if mso]> 17 </td> 18 </tr> 19 </table> 20 <![endif]--> Now let’s set our vertical alignment by adding valign to the ghost table cells, and vertical-align to each div. Our smaller column code will look like this: 1 <td style="width:100px;" valign="middle"> 2 <![endif]--> 3 <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;"> And the wider one like this: 1 <td style="width:560px; valign="middle"> 2 <![endif]--> 3 <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;"> Now we’ll add our padding and align our text to the center on the smaller ghost table cell: 1 <td style="width:100px;padding:10px;text-align:center;" valign="middle"> And the larger ghost table cell: 1 <td style="width:560px;padding:10px;text-align:center;" valign="middle"> And to ensure our divs match, nest another div inside each, replacing the [content goes here] markers with this: 1 <div style="padding:10px;font-size:14px;line-height:18px;"> 2 [content goes here] 3 </div> Now we can add our content. On the small column, replace [content goes here] with this: 1 <img src="images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" /> And on the large column replace it with this: 1 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read on</strong></a></p> Putting it all together, it should look like this. I’ve also added some font styling the padding div in the small column, for any ALT text that gets displayed. And we’ll add a spacer at the end too: 1 <div class="sidebar" style="font-size:0;text-align:center;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%"> 4 <tr> 5 <td style="width:100px;padding:10px;text-align:center;" valign="middle"> 6 <![endif]--> 7 <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;"> 8 <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;"> 9 <img src="images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" /> 10 </div> 11 </div> 12 <!--[if mso]> 13 </td> 14 <td style="width:560px;padding:10px;text-align:center;" valign="middle"> 15 <![endif]--> 16 <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;"> 17 <div style="padding:10px;font-size:14px;line-height:18px;"> 18 <p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read on</strong></a></p> 19 </div> 20 </div> 21 <!--[if mso]> 22 </td> 23 </tr> 24 </table> 25 <![endif]--> 26 </div> 27 28 <div class="spacer" style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </div> Now you should have your left sidebar layout and when you resize your browser to make it smaller, the icon will jump above the text and sit in the centre. 8. ADDING A REVERSED “SIDEBAR” LAYOUT To add some more visual interest, let’s reverse our second sidebar layout so that the icon is on the right for desktop, but still stacks first on mobile. We’ll follow exactly the same process as in Step 5. We can essentially duplicate the sidebar layout above, or take this example layout with slightly different content: 1 <div class="sidebar" style="font-size:0;text-align:center;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%"> 4 <tr> 5 <td style="width:100px;padding:10px;text-align:center;" valign="middle"> 6 <![endif]--> 7 <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;"> 8 <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;"> 9 <img src="images/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" /> 10 </div> 11 </div> 12 <!--[if mso]> 13 </td> 14 <td style="width:560px;padding:10px;text-align:center;" valign="middle"> 15 <![endif]--> 16 <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;"> 17 <div style="padding:10px;font-size:14px;line-height:18px;"> 18 <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register today</strong></a></p> 19 </div> 20 </div> 21 <!--[if mso]> 22 </td> 23 </tr> 24 </table> 25 <![endif]--> 26 </div> And as at Step 5, to reverse the order we simply need to add our direction:rtl; to div.sidebar, and dir="rtl" to the ghost <table> tag. Then, to ensure the contents run in the right direction, we add direction:ltr; to both of our columns, and dir="ltr" to each of our ghost table cells. Once done, it all looks like this, with our final spacer added underneath: 1 <div class="sidebar" style="font-size:0;text-align:center;direction:rtl;"> 2 <!--[if mso]> 3 <table role="presentation" width="100%" dir="rtl"> 4 <tr> 5 <td style="width:100px;padding:10px;text-align:center;" valign="middle" dir="ltr"> 6 <![endif]--> 7 <div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;direction:ltr;"> 8 <div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;"> 9 <img src="images/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" /> 10 </div> 11 </div> 12 <!--[if mso]> 13 </td> 14 <td style="width:560px;padding:10px;text-align:center;" valign="middle" dir="ltr"> 15 <![endif]--> 16 <div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;direction:ltr;"> 17 <div style="padding:10px;font-size:14px;line-height:18px;"> 18 <p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register today</strong></a></p> 19 </div> 20 </div> 21 <!--[if mso]> 22 </td> 23 </tr> 24 </table> 25 <![endif]--> 26 </div> 27 28 <div class="spacer" style="line-height:40px;height:40px;mso-line-height-rule:exactly;"> </div> And there you have it! Now we have two sidebars with icons on opposite sides, but they remain above the text when everything stacks on mobile. 9. ADDING PROGRESSIVE ENHANCEMENT WITH MEDIA QUERIES Now you have a complete email template that is responsive everywhere without a single media query in sight! But of course there are many email clients that do support media queries, so now we can go about progressively enhancing our already fabulous template with a few tweaks so that it looks top-notch in as many email clients as possible. ADDING MEDIA QUERIES Firstly, we’ll set our three-column columns to be 100% wide on screens up to 350px wide, but then for screens that are between 351–460px wide, we can actually fit two columns side by side, so we’ll set them to 50% there. On the columns all we have to do is override the max-width because, as you’ll recall, they all already have a width of 100% and it’s just the max-width that is restricting them. With our two-column columns and images, we’ll just set those to be 100% wide on all screens up to 460px wide. For screens that are a minimum of 461px wide, we’ll then specify percentage max-widths for all the columns, so that they will all be in proportion even if the viewport or viewable region (in Gmail webmail for example) is narrower than our email width of 660px. So add this to the <head> of our document: 1 <style type="text/css"> 2 @media screen and (max-width: 350px) { 3 .three-col .column { 4 max-width: 100% !important; 5 } 6 } 7 @media screen and (min-width: 351px) and (max-width: 460px) { 8 .three-col .column { 9 max-width: 50% !important; 10 } 11 } 12 @media screen and (max-width: 460px) { 13 .two-col .column { 14 max-width: 100% !important; 15 } 16 .two-col img { 17 width: 100% !important; 18 } 19 } 20 @media screen and (min-width: 461px) { 21 .three-col .column { 22 max-width: 33.3% !important; 23 } 24 .two-col .column { 25 max-width: 50% !important; 26 } 27 .sidebar .small { 28 max-width: 16% !important; 29 } 30 .sidebar .large { 31 max-width: 84% !important; 32 } 33 } 34 </style> And voilà! Layout perfection at every screen size. These are just some adjustments to demonstrate what’s possible—you can play around with this as much as you like to achieve your desired outcome across a whole range of device sizes that support media queries. AND THERE YOU HAVE IT! Well done! We now have a fully-functioning responsive HTML email using just a handful of media queries and coming in at under 17kb. Go forth and experiment with different layouts using the principles you have learned in this tutorial – there is a lot you can do once you’ve mastered the basics. ICONS AND ILLUSTRATIONS All the graphic elements in the template are part of the Flat People Characters collection by alexdndz available on Envato Elements. And don’t forget, if you’re about to kickstart a new project browse through our best-selling responsive email templates on Envato Market. MORE HTML EMAIL DEVELOPMENT TUTORIALS * Build an HTML Email Template From Scratch Nicole Merlin 24 May 2023 * What You Should Know About HTML Email Nicole Merlin 10 Jun 2013 * A Beginner’s Guide to Email Accessibility (Checklist + Resources) Stig Morten Myre 11 Sep 2018 * The Complete Guide to Designing for Email Nicole Merlin 13 Dec 2013 * 15+ MailChimp Templates for Every Purpose and Occasion Paula Borowska 14 Jun 2022 * Best Mailchimp Templates to Level Up Your Business Email Newsletter 2023 Brad Smith 24 May 2022 Advertisement Email Email Design Email Templates Did you find this post useful? Yes No Want a weekly email summary? Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing. Sign up Nicole Merlin Australia Email designer, developer and lover of all things email. Owner of Email Wizardry, an email design and development studio in Victoria, Australia. moonstrips Advertisement View Online Demo View on GitHub Advertisement Looking for something to help kick start your next project? Envato Market has a range of items for sale to help get you started. WordPress Themes From $13 Magento Themes From $17 ECommerce Websites From $16 HTML5 Templates From $4 Unlimited Downloads From $16.50/month Get access to over one million creative assets on Envato Elements. Over 9 Million Digital Assets Everything you need for your next creative project. Create Beautiful Logos, Designs & Mockups in Seconds Design like a professional without Photoshop. Join the Community Share ideas. Host meetups. Lead discussions. Collaborate. Quick LinksExplore popular categories * Curated Design Assets * Best Cool Fonts * InDesign Magazine Templates * Photoshop Actions * InDesign Newsletter Templates * InDesign Templates * Curated Web Design Assets * Responsive WordPress Themes * WordPress Themes for Consultants * Wireframe Templates * Best Shopify Themes * Masonry WordPress Themes * Web Themes & Templates * WP Themes * HTML Templates * Shopify Themes * Bootstrap Themes * Free WordPress Themes * Video * After Effects Templates * Apple Motion Templates * Video Effects * Lower Thirds * Stock Footage * Placeit * Logo Maker * Video Maker * Design Templates * Free Templates * Mockups * Curated Video Assets * After Effects Slideshow Templates * Premiere Pro Video Intro Templates * Final Cut Pro Templates * Final Cut Pro Title Templates * Premiere Pro Video Effects * Curated Presentation Assets * Keynote Pitch Deck Templates * Google Slides Business Templates * PowerPoint Pitch Deck Templates * Best Shopify Mobile Themes * Best Presentation Templates * Free Tools * Image Resizer * Video Cropper * Video To Gif Converter * Elements * WordPress Themes * Stock Images * Website Templates * Logos * Fonts * Tuts+ * Learn JavaScript * Photoshop Tutorials * How to Draw * How to Use WordPress * How to Use PowerPoint Envato Tuts+ About Envato Tuts+ Terms of Use Advertise Help FAQ Help Center 30,266 Tutorials 553 Courses 42,531 Translations * Envato * Envato Elements * Envato Market * Placeit by Envato * All products * Careers * Sitemap © 2023 Envato Pty Ltd. Trademarks and brands are the property of their respective owners. * * * * * * Advertisement