GuppY 5: Configure your mobile site simply!
Responsive design, mobile-friendly, you must have heard about it lately!
Responsive design is simply the adaptation of your website to the different navigation media. A responsive design site will adapt to the size of your screen whether you are on a computer, tablet or smartphone.
Today, it is essential that your site proposes this function of reading on several screens, that is to say multi-screen.
Since GuppY 5.01:
We have chosen to offer you a new version that is totally responsive design and mobile-friendly. We have completely adapted GuppY's structure to do this, many changes in the engine, even if they don't appear directly on the screen for the visitor.
Google has implemented a "Mobile friendly" rating based on the following criteria:
- No incompatible technologies responsive design, such as flash,
- The text must be readable on a mobile device without zooming in,
- The content must be legible without scrolling horizontally or zooming in,
- Links must be spaced far enough apart to be clicked without error,
- The loading time must be sufficiently short.
- a single site to manage, no need for additional domain name, additional online space, just an adaptation of the display, which you can optimize even more by using the secondary configuration pages in WEB configuration to lighten your main configuration as much as possible,
- GuppY 5 will detect the user agent of your visitor's device and display the version corresponding to the screen size,
- the display and positioning of the different elements is done automatically from the different stylesheets, - the display and positioning of the different elements is done automatically from the different stylesheets, - the display and positioning of the elements is done automatically from the different stylesheets.
- for webmasters and users of GuppY sites, this method seems to us to be adapted without being complicated,
- GuppY 5 adds a high value-added concept: 2 different configurations, a WEB configuration for large screens and a MOBILE configuration for small screens,.
The webmaster selects in admin/web configuration the configuration of the boxes for its web display and in admin/config MOBILE for its MOBILE display.
It is this principle that allows all webmasters to do it without a thorough knowledge.
- Yes, there are, but they're not insurmountable to get a correct result,
- Every time you add a document, you have to think WEB and MOBILE at the same time,
- No paintings, no flash, no fixed width, no oversized images,
- A page on a mobile site should not exceed 100KB, a 10KB document bearing in mind that visitors have a small screen, that they navigate in 3G for the most part and that the display should be fast.
In other words, you need to make navigation easier, it's a priority for visitors who are browsing from their smartphones.
Simply configure the MOBILE configuration of your site
You go to admin/configurations/config box and you arrive at:
A novelty, at Configuration skin you have the choice between WEB and MOBILE, you select MOBILE and you have on the screen the configuration page MOBILE,
For the whole Mobile configuration, an intangible principle, only one box per line, a single width 100 % for all box positions, without exception.
GuppY 5 takes care of the display with the css style sheets and especially the mobstyle. css file for mobiles.
The mobile configuration proposal below is a simple configuration, without any major modification of your site, available to everyone.
Let's now look at the configuration of the MOBILE configuration boxes:
You are on the MOBILE configuration page for the Boxes section at the top, 2 boxes are selected:
- FB502: §mini_logo 100%, only one box on the line, it is a free box with a transparent image of 300px by 60px which corresponds to the banner, with a background color associated, you can replace it by displaying the logo of your site.
- Menu icons at 100%, it's the GuppY Icons menu,
This is for the header of your mobile site, you will see, it takes up a lot of space on a smartphone screen, more than 3/4 of the screen, but it will be the access to all the sections of your site.
The central part of the configuration:
This image is a screenshot montage of a screenshot, for the middle part "No box" at all locations,
In the left-hand column, no boxes, it's a deliberate choice.
If you select boxes, they will be displayed before the content of an article for example, not always practical but depending on the content of your site, for example, but at your choice
In the right column, you have the two menu boxes for articles and the calendar box, you can add the Contact box for example,.
If you open an article, it will appear before the box tabs and the beginning will be readable immediately. At the end of the playback you will have access to the box titles.
The bottom part of the page:
Two boxes selected:
- the 100% Ariane's thread, interesting to come back to the reception desk,
- the "Preferences" box for those who would like to register as a member of your site.
The last part of the MOBILE configuration, the Home configuration.
As for the Boxes configuration, you must select MOBILE to get to the MOBILE home page:
For the configuration of the homepage boxes, always 100%, you first have the box "News of the site", it is essential,
Visitors arriving on your mobile site will have the news of your site displayed just under the menu, we can think that the content of this box will interest them at the highest point, hence its location,...
In a few lines GuppY 5 displays a summary of the recent activity of your site.
Watch out! Watch out! limit the number of days and characters displayed in this box, the important thing being the link to the complete document!
At the second location, the FB501: GuppY 5 on your mobile phone is a free box with a special short edited for mobile,
The third one is empty to reserve a free seat in case of need.
The fourth location is for the Live Forum with 2 posts and the number of characters limited to 100,
Note, no news, no home page posts, the box "News of the site" replacing this display.
A tip: lighter pages, fast display of two conditions for a correct display on mobile phone.
Congratulations! you have finished configuring your site for mobile, and you should see a display like these.
Mobile configuration tutorial by Papinou and Saxbar - CeCILL License - June 2015 - maj September 2017