Mobile Web App Theme

[Samer]

I am trying out some new themes and design for the mobile web app and I think I found something I like. In order to share it with you I pushed it out on the hosted version: http://rayshobby.net/apps/sprinklers.

I also added transitions back in since they seem to work pretty well now.

Any feedback would be appreciated it!

Update: If I get positive feedback I will merge these changes into the main branch as well.

[craigmw]

Samer:

I like the new theme. It would be cool to be able to have different themes (colors?) for individual OSPi/OpenSprinkler units, as this would help to identify which sprinkler system was being controlled. I now have two OSPi units, one for the front and one for the back yard. While it would be cool ultimately to be able to control both units from a single program, having some unique display for each would make it easier to control more than one setup. I like some of the other refinements as well, including the slider highlights. This is really looking quite polished.

[Samer]

Thanks for the feedback! I will see about implementing different themes via settings however the problem becomes design when allowing multiple themes. For example, I noticed the new theme takes up less screen space leaving a large void on the bottom of the page. If I decide to use this new theme I am debating moving the weather box again so it is static on the top. The reason for this is twofold, one it will fill the space making the page look less awkward but also it would prevent the sliding behavior exhibited on page load which makes it hard to push a menu option on the top since the button becomes smaller as the weather box slides in.

Basically, I don’t have time/resources to make more than one theme fully compatible with the layout but if it isn’t hard I will absolutely look into this. Going to give the new theme a few more days to see what people think and go from there.

Thanks for the awesome feedback!

[nate]

Samer:

I agree about slider highlights, the gray (#EEEEEE) is a bit hard to see (what it looks like now: http://cl.ly/image/2y2k1m1K3j0F). Maybe change to slightly darker (#DEDEDE) like this: http://cl.ly/image/341Q1i3W472u, or use a little inset shadow like this: http://cl.ly/image/2S070B082G1o

Looking pretty solid overall though!

[Samer]

That looks a lot better, thank you for the suggestion! I will make this change and hopefully get it out by tomorrow.

Thanks again!

Update: I have made the changes and pushed them. It sounds like this theme is much prefered over the old one and will probably be merged into the main code fairly soon, if there are any objections please do let me know.

[Samer]

The theme has now been pushed to all branches. Since I am working on looks now, I would like feedback about two things.

1) The weather: should I keep it as is? Redesign the inside content of the weather text (slightly cut off icons etc)? Move the entire thing?

2) Can anyone redesign the header logo? Currently it’s an image that was resized to fit in the header however the text is very blurry. Should I switch back to plain text, if I can’t find/make a better logo?

[Michael]

The upper right button in the header for settings does not appear on my iPad … It only appears on my android.. I like weather the way it is. Actually I miss the old theme. With the old theme I liked the divider lines between buttons like for selecting days of the week in the program.. It was more intuitive. Don’t change too much… The nice feature of the mobile app is its simplicity.

[Michael]

Here is the sample image with missing button…

[Samer]

Thanks for the feedback! I noticed the missing bars icon on some browsers and will explore that issue further. As for the weather, I will leave it as is for now. In regard to your preference for the older theme, can you elaborate more. I know you said you miss the divider between the day selectors on the edit programs page but is there anything else? Personally, I really like this theme more especially because of the fonts but also the flatter look (less 3D like buttons). It also seems to take up less space which is great for small screen devices.

I will see what I can do about the divider buttons and the bars icon on the top left of the home page and get back to you.

The other bugs I am looking to fix in regard to the theme are new splash logos (the background of the splash is no longer a gray gradient). I want to fix the loading of the edit programs and add program pages. Right now in order to work with page transitions I had to show the page then render the content which isn’t a perfect method. I want to fix the main page header because IMO it is ugly and can be better. The last bug is related to the current status page timer not stopping when leaving the status page.

[Samer]

@craigmw @Micheal I am planning on adding an option to change themes now and will hopefully have that implemented soon. This way the end user can choose what he/she likes the most and also to help differentiating separate controllers. Thanks for the suggestion!

[Michael]

Thanks Samir…. You should still probably see why that upper left button disappears on an ipad? I guess my only main concern is the lack of definition for table rows and columns when you have no borders in the tables. It is hard to see where to click. Perhaps if each row or column alternated shades of grey or had a light grey or white border still. I do like the default theme though and it matches another JQuery automation app we use. The app is nice thanks for the time you spent. I would not worry much about the logo I can make a small one but I only just know how resize that on in photoshop so it would look the same.

