<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Archives des site responsive - st9ph.fr</title>
	<atom:link href="https://st9ph.fr/tag/site-responsive/feed/" rel="self" type="application/rss+xml" />
	<link>https://st9ph.fr/tag/site-responsive/</link>
	<description>la boite à outils numériques</description>
	<lastBuildDate>Thu, 02 Apr 2026 19:21:50 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://st9ph.fr/wp-content/uploads/2026/02/cropped-ico-fav-32x32.png</url>
	<title>Archives des site responsive - st9ph.fr</title>
	<link>https://st9ph.fr/tag/site-responsive/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">199087513</site>	<item>
		<title>⏺️Omnicanal &#124; UX Mobile</title>
		<link>https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/</link>
					<comments>https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Fri, 30 Jan 2026 12:51:57 +0000</pubDate>
				<category><![CDATA[☝️ Concepts]]></category>
		<category><![CDATA[⏺️ Omnicanal]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[concevoir appli mobile]]></category>
		<category><![CDATA[How To en UX mobile]]></category>
		<category><![CDATA[site responsive]]></category>
		<category><![CDATA[thumb zone]]></category>
		<category><![CDATA[utiliser screenfly]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=33685</guid>

					<description><![CDATA[<p>Part d&#8217;IA /5 dans cet article voyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie 🌐 Question : A votre avis, quel est l&#8217;outil préféré des Français 🔵⚪🔴 pour aller sur Internet ? 💻 l&#8217;ordinateur classique (desktop) 📳 Le smartphone (Mobile) 🟰 c&#8217;est plutôt équilibré 👉🏻 Voyons cela en détail ... <a title="⏺️Omnicanal &#124; UX Mobile" class="read-more" href="https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/" aria-label="En savoir plus sur ⏺️Omnicanal &#124; UX Mobile">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/">⏺️Omnicanal | UX Mobile</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-60e92510"><button class="uagb-notice-close-button" type="button" aria-label="Close"></button><span class="uagb-notice-title"><strong>C&#8217;est quoi &#8220;l&#8217;UX Mobile&#8221; ?</strong></span><div class="uagb-notice-text">
<p class="has-medium-font-size"><strong>UX </strong>pour<strong> <em>User eXperience</em>.</strong> <strong>L’expérience utilisateur en mobilité</strong>, c’est la prise en compte des <strong>usages spécifiques </strong>de vos canaux afin de proposer <strong>des interfaces adaptées </strong>aux <strong>mobinautes</strong>.</p>



<p class="has-medium-font-size">On ne parle pas seulement de <strong>facilité ou de plaisir,</strong> mais aussi <strong>de restriction</strong>s ou, au contraire, d’<strong>outils spécifiques liés à la mobilité</strong>.</p>
</div></div>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_31-01-2026_at_22_46_54_on_January_31st_2026.mp3" autoplay></audio></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img decoding="async" width="233" height="211" src="https://st9ph.fr/wp-content/uploads/2025/12/IA.png" alt="" class="wp-image-31733" style="width:79px;height:auto"/></figure>
</div>


<p class="has-small-font-size">Part d&#8217;IA /5 dans cet article</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns has-base-2-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-bce3303b-d450-4922-ad1d-95109aa3ab6a">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-0"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-1"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-2"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-3"><rect height="150" width="75" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-bce3303b-d450-4922-ad1d-95109aa3ab6a-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">♨️ Sources</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-9337d533-516d-4261-b201-aba4e7d615ec">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-0"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-1"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-2"><rect height="150" width="75" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-9337d533-516d-4261-b201-aba4e7d615ec-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">🖼️ Images</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-8abb9aa2-218a-42f0-b7f1-8080911270fe">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-0"><rect height="150" width="75" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-8abb9aa2-218a-42f0-b7f1-8080911270fe-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">✒️Contenu</div>
		</div></div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<figure class="wp-block-image size-full is-resized"><img decoding="async" width="51" height="53" src="https://st9ph.fr/wp-content/uploads/2025/12/image-153.png" alt="" class="wp-image-33778" style="width:33px;height:auto"/></figure>



<p class="has-small-font-size">v<em>oyez le menu flottant (à droite) pour les sources, un glossaire et la méthodologie </em></p>
</div>
</div>
</div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="543" height="210" src="https://st9ph.fr/wp-content/uploads/2026/02/SmartvsDesk.jpg" alt="" class="wp-image-34264" srcset="https://st9ph.fr/wp-content/uploads/2026/02/SmartvsDesk.jpg 543w, https://st9ph.fr/wp-content/uploads/2026/02/SmartvsDesk-300x116.jpg 300w" sizes="(max-width: 543px) 100vw, 543px" /></figure>
</div>


<div class="bloc-qcm">
  <p class="qcm-question">
    🌐 <strong>Question :</strong> A votre avis, quel est l&#8217;outil préféré des Français 🔵⚪🔴 pour aller sur Internet ?
  </p>

  <ul class="qcm-options">
    <li data-correct="false">💻 l&#8217;ordinateur classique (desktop)</li>
    <li data-correct="true">📳 Le smartphone (Mobile)</li>
    <li data-correct="False">🟰 c&#8217;est plutôt équilibré</li>
  </ul>

  <p class="qcm-feedback"></p>
</div>

<style>
.bloc-qcm {
  border-left: 4px solid #1e73be;
  background: #f5f9ff;
  padding: 16px 18px;
  margin: 24px 0;
  border-radius: 4px;
  font-size: 15px;
}

.qcm-options {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.qcm-options li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.qcm-options li:hover {
  background: #eef3ff;
}

.qcm-options li.correct {
  background: #e6f4ea;
  border-color: #188038;
}

.qcm-options li.wrong {
  background: #fdecec;
  border-color: #dc2626;
}

.qcm-feedback {
  margin-top: 12px;
  font-weight: bold;
}
</style>

<script>
document.querySelectorAll('.bloc-qcm').forEach(qcm => {
  const options = qcm.querySelectorAll('.qcm-options li');
  const feedback = qcm.querySelector('.qcm-feedback');

  options.forEach(option => {
    option.addEventListener('click', () => {
      options.forEach(o => o.classList.remove('correct', 'wrong'));

      if (option.dataset.correct === "true") {
        option.classList.add('correct');
        feedback.textContent = "✅ Bonne réponse ! Environ 6 pour 10.";
        feedback.style.color = "#188038";
      } else {
        option.classList.add('wrong');
        feedback.textContent = "❌ Ca ce joue à peu, c'est vrai, mais c'est tout de même le smartphone";
        feedback.style.color = "#dc2626";
      }
    });
  });
});
</script>



<p>👉🏻 Voyons cela en détail :</p>



<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex">
<p>⏱️Temps de lecture :</p>


<div class="wp-elements-2660b74cdd79da9184a09a62f3b8f226 wp-block-post-time-to-read has-text-color has-accent-color">23–35 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">5 495 mots</div>


<p>|</p>



<p class="has-accent-color has-text-color has-link-color wp-elements-f8515b49564e2f8ad2c183e4ed182d7c">🗓️ dernière modification le</p>


<div class="has-link-color wp-block-post-date__modified-date wp-elements-c7e6b51b55b0dff84108436fc6f3823e wp-block-post-date has-text-color has-accent-color"><time datetime="2026-04-02T21:21:50+02:00">2 avril  2026</time></div></div>



<!-- =====================================================
     BADGE DE LECTURE + BADGE "DÉJÀ LU"
     - % de lecture en temps réel
     - Devient vert à 75 %
     - Mémorisé en session (déjà lu)
     ===================================================== -->

<!-- ✅ STRUCTURE HTML DU BADGE -->
<div id="readBadge">
  📖 Lecture : 0 %
</div>

<style>
/* ===============================
   STYLE DU BADGE
   =============================== */
#readBadge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #111;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* Badge visible */
#readBadge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Badge vert = article lu */
#readBadge.read {
  background: #188038;
}
</style>

<script>
/* ===============================
   LOGIQUE JAVASCRIPT
   =============================== */
(function () {

  const badge = document.getElementById("readBadge");

  // ✅ Clé unique par page (URL)
  const storageKey = "articleLu_" + window.location.pathname;

  // ✅ Si déjà lu dans la session
  if (sessionStorage.getItem(storageKey)) {
    badge.classList.add("show", "read");
    badge.innerText = "✅ Article déjà lu";
    return; // on ne recalcule plus le scroll
  }

  let badgeShown = false;
  let articleMarkedAsRead = false;

  window.addEventListener("scroll", function () {

    const scrollTop = window.scrollY;
    const docHeight = document.body.scrollHeight - window.innerHeight;
    const percent = Math.round((scrollTop / docHeight) * 100);

    // Mise à jour du texte
    badge.innerText = "📖 Lecture : " + percent + " %";

    // Affichage du badge dès 10 %
    if (percent >= 10 && !badgeShown) {
      badge.classList.add("show");
      badgeShown = true;
    }

    // ✅ Article considéré comme lu à 75 %
    if (percent >= 75 && !articleMarkedAsRead) {
      badge.classList.add("read");
      badge.innerText = "✅ Article lu à " + percent + " %";
      sessionStorage.setItem(storageKey, "true");
      articleMarkedAsRead = true;
    }

  });

})();
</script>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-d2d50c8b      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan de l&#8217;article						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list "><a href="#part-de-la-mobilité-sur-linternet" class="uagb-toc-link__trigger">Part de la mobilité sur l&#039;internet</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#les-usages-en-mobilité" class="uagb-toc-link__trigger">Les usages en mobilité</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#21-la-thumb-zone" class="uagb-toc-link__trigger">🔹2.1 |La thumb zone</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#22-linterface-responsive-ou-friendly-mobile" class="uagb-toc-link__trigger">🔹2.2 |L&#039;interface Responsive ou &quot;Friendly mobile&quot;</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#les-couts-de-la-mobilité" class="uagb-toc-link__trigger">Les couts de la mobilité</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#1-coûts-obligatoires-de-publication-stores" class="uagb-toc-link__trigger">🧾 1. Coûts obligatoires de publication (stores)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#2-coûts-de-développement-one-shot" class="uagb-toc-link__trigger">🛠️ 2. Coûts de développement (one-shot)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-hébergement-backend-annuel" class="uagb-toc-link__trigger">☁️ 3. Hébergement &amp; backend (annuel)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#4-marketing-visibilité-optionnel-mais-clé" class="uagb-toc-link__trigger">📣 4. Marketing &amp; visibilité (optionnel mais clé)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-maintenance-mises-à-jour-annuel" class="uagb-toc-link__trigger">🔄 5. Maintenance &amp; mises à jour (annuel)</a></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#budget-total-vision-synthèse" class="uagb-toc-link__trigger">🧮 Budget total – vision synthèse</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#application-simple-cas-étudiant-pme" class="uagb-toc-link__trigger">📱 Application simple (cas étudiant / PME)</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#application-professionnelle-business" class="uagb-toc-link__trigger">🚀 Application professionnelle / business</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#les-codes-spécifiques-de-la-mobilité" class="uagb-toc-link__trigger">Les codes spécifiques de la mobilité</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#41-notifier-via-lappli" class="uagb-toc-link__trigger">🔹4.1 |Notifier via l&#039;appli</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#sources" class="uagb-toc-link__trigger">📚 Sources</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#ndrc" class="uagb-toc-link__trigger">🧑‍🎓 NDRC</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#glossaire" class="uagb-toc-link__trigger">📘 Glossaire</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#42-optimiser-lux-pour-la-mobilité" class="uagb-toc-link__trigger">🔹4.2 |Optimiser l&#039;UX pour la mobilité</a></ul></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<style>
.chapter-title {
  display: flex;
  align-items: stretch;
  margin: 1.8rem 0;
}

/* Numéro */
.chapter-number {
  background: #1e73be;
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
}

/* Contenu */
.chapter-content {
  padding: 0.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid #1e73be;
}

/* H2 avec logo */
.chapter-content h2 {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 700;
  color: #1e73be;
  display: flex;
  align-items: center;
  gap: 0.6rem; /* espace logo / texte */
}

/* Logo carré */
.chapter-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Sous-titre */
.chapter-subtitle {
  margin-top: 0.35rem;
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
}
</style>

<div class="chapter-title">
  <div class="chapter-number">1</div>
  <div class="chapter-content">
    <h2>
      <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png"
           alt=""
           class="chapter-icon">
      Part de la mobilité sur l&#8217;internet
    </h2>
    <p class="chapter-subtitle">données brutes en France, comparaison mondiale, affiner la mesure/p>
  </div>
</div>



<p>Le suivi <img loading="lazy" decoding="async" width="28" height="24" class="wp-image-33689" style="width: 28px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-statcounter.jpg" alt=""><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Statcounter </mark>montre une <strong> prédominance de l&#8217;interface mobile</strong> 52,5% contre 47,5% pour les <strong>Desktops </strong>(ordinateurs classiques) :</p>



<!-- DÉBUT STATCOUNTER DYNAMIQUE (1 AN GLISSANT) -->
<div id="statcounter-placeholder" style="width:100%; max-width:600px; height:400px; margin: 0 auto; text-align:center;">
    <p style="color:#777; font-style:italic;">Chargement des statistiques en cours&#8230;</p>
</div>
<p style="text-align:center; font-size:0.9em; color:#555;">
    Source: <a href="https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/france" target="_blank" rel="noopener">StatCounter Global Stats &#8211; France</a>
</p>

<script>
(function() {
    // 1. Calcul des dates dynamiques
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth() + 1; // getMonth() retourne 0-11
    
    // On veut s'arrêter au mois dernier (car les données du mois en cours sont incomplètes)
    let endYear = currentYear;
    let endMonth = currentMonth - 1;
    
    if (endMonth === 0) { // Si on est en Janvier, le mois dernier est Décembre de l'année précédente
        endMonth = 12;
        endYear = currentYear - 1;
    }
    
    // Début : 1 an avant la date de fin
    let startYear = endYear - 1;
    let startMonth = endMonth;
    
    // Formatage StatCounter (AAAAMM avec zéro devant si < 10)
    const format = (y, m) => y.toString() + (m < 10 ? '0' : '') + m.toString();
    
    const startStr = format(startYear, startMonth);
    const endStr = format(endYear, endMonth);
    
    // 2. Construction de l'ID unique
    // Ex: desktop+mobile+tablet-comparison-FR-monthly-202504-202604
    const chartId = `desktop+mobile+tablet-comparison-FR-monthly-${startStr}-${endStr}`;
    
    // 3. Mise à jour de la DIV conteneur
    const container = document.getElementById('statcounter-placeholder');
    container.id = chartId;
    container.style.width = "600px"; // Largeur fixe comme ton exemple original
    container.style.height = "400px";
    // Optionnel : rendre responsive en CSS si besoin, mais StatCounter préfère souvent une largeur fixe
    
    // 4. Injection du script StatCounter
    const script1 = document.createElement('script');
    script1.type = 'text/javascript';
    script1.src = 'https://www.statcounter.com/js/fusioncharts.js';
    
    const script2 = document.createElement('script');
    script2.type = 'text/javascript';
    // L'URL dynamique avec les nouvelles dates
    script2.src = `https://gs.statcounter.com/chart.php?${chartId}&#038;chartWidth=600`;
    
    // Ajout des scripts à la page
    document.body.appendChild(script1);
    document.body.appendChild(script2);
    
    console.log(`StatCounter chargé pour la période : ${startStr} à ${endStr}`);
})();
</script>
<!-- FIN STATCOUNTER DYNAMIQUE -->



<p class="has-small-font-size">rq : ce graphique étant en liaison permanente avec StatCounter, vous verrez peut-être ici des données légèrement différentes des chiffres que je commente ci-dessous.</p>



<p class="has-base-2-background-color has-background">✍️ Au moment où j'écris cet article (Janvier 2026), <strong>on voit un tassement à l'automne</strong>, sans quoi c'était du 65/35. Il y'a des <strong>causes structurelles</strong> (🏢télétravail, activité des entreprises principalement en Desktop ...) mais aussi <strong>conjoncturelles </strong>(🌤️plus de mobilité quand la saison et la météo s'y prêtent).</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<div class="wp-block-uagb-counter uagb-block-c6c2c256 wp-block-uagb-counter--circle"><div class="wp-block-uagb-counter-circle-container"><div class="wp-block-uagb-counter-circle-container__content"><span class="wp-block-uagb-counter__icon"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M352 256C352 278.2 350.8 299.6 348.7 320H163.3C161.2 299.6 159.1 278.2 159.1 256C159.1 233.8 161.2 212.4 163.3 192H348.7C350.8 212.4 352 233.8 352 256zM503.9 192C509.2 212.5 512 233.9 512 256C512 278.1 509.2 299.5 503.9 320H380.8C382.9 299.4 384 277.1 384 256C384 234 382.9 212.6 380.8 192H503.9zM493.4 160H376.7C366.7 96.14 346.9 42.62 321.4 8.442C399.8 29.09 463.4 85.94 493.4 160zM344.3 160H167.7C173.8 123.6 183.2 91.38 194.7 65.35C205.2 41.74 216.9 24.61 228.2 13.81C239.4 3.178 248.7 0 256 0C263.3 0 272.6 3.178 283.8 13.81C295.1 24.61 306.8 41.74 317.3 65.35C328.8 91.38 338.2 123.6 344.3 160H344.3zM18.61 160C48.59 85.94 112.2 29.09 190.6 8.442C165.1 42.62 145.3 96.14 135.3 160H18.61zM131.2 192C129.1 212.6 127.1 234 127.1 256C127.1 277.1 129.1 299.4 131.2 320H8.065C2.8 299.5 0 278.1 0 256C0 233.9 2.8 212.5 8.065 192H131.2zM194.7 446.6C183.2 420.6 173.8 388.4 167.7 352H344.3C338.2 388.4 328.8 420.6 317.3 446.6C306.8 470.3 295.1 487.4 283.8 498.2C272.6 508.8 263.3 512 255.1 512C248.7 512 239.4 508.8 228.2 498.2C216.9 487.4 205.2 470.3 194.7 446.6H194.7zM190.6 503.6C112.2 482.9 48.59 426.1 18.61 352H135.3C145.3 415.9 165.1 469.4 190.6 503.6V503.6zM321.4 503.6C346.9 469.4 366.7 415.9 376.7 352H493.4C463.4 426.1 399.8 482.9 321.4 503.6V503.6z"></path></svg></span><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="6" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">/10</span></div><div class="wp-block-uagb-counter__title">sont des mobinautes</div></div><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 230 230" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="uagb-counter-circle__background"></circle><circle class="uagb-counter-circle__progress"></circle></svg></div></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>🌍 Sur le plan mondial, ce sont même <strong>6 internautes sur 10 </strong>qui sont connectés en mobilité (<strong>mobinautes</strong>).</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="170" height="240" src="https://st9ph.fr/wp-content/uploads/2026/01/image-108.png" alt="" class="wp-image-32563"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="179" height="231" src="https://st9ph.fr/wp-content/uploads/2026/01/image-90.png" alt="" class="wp-image-32502"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="180" height="249" src="https://st9ph.fr/wp-content/uploads/2026/01/image-95.png" alt="" class="wp-image-32507"/></figure>
</div>
</div>
</div>
</div>



<p class="has-base-2-background-color has-background">👉 Dans certains pays, pour des raisons de cout, <strong>le mobile est pratiquement le seul outil d'accès</strong> à internet, comme pour <strong>l'Inde</strong> (75%). C'est aussi <strong>le pays le plus peuplé de la planète</strong> !</p>



<p>L'expérience mobile est donc <strong>un enjeu prioritaire </strong>à intégrer dans la conception de vos touch points digitaux !</p>



<figure class="wp-block-table"><table><thead><tr><th> en France en 2025 :</th><th>Mobile (smartphone)</th><th>Desktop / Ordinateur</th><th>Source</th></tr></thead><tbody><tr><td><strong>Part de la population utilisant Internet</strong></td><td>≈ <strong>94 %</strong> des internautes</td><td>≈ <strong>64 %</strong> des internautes</td><td>DataReportal – Digital France</td></tr><tr><td><strong>Part du trafic web total</strong></td><td>≈ <strong>50–52 %</strong></td><td>≈ <strong>46–48 %</strong></td><td>Statista – Device traffic share</td></tr><tr><td><strong>Appareil principal d’accès à Internet</strong></td><td><strong>Smartphone n°1</strong></td><td>Secondaire</td><td>Médiamétrie – Observatoire usages numériques</td></tr><tr><td><strong>Temps quotidien moyen sur Internet</strong></td><td>Majoritaire (réseaux sociaux, vidéo, navigation rapide)</td><td>Minoritaire (travail, achats complexes)</td><td>Médiamétrie / DataReportal</td></tr><tr><td><strong>Usages dominants</strong></td><td>Réseaux sociaux, messagerie, recherche rapide, e-commerce</td><td>Travail, formulaires longs, comparaison détaillée</td><td>Médiamétrie</td></tr><tr><td><strong>Tendance 2020–2025</strong></td><td>📈 En hausse continue</td><td>📉 Stable / légère baisse</td><td>Statista</td></tr></tbody></table></figure>



<p>En réalité, <strong>le traçage se fait sur le type de connexion</strong> et non pas sur le type d'ordinateur:</p>



<ul class="wp-block-list">
<li>🛜 sont considérés comme <strong>des mobinautes</strong> tous ceux qui <strong>se connectent en GSM</strong> (5G, 4G ...) dont <strong>essentiellement des smartphones </strong>mais aussi quelques desktops en mobilité</li>



<li>🏠 Sont considérés comme <strong>des Internautes "classiques" </strong>ceux qui <strong>se connectent en Fibre ou ADSL</strong> (il en reste encore un peu même si le réseau RTC qui le supporte est en cours de remplacement accéléré). Ce sont donc <strong>majoritairement des Desktops </strong>mais aussi des smartphones qui basculent en Wifi (souvent quand ils arrivent "à la maison").</li>
</ul>



<p>Pour <strong>une mesure plus fine</strong>, là encore <img loading="lazy" decoding="async" width="28" height="24" class="wp-image-33689" style="width: 28px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-statcounter.jpg" alt=""><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Statcounter</mark> peut nous aider à y voir clair :</p>



<iframe 
  src="https://gs.statcounter.com/os-market-share/all/france"
  width="100%" 
  height="250"
  style="border:none; overflow:hidden;"
  loading="lazy">
</iframe>



<p class="has-text-align-center has-small-font-size"><em>Cet aperçu étant actualisé au moment du chargement de l'article, les commentaires ci-dessous risquent de proposer des chiffres un peu différents.</em></p>



<p>Si on cumule <strong>les internautes par <em>Operating System</em> (OS)</strong>, on connait cette fois <strong>le type d'ordinateu</strong>r qui a servi à la connexion :</p>



<ul class="wp-block-list">
<li><strong>40,32 </strong>% en décembre 2025 au cumul Windows + Mac OS + OS X <strong>pour les desktops</strong></li>



<li><strong>52,18</strong> % <strong>pour les smartphones</strong> (au moins) en cumulant Android + IOS</li>



<li>Il nous reste environ <strong>7,5 %</strong> que <img loading="lazy" decoding="async" width="28" height="24" class="wp-image-33689" style="width: 28px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-statcounter.jpg" alt=""><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Statcounter</mark> n'a pu identifier (pas de cookies, Data Centers, moyens systèmes d'entreprises, Extranets (Internets privés), Peer to peer ...)</li>
</ul>



<figure class="wp-block-image size-large uag-hide-mob"><img loading="lazy" decoding="async" width="1024" height="434" src="https://st9ph.fr/wp-content/uploads/2026/01/image-351-1024x434.png" alt="" class="wp-image-33696" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-351-1024x434.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-351-300x127.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-351-768x325.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-351.png 1240w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="has-medium-font-size">🧮 Si on pondère sur les parts identifiées ont retrouve presque <strong>la répartition universelle de 6 pour 10 en mobilité</strong>.</p>



<p>Revenons à la France et regardons <strong>les temps d'usage en mobilité</strong>. On se rendra compte que même si, globalement, la part de mobilité n'est que légèrement supérieure à la moitié des internautes, c'est tout de même <strong>environ 2 h 30 par jour pour chacun d'entre nous</strong> qu'on est collé à ce petit morceau d'écran !</p>



<figure class="wp-block-table"><table><thead><tr><th>Génération / Âge</th><th><strong>Temps quotidien moyen sur smartphone</strong></th><th>Notes &amp; source</th></tr></thead><tbody><tr><td><strong>15-24 ans (Gen Z)</strong></td><td>~ <strong>2h35 sur Internet</strong> (mobile majoritaire)</td><td>Médiamétrie – mobile capte 93 % du temps digital chez les 15-24 ans, avec un quotidien total de surf autour de ~2h35 dans cette tranche 📱(<a href="https://www.ecranmobile.fr/%E2%80%8B80-du-temps-digital-se-fait-sur-les-smartphones_a77649.html?utm_source=chatgpt.com">EcranMobile.fr</a>)</td></tr><tr><td><strong>25-49 ans (Millennials / jeunes adultes)</strong></td><td><strong>≈ 1h-2h/jour</strong> (mobile dominant)</td><td>le Mobile représente ~80% du temps digital ; 25-49 ans proches des 15-24 ans pour une connexion quotidienne sur smartphone (<a href="https://www.ecranmobile.fr/%E2%80%8B80-du-temps-digital-se-fait-sur-les-smartphones_a77649.html?utm_source=chatgpt.com">EcranMobile.fr</a>)</td></tr><tr><td><strong>50-64 ans (Gen X)</strong></td><td>~ <strong>1h30/jour</strong> (sur mobile)</td><td>50+ : surf quotidien 2h15 dont ~1h30 sur smartphone 📱(<a href="https://www.ecranmobile.fr/Le-mobile-represente-80-du-temps-de-surf-quotidien_a76684.html?utm_source=chatgpt.com">EcranMobile.fr</a>)</td></tr><tr><td><strong>65 ans + (Baby Boomers et plus)</strong></td><td><strong>~ 30-60 min sur mobile</strong></td><td>le Mobile capte moins de temps que chez les jeunes (par comparaison Médiamétrie global), ils passent ~50 min sur mobile quand le temps de surf total est de ~2 h 40 (<a href="https://www.ecranmobile.fr/%E2%80%8B80-du-temps-digital-se-fait-sur-les-smartphones_a77649.html?utm_source=chatgpt.com">EcranMobile.fr</a>)</td></tr><tr><td><strong>Ensemble de la population</strong></td><td>~ <strong>2h24–2h40/jour</strong> (tous écrans) dont ~80 % sur mobile</td><td>Temps total moyen France, avec dominance mobile 📱(<a href="https://www.ecranmobile.fr/%E2%80%8B80-du-temps-digital-se-fait-sur-les-smartphones_a77649.html?utm_source=chatgpt.com">EcranMobile.fr</a>)</td></tr></tbody></table></figure>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="724" height="409" src="https://st9ph.fr/wp-content/uploads/2025/12/image-19.png" alt="" class="wp-image-30975" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-19.png 724w, https://st9ph.fr/wp-content/uploads/2025/12/image-19-300x169.png 300w" sizes="auto, (max-width: 724px) 100vw, 724px" /></figure>
</div>


<p>😨Ca fait peur, non ?</p>



<!-- DÉBUT TITRE CHAPITRE -->
<style>
.chapter-title { display: flex; align-items: stretch; margin: 1.7rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chapter-number { background: #1e73be; color: #fff; font-weight: 700; font-size: 2.8rem; padding: 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.chapter-content { padding: 1.3rem 1.5rem; width: 100%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.chapter-points { margin: 0; padding-left: 0; list-style: none; }
.chapter-points li { margin-bottom: 0.35rem; color: #444; font-size: 0.95rem; line-height: 1.45; }
.chapter-points li::before { content: "🔹 "; }
</style>
<div class="chapter-title">
<div class="chapter-number">2</div>
<div class="chapter-content">
<div class="chapter-heading">
<a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
<img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo">
</a>
<h2>Les usages en mobilité</h2>
</div>
<ul class="chapter-points"><li>la Thumb zone</li><li>l'interface Responsive ou "Friendly mobile"</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>😗 P<strong>as de clavier, pas de souris,</strong> <strong>un écran de 7 pouces </strong>pour les mieux dotés, <strong>il va falloir faire avec</strong> !</p>



<h3 class="wp-block-heading" id="0-21-la-thumb-zone-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.1 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>La thumb zone</strong></h3>



<p class="callout bleu">👍"Thumb", c'est <strong>le pouce en anglais</strong>, et c'est <strong>la souris des mobinautes </strong>(sauf pour les X - dont je fais partie -et les boomers qui s'obstinent avec leur index 👆) ! Il va falloir travailler l'interface de nos sites pour que les interactions soient accessibles :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="708" height="370" src="https://st9ph.fr/wp-content/uploads/2026/01/image-352.png" alt="" class="wp-image-33700" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-352.png 708w, https://st9ph.fr/wp-content/uploads/2026/01/image-352-300x157.png 300w" sizes="auto, (max-width: 708px) 100vw, 708px" /></figure>
</div>


<p class="has-small-font-size">Source de l'image : <a href="https://www.appsflyer.com/blog/tips-strategy/mobile-app-ux/" target="_blank" rel="noreferrer noopener">appsflyer.com</a> (retravaillée)</p>



<p class="callout vert">✅ la <strong>moyenne de confort </strong>... <strong>juste la moitié de mes 7 pouces</strong> ! Et encore, c'est <strong>dans le meilleur des cas</strong>.</p>



<p>C'est pourquoi <strong>beaucoup d'applications mobiles</strong> proposent <strong>leurs principales rubriques en bas</strong> dans la <strong>Thumb Zone de confort</strong> de toutes les configurations :</p>



<figure class="wp-block-image size-large uag-hide-mob"><img loading="lazy" decoding="async" width="1024" height="139" src="https://st9ph.fr/wp-content/uploads/2026/01/image-353-1024x139.png" alt="" class="wp-image-33702" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-353-1024x139.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-353-300x41.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-353-768x104.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-353.png 1156w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading" id="1-22-linterface-responsive-ou-friendly-mobile-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.2 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>L'interface Responsive ou "Friendly mobile</strong>"</h3>



<p>👉🏻 Mais pour <strong>les sites classiques</strong>, contrairement <strong>aux applis faites pour cela</strong>, quand vous les voyez en affichage mobile, le "<strong>frendly</strong>" ou le "<strong>Responsive</strong>" (deux manières de dire <strong>qu'ils s'adaptent aux écrans de smartphone</strong>), <strong>ce n'est pas toujours gagné d'avance</strong>.</p>



<p>➡️ Il existe <strong>des outils pour tester votre site</strong> et le seul que j'ai trouvé qui ne m'a demandé ni de payer, ni de spammer mon mail est <a href="https://quirktools.com/screenfly/" target="_blank" rel="noreferrer noopener">Screenfly</a></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="845" height="370" src="https://st9ph.fr/wp-content/uploads/2026/01/image-354.png" alt="" class="wp-image-33703" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-354.png 845w, https://st9ph.fr/wp-content/uploads/2026/01/image-354-300x131.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-354-768x336.png 768w" sizes="auto, (max-width: 845px) 100vw, 845px" /></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Entrez <strong>votre nom de domaine</strong></li>



<li>Choisissez <strong>le type de smartphone</strong> dont vous voulez apprécier le rendu</li>



<li>Contemplez le résultat 👉</li>
</ul>



<p></p>



<p class="has-text-align-center">Ici, mon site sous <img loading="lazy" decoding="async" width="30" height="28" class="wp-image-33540" style="width: 30px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-Wordpress-wp.jpg" alt=""><strong>WordPress</strong> dispose <strong>automatiquement </strong>d'<strong>une version frendly</strong> mais ce n'est pas le cas de tous les CMS.</p>



<p>On constate que :</p>



<ul class="wp-block-list">
<li>le <strong> menu "hamburger"</strong> <img loading="lazy" decoding="async" width="19" height="19" class="wp-image-33705" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/ico-hamburger.jpg" alt=""> a remplacé le menu classique</li>



<li>Les colonnes de <strong>mes Frames</strong> s'empilent les unes sous les autres</li>
</ul>



<p></p>



<p class="has-text-align-center">Et comme <strong>je peux interagir avec la fenêtre,</strong> je peux aussi développer le menu ou <strong>atteindre</strong> toutes les pages ou les liens, <strong>faire tout ce que je veux</strong>, comme si j'avais un superbe IPhone 16 :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="333" height="333" src="https://st9ph.fr/wp-content/uploads/2026/01/image-356.png" alt="" class="wp-image-33706" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-356.png 333w, https://st9ph.fr/wp-content/uploads/2026/01/image-356-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-356-150x150.png 150w" sizes="auto, (max-width: 333px) 100vw, 333px" /></figure>



<p class="has-base-2-background-color has-background">J<strong>e n'ai pas la thumb zone</strong>, c'est vrai, mais j'ai <strong>des repères de règles</strong> pour définir quelles sont les zones d<strong>'interaction de confort</strong>.</p>



<p>👉 Ici, plutot entre 600 et 800 en verticale.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="367" height="753" src="https://st9ph.fr/wp-content/uploads/2026/01/image-355.png" alt="" class="wp-image-33704" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-355.png 367w, https://st9ph.fr/wp-content/uploads/2026/01/image-355-146x300.png 146w" sizes="auto, (max-width: 367px) 100vw, 367px" /></figure>



<p>Il est vrai que <img loading="lazy" decoding="async" width="19" height="18" class="wp-image-33542" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/wp-ico.jpg" alt="">WordPress me permet aussi d'avoir un aperçu mobile mais c'est moins précis (et juste pour la page ou l'article en cours de création)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="277" height="245" src="https://st9ph.fr/wp-content/uploads/2026/01/image-357.png" alt="" class="wp-image-33707"/></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="347" height="492" src="https://st9ph.fr/wp-content/uploads/2026/01/image-358.png" alt="" class="wp-image-33710" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-358.png 347w, https://st9ph.fr/wp-content/uploads/2026/01/image-358-212x300.png 212w" sizes="auto, (max-width: 347px) 100vw, 347px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>En faisant défiler des articles du blog, je me rends compte de <strong>l'effet désastreux sur mobile </strong>de <strong>certaines images</strong> comme, ci-dessous, un zoom arrière violent et on ne lit plus rien :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="349" height="391" src="https://st9ph.fr/wp-content/uploads/2026/01/image-359.png" alt="" class="wp-image-33711" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-359.png 349w, https://st9ph.fr/wp-content/uploads/2026/01/image-359-268x300.png 268w" sizes="auto, (max-width: 349px) 100vw, 349px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👆 Idem pour <strong>le tableau ci-dessus</strong> même si dans ce cas, c'est juste une option du bloc Tableau à changer.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="284" height="143" src="https://st9ph.fr/wp-content/uploads/2026/01/image-360.png" alt="" class="wp-image-33713"/></figure>



<p class="has-text-align-right has-base-2-background-color has-background">Ainsi, <strong>en débloquant la largeur fixe des colonnes</strong>, je donne <strong>un slide horizontal</strong> à ceux qui ne peuvent pas afficher pleinement tout le tableau (interdit au départ, <strong>obligeant le CMS à tout afficher dans la largeur écran du smartphone)</strong>  👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center">👇Ce que ça donne corrigé :</p>



<figure class="wp-block-video"><video height="352" style="aspect-ratio: 348 / 352;" width="348" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/tbx-slide.mp4" playsinline></video></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Pour les images, ça va être <strong>un peu plus compliqué</strong> ! il va falloir <strong>les désactiver </strong>sur mobile :</p>


<div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="178" height="131" src="https://st9ph.fr/wp-content/uploads/2026/01/image-361.png" alt="" class="wp-image-33718"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="callout rouge">On peut donc <strong>désactiver les images illisibles </strong>mais seulement <strong>celles qui sont décoratives</strong>. Ca ne réglera pas le problème si c'est <strong>un contenu important</strong>. 😠</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<ul class="wp-block-list">
<li>Dans le même temps, il faudra <strong>reconstruire une illustration qui sera plus visuelle </strong>en affichage mobile :</li>
</ul>



<p></p>



<p class="has-text-align-center has-base-2-background-color has-background">Ici, je redispose mon schéma pour qu'en portrait, le zoom soit moins profond et permette encore la lecture. 👉</p>



<ul class="wp-block-list">
<li>Puis <strong>je désactive son affichage </strong>sur <strong>Desktop </strong>et tablettes</li>
</ul>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="515" height="441" src="https://st9ph.fr/wp-content/uploads/2026/01/image-377.png" alt="" class="wp-image-33755" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-377.png 515w, https://st9ph.fr/wp-content/uploads/2026/01/image-377-300x257.png 300w" sizes="auto, (max-width: 515px) 100vw, 515px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="354" height="663" src="https://st9ph.fr/wp-content/uploads/2026/01/image-378.png" alt="" class="wp-image-33758" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-378.png 354w, https://st9ph.fr/wp-content/uploads/2026/01/image-378-160x300.png 160w" sizes="auto, (max-width: 354px) 100vw, 354px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Ainsi, selon qu'on soit sur desktop ou sur mobile, <strong>ce n'est pas la même image qui s'affichera</strong></p>



<p class="has-base-2-background-color has-background"> 👍<strong>Screenfly </strong>est donc un outil intéressant pour <strong>réaliser les manques de <em>Responsive</em> de votre site web confortablement </strong>depuis le Pc d'où vous développez, sans avoir à regarder en permanence ce que cela donne sur votre mobile posé sur vos genoux (en plus, il va finir par tomber).</p>



<p>👉 <strong>N'oubliez </strong>surtout <strong>pas la <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Thumb Zone</mark> </strong>! </p>



<p>l'exemple de mon site montre que <img loading="lazy" decoding="async" width="19" height="18" class="wp-image-33542" style="width: 19px;" src="https://st9ph.fr/wp-content/uploads/2026/01/wp-ico.jpg" alt="">WordPress (mais la plupart des autres CMS font comme lui) place le menu dans <strong>la zone d'effort</strong>, voire de déséquilibre.</p>



<p class="has-base-2-background-color has-background">📳 C'est pourquoi, aussi travaillé sera-t-il, <strong>votre site frendly ne vaudra jamais une appli mobile</strong> faite spécifiquement pour les smartphones</p>
</div>
</div>



<p class="has-text-align-center">Et pourquoi ne pas prévoir un menu flottant comme celui à droite de cet écran ? 👉</p>



<!-- DÉBUT TITRE CHAPITRE -->
<style>
.chapter-title { display: flex; align-items: stretch; margin: 1.7rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chapter-number { background: #1e73be; color: #fff; font-weight: 700; font-size: 2.8rem; padding: 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.chapter-content { padding: 1.3rem 1.5rem; width: 100%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.chapter-points { margin: 0; padding-left: 0; list-style: none; }
.chapter-points li { margin-bottom: 0.35rem; color: #444; font-size: 0.95rem; line-height: 1.45; }
.chapter-points li::before { content: "🔹 "; }
</style>
<div class="chapter-title">
<div class="chapter-number">3</div>
<div class="chapter-content">
<div class="chapter-heading">
<a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
<img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo">
</a>
<h2>Les couts de la mobilité</h2>
</div>
<ul class="chapter-points"><li>Coûts obligatoires de publication (stores)</li><li>Coûts de développement (one-shot)</li><li>Hébergement & backend (annuel)</li><li>Marketing & visibilité (optionnel mais clé)</li><li>Maintenance & mises à jour (annuel)</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>➡️ Qu'il s'agisse des <strong>outils</strong> (applis), des <strong>méthodes </strong>(notifications, localisation ...) ou de la <strong>visibilité</strong>, la mobilité obéit à <strong>des codes spécifiques</strong>.</p>



<p class="has-text-align-center has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-7232d6923989c42d4e3726506dc60b89">D'abord, faut-il investir dans la mobilité ?</p>



<p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Tout dépend de votre audience !</mark></strong> <strong>Google Analytics</strong>, dans son <strong>analyse de la technologie</strong> utilisée par vos visiteurs, vous le dira :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="956" height="408" src="https://st9ph.fr/wp-content/uploads/2026/01/image-368.png" alt="" class="wp-image-33733" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-368.png 956w, https://st9ph.fr/wp-content/uploads/2026/01/image-368-300x128.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-368-768x328.png 768w" sizes="auto, (max-width: 956px) 100vw, 956px" /></figure>



<p class="has-base-2-background-color has-background">📈 Ci-dessus, l'analyse de ce blog montre que <strong>mon cœur de cible est sur Desktop</strong> : <strong>9/10</strong>. Et pour cause, ce site est fait d'abord pour mes étudiants qui l'utilisent en cours, parmi d'autres logiciels difficilement manœuvrables sur smartphones.</p>



<p>➡️ Mais si ce n'est pas le cas pour vous, <strong>il faudra songer à une appli mobile </strong>:</p>



<p>Il existe <strong>des constructeurs d'appli en ligne</strong> (SaaS) comme<strong> AppMachine </strong>(ci-dessous) qui ne demandent pas de compétences spéciales en programmation. C'est un WYSIWYG</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-369-1024x580.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary><strong>WYSIWYG</strong>, c'est quoi comme langue ?</summary>
<p>De l'anglais ! Et c'est un acronyme : <strong>What You See Is What You get</strong> : c'est çà dire que le constructeur consiste à <strong>alimenter des formulaires ou à jouer au drag-And-Drop</strong> avec des éléments à incorporer avec <strong>un aperçu permanent</strong>. Vous voyez en conception ce que l'utilisateur verra aussi.</p>
</details>



<p>➡️ C'est juste <strong>un essai pour vous monter</strong> mais je n'irai pas plus loin, puisqu'à la fin, <strong>il faudra payer</strong>. Certes, ce sera <strong>moins d'une centaine d'euros </strong>quand des développeurs vous en demanderont des milliers (mais c'est vous qui aurez fait tout le boulot, en fait).</p>



<p>Voici une e<strong>stimation que j'ai demandée à Chat GPT </strong>:</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Type d’application</th><th>Budget estimé (France)</th></tr></thead><tbody><tr><td>App simple (contenu, vitrine, formulaire)</td><td><strong>3 000 – 8 000 €</strong></td></tr><tr><td>App intermédiaire (compte utilisateur, API, back-office)</td><td><strong>8 000 – 20 000 €</strong></td></tr><tr><td>App complexe (paiement, géoloc, temps réel, marketplace)</td><td><strong>20 000 – 60 000 €+</strong></td></tr></tbody></table></figure>



<p>Il se base sur <strong>des sites pros</strong> : Malt, Codeur.com, Webedia, App Mobile Normandie (sans doute pour me faire plaisir le dernier) et je le crois volontiers.</p>



<p>Mais ce n'est pas terminé ! Si vous voulez qu'elle soit utilisée, il faudra <strong>la faire héberger sur les "stores" </strong>d'Apple (Pour IOS) et de Google (pour Androïd) parce que ce sera pratiquement <strong>le seul moyen de la la télécharger.</strong></p>



<p>Voici ci-dessous <strong>un tableau comparatif</strong> (c'est à peu près le même que sur ma fiche ressource du drive car les tarifs n'ont pas trop évolué depuis 2022, date de ma dernière enquête) :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td class="has-text-align-center" data-align="center"><img loading="lazy" decoding="async" width="99" height="27" class="wp-image-33735" style="width: 99px;" src="https://st9ph.fr/wp-content/uploads/2026/01/gPlay.png" alt=""></td><td class="has-text-align-center" data-align="center"><img loading="lazy" decoding="async" width="99" height="27" class="wp-image-33736" style="width: 99px;" src="https://st9ph.fr/wp-content/uploads/2026/01/Appstore.png" alt=""></td></tr><tr><td>abonnement</td><td class="has-text-align-center" data-align="center">25 € à l’inscription</td><td class="has-text-align-center" data-align="center">99 € /an</td></tr><tr><td>Commissions Sur les achats in-app</td><td class="has-text-align-center" data-align="center">15 % si CA &lt; 1 M$ (30 % au delà)</td><td class="has-text-align-center" data-align="center">15 à 30 % selon le CA</td></tr><tr><td>Revenus issus des abonnements</td><td class="has-text-align-center" data-align="center">15 % sans plafond</td><td class="has-text-align-center" data-align="center">Au cas par cas (dispense pour les «&nbsp;petits développeurs&nbsp;»)</td></tr><tr><td>avantage</td><td class="has-text-align-center" data-align="center">Part du marché majeure (75 %)</td><td class="has-text-align-center" data-align="center">Taux de conversion plus élevé</td></tr></tbody></table></figure>



<p>👉 Mais ces couts sont à englober dans un budget plus large de maintenance, de visibilité et d'hébergement qui oscillent entre 5000 et 10000 € l'année de lancement et au moins 50% de ce budget chaque année ensuite.</p>


<div class="wp-block-ub-content-toggle wp-block-ub-content-toggle-block" id="ub-content-toggle-block-c0d1fa86-0992-4889-8a3e-93709a073f98" data-mobilecollapse="true" data-desktopcollapse="true" data-preventcollapse="false" data-showonlyone="false">
<div class="wp-block-ub-content-toggle-accordion" style="border-color: var(--contrast-3); " id="ub-content-toggle-panel-block-">
			<div class="wp-block-ub-content-toggle-accordion-title-wrap" style="background-color: var(--contrast-3);" aria-controls="ub-content-toggle-panel-0-c0d1fa86-0992-4889-8a3e-93709a073f98" tabindex="0">
			<p class="wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-c0d1fa86-0992-4889-8a3e-93709a073f98" style="color: #000000; ">les couts détaillés de l'enquête (dev, maintenance, mises à jours) pour les plus curieux</p>
			<div class="wp-block-ub-content-toggle-accordion-toggle-wrap right" style="color: #000000;"><span class="wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down"></span></div>
		</div>
			<div role="region" aria-expanded="false" class="wp-block-ub-content-toggle-accordion-content-wrap ub-hide" id="ub-content-toggle-panel-0-c0d1fa86-0992-4889-8a3e-93709a073f98">

<p>💶 Budget global pour une application mobile (France – ordre de grandeur)</p>



<h3 class="wp-block-heading" id="2-1-co%C3%BBts-obligatoires-de-publication-stores">🧾 1. Coûts obligatoires de publication (stores)</h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Poste</th><th>Google Play</th><th>Apple App Store</th></tr></thead><tbody><tr><td>Compte développeur</td><td><strong>25 € (une fois)</strong></td><td><strong>99 € / an</strong></td></tr><tr><td>Publication / mises à jour</td><td>0 €</td><td>0 €</td></tr><tr><td><strong>Sous-total annuel min.</strong></td><td><strong>25 €</strong></td><td><strong>99 €</strong></td></tr></tbody></table></figure>



<p><strong>Sources</strong> :<br>Google Play Console – Developer Account<br>Apple Developer Program</p>



<hr class="wp-block-separator has-alpha-channel-opacity">



<h3 class="wp-block-heading" id="3-%EF%B8%8F-2-co%C3%BBts-de-d%C3%A9veloppement-one-shot">🛠️ 2. Coûts de développement (one-shot)</h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Type d’application</th><th>Budget estimé (France)</th></tr></thead><tbody><tr><td>App simple (contenu, vitrine, formulaire)</td><td><strong>3 000 – 8 000 €</strong></td></tr><tr><td>App intermédiaire (compte utilisateur, API, back-office)</td><td><strong>8 000 – 20 000 €</strong></td></tr><tr><td>App complexe (paiement, géoloc, temps réel, marketplace)</td><td><strong>20 000 – 60 000 €+</strong></td></tr></tbody></table></figure>



<p><strong>Sources</strong> : agences digitales françaises (moyennes observées)<br>→ Malt, Codeur.com, Webedia, AppMobileNormandie</p>



<hr class="wp-block-separator has-alpha-channel-opacity">



<h3 class="wp-block-heading" id="4-%E2%98%81%EF%B8%8F-3-h%C3%A9bergement-amp-backend-annuel">☁️ 3. Hébergement &amp; backend (annuel)</h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Poste</th><th>Coût annuel</th></tr></thead><tbody><tr><td>Hébergement serveur / cloud</td><td><strong>100 – 1 000 €</strong></td></tr><tr><td>Base de données / API</td><td><strong>0 – 500 €</strong></td></tr><tr><td>Stockage (images, vidéos)</td><td><strong>0 – 300 €</strong></td></tr><tr><td>Notifications / emails</td><td><strong>0 – 200 €</strong></td></tr><tr><td><strong>Sous-total annuel</strong></td><td><strong>200 – 2 000 €</strong></td></tr></tbody></table></figure>



<p><strong>Sources</strong> : AWS, Firebase, OVHcloud (offres standards)</p>



<hr class="wp-block-separator has-alpha-channel-opacity">



<h3 class="wp-block-heading" id="5-4-marketing-amp-visibilit%C3%A9-optionnel-mais-cl%C3%A9">📣 4. Marketing &amp; visibilité (optionnel mais clé)</h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Poste</th><th>Budget conseillé</th></tr></thead><tbody><tr><td>ASO (App Store Optimization)</td><td><strong>300 – 1 000 €</strong></td></tr><tr><td>Visuels, screenshots, vidéo</td><td><strong>200 – 800 €</strong></td></tr><tr><td>Publicité de lancement</td><td><strong>500 – 3 000 €</strong></td></tr><tr><td><strong>Sous-total lancement</strong></td><td><strong>1 000 – 5 000 €</strong></td></tr></tbody></table></figure>



<p><strong>Sources</strong> : App Radar, StoreMaven, agences ASO européennes</p>



<hr class="wp-block-separator has-alpha-channel-opacity">



<h3 class="wp-block-heading" id="6-5-maintenance-amp-mises-%C3%A0-jour-annuel">🔄 5. Maintenance &amp; mises à jour (annuel)</h3>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Poste</th><th>Coût annuel</th></tr></thead><tbody><tr><td>Corrections bugs</td><td><strong>500 – 2 000 €</strong></td></tr><tr><td>Mises à jour OS (iOS / Android)</td><td><strong>500 – 1 500 €</strong></td></tr><tr><td>Évolutions fonctionnelles</td><td><strong>1 000 – 5 000 €</strong></td></tr><tr><td><strong>Sous-total annuel</strong></td><td><strong>2 000 – 8 000 €</strong></td></tr></tbody></table></figure>



<p><strong>Source</strong> : pratiques agences &amp; freelances France</p>



<hr class="wp-block-separator has-alpha-channel-opacity">



<h2 class="wp-block-heading" id="7-budget-total-%E2%80%93-vision-synth%C3%A8se">🧮 Budget total – vision synthèse</h2>



<h3 class="wp-block-heading" id="8-application-simple-cas-%C3%A9tudiant-pme">📱 Application simple (cas étudiant / PME)</h3>



<ul class="wp-block-list">
<li>Année 1 : <strong>4 500 – 10 000 €</strong></li>



<li>Années suivantes : <strong>2 500 – 4 000 € / an</strong></li>
</ul>



<h3 class="wp-block-heading" id="9-application-professionnelle-business">🚀 Application professionnelle / business</h3>



<p>Années suivantes : <strong>4 000 – 10 000 € / an</strong></p>



<p>Année 1 : <strong>15 000 – 30 000 €</strong></p>

</div>
		</div>
</div>


<p></p>



<!-- DÉBUT TITRE CHAPITRE -->
<style>
.chapter-title { display: flex; align-items: stretch; margin: 1.7rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chapter-number { background: #1e73be; color: #fff; font-weight: 700; font-size: 2.8rem; padding: 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.chapter-content { padding: 1.3rem 1.5rem; width: 100%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.chapter-points { margin: 0; padding-left: 0; list-style: none; }
.chapter-points li { margin-bottom: 0.35rem; color: #444; font-size: 0.95rem; line-height: 1.45; }
.chapter-points li::before { content: "🔹 "; }
</style>
<div class="chapter-title">
<div class="chapter-number">4</div>
<div class="chapter-content">
<div class="chapter-heading">
<a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
<img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo">
</a>
<h2>Les codes spécifiques de la mobilité</h2>
</div>
<ul class="chapter-points"><li>Notifier via l'appli</li><li>Optimiser l'UX pour le mobile</li></ul>
</div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>➡️ Qu'il s'agisse des <strong>outils</strong> (applis), des <strong>méthodes </strong>(notifications, localisation ...) ou de la <strong>visibilité</strong>, la mobilité obéit à <strong>des codes spécifiques</strong>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="361" height="471" src="https://st9ph.fr/wp-content/uploads/2026/01/image-370.png" alt="" class="wp-image-33738" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-370.png 361w, https://st9ph.fr/wp-content/uploads/2026/01/image-370-230x300.png 230w" sizes="auto, (max-width: 361px) 100vw, 361px" /></figure>



<p></p>



<p></p>



<p class="has-small-font-size">Je ne sais pas si vous "avez la ref" pour l'illustration de droite 👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>📳 Les <strong>smartphones</strong> sont des ordinateurs dépourvus de périphériques externes mais dotés de <strong>3 atouts </strong>qui les distinguent :</p>



<ul class="wp-block-list">
<li>ils disposent d’une <strong>carte SIM </strong>(Suscriber Indentity Module) qui permet de les raccorder (borner) au <strong>réseau mobile GSM (</strong>Global System Mobile) et avec les<strong>dernières générations (</strong>4<sup>ème</sup> et 5<sup>ème</sup> dites <strong>4G et 5G</strong>) proposent <strong>un débit nomade </strong>aussi intéressant pour la navigation sur l’internet qu’avec les réseaux sédentaires (ADSL et fibre).</li>



<li>Ils intègrent pratiquement tous <strong>une puce GPS</strong> (global positioning System) qui permet, par triangulation d’un signal sur trois satellites en orbite autour de la planète <strong>de définir au mètre près la position de la puce sur la surface du globe</strong> !</li>



<li>Ils disposent d'<strong>un appareil photo</strong> qui vos permettra de les faire scanner vos code barres et QR codes</li>
</ul>



<p class="has-accent-color has-text-color has-link-color wp-elements-d05082b7cffff2769f3750dcaf2f098d"><em>Ce sont des spécificités à exploiter car <strong>vous pouvez désormais suivre vos clients partout </strong>!</em></p>



<figure class="wp-block-image size-full"><a href="https://youtu.be/hGI2d31M7Ns" target="_blank" rel=" noreferrer noopener"><img loading="lazy" decoding="async" width="554" height="216" src="https://st9ph.fr/wp-content/uploads/2026/01/image-379.png" alt="" class="wp-image-33764" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-379.png 554w, https://st9ph.fr/wp-content/uploads/2026/01/image-379-300x117.png 300w" sizes="auto, (max-width: 554px) 100vw, 554px" /></a></figure>
</div>
</div>



<h3 class="wp-block-heading" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">4.1 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Notifier via l'appli</strong></h3>



<p><strong>Votre appli mobile </strong>que votre client a téléchargé <strong>est une aubaine</strong> <strong>pour le conduire jusqu'à votre boutique</strong>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Sur le schéma ci-contre, prenons l’exemple de 3 clients du magasin au centre de la carte qui ont l’appli mobile du magasin :</p>



<ul class="wp-block-list">
<li>Grace au guidage satellite de son GPS, le commerçant peut <strong>guider le <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">client A </mark></strong>qui demande <strong>un itinéraire vers le parking gratuit </strong>disponible le plus proche.</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="266" height="139" src="https://st9ph.fr/wp-content/uploads/2026/01/image-372.png" alt="" class="wp-image-33742"/></figure>
</div>


<ul class="wp-block-list">
<li>Le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">client B</mark></strong> venant de <strong>changer de borne</strong>, car il se rapproche, <strong>est détecté sur la même antenne GSM que le magasin</strong> ; Il reçoit une <strong>notification de push </strong>lui indiquant une promo en cours</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-371.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<ul class="wp-block-list">
<li>Le <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">client C</mark></strong> <strong>s’éloigne du magasin</strong> et change de borne. L’appli détecte son départ et lui <strong>demande son avis </strong>sur sa visite (il l’a détecté au préalable car son appli <strong>a capté le wifi de la SVP</strong> de manière durable ou bien encore parce qu’il <strong>a scanné sa carte de fidélité)</strong>.</li>
</ul>
</div>
</div>



<p class="has-medium-font-size">➡️ Impressions :</p>



<ul class="wp-block-list">
<li>En moyenne, <strong>~60 % des utilisateurs d’app activent les notifications push</strong> quand on leur demande.</li>



<li>Sur Android le taux d’opt-in peut atteindre <strong>≈91 %</strong>, sur iOS plutôt <strong>≈44 %</strong>, à cause des réglages de consentement différents.</li>



<li><strong>~48 % ouvrent une notification dans les 15 minutes</strong> suivant sa réception.</li>



<li>Jusqu’à <strong>90 % des notifications transactionnelles sont délivrées et ouvertes rapidement</strong>.</li>



<li>sont jugées <strong>pertinentes </strong>(pour eux) <strong>par ~70 % des utilisateurs</strong>.</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="556" height="215" src="https://st9ph.fr/wp-content/uploads/2026/01/image-374.png" alt="" class="wp-image-33745" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-374.png 556w, https://st9ph.fr/wp-content/uploads/2026/01/image-374-300x116.png 300w" sizes="auto, (max-width: 556px) 100vw, 556px" /></figure>
</div>


<p class="has-base-2-background-color has-background">ℹ️ On parle <strong>d'Opt-In </strong>(comme pour le RGPD) pour <strong>l'acceptation des notifications</strong>.</p>



<p>Selon l'enquête de Gitnux, l'opt-in se mesure ainsi :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Fréquence d’envoi</th><th>Réaction utilisateur</th><th>Effet observé</th></tr></thead><tbody><tr><td><strong>0–1 / semaine</strong></td><td>Peu perçues</td><td>❌ Sous-utilisation</td></tr><tr><td><strong>1–2 / semaine</strong></td><td>Bien acceptées</td><td>✅ Engagement optimal</td></tr><tr><td><strong>3–5 / semaine</strong></td><td>Tolérance variable</td><td>⚠️ Risque de lassitude</td></tr><tr><td><strong>6–10 / semaine</strong></td><td>Désactivation fréquente</td><td>❌ Baisse d’opt-in</td></tr><tr><td><strong>+10 / semaine</strong></td><td>Rejet / désinstallation</td><td>🚨 Effet spam</td></tr></tbody></table></figure>



<p class="has-medium-font-size">➡️ Engagement</p>



<ul class="wp-block-list">
<li>Le <strong>taux de clic (CTR)</strong> moyen se situe autour de <strong>3–8 %</strong> selon le secteur et la plateforme.</li>



<li>Dans certains segments <em>e-commerce ou media</em>, ce taux peut être encore plus élevé (≈10 %+).</li>



<li>Notifications bien ciblées / personnalisées peuvent <strong>multiplier l’engagement jusqu’à +300 % ou +400 %</strong>.</li>



<li><strong>~65 % des utilisateurs reviennent dans l’application dans les 30 jours s’ils ont activé les push.</strong></li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="546" height="208" src="https://st9ph.fr/wp-content/uploads/2026/01/image-375.png" alt="" class="wp-image-33746" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-375.png 546w, https://st9ph.fr/wp-content/uploads/2026/01/image-375-300x114.png 300w" sizes="auto, (max-width: 546px) 100vw, 546px" /></figure>
</div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-medium-font-size">Ce qui fonctionne :</p>



<p>a) <strong>Personnalisation</strong></p>



<p>Les messages personnalisés (nom, intérêts, historique) <strong>boostent l’ouverture et les conversions</strong>.<br>➡️ La personnalisation comportementale peut augmenter l’engagement de <strong>×4 ou plus</strong>.</p>



<p>b) <strong>Segmentation</strong></p>



<p>Envoyer <em>le bon message au bon segment</em> (ex : nouveaux utilisateurs, utilisateurs inactifs, gros acheteurs) augmente énormément les résultats — <strong>jusqu’à +300 % d’engagement</strong>.</p>



<p> c) <strong>Timing optimal</strong></p>



<ul class="wp-block-list">
<li>Envoyer au bon moment (+40 % d’engagement si bien synchronisé avec l’usage).</li>



<li>Certaines études montrent <strong>mardi comme jour optimal</strong> pour l’engagement.</li>
</ul>



<p> d) <strong>Rich media</strong></p>



<p>Utiliser <strong>images, boutons d’action, emojis, contenus dynamiques</strong> augmente le taux d’ouverture et de réaction.<br>Les notifications avec médias performants peuvent avoir jusqu’à <strong>+50 % d’engagement en plus</strong>.</p>



<p>e) <strong>Notifications de valeur</strong></p>



<p>Les messages qui alertent d’un <strong>événement utile immédiat</strong> (statut de commande, rappel de rendez-vous, offre limitée) fonctionnent mieux que les messages génériques.<br>➡️<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> 70–80 % des utilisateurs les trouvent utiles si elles sont pertinentes.</mark></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-medium-font-size">Ce qui ne fonctionne pas :</p>



<p>a) <strong>Envoyer trop souvent</strong></p>



<ul class="wp-block-list">
<li>46 % des utilisateurs désactivent les notifications si on en envoie <strong>2–5 par semaine</strong>.</li>



<li>32 % désactivent si on passe <strong>6 ou plus par semaine</strong>.</li>
</ul>



<p>➡️ <em>Trop de notifications = spam = désactivation = désinstallation.</em></p>



<p> b) <strong>Messages non pertinents</strong></p>



<p>Si le contenu n’apporte <strong>aucune valeur réelle</strong>, les utilisateurs l’ignorent ou désactivent les alertes.<br>➡️ ~49 % trouvent les notifications intrusives si elles ne sont pas pertinentes.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="325" height="223" src="https://st9ph.fr/wp-content/uploads/2026/01/image-376.png" alt="" class="wp-image-33747" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-376.png 325w, https://st9ph.fr/wp-content/uploads/2026/01/image-376-300x206.png 300w" sizes="auto, (max-width: 325px) 100vw, 325px" /></figure>
</div>


<p>c) <strong>Demander l’autorisation trop tôt</strong></p>



<p>Demander immédiatement l’autorisation la première fois que l’utilisateur ouvre l’app peut faire baisser les opt-in de <strong>≈50 %</strong>.<br>➡️ <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Attendre une interaction ou expliquer la valeur avant de demander augmente les opt-in importants.</mark></p>
</div>
</div>



<p class="has-medium-font-size">➡️ Conversions</p>



<ul class="wp-block-list">
<li> <strong>Jusqu’à +72 % de conversions</strong> (achat ou action) liées à une notification.</li>
</ul>



<p class="has-small-font-size">📚 Sources : <a href="https://www.businessofapps.com/marketplace/push-notifications/research/push-notifications-statistics/" target="_blank" rel="noreferrer noopener">Business Of Apps</a>, <a href="https://gitnux.org/push-notification-statistics/" target="_blank" rel="noreferrer noopener">Gitnux</a> - voir toutes les sources dans le menu flottant -&gt;</p>



<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
 

  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="Sources UX mobile"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h3>📚 Sources</h3>
<ul>
 <!--  ✅ contenus 📚 Sources -->
<li><strong>sourcing Chat GPT</strong> – tendances et stats vérifiées par @st9ph</li>
<li><strong>Nano Banana de Google Gemini</strong> – personnage d'illustration et image en avant</li>
<li><strong>ARCEP / ANCT / CGE</strong> – Baromètre du numérique</li>
<li><strong>INSEE</strong> – Équipements et usages numériques</li>
<li><strong>DataReportal</strong> – Digital & Mobile Reports France</li>
<li><strong>Business of Apps</strong> – Push notifications benchmarks</li>
<li><strong>Gitnux</strong> – Mobile engagement statistics</li>
<li><strong>Statista</strong> – Temps passé smartphone</li>
<li><strong>data.ai</strong> – Mobile app usage insights</li>
<li><strong>Airship / Localytics</strong> – Push performance</li>
<li><strong>Saas Screenfly</strong> – Outil en ligne de visualisation d'affichages mobiles</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="Sources UX mobile"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h3>🧑‍🎓 NDRC</h3>
<!--  ✅ contenus 🧑‍🎓 NDRC -->
<p>Cet article est à visée de l'épreuve écrite E5A.</p>
<ul>
<li>savoir mettre en avant les avantages et les contraintes du développement d'une application mobile</li>
<li>savoir analyser la conception d'un écran mobile</li>
<li>Savoir valoriser la mobilité dans sa communication commerciale</li>
</ul>
<p>Quelques apports WordPress (affichage mobile, options de présentation des images ou autres blocs selon les supports desktop ou mobile)</p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">


  <img decoding="async" 
    src="https://st9ph.fr/wp-content/uploads/2026/02/logo-blogst9ph-small.jpg"
    alt="Sources UX mobile"
    style="
      width:100%;
      max-width:120px;
      display:block;
      margin:12px auto 20px;
      border-radius:8px;
    "
  >
<h3>📘 Glossaire</h3>
<!-- ✅ contenus 📘 Glossaire -->
<ul>
<li><strong>UX</strong> : expérience utilisateur globale</li>
<li><strong>Thumb Zone</strong> : zone de pouce de l'écran où le mobinaute reste agile</li>
<li><strong>Mobinaute</strong> : utilisateur sur smartphone</li>
<li><strong>WYSIWYG</strong> : aperçu du résultat en temps réel pendant le développement</li>
<li><strong>Frendly ou responsive</strong> : fait pour un confort sur smartphone</li>
<li><strong>Opt-in</strong> : consentement aux notifications</li>
<li><strong>"borner"</strong> : se connecter à une antenne GSM</li>
<li><strong>CTR</strong> : taux de clic</li>
<li><strong>Push</strong> : notification envoyée par une app</li>
<li><strong>Rétention</strong> : capacité à faire revenir</li>
<li><strong>GSM</strong> : Global System Mobile (4G, 5G...)</li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</script>



<h3 class="wp-block-heading" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">4.2 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Optimiser l'UX pour la mobilité</strong></h3>



<p>👉 La conception de l'interface mobile devra donc respecter<strong> les thumb zones</strong>🤏, s'adapter <strong>aux usages en mobilité🚶‍➡️ </strong>(aller simplement à l'essentiel) tout en profitant des <strong>spécificités de l'outil </strong>📳(Géolocalisation, appareil photo / scan et notifications).</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="294" height="598" src="https://st9ph.fr/wp-content/uploads/2026/01/image-386.png" alt="" class="wp-image-33852" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-386.png 294w, https://st9ph.fr/wp-content/uploads/2026/01/image-386-147x300.png 147w" sizes="auto, (max-width: 294px) 100vw, 294px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Ici, l'appli mobile <strong>Leroy Merlin </strong>sur sa <strong>page d'acceuil :</strong></p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-0c380f72-b5dd-409f-9f8c-1dbca7ed1c60">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23cf2e2e&quot; d=&quot;M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-562fc793-4ae1-4276-94f3-74336b4fc6e5">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="#cf2e2e" d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path></svg>
				</span>
				<span class="ub_list_item_text">la zone de déséquilibre <mark style="color:#e93333" class="has-inline-color">contient </mark><strong><mark style="color:#e93333" class="has-inline-color">une action</mark> </strong>est pas des moindres, celles d'<strong>activer le moteur de recherche</strong>, même si <strong>le clavier</strong><mark style="color:#eebf32" class="has-inline-color"> sera </mark><strong><mark style="color:#eebf32" class="has-inline-color">dans la zone d'effort</mark> </strong>(à une main) ou <mark style="color:#13b91b" class="has-inline-color"><strong>de confort</strong></mark> (à deux mains)</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="color: var(--contrast); --ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-56a7d981-46bb-4b78-9d3e-ee41c771e5cd">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">la <strong>navigation </strong>et les <strong>CTA </strong>sont correctement placés dans la zone de confort</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="color: var(--contrast); --ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-a85581fa-c9ce-4b3b-9993-6891b997dcf1">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="#00d084" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg>
				</span>
				<span class="ub_list_item_text">La recherche contient<strong> la possibilité de flasher les codes barres </strong>pour obtenir des infos produits</span>
			</div>
			
		</li>
</ul>


<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="286" height="597" src="https://st9ph.fr/wp-content/uploads/2026/01/image-382.png" alt="" class="wp-image-33844" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-382.png 286w, https://st9ph.fr/wp-content/uploads/2026/01/image-382-144x300.png 144w" sizes="auto, (max-width: 286px) 100vw, 286px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="283" height="596" src="https://st9ph.fr/wp-content/uploads/2026/01/image-383.png" alt="" class="wp-image-33847" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-383.png 283w, https://st9ph.fr/wp-content/uploads/2026/01/image-383-142x300.png 142w" sizes="auto, (max-width: 283px) 100vw, 283px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="254" height="356" src="https://st9ph.fr/wp-content/uploads/2026/01/image-385.png" alt="" class="wp-image-33849" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-385.png 254w, https://st9ph.fr/wp-content/uploads/2026/01/image-385-214x300.png 214w" sizes="auto, (max-width: 254px) 100vw, 254px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>😐 L'écran mon compte amène également sur <strong>la zone d'effort </strong>son <strong>CTA de remise </strong>même si cela se défend aussi. o<strong>n sera plus statique  lors du passage en caisse </strong>et on tiendra surement le smartphone à deux mains.</p>



<p class="has-base-2-background-color has-background">Il faudra <strong>suivre les tableaux de bord </strong>📈pour <strong>vérifier le CTR </strong>de ces différentes pages</p>
</div>
</div>



<div class="wp-block-uagb-counter uagb-block-2f91ab07 wp-block-uagb-counter--bars"><div class="wp-block-uagb-counter-bars-container"><div class="wp-block-uagb-counter__number"><span class="uagb-counter-block-number" data-duration="1.5" data-to-value="11" data-from-value="0" data-delimiter=","></span><span class="uagb-counter-block-suffix">%</span></div></div><div class="wp-block-uagb-counter__title"><strong>Remise "carte maison"</strong> (présentations / nb de passage en caisse) :</div></div>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>💥 Vos <strong>notifications de Push</strong> mériteront elles-aussi d'être mesurées (impressions, opt-out / Stop, taux de clic, conversions liées)</p>



<p class="has-base-2-background-color has-background">Ci-contre, un essai de notification via<a href="https://www.spot-hit.fr/" target="_blank" rel="noreferrer noopener"> Spot-It</a> qui propose des forfaits à <strong>0,15€ le SMS</strong> 👉</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-387.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background">👈 une notification de Push de l'appli Boulanger qui m'avait segmenté gamer, dirait-on.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Autre avantage d'inciter à l'i<strong>nstallation de votre appli mobile</strong>, vous évitez que les filtres des opérateurs FAI vous cataloguent comme un <strong>indésirable</strong>. 👉</p>


<div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="152" height="198" src="https://st9ph.fr/wp-content/uploads/2026/01/image-389.png" alt="" class="wp-image-33856"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-388.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>📏<strong> KPI</strong> notables :</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/Screenshot_2021-12-04-10-08-44-665_com.google.android.apps_.messaging-461x1024.jpg" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<ul class="wp-block-list">
<li>taux de délivrabilité</li>



<li>taux d'ouverture</li>



<li>taux de clic</li>



<li>Taux de rebond à l'atterrissage</li>



<li>Ventes liées</li>
</ul>
</div>
</div>



<p>Cela ressemble beaucoup à vos campagnes d'<strong>Email Marketing</strong> sauf que <strong>le message est plus court </strong>et que <strong>le déclencheur </strong>n'est pas qu'un lancement de campagne sur un segment, mais <strong>l'opportunité liée aux déplacements à proximité</strong> de nos SVP.</p>



<p class="has-base-2-background-color has-background">Profitez du <strong>GPS</strong> et de <strong>l'appareil photo</strong> de vos clients pour leurs proposer <strong>des interactions spécifiques</strong> qui les rendront <strong>acteurs et uniques</strong> comme nulle part ailleurs sur vos autres canaux.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="background-color: #f8f8f8; border-width: 2px; border-color: #ECECEC; " class="ub_call_to_action wp-block-ub-call-to-action-block" id="ub_call_to_action_832be52d-5bee-4651-8fb7-66d2529a7250">
			<div class="ub_call_to_action_headline">
				<p class="ub_call_to_action_headline_text" style="font-size: 30px; text-align: center; ">🍀</p>
			</div>
			<div class="ub_call_to_action_content">
				<p class="ub_cta_content_text" style="font-size: 15px; text-align: center; ">Un petit Quiz pour finir ?</p>
			</div>
			<div class="ub_call_to_action_button">
				<a href="https://forms.gle/rtAEmujFHkhPdGfZ7" target="_self" rel="noopener noreferrer" class="ub_cta_button" style="background-color: var(--accent); width: 250px; ">
					<p class="ub_cta_button_text" style="color: var(--base-3); font-size: 14px; ">Allez ! Soyons fous !</p>
				</a>
			</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-6005cf48bff9fae1ed7a3fbdac7d8ac9"><strong>Tu préfères sur ton smartphone ?</strong></p>



<p class="has-text-align-center"><strong>Libre à toi :</strong></p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" width="490" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_docs.google.com-8.png" alt="" class="wp-image-33867" style="width:195px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_docs.google.com-8.png 490w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_docs.google.com-8-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_docs.google.com-8-150x150.png 150w" sizes="auto, (max-width: 490px) 100vw, 490px" /></figure>
</div></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">

<div class="wp-block-ub-social-share" id="ub-social-share-34cb1b13-3295-452f-ad1e-918dc902bc11">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fst9ph.fr%2F%25e2%258f%25ba%25ef%25b8%258fomnicanal-ux-mobile%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; ">
				<span class="social-share-icon ub-social-share-linkedin square" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#ffffff" fill="#ffffff" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">partager</span>
			</a></div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong>donnez votre avis</strong> (star ranking) en bas de cette page</p>



<p class="has-text-align-center has-large-font-size">⬇️</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-jetpack-repeat-visitor"></div></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%"><div class="yoast-breadcrumbs"><span><span><a href="https://st9ph.fr/">Accueil</a></span> » <span class="breadcrumb_last" aria-current="page">site responsive</span></span></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



<p></p>
<p>L’article <a href="https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/">⏺️Omnicanal | UX Mobile</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-ux-mobile/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/tbx-slide.mp4" length="378649" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_31-01-2026_at_22_46_54_on_January_31st_2026.mp3" length="241344" type="audio/mpeg" />

		<post-id xmlns="com-wordpress:feed-additions:1">33685</post-id>	</item>
	</channel>
</rss>
