Pourquoi votre site internet doit-il être pensé pour les mobiles ? Blog MMB

[fusion_builder_container type= »flex » hundred_percent= »no » hundred_percent_height= »no » min_height= » » hundred_percent_height_scroll= »no » align_content= »stretch » flex_align_items= »flex-start » flex_justify_content= »flex-start » flex_column_spacing= » » hundred_percent_height_center_content= »yes » equal_height_columns= »no » container_tag= »div » menu_anchor= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » status= »published » publish_date= » » class= » » id= » » link_color= » » link_hover_color= » » border_sizes= » » border_sizes_top= » » border_sizes_right= » » border_sizes_bottom= » » border_sizes_left= » » border_color= » » border_style= »solid » spacing_medium= » » margin_top_medium= » » margin_bottom_medium= » » spacing_small= » » margin_top_small= » » margin_bottom_small= » » margin_top= » » margin_bottom= » » padding_dimensions_medium= » » padding_top_medium= » » padding_right_medium= » » padding_bottom_medium= » » padding_left_medium= » » padding_dimensions_small= » » padding_top_small= » » padding_right_small= » » padding_bottom_small= » » padding_left_small= » » padding_top= » » padding_right= » » padding_bottom= » » padding_left= » » box_shadow= »no » box_shadow_vertical= » » box_shadow_horizontal= » » box_shadow_blur= »0″ box_shadow_spread= »0″ box_shadow_color= » » box_shadow_style= » » z_index= » » overflow= » » gradient_start_color= » » gradient_end_color= » » gradient_start_position= »0″ gradient_end_position= »100″ gradient_type= »linear » radial_direction= »center center » linear_angle= »180″ background_color= » » background_image= » » background_position= »center center » background_repeat= »no-repeat » fade= »no » background_parallax= »none » enable_mobile= »no » parallax_speed= »0.3″ background_blend_mode= »none » video_mp4= » » video_webm= » » video_ogv= » » video_url= » » video_aspect_ratio= »16:9″ video_loop= »yes » video_mute= »yes » video_preview_image= » » absolute= »off » absolute_devices= »small,medium,large » sticky= »off » sticky_devices= »small-visibility,medium-visibility,large-visibility » sticky_background_color= » » sticky_height= » » sticky_offset= » » sticky_transition_offset= »0″ scroll_offset= »0″ animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » filter_hue= »0″ filter_saturation= »100″ filter_brightness= »100″ filter_contrast= »100″ filter_invert= »0″ filter_sepia= »0″ filter_opacity= »100″ filter_blur= »0″ filter_hue_hover= »0″ filter_saturation_hover= »100″ filter_brightness_hover= »100″ filter_contrast_hover= »100″ filter_invert_hover= »0″ filter_sepia_hover= »0″ filter_opacity_hover= »100″ filter_blur_hover= »0″][fusion_builder_row][fusion_builder_column type= »1_1″ layout= »1_1″ align_self= »auto » content_layout= »column » align_content= »flex-start » content_wrap= »wrap » spacing= » » center_content= »no » link= » » target= »_self » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » type_medium= » » type_small= » » order_medium= »0″ order_small= »0″ dimension_spacing_medium= » » dimension_spacing_small= » » dimension_spacing= » » dimension_margin_medium= » » dimension_margin_small= » » margin_top= » » margin_bottom= » » padding_medium= » » padding_small= » » padding_top= » » padding_right= » » padding_bottom= » » padding_left= » » hover_type= »none » border_sizes= » » border_color= » » border_style= »solid » border_radius= » » box_shadow= »no » dimension_box_shadow= » » box_shadow_blur= »0″ box_shadow_spread= »0″ box_shadow_color= » » box_shadow_style= » » background_type= »single » gradient_start_color= » » gradient_end_color= » » gradient_start_position= »0″ gradient_end_position= »100″ gradient_type= »linear » radial_direction= »center center » linear_angle= »180″ background_color= » » background_image= » » background_image_id= » » background_position= »left top » background_repeat= »no-repeat » background_blend_mode= »none » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » filter_type= »regular » filter_hue= »0″ filter_saturation= »100″ filter_brightness= »100″ filter_contrast= »100″ filter_invert= »0″ filter_sepia= »0″ filter_opacity= »100″ filter_blur= »0″ filter_hue_hover= »0″ filter_saturation_hover= »100″ filter_brightness_hover= »100″ filter_contrast_hover= »100″ filter_invert_hover= »0″ filter_sepia_hover= »0″ filter_opacity_hover= »100″ filter_blur_hover= »0″ last= »true » border_position= »all » first= »true »][fusion_text columns= » » column_min_width= » » column_spacing= » » rule_style= »default » rule_size= » » rule_color= » » content_alignment_medium= » » content_alignment_small= » » content_alignment= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » font_size= » » fusion_font_family_text_font= » » fusion_font_variant_text_font= » » line_height= » » letter_spacing= » » text_color= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]