[nate]

Samer:

I know i’m just offering lame CSS tweaks here, but just having some fun playing around with this. Here are some that might help make some things a little more obvious on mobile (which usually doesn’t have :hover to differentiate buttons), without taking away from flat design too much.

.ui-li.ui-btn {

border-bottom: 1px solid #dedede;

}

another option could be something like this:

.ui-li>.ui-btn-inner:nth-of-type(2n) {

background: #ececec;

}

Can anyone redesign the header logo? Currently it’s an image that was resized to fit in the header however the text is very blurry. Should I switch back to plain text, if I can’t find/make a better logo?

How do you mean re-design? As in completely new logo? If so, might be wise to keep logo in the same area since Ray is shipping the 2.0’s with that logo on the casing —

[Samer]

Those are awesome suggestions thank you! I will play with them tonight and update the code later.

Also I only meant to sharpen the text on the logo not completely redesign it. Currently, the text is a bit blurry.

[Michael]

Yes Nate this is what I ment…. That is great the top with borders is better. I also notice the upper most left icon/button is missing on your iPhone too. It appears on my android. Odd. Could be a bug? I think the logo is fine…it is a logo.. Soft and anti-aliased.

[Samer]

I’m going to fix the button I promise just haven’t had time today 🙂

[nate]

Samer:
Here is the logo in .ai format, as well as a high quality .png with transparent BG. If you want it in a specific size, I can easily do that as well.

Logo Files: http://cl.ly/0Z45472s0X0m

Michael:
The bars are actually missing from my computer in Chrome (28.0.1500.95), and seem to show up fine on my iPhone (iOS7 Beta 5) — but i’m sure it’s just something simple going on, sounds like Samer has some ideas!

[Samer]

@nate Thank you so much for these! I will play with them and see what happens. If I need any help I will let you know.

Also, I think I fixed the issue with the bars icon on the home page. I have pushed the update to Github but please let me know if this fixed it for you.

[Samer]

In regard to the list divider, would underlining links be helpful? So that the main page for example looks like this:

[nate]

Samer:
Personally i’m not the biggest fan of underlining the links — i think it cheapens the overall look and feel.

[Samer]

@nate thank you! I agree and the reason I suggested it is because that’s how the theme comes by default. I actually removed them immediately haha!

[nate]

Also, I think I fixed the issue with the bars icon on the home page. I have pushed the update to Github but please let me know if this fixed it for you.

Works for me on iOS, Chrome + Safari + FireFox.

[kenbob]

I honestly liked the original theme better with the 3D buttons, these colors seem a little to loud. Maybe you could add an option for the original theme or have a slider that would allow you to change to whatever color you want, with flat or 3D buttons. Just my two cents, so it may not be worth much. 😉

[Samer]

@kenbob that seems to be some people’s opinion so I decided I will add an option to switch between themes and should have it added soon. Maybe today will update this thread as soon as I do!

Update: I already got this working and is pretty awesome! I should have this pushed out today. I think I will keep the new flat design as the default because it is the new trend going forward. jQuery Mobile is dropping the default theme in the next version hence why I started looking at themes. They will only provide two swatches a and b which are dark (black) and light.

Update 2: I do still plan on incorporating @nate’s suggestion to the flat theme. Been fairly busy lately and haven’t had time to incorporate all the changes.

[Samer]

Theme selection has been added to the web app! You can now select your theme via the side panel (top left button, bars icon). The two themes are default (the old theme) and flat (the new default). I know someone will say, why not call the new default, default. Well, I am referring to jQuery Mobile default and I also don’t have a good short name for it.

Anyways, enjoy!

Update: I am noticing the quick flicker between themes if your selected theme is default, on app startup. I am working on a fix now.

[Samer]

@nate When I resize the PNG you provided it ends up looking the same as my copy. My copy is 159×37. I am using Preview on my Mac which is probably not the best tool? I don’t have a clue about images but maybe it isn’t worth pursuing if no one notices. Am I the only one who thinks the text could be sharper or is this just a limitation of the image size?

Thanks!

Update: Nevermind my old copy was cached! I see the difference now and going to use this instead, thanks again!!!

[Author]

Posts