IMCA re-launch

colak · 2015-05-06 17:41:15

It was a steep slope trying to figure out how to make my sites responsive without really changing their design and I have many people here to thank for all their help: GugUser, gaekwad, ruud, phiw13, Bloke and others who responded to my sometimes idiotic questions.

Plugins used are:

zem_contact_lang-4.0.3.6,
adi_mobile-0.2,
glx_if-0.7,
fha_time_diff-0.23,
zem_redirect-1.2.1,
zem_contact_reborn-4.0.3.20,
pap_contact_cleaner-0.1,
mdn_count-1.4,
rvm_privileged-0.4,
rss_admin_db_manager-4.3,
rah_external_output-1.0.4,
rvm_css-1.0,
spf_js-0.51,
arc_redirect-1.2.0m,
smd_where_used-0.2,
adi_notes-1.2,
rah_sitemap-1.3.0

Brand new but mostly looks like old: IMCA

jakob · 2015-05-06 22:14:21

I liked the earlier version and this one looks great too now that it’s responsive. Your list of used plugins is admirably short compared to many of my sites of similar complexity.

One thing I noticed: is your responsive dropdown a css-only menu? The menu opener causes the page to scroll/jump to the position of the menu when opening it (#menu-primary) and back to the top when you close it (#), so in use it jumps around. That’s not a great problem, if people choose a menu item and the page reloads, but if you open and close the menu the page shifts around. I remember having that problem before with an older site and found the easiest solution was to place the css-only menu at the top of the page rather than part-way down the page (that way it jumps to the top from the top, and back to the top from the top, i.e. doesn’t move). If it is actually a javascript-based responsive menu, you need to prevent the click targets from performing their default function using this kind of arrangement: function(event) { … your js-menu code … event.preventDefault(); });. Then they’ll open and close the menu without jumping to the id / the top.

BTW: on the /nac page there’s a h3. not being textiled (needs a blank line).

colak · 2015-05-07 06:59:12

I liked the earlier version and this one looks great too now that it’s responsive.

Hi and thanks so much.

One thing I noticed: is your responsive dropdown a css-only menu? The menu opener causes the page to scroll/jump to the position of the menu when opening it (#menu-primary) and back to the top when you close it (#), so in use it jumps around. That’s not a great problem, if people choose a menu item and the page reloads, but if you open and close the menu the page shifts around. I remember having that problem before with an older site and found the easiest solution was to place the css-only menu at the top of the page rather than part-way down the page (that way it jumps to the top from the top, and back to the top from the top, i.e. doesn’t move). If it is actually a javascript-based responsive menu, you need to prevent the click targets from performing their default function using this kind of arrangement: function(event) { … your js-menu code … event.preventDefault(); });. Then they’ll open and close the menu without jumping to the id / the top.

I moved the menu to the top, there is still a slight jump but I’ll fix it in the css. I opted for the css menu as I could not find a method which could look OK in a noscript environment. I wish I could understand js so as to impement your function(event)... suggestion.

Your list of used plugins is admirably short compared to many of my sites of similar complexity.

I am trying to use as few plugins as possible and some (rss_admin_db_manager-4.3, rvm_css-1.0, spf_js-0.51, arc_redirect-1.2.0m) are there only because of my laziness as I like working from the browser window and a single login. I am looking forward to the txp:if_homepage tag so as to get rid of glx_if which served me wonderfully over the years.

BTW: on the /nac page there’s a h3. not being textiled (needs a blank line).

The h3 has been fixed. Nice catch!

jakob · 2015-05-07 08:13:20

I opted for the css menu as I could not find a method which could look OK in a noscript environment

Yes, I understand. Out of interest, I wonder what the browser stats are like for mobile browser users surfing with javascript switched off (as opposed to desktop browser users). This gov.uk test may be of interest, but it doesn’t mention the subset of those users using mobile browsers. I wonder how many people are even aware that they can turn off javascript in their smartphone or tablet.

philwareham · 2015-05-07 08:22:10

Very nice!

Just a small thing – your site is HTML5 not XHTML, might want to amend the claim in the bottom right-hand corner.

colak · 2015-05-07 08:53:49

jakob wrote #290535:

Yes, I understand. Out of interest, I wonder what the browser stats are like for mobile browser users surfing with javascript switched off (as opposed to desktop browser users). This gov.uk test may be of interest, but it doesn’t mention the subset of those users using mobile browsers. I wonder how many people are even aware that they can turn off javascript in their smartphone or tablet.

I am not using the viewport just for mobile devices. I am one of those who like having a couple of windows open, reading from one and writing on another.

philwareham wrote #290537:

Very nice!

Just a small thing – your site is HTML5 not XHTML, might want to amend the claim in the bottom right-hand corner.

A remnant from the old site. Thanks Phil… corrected.

bici · 2015-05-08 00:17:46

colak wrote #290520:

It was a steep slope trying to figure out how to make my sites responsive without really changing their design

Brand new but mostly looks like old: IMCA

impressive that you were able to leave the old design but make it responsive!

was this in part due to the fact that the “OLD” design was well structured in the first place?
Was the responsive work a huge task or relatively straightforward?

colak · 2015-05-08 05:48:09

bici wrote #290555:

impressive that you were able to leave the old design but make it responsive!

was this in part due to the fact that the “OLD” design was well structured in the first place?
Was the responsive work a huge task or relatively straightforward?

The reason was branding. IMCA and NeMe sites share the same identity as they are both under the same NGO. As NeMe still uses 4.4.1 because of the postmaster plugin, its xhtml status remains until we make a decision on how to proceed.

It was hard mainly because I wanted to learn the html5 tags – not because of the actual complexity. I basically used the rvm_privileged plugin when I was restyling.

<txp:rvm_if_privileged>
<txp:rvm_css n="new_styles" format="link" media="all" />
<txp:else />
<txp:rvm_css n="default" format="link" media="all" />
</txp:rvm_if_privileged>

My next step was to change the tags <div class="article"> became <article class="article"> for example. smd_where_used was a great help for those instances. My last job was to work on the articles. I added a jquery slider for the videos and worked on the sizing/visibility of their images.

As i didn’t know what I was doing, the process took longer but I think that the next site will take half the time.

giz · 2015-05-08 20:43:46

Nice one Yiannis.

I much prefer the new layout to the old one – it is punchier and more direct. More memorable than before…

There are a couple of things that bug me however – mostly around text alignment. The main menu and page headings are centre justified (About, Neme Arts Centre) – to my mind they would look better left-justified so they help reinforce your grid.

Similarly, ‘Announcements’ and ‘Previous Activities’ on the homepage are given right-justification, which looks a bit off to my eye. ‘Submit a text’ needs a bottom margin / looks a little cramped.

Thoughts?

GugUser · 2015-05-09 00:34:33

giz wrote #290584:

The main menu and page headings are centre justified (About, Neme Arts Centre) – to my mind they would look better left-justified so they help reinforce your grid.

Due to the comment of giz I looked at the source code and the related CSS. The “main menu” isn’t centered but has many margins.

I would like to write a few details about this part (my display is 1280px width):

The main nav container <div class="grid_24" id="menu"> has 4px margin-left and margin-right, maybe to align it with the logo. And it has float: left; – why?

All the nav lis have margin-left: 30px;, for the distances, but the clickable area for the navigation items is very small.

I would suggest a different basic CSS styling (here without more details) for this navigation part:

nav li {
	width: auto;
	float: left;
	display: inline;
	/* and, if nessesary */
	padding: 0;
	margin: 0;
}

nav a {
	display: block;
	padding: .5em 1em;		/* or other values */
}

nav li:first-child a {
	padding-left: 0;
}

nav ul:after {
	content: ""; 
	display: table;
	clear: left;
}

In this way, the navigation items have more space.

Further below, in the floating <div class="grid_6 frontthumbs"> containers, I would specifie the a elements with display: inline-block; or display: block; and all other, necessary definitions.

Last edited by GugUser (2015-05-09 00:37:12)

colak · 2015-05-09 10:16:20

Hi and thanks again. This is how I remember the forum in its hey day and this is how it should be. Thanks so much for all the input which I corrected most of it but I know I still need a few more adjustments (especially to the menu position/behaviour/look). It never ends:)

GugUser · 2015-05-09 23:44:13

Thanks for the link on your site, I feel like honored!

Textpattern CMS

Textpattern CMS support forum

#1 2015-05-06 17:41:15

IMCA re-launch

#2 2015-05-06 22:14:21

Re: IMCA re-launch

#3 2015-05-07 06:59:12

Re: IMCA re-launch

#4 2015-05-07 08:13:20

Re: IMCA re-launch

#5 2015-05-07 08:22:10

Re: IMCA re-launch

#6 2015-05-07 08:53:49

Re: IMCA re-launch

jakob wrote #290535:

philwareham wrote #290537:

#7 2015-05-08 00:17:46

Re: IMCA re-launch

colak wrote #290520:

#8 2015-05-08 05:48:09

Re: IMCA re-launch

bici wrote #290555:

#9 2015-05-08 20:43:46

Re: IMCA re-launch

#10 2015-05-09 00:34:33

Re: IMCA re-launch

giz wrote #290584:

#11 2015-05-09 10:16:20

Re: IMCA re-launch

#12 2015-05-09 23:44:13

Re: IMCA re-launch

Board footer