Dans le monde du digital, on qualifie un site internet de « responsive » si il est capable de s’adapter aux différents appareils qu’utilisera l’internaute (ordinateurs, tablettes, mobiles) sans dégradé l’expérience utilisateur de ce dernier. C’est un critère qui est donc indispensable et à mettre au coeur de sa stratégie dès la création du site internet.

[/fusion_text][fusion_title title_type= »text » rotation_effect= »bounceIn » display_time= »1200″ highlight_effect= »circle » loop_animation= »off » highlight_width= »9″ highlight_top_margin= »0″ before_text= » » rotation_text= » » highlight_text= » » after_text= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » content_align_medium= » » content_align_small= » » content_align= »left » size= »1″ font_size= » » animated_font_size= » » fusion_font_family_title_font= » » fusion_font_variant_title_font= » » line_height= » » letter_spacing= » » text_shadow= »no » text_shadow_vertical= » » text_shadow_horizontal= » » text_shadow_blur= »0″ text_shadow_color= » » margin_top_medium= » » margin_bottom_medium= » » margin_top_small= » » margin_bottom_small= » » margin_top= » » margin_bottom= » » margin_top_mobile= » » margin_bottom_mobile= » » text_color= » » animated_text_color= » » highlight_color= » » style_type= »default » sep_color= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]

Le mobile : nouveau support de navigation

[/fusion_title][fusion_text columns= » » column_min_width= » » column_spacing= » » rule_style= »default » rule_size= » » rule_color= » » content_alignment_medium= » » content_alignment_small= » » content_alignment= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » font_size= » » fusion_font_family_text_font= » » fusion_font_variant_text_font= » » line_height= » » letter_spacing= » » text_color= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]

Nos habitudes ainsi que nos modes de vie sont rythmés et modifiés par le progrès technologique qui est en constante évolution, de ce fait notre manière de naviguer sur internet a aussi changé depuis quelques années.

En effet, si l’on compare les résultats du « Digital Global Statshot Report » de We Are Social et Hootsuite pour l’année 2015 et 2020, voici les chiffres que l’on obtient :

Dans le monde en 2015 nous étions 3 milliards d’internautes et passions en moyenne 7h10 sur internet. 62% du trafic était issus des desktops et 31% des mobiles.
En 2020 nous étions 4,66 milliards d’internautes et avons passé en moyenne 6h55 par jour sur internet. 50,2% du trafic a été issus des mobiles (+19,2% par rapport à 2015) et 47,1% des desktops (-13,9% par rapport à 2015).

La différence est frappante. En 5 ans seulement la tendance d’utilisation des appareils pour naviguer sur internet a complètement changé, le mobile génère actuellement plus de la moitié du trafic internet total. Il dépasse donc le desktop, à l’origine de 62% du trafic total en 2015. Il est intéressant de remarquer que la moyenne de temps passé sur internet par jour a légèrement diminué (-15 minutes), nous passons quasiment autant de temps sur internet qu’il y a 5 ans mais c’est notre manière de le faire qui est totalement différente.

Un mode de vie « ATAWAD »

Nous vivons dans un monde que l’on peut qualifié d’ATAWAD : « AnyTime , AnyWhere, AnyDevice. En d’autres termes nous avons besoin d’avoir accès à toute l’information que l’on souhaite n’importe quand, n’importe où et surtout avec n’importe quel appareil (d’où l’importance une fois de plus d’avoir un site web responsive). Au vu des chiffres que nous venons de présenter, il apparaît donc comme étant indispensable que votre site soit adapté aux mobiles.

