The last time I posted a similar message about the Scrabble helper going mobile was when we published the mobile-only theme. Half a year ago I didn’t know better than to write a completely separated layout for mobile browsers. Now I have gained more experience with so called Media Queries and was able to make the current layout flexible for all browser sizes down to the 320 pixel width of smaller smart phones.
One layout for all browsers
If you access this post with your smart phone you hopefully don’t need to scroll horizontally. If you access it with your desktop browser try to slim the browser window by dragging the right side towards the other. You will notice that to a specific point the website will “react” on your screens size. Depending on your screen width you will see all images, the background is dismissed or the post thumbnails are getting smaller. Anyway, comparing your smart phone and your browser, you should still see the same content.
Better to touch
During the last days of the old layout I already changed the options for the Scrabble helper from select lists to buttons, so you would need only one click instead of two. To make the new layout work on touch screens the biggest challenge was to make the navigation work. I am happy I was finally able to think about a solution and if you forget about this it means it works 😉
Another feature I optimized was the quick search on the front page. Before, you had to enter a string to make it work. Now you don’t have to. I figured I am not helping you by telling you to enter something or not. Clicking on the submit button without entering any letters now leads you directly to the search with an example of a query already showing up. I changed this also, so the Scrabble helper can be accessed directly with just one click. Since the quick search form on the home page is visible without scrolling, you can now access your beloved word search with just one click/touch.
Everything is up
One page for all devices also means that the same content is showing for everyone. So I had to think about how to show the basic information of every page without scrolling. I ended up changing some content during the last days to put the most important parts to the top of each page. On the word searches pages you find the search forms a bit higher, the article overview pages have the article sections mentioned right at the beginning and the word generators overview shows the icons for all the tools. I think also the desktop users will benefit from this.
I also harmonized the colors. Now, most links and clickable elements have a brown-orange color and headlines are green. The contrast was also raised.
The old layout is still available
I know from the recent layout change that you have a hard time with the most recent layout changes. Anyway, with the new layout being “responsive” to your browser, I am finally able to switch off the old and odd layout. As you noticed, I wasn’t able to maintain two seperated layouts and so the old mobile Scrabble helper layout always suffered. I hope, I did and will do a better job with the responsive design. At least I tried to lower the size of the site and once loaded, you probably won’t see the difference in speed. You can still use the switch to or from the old mobile layout, but there will be a time I will remove it.
Update: I just added a notice to the old layout to ask you to switch. Please give me feedback if you experience any issues. Until I totally switch it off, you can reach the old mobile scrabble helper by clicking the “mobile version” link above.
Clear your Cache: If you experience problems (like the option buttons are not clickable) please clear your browser cache. On the iPhone you can do this with Settings > Safari > Clear Cookies and Data.
Testing every device
I tested the new layout on iPhone, iPad, in an Opery simulator and on an Android device. This is as much as I was able to do, but knowing the visitor stats this should cover 95% of visitors. Anyway, if you experience problems, please don’t hesitate to drop me a line.