For my puzzler this month, I pose this challenge…
When developing a website to display on mobile devices (as well as the desktop),we often use media queries. What if… your client doesn’t want you to use media queries. Are there any alternatives you could use so a web page displayed on a mobile device with no horizontal scrolling (and you didn’t need to do a lot of pinch/ zoom).
To get you started, consider that you could use responsive text (with percentages). Here is an example of such a page. Yes, this example is just a proof of concept.
One could also make judicious use of float. Here is an example of such a page. Again, no horizontal scrolling.
Ok, now you see where I am going – are there any other approaches (short answer is yes) so you do not have horizontal scrolling on a web page and the display adapts to the size of the screen without horizontal scrolling. What alternate approaches might you recommend to a client?
The spring semester starts this week. I thought it might be appropriate to review a simple error which I see all too often. In this case, I am working with an experimental feature in CSS called CSS grids. I would need the Canary browser with Experimental Web Platform features enabled in order to properly view the page. That being said, I can provide a couple of screen captures. For those who want to examine the source code and solve the challenge, here is a link to the problem child. Just view the source code. I only made one small error.
Here is what the page looks like in Canary. Everything is on top of each other. Please look at the code and help me out.
Here is what I want that page to look like in Canary.
The first to correctly identify the problem will get a “gold star” in my reply to their posted comment. Are you up to the challenge?
This is one that happens from time to time. Yes, there is a simple explanation. I have seen this in source code as well as on web pages created by students. Why does the symbol � show up in a web page? Yes, I am certain you can search online for the answer. I am looking for a simple explanation (something you would tell others in your CMWEB class). Please provide a reference URL along with your explanation.
Ok, this is a pretty simple one (but often represents the sorts of problems I encounter from students). Here is the result I seek:
However, I don’t seem to be able to get this working. It seems to be mostly working, but there are some issues. Here is the file I am having problems with. [It will open in a new browser window/ tab]. What am I doing wrong? The first to properly identify the problem(s) and provide the proper solution will receive an animated gold star.
Here are a few acronyms. I am curious if you know what these stand for? Please place your answers in the comments. These are all related to web design and development. First one to include a comment with all correct answers will receive an animated gold star.
A – IoT
B – SDK
C – API
D – SERP
E – TLD
If you think it is easy teaching HTML, CSS and related web technologies… Let’s see how long it takes you to figure out these puzzlers. I plan to provide one periodically. Keep in mind these are real problems that students encounter as they code their pages. Obviously, you need to view the source code. Continue reading
During the last week of June, I helped run the WebProfessionals.org national web design contest (held in Kansas City, Missouri under the auspices of SkillsUSA). Details of the contest (as well as past winners) can be found at WebDesignContest.org. Over 30 teams participated at the high school level (secondary) and over 15 teams participated at the post-secondary level.In order to compete in Kansas City, each team had to win their respective state web design contest. Every 2 years, one winning individual is selected to participate in the international web design contest (this year was in Leipzig, Germany). Obviously, this was a team effort. We had multiple individuals on site helping coordinate the contest briefing and de-briefing. We also had teams of judges throughout the US who worked diligently to review the submitted entries. I am most appreciative of the efforts by everyone involved to make this a reality. This was our 11 year for the national web design contest. I thought it would be appropriate to include various observations (which were made at the competition) and comments received from the judges. These have been generalized as many apply to more than one team. Continue reading
I returned from my recent trip to speak at MPICT So. California on web analytics, business intelligence and big data and found a copy of this book waiting for me. I was asked to review this book prior to publication and am pleased the author incorporated some of my recommended improvements. Thought students might like to see what I was up to recently.
Now that the 2013 Illinois Web Design Contest is history, I thought it might be appropriate to share some thoughts and observations. First, congratulations to everyone who participated (in either the secondary or post-secondary contest). You took the extra effort to grow and learn. Those who are taking classes in web technologies and not participating – why not? This is a great opportunity to learn from web professionals. It is also a great networking opportunity. Whether you earn a medal or not, you have tested your self and your knowledge and grown in the process. Continue reading
For those individuals participating in the Illinois Web Design Contest in Springfield on April 12, 2013, you may wish to examine these links prior to the competition. Note there will not be any Internet connections allowed during the actual contest.