L’internaute est devenu très impatient et a été habitué à pouvoir obtenir ce qu’il veut dès qu’il le souhaite. Si votre site internet pour mobiles ne lui permet pas de répondre à l’un de ses besoins correctement par exemple lorsqu’il surfe sur internet dans les transports en communs sur son smartphone, il n’y a quasiment aucune chance pour qu’il revienne sur votre site. Pire encore il pourrai dénigrer votre image de marque en partageant sa mauvaise expérience avec ses proches ou sur ses réseaux sociaux.

L’Index Mobile First de Google : un exemple d’adaptation des plus grands

Au vu de ce changement de comportement des internautes, le géant des moteurs de recherche Google s’est lui aussi adapté, toujours dans son objectif de proposer la meilleure expérience utilisateur possible grâce à « L’Index Mobile First ». Déployé le 26 mars 2018 , c’est une nouvelle méthode d’indexation de votre site qui ne prend plus en compte la version desktop de ce dernier comme auparavant mais bien la version mobile. Dans cette continuité il est donc logique de comprendre que Google va afficher dans ses résultats de recherche des pages de sites qui sont optimisés pour les mobiles; il peut donc y avoir un fort impact sur votre SEO si votre site n’est pas responsive.

Depuis septembre 2020 l’indexation mobile first a été déployée sur l’ensemble des sites internet, vous n’avez donc plus le choix !

Quelques astuces pour rendre votre site adapté aux mobiles

Il y a certaines étapes à respecter pour adapter son site web aux différents appareils et notamment aux smartphones :

Créer une version mobile de votre site internet desktop
Faire en sorte que le contenu mobile soit le même que le contenu desktop (ne surtout pas penser que votre site mobile est une version simplifiée de votre site internet…)
Veiller à ce que les métadonnées soient identiques sur les deux versions
Tester si le site est perçu comme « mobile friendly » par Google
Utiliser des AMP (Pages Mobiles Accélérées) pour créer votre version mobile et améliorer votre vitesse de chargement
Tester la vitesse de chargement du site et prendre connaissance des optimisations à mettre en place grâce à l’outil Google Page Speed Insight.

[/fusion_text][fusion_text columns= » » column_min_width= » » column_spacing= » » rule_style= »default » rule_size= » » rule_color= » » content_alignment_medium= » » content_alignment_small= » » content_alignment= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » font_size= » » fusion_font_family_text_font= » » fusion_font_variant_text_font= » » line_height= » » letter_spacing= » » text_color= » » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » »]

