Hi Everyone, I wanted to see if I could get some constructive feedback on my organization's website - specifically with the responsive design. We use a content management system, so the amount that I am able edit myself is rather limited - most "backend" things require me to go back to the company that originally built the site (I can just edit the content). It seems to me that some of the responsiveness is not working the way it was intended - for example, when I look at the site on my iPhone or iPad (or even when I just scale down the window), it seems like the images don't scale as they should. In some cases content is completely cut off depending on the screen size. But I'm not experienced enough with responsive design to know if this is a problem with the site's coding, or if it is a function of the type or size of images I'm using. Basically, I'm just looking for concrete facts that I can compile and send back to the CMS company to hopefully be fixed. I obviously want the site to look as good as it can both on desktop and on mobile/tablet. My organization's site is: http://www.dpjcc.org/ Thanks in advance for any information you can provide!
Well, it takes it's sweet time loading -- over 30 seconds here and the cause of that is obvious; the site is 1.6 megabytes in 50 separate files. While the massive space wasting banners that leave users going "where's the beef?" -- reeking of some artist under the DELUSION they know anything about design -- would be the first thing to suspect, that's not the problem. The Batshit insane 1.3 megabytes of scripttardery mated to 178k of CSS -- spanning some twenty two separate files reeks of a level of developer ineptitude that flat out says "Whoever built this isn't ready to be building websites yet." The file counts are always a worry -- the rule of thumb is that under ideal circumstances each file past the first eight adds an additional fifth of a second of load time to the page; and worst case it can be a second or more depending on the number of "hops" between the browser and the server; and that's REGARDLESS of how fast a connection you are on. As to it being responsive, it most certainly is not. It is filled with design elements like full width banners that have little if any business on a website if you care at all about accessibility - and responsive design is just the newest member of a long line of "stepping stones" to building an accessible design. You've got illegible colour contrasts, fixed metric fonts, goofy poorly rendering webfont garbage on flow text, fixed size design elements, and a host of other visual and accessibility failings before we even get into the actually complex stuff like the code. Even the media queries are in pixels, which means it was designed thinking "layout" and "pixel perfect" FIRST, instead of the proper "content first" approach to making a site. The use of numbered headings is absolute gibberish since, well, you've got them ALL as H1... an H1 (singular) is the heading that EVERYTHING on the page should be a subsection of under HTML 4/earlier rules. You would only have more than one H1 if you were using HTML 5's structure using the pointlessly redundant SECTION or ARTICLE tags, which are nowhere to be found in your document since you went DIV and class-happy. Which it REALLY has a nasty case of "Semantic markup, what's that" mixed with endless pointless DIV and classes for nothing. You tack on the tables for layout, lack of media targets on the stylesheet link, multiple stylesheets for nothing, overstuffed keywords meta (it's called keyWORDS, 7 or 8 words that exist inside <body> you want an uprank on -- you don't fill it with 50 words that don't even exist on the page!), the bloated train wreck of developer ineptitude known as jQuery just pissing all over the place (not a fan), static style in the markup -- it's hardly a surprise it's wasting 35.8k of HTML on 1.8k of plaintext and maybe a dozen images I'd treat as content -- likely anywhere from three to five times the code needed. Much less the massive dropdown menu that's effectively useless on smaller displays and a giant middle finger to usability -- there's a reason people in the know STOPPED putting those on websites ten years ago. All these failings means the page doesn't gracefully degrade, or meet any of the accessibility minimums one should have LONG before you even THINK about worrying if it's responsive or not. Which is why my advice would be to throw that entire mess in the trash and start over with semantic markup, separation of presentation from content, progressive enhancement, and a working knowledge of accessibility guides like the WCAG. It's poorly designed, disastrously implemented, and generally speaking fails miserably at doing what websites exist to do; deliver content to users. Sorry if that seems harsh, but that's just me being honest with you and not sugar coating it.
Hi deathshadow, Thank you for your feedback. Would you be willing to elaborate on some of your points below a little bit further? The CMS company that I use controls the site's CSS, so I will have to go to them for anything related to that. All I can control is the content on each page; not how the page ultimately compiles. In terms of your points like "separation of presentation from content", what are the sorts of things that I can do to make it better in that area? Thank you!
Couple of quality of life improvements from an OCD developer: @media (max-width: 767px) { #mobileMenuButton { display: block; margin-top: 1em; padding: 1em; text-align: center; background-color: #00adbb; color: #fff; text-decoration: none; } } Code (CSS): Requires "cursor: pointer;" in that block. Also, they need to add the below code into a mobile query so it removes the green background from the 'Giving' button in it's mobile-menu state, it doesn't fit there. narrow your browser, drop down the 'menu', bottom link is 'Giving' with a desktop-sized background behind it. .don8 >a {background:none;} Code (markup): Bax