Optimizing Site for Mobile

[ucem]

Erika, Can you please let me know what it would take (effort/hours) to optimize our site for mobile devices? Thanks!

[ehodul]

It would require to create 'mobile friendly' theme (like http://uc-education-marketing.com/). Current theme is old and not able to switch layouts, site elements and sizes depending on the device size (screen, tablet, phone).

The best option would be to create a new theme (get a good base theme that is mobile friendly) and tweak it, so it looks (on screen) like the one we have now. This might take long time (40+ hours).

Another option is to create a 'mobile' style and modify current theme via media query to load mobile styling for narrow devices (mobile). I am not sure if the second option is even possible with current theme. This might take less time (20+ hours), but also less quality result.

[ucem]

Given that our mobile & tablet traffic are about 37%, mobile queries are increasing and some of our competitors already having mobile optimized sites, this is something we need to seriously consider.

We would choose your first suggestion as there is no point in spending the money and time on something that may not work. If we could maintain the same look (on screen) that would be great, although we were planning some changes to better utilize space.

School Page Programs offered are shown in 2 places (right hand block and below the Accreditation) which is redundant. Remove the program list below Accreditation and adding the lead form directly under the school description. (See marked up screen shot).

Program Page (See attached marked up screen shot)

Lead Form Make it a 2 column form and compress it so it looks smaller.

Also, we need to activate the Teaser Break in School and Programs pages like it is in Career pages so if we have a lot of content, the lead form is at least partially above the fold.

Take a look at these ideas and let us know how much time it would add. Also, which theme would you suggest?

[ehodul]

I like the idea of having the webform right where it needs to be without the additional step of "Request info today!" button. This seemingly small change might have a big impact, especially in the module that handles webform submissions, tracking codes etc. It seems like we are about to do a bigger website rewrite, not just a theme. This is a great opportunity for improvement in may areas.

Do you have any idea what do you want to show in mobile version of the website, which elements should be on the very top (the most important elements), which elements hide, which move to botom, which images display in what size and position etc.? Main menu (on top) is usually collapsed in mobile versions, do we want to do this as well?

[ucem]

Thanks Erika. We're going to need to put some thought into this and will look at other examples. Will get back to you soon.

[ucem]

Revisiting this as we received notification from Google about the mobility errors.

you mentioned that the best option would be to create a new theme and tweak it, so it looks (on screen) like the one we have now. Just trying to understand this, do you have an example we could see?

[ehodul]

Example of mobile friendly theme? http://themeforest.net/item/evolve-multipurpose-creative-drupal-theme/7251092

I used it for the website I am currently working on: http://www.firstwestfoundation.ca/new/ - tested with Google Mobile friendly test and it is mobile friendly!

More mobile friendly themes to start with: https://www.drupal.org/project/omega https://www.drupal.org/project/skeletontheme DEMO: http://demo.drupalizing.com/skeleton/site/?q=blog

http://www.themesnap.com/premium-drupal-themes/best-mobile.html

Mobile friendly test: https://developers.google.com/webmasters/mobile-sites/website-software/drupal?hl=en

---

Erika Hodul HERA Consulting Ltd.

Tel: 604 469 9363 Mobile: 604 339 8048 ehodul@heraconsulting.ca www.heraconsulting.ca

On Mon, Apr 13, 2015 at 1:43 PM, ucem notifications@github.com wrote:

Revisiting this as we received notification from Google about the mobility errors.

you mentioned that the best option would be to create a new theme and tweak it, so it looks (on screen) like the one we have now. Just trying to understand this, do you have an example we could see?

— Reply to this email directly or view it on GitHub https://github.com/ehodul/universities-colleges-schools/issues/98#issuecomment-92492877 .

[ucem]

Sorry, I should have been clearer. If we selected a mobile friendly theme, (in layman's terms) how would you make it look the same

[ehodul]

I would take the mobile friendly ready to go theme (or starter theme) and attempt to use similar colours, fonts, content placement etc., while keeping it mobile friendly.

[ucem]

Ok got it.

And you don't think the 2nd option you mentioned would work right?

"Another option is to create a 'mobile' style and modify current theme via media query to load mobile styling for narrow devices (mobile). I am not sure if the second option is even possible with current theme. This might take less time (20+ hours), but also less quality result."

[ehodul]

The second option is just hacking the old theme, it will still be old and outdated, with the patch on top. If we even could do that. If possible, the best way would be to start fresh.

On Mon, Apr 13, 2015 at 2:29 PM, ucem notifications@github.com wrote:

Ok got it.

And you don't think the 2nd option you mentioned would work right?

"Another option is to create a 'mobile' style and modify current theme via media query to load mobile styling for narrow devices (mobile). I am not sure if the second option is even possible with current theme. This might take less time (20+ hours), but also less quality result."

— Reply to this email directly or view it on GitHub https://github.com/ehodul/universities-colleges-schools/issues/98#issuecomment-92506312 .

[ucem]

I agree, we would potentially run into other problems later on if we stay with the old one. My next question (sorry for so many questions) is which theme would be easiest for you to make look like our current site, and would it also be platform responsive, regardless of whether a smart phone, tablet or desk top is used. I would suspect that if it's mobile friendly, it means across all types of devices.

[ehodul]

I would probably use Omega or Zen. Omega has tons of features. Zen is easier to work with and current theme is based on some old version of Zen.

Omega (https://www.drupal.org/project/omega) Zen (https://www.drupal.org/project/zen)

Both are responsive themes (across all types of devices).

On Mon, Apr 13, 2015 at 2:40 PM, ucem notifications@github.com wrote:

I agree, we would potentially run into other problems later on if we stay with the old one. My next question (sorry for so many questions) is which theme would be easiest for you to make look like our current site, and would it also be platform responsive, regardless of whether a smart phone, tablet or desk top is used. I would suspect that if it's mobile friendly, it means across all types of devices.

— Reply to this email directly or view it on GitHub https://github.com/ehodul/universities-colleges-schools/issues/98#issuecomment-92509298 .

[ucem]

If you concur, we'll go with Zen. We'll start laying it out as to what elements we'll want to display. You asked if we would want to collapse the main menu in the mobile version, and yes we will. While we're doing this, let us know what other questions/suggestions you have to make this a more user friendly site.

[ucem]

We are ready to move forward on this using Zen, but have discussed a few minor design changes which we should incorporate. I'll send those to you in an email. What would be our next steps to get this going and on your schedule? You had asked what elements we want to display, but would the mobile theme not automatically display all the elements?

[ehodul]

Great, I will expect details in the email. Mobile version is usually simplified as it does need only important content, position of blocks is different than on desktop as well. We can set up a meeting to discuss details.

On Wed, Apr 22, 2015 at 11:26 AM, ucem notifications@github.com wrote:

We are ready to move forward on this using Zen, but have discussed a few minor design changes which we should incorporate. I'll send those to you in an email. What would be our next steps to get this going and on your schedule? You had asked what elements we want to display, but would the mobile theme not automatically display all the elements?

— Reply to this email directly or view it on GitHub https://github.com/ehodul/universities-colleges-schools/issues/98#issuecomment-95292109 .

[ucem]

Home Page

1. Top Navigation Buttons Re-label Student Resources to “Student Resources & Scholarships”
2. Featured School Block Move down slightly, and move Connect with us to align with FB Like etc. Remove border around Connect With Us Make Icons smaller (around the same size as the FB Like buttons

Note: Moving the "Connect with US”, etc. should be universal across all pages they are currently shown on.

Career Page 1.Move “Request Information” button to the right under list of programs

2. Split web form into 2 pages (see e.g.. In attached screen shot) Issue # 116

Student Resources

1. Remove bottom 3 blocks and replace with a Scholarship Column. Scholarship page could be the same template as the article page, but does not require a category

“Nice-to-Haves”

Announcements Currently need to associate with a school, can that be made optional? Occasionally we just want to make announcements about public school’s even though we don’t have them on our site.

Program Page Ranking (related to Addition of School Ranking added in Issue #94. Ranking of Schools was added to the career page, but is there anything we can do if we want to rank different programs.
For eg. MTI is ranked # 1, and National Academy of Health & Business is # 1. If they are in the same career such as Accounting, MTI will show first. What if in another career such as Dental Assistant, we wanted National Academy to rank above MTI.

Issue #20 Enabling more than 2 Area of Study selections for Program Pages

[ehodul]

I believe I still need to offer work time estimate for the website redesign. As I mentioned before, to create the theme from scratch (from base theme) would take somewhere around 40+ hours. On top of this, all additional tasks we talked about - change in website structure, page layout and additional tasks (Excel download of all leads, configurable fields for forms, multiple form pages, redesign of events, simplifying of content, ensure proper content semantics, additional website sections and related content types and views, migration of content to new site etc.), might easily take another 40+ hours. I apologize for this rough estimate. I can refine the estimate as the work progresses. Please let me know your thoughts.