Comme nous venons de le voir il est maintenant indispensable d’avoir un site responsive qui est adapté à l’utilisation sur mobile. Pour autant ce n’est pas une fin en soi; nos comportements et habitudes évoluent constamment. Le développement de la recherche vocale, des objets connectés et de l’intelligence artificielle n’ont pas fini de bouleverser notre vie quotidienne. En rendant votre site responsive vous prendrez de l’avance sur ces changements majeurs et serez capable de vous adapter à vos internautes en leur proposant une expérience utilisateur de qualité à l’image de votre marque.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container type= »flex » hundred_percent= »no » hundred_percent_height= »no » min_height= » » hundred_percent_height_scroll= »no » align_content= »stretch » flex_align_items= »flex-start » flex_justify_content= »flex-start » flex_column_spacing= » » hundred_percent_height_center_content= »yes » equal_height_columns= »no » container_tag= »div » menu_anchor= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » status= »published » publish_date= » » class= » » id= » » link_color= » » link_hover_color= » » border_sizes= » » border_sizes_top= » » border_sizes_right= » » border_sizes_bottom= » » border_sizes_left= » » border_color= » » border_style= »solid » spacing_medium= » » margin_top_medium= » » margin_bottom_medium= » » spacing_small= » » margin_top_small= » » margin_bottom_small= » » margin_top= » » margin_bottom= » » padding_dimensions_medium= » » padding_top_medium= » » padding_right_medium= » » padding_bottom_medium= » » padding_left_medium= » » padding_dimensions_small= » » padding_top_small= » » padding_right_small= » » padding_bottom_small= » » padding_left_small= » » padding_top= » » padding_right= » » padding_bottom= » » padding_left= » » box_shadow= »no » box_shadow_vertical= » » box_shadow_horizontal= » » box_shadow_blur= »0″ box_shadow_spread= »0″ box_shadow_color= » » box_shadow_style= » » z_index= » » overflow= » » gradient_start_color= » » gradient_end_color= » » gradient_start_position= »0″ gradient_end_position= »100″ gradient_type= »linear » radial_direction= »center center » linear_angle= »180″ background_color= » » background_image= » » background_position= »center center » background_repeat= »no-repeat » fade= »no » background_parallax= »none » enable_mobile= »no » parallax_speed= »0.3″ background_blend_mode= »none » video_mp4= » » video_webm= » » video_ogv= » » video_url= » » video_aspect_ratio= »16:9″ video_loop= »yes » video_mute= »yes » video_preview_image= » » absolute= »off » absolute_devices= »small,medium,large » sticky= »off » sticky_devices= »small-visibility,medium-visibility,large-visibility » sticky_background_color= » » sticky_height= » » sticky_offset= » » sticky_transition_offset= »0″ scroll_offset= »0″ animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » filter_hue= »0″ filter_saturation= »100″ filter_brightness= »100″ filter_contrast= »100″ filter_invert= »0″ filter_sepia= »0″ filter_opacity= »100″ filter_blur= »0″ filter_hue_hover= »0″ filter_saturation_hover= »100″ filter_brightness_hover= »100″ filter_contrast_hover= »100″ filter_invert_hover= »0″ filter_sepia_hover= »0″ filter_opacity_hover= »100″ filter_blur_hover= »0″][fusion_builder_row][fusion_builder_column type= »1_1″ layout= »1_1″ align_self= »auto » content_layout= »column » align_content= »flex-start » content_wrap= »wrap » spacing= » » center_content= »no » link= » » target= »_self » min_height= » » hide_on_mobile= »small-visibility,medium-visibility,large-visibility » sticky_display= »normal,sticky » class= » » id= » » type_medium= » » type_small= » » order_medium= »0″ order_small= »0″ dimension_spacing_medium= » » dimension_spacing_small= » » dimension_spacing= » » dimension_margin_medium= » » dimension_margin_small= » » margin_top= » » margin_bottom= » » padding_medium= » » padding_small= » » padding_top= » » padding_right= » » padding_bottom= » » padding_left= » » hover_type= »none » border_sizes= » » border_color= » » border_style= »solid » border_radius= » » box_shadow= »no » dimension_box_shadow= » » box_shadow_blur= »0″ box_shadow_spread= »0″ box_shadow_color= » » box_shadow_style= » » background_type= »single » gradient_start_color= » » gradient_end_color= » » gradient_start_position= »0″ gradient_end_position= »100″ gradient_type= »linear » radial_direction= »center center » linear_angle= »180″ background_color= » » background_image= » » background_image_id= » » background_position= »left top » background_repeat= »no-repeat » background_blend_mode= »none » animation_type= » » animation_direction= »left » animation_speed= »0.3″ animation_offset= » » filter_type= »regular » filter_hue= »0″ filter_saturation= »100″ filter_brightness= »100″ filter_contrast= »100″ filter_invert= »0″ filter_sepia= »0″ filter_opacity= »100″ filter_blur= »0″ filter_hue_hover= »0″ filter_saturation_hover= »100″ filter_brightness_hover= »100″ filter_contrast_hover= »100″ filter_invert_hover= »0″ filter_sepia_hover= »0″ filter_opacity_hover= »100″ filter_blur_hover= »0″ last= »true » border_position= »all » first= »true »][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Le mobile : nouveau support de navigation

Un mode de vie « ATAWAD »

L’Index Mobile First de Google : un exemple d’adaptation des plus grands

Quelques astuces pour rendre votre site adapté aux mobiles

Partager :

J’aime